Add: Simple user login/register function

web/src/App.js

@@ -1,9 +1,4 @@
-import {
-  HashRouter as Router,
-  Routes,
-  Route,
-  NavLink,
-} from "react-router-dom";
+import { HashRouter as Router, Routes, Route, NavLink } from "react-router-dom";
 import "./App.css";
 
 import GetRandomFiles from "./component/GetRandomFiles";
@@ -12,11 +7,15 @@ import SearchFolders from "./component/SearchFolders";
 import FilesInFolder from "./component/FilesInFolder";
 import Manage from "./component/Manage";
 import Share from "./component/Share";
+import Login from "./component/Login";
+import Register from "./component/Register";
 import AudioPlayer from "./component/AudioPlayer";
+import UserStatus from "./component/UserStatus";
 import { useState } from "react";
 
 function App() {
   const [playingFile, setPlayingFile] = useState({});
+  const [user, setUser] = useState({});
   return (
     <div className="base">
       <Router>
@@ -24,6 +23,7 @@ function App() {
           <h3 className="title">
             <img src="favicon.png" alt="logo" className="logo" />
             <span className="title-text">MSW Open Music Project</span>
+            <UserStatus user={user} setUser={setUser} />
           </h3>
           <nav className="nav">
             <NavLink to="/" className="nav-link">
@@ -59,7 +59,9 @@ function App() {
               path="/folders/:id"
               element={<FilesInFolder setPlayingFile={setPlayingFile} />}
             />
-            <Route path="/manage" element={<Manage />} />
+            <Route path="/manage" element={<Manage user={user} setUser={setUser} />} />
+            <Route path="/manage/login" element={<Login user={user} setUser={setUser} />} />
+            <Route path="/manage/register" element={<Register user={user} setUser={setUser} />} />
             <Route
               path="/files/:id/share"
               element={<Share setPlayingFile={setPlayingFile} />}

web/src/component/Login.js

@@ -0,0 +1,65 @@
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+
+function Login(props) {
+  let navigate = useNavigate();
+  let [username, setUsername] = useState("");
+  let [password, setPassword] = useState("");
+  return (
+    <div>
+      <h2>Login</h2>
+      <label htmlFor="username">Username</label>
+      <input
+        type="text"
+        id="username"
+        value={username}
+        onChange={(e) => setUsername(e.target.value)}
+      />
+      <label htmlFor="password">Password</label>
+      <input
+        type="password"
+        id="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <span>
+        <button
+          onClick={() => {
+            if (!username || !password) {
+              alert("Please enter username and password");
+              return;
+            }
+            fetch("/api/v1/login", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                username,
+                password,
+              }),
+            })
+              .then((res) => res.json())
+              .then((data) => {
+                if (data.error) {
+                  alert(data.error);
+                  return;
+                }
+                props.setUser(data.user);
+                navigate("/");
+              });
+          }}
+        >
+          Login
+        </button>
+        <button
+    onClick={() => {
+      navigate("/manage/register");
+    }}
+    >Register</button>
+      </span>
+    </div>
+  );
+}
+
+export default Login;

web/src/component/Manage.js

@@ -1,6 +1,9 @@
 import { useState } from "react";
+import { useNavigate } from "react-router";
+
+function Manage(props) {
+  let navigate = useNavigate();
 
-function Manage() {
   const [token, setToken] = useState("");
   const [walkPath, setWalkPath] = useState("");
 
@@ -25,6 +28,20 @@ function Manage() {
   return (
     <div>
       <h2>Manage</h2>
+      <p>Hi, {props.user.username}</p>
+      {props.user.role === 0 && (
+        <button
+          onClick={() => {
+            navigate("/manage/login");
+          }}
+        >
+          Login
+        </button>
+      )}
+      {props.user.role !== 0 && (
+        <button onClick={() => props.setUser({})}>Logout</button>
+      )}
+      <hr />
       <input
         type="text"
         value={token}

web/src/component/Register.js

@@ -0,0 +1,76 @@
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+
+function Register(props) {
+  let navigate = useNavigate();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [password2, setPassword2] = useState("");
+  const [role, setRole] = useState("");
+  return (
+    <div>
+      <h2>Register</h2>
+      <label htmlFor="username">Username</label>
+      <input
+        type="text"
+        id="username"
+        value={username}
+        onChange={(e) => setUsername(e.target.value)}
+      />
+      <label htmlFor="password">Password</label>
+      <input
+        type="password"
+        id="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <label htmlFor="password2">Confirm Password</label>
+      <input
+        type="password"
+        id="password2"
+        value={password2}
+        onChange={(e) => setPassword2(e.target.value)}
+      />
+      <label htmlFor="role">Role</label>
+      <select value={role} onChange={(e) => setRole(e.target.value)}>
+        <option value="">Select a role</option>
+        <option value="2">User</option>
+        <option value="1">Admin</option>
+      </select>
+      <button
+        onClick={() => {
+          if (!username || !password || !password2 || !role) {
+            alert("Please fill out all fields");
+          } else if (password !== password2) {
+            alert("Passwords do not match");
+          } else {
+            fetch("/api/v1/register", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                username: username,
+                password: password,
+                role: parseInt(role),
+              }),
+            })
+              .then((res) => res.json())
+              .then((data) => {
+                if (data.error) {
+                  alert(data.error);
+                } else {
+                  props.setUser(data.user);
+                  navigate("/login");
+                }
+              });
+          }
+        }}
+      >
+        Register
+      </button>
+    </div>
+  );
+}
+
+export default Register;

web/src/component/UserStatus.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+function UserStatus(props) {
+  // props.user
+  // props.setUser
+  useEffect(() => {
+    fetch("/api/v1/login")
+      .then(res => res.json())
+      .then(data => {
+        props.setUser(data.user);
+      });
+  }, []);
+  return <div>{props.user.username}</div>;
+}
+
+export default UserStatus;