Basic account creation functionality

Backend/server.js

@@ -175,6 +175,27 @@ app.get('/loginUser', async (req, res) => {
   return res.status(code).json(json);
 })
 
+app.get('/registerAccount', async (req, res) => {
+  const username = req.query.username;
+  const password = req.query.password;
+
+  if (!username || !password) {
+    return res.status(400).json({message: "Input both a username and password"});
+  }
+
+  let db = getDb();
+  let user = await db.find({"username" : username})
+  user = await user.toArray();
+
+  if (user.length > 0) {
+    return res.status(400).json({message: "Username already taken"});
+  }
+
+  const hashedPassword = await bcrypt.hash(password, 10);
+  db.insertOne({username: username, password: hashedPassword, canvasUser: null, lastLogin: null, lastLogout: null})
+  return res.status(200).json({message: "User registered"});
+});
+
 app.get('/', async (req, res) => {
   res.status(200).json({ message: "hello!" });
 });

Frontend/src/App.jsx

@@ -4,7 +4,7 @@ import './App.css'
 import Login from "./Login"
 
 const API_URL = "http://localhost:3500"
-const API_KEY = 
+const API_KEY = "nolol"
 
 function App() {
   const [courses, setCourses] = useState(null);

Frontend/src/Login.jsx

@@ -1,36 +1,56 @@
 import { useState } from "react";
 import axios from "axios"
 import logo from "./img/temp.png"
-import bcrypt from "bcryptjs"
+import PropTypes from "prop-types";
 import "./css/Login.css"
 
 const API_URL = "http://localhost:3500"
-const saltRounds = 10;
 
 export default function Login() {
   const [username, setUser] = useState("");
   const [password, setPassword] = useState("");
+  const [canvasAPIKey, setCanvasAPIKey] = useState("");
   const [logState, setLogState] = useState("login");
 
   const handleSubmit = (e) => {
-      e.preventDefault();
-      attemptLogin();
-      alert("Username: " + username + " " + "Password: " + password);
+    e.preventDefault();
+    attemptLogin();
+    alert("Username: " + username + " " + "Password: " + password);
   };
 
 
   const attemptLogin = async () => {
-    if (logState == "login") {
+    if (logState === "login") {
       const temp = await axios.get(`${API_URL}/loginUser`, {
         params: {
           "username": username,
           "password": password
-        }   
+        }
       })
       console.log(temp)
 
-    } else if (logState == "create") {
-
+    } else if (logState === "create") {
+      try {
+        const temp = await axios.get(`${API_URL}/registerAccount`, {
+          params: {
+            "username": username,
+            "password": password
+          }
+        })
+        localStorage.setItem("canvasAPIKey", canvasAPIKey)
+
+        console.log(temp)
+      } catch (e) {
+        console.log("account creation failed")
+      }
+    }
+  }
+
+  const toggleLoginState = () => {
+    if (logState === "login") {
+      setLogState("create")
+    } else {
+      setLogState("login")
     }
   }
 
@@ -39,27 +59,47 @@ export default function Login() {
       <img src={logo} alt="Cat Corporate" className="loginLogo"/>
       <h2 className="loginHeader">Welcome to Cat Corporate!!!</h2>
       <form onSubmit={(e)=> handleSubmit(e)}>
-          <div className="inputContainer">
-           <p className="loginLabel">Username</p>
-             <input value={username}
-             onChange={(e) => setUser(e.target.value)}
-             type="text" />
-          </div>
-          <div className="inputContainer">
-            <p className="loginLabel">Password</p>
-            <input value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            type="password"/>
-          </div>
-          <div className="bottomForm">
-            <button type="submit">Login</button>
-            <div className="links">
-              <p>New User?</p>
-              <p>Forgot Password?</p>
-              </div>
-          </div>
+        <div className="inputContainer">
+          <p className="loginLabel">Username</p>
+          <input value={username}
+                 onChange={(e) => setUser(e.target.value)}
+                 type="text" />
+        </div>
+        <div className="inputContainer">
+          <p className="loginLabel">Password</p>
+          <input value={password}
+                 onChange={(e) => setPassword(e.target.value)}
+                 type="password"/>
+        </div>
+        {
+          logState === "create" && <CanvasAPIKeyContainer keyVal={canvasAPIKey}
+                                                          setKey={setCanvasAPIKey}/>
+        }
+        <button type="submit">{logState === "login" ? "Login" : "Create Account"}</button>
       </form>
+      <div className="bottomForm">
+        <div className="links">
+          <button onClick={toggleLoginState}>{logState === "login" ? "New User?" : "Existing User?"}</button>
+          <p>Forgot Password?</p>
+        </div>
+      </div>
       <small className="copyright">&copy; 2024 Cat Corporate</small>
     </div>
   );
 }
+
+function CanvasAPIKeyContainer({ keyVal, setKey }) {
+  return (
+    <div className="inputContainer">
+      <p className="loginLabel">Canvas API Key</p>
+      <input value={keyVal}
+             onChange={(e) => setKey(e.target.value)}
+             type="password"/>
+    </div>
+  )
+}
+
+CanvasAPIKeyContainer.propTypes = {
+  keyVal: PropTypes.string,
+  setKey: PropTypes.func
+}