Owner username

.vscode/settings.json

@@ -53,4 +53,5 @@
       "color": "#00e1ff55"
     }
   ],
+  "editor.formatOnSave": true,
 }

frontend/src/App.tsx

@@ -3,16 +3,18 @@ import Footer from "components/nav/Footer";
 import TopNavbar from "components/nav/TopNavbar";
 import NotFoundRedirect from "components/NotFoundRedirect";
 import { AlertQueue, AlertQueueProvider } from "hooks/alerts";
-import { AuthenticationProvider, OneTimePasswordWrapper } from "hooks/auth";
+import { AuthenticationProvider } from "hooks/auth";
 import { ThemeProvider } from "hooks/theme";
 import About from "pages/About";
-import EditPartForm from "pages/EditPartForm";
 import EditRobotForm from "pages/EditRobotForm";
 import Home from "pages/Home";
+import Login from "pages/Login";
+import Logout from "pages/Logout";
 import NotFound from "pages/NotFound";
 import PartDetails from "pages/PartDetails";
 import PartForm from "pages/PartForm";
 import Parts from "pages/Parts";
+import Register from "pages/Register";
 import RobotDetails from "pages/RobotDetails";
 import RobotForm from "pages/RobotForm";
 import Robots from "pages/Robots";
@@ -29,30 +31,30 @@ const App = () => {
         <AuthenticationProvider>
           <AlertQueueProvider>
             <AlertQueue>
-              <OneTimePasswordWrapper>
-                <TopNavbar />
+              <TopNavbar />
 
-                <Container className="content">
-                  <Routes>
-                    <Route path="/" element={<Home />} />
-                    <Route path="/about" element={<About />} />
-                    <Route path="/robots/" element={<Robots />} />
-                    <Route path="/robots/add" element={<RobotForm />} />
-                    <Route path="/parts/add" element={<PartForm />} />
-                    <Route path="/robot/:id" element={<RobotDetails />} />
-                    <Route path="/edit-part/:id" element={<EditPartForm />} />
-                    <Route path="/edit-robot/:id" element={<EditRobotForm />} />
-                    <Route path="/parts/" element={<Parts />} />
-                    <Route path="/part/:id" element={<PartDetails />} />
-                    <Route path="robots/your" element={<YourRobots />} />
-                    <Route path="/parts/your" element={<YourParts />} />
-                    <Route path="/404" element={<NotFound />} />
-                    <Route path="*" element={<NotFoundRedirect />} />
-                  </Routes>
-                </Container>
+              <Container className="content">
+                <Routes>
+                  <Route path="/" element={<Home />} />
+                  <Route path="/about" element={<About />} />
+                  <Route path="/login" element={<Login />} />
+                  <Route path="/register" element={<Register />} />
+                  <Route path="/logout" element={<Logout />} />
+                  <Route path="/robots/" element={<Robots />} />
+                  <Route path="/robots/add" element={<RobotForm />} />
+                  <Route path="/parts/add" element={<PartForm />} />
+                  <Route path="/robot/:id" element={<RobotDetails />} />
+                  <Route path="/edit-robot/:id" element={<EditRobotForm />} />
+                  <Route path="/parts/" element={<Parts />} />
+                  <Route path="/part/:id" element={<PartDetails />} />
+                  <Route path="robots/your" element={<YourRobots />} />
+                  <Route path="/parts/your" element={<YourParts />} />
+                  <Route path="/404" element={<NotFound />} />
+                  <Route path="*" element={<NotFoundRedirect />} />
+                </Routes>
+              </Container>
 
-                <Footer />
-              </OneTimePasswordWrapper>
+              <Footer />
             </AlertQueue>
           </AlertQueueProvider>
         </AuthenticationProvider>

frontend/src/components/auth/AuthenticationModal.tsx

@@ -1,6 +1,5 @@
-import { Col, Modal, Row } from "react-bootstrap";
+import { Modal } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
-import AuthComponent from "./AuthComponent";
 
 const LogInModal = () => {
   const navigate = useNavigate();
@@ -12,17 +11,7 @@ const LogInModal = () => {
   return (
     <Modal show={true} onHide={navigateToPreviousPage} centered>
       <Modal.Body>
-        <Row>
-          <Col>
-            <Row className="mb-3 text-center">
-              <Col>
-                <h5>Sign in to see this page</h5>
-              </Col>
-            </Row>
-
-            <AuthComponent />
-          </Col>
-        </Row>
+        <p>Sign in to see this page</p>
       </Modal.Body>
       <Modal.Footer>
         <small>

frontend/src/components/nav/Sidebar.tsx

@@ -1,4 +1,3 @@
-import AuthComponent from "components/auth/AuthComponent";
 import { Col, Offcanvas, Row } from "react-bootstrap";
 import { Link } from "react-router-dom";
 
@@ -21,7 +20,6 @@ const Sidebar = ({ show, onHide }: Props) => {
             height: "100%",
           }}
         >
-          <AuthComponent />
           <Row style={{ marginTop: "auto" }} />
           <Row>
             <Link to="/about">About</Link>

frontend/src/components/nav/TopNavbar.tsx

@@ -1,5 +1,6 @@
 import Boop from "components/nav/Boop";
 import Sidebar from "components/nav/Sidebar";
+import { useAuthentication } from "hooks/auth";
 import { useTheme } from "hooks/theme";
 import { useState } from "react";
 import { Container, Nav, Navbar } from "react-bootstrap";
@@ -9,6 +10,7 @@ import { Link } from "react-router-dom";
 const TopNavbar = () => {
   const [showSidebar, setShowSidebar] = useState<boolean>(false);
   const { theme, setTheme } = useTheme();
+  const { isAuthenticated } = useAuthentication();
 
   return (
     <>
@@ -25,11 +27,21 @@ const TopNavbar = () => {
                 {theme === "dark" ? <MoonFill /> : <SunFill />}
               </Nav.Link>
             </Boop>
-            <Boop timing={100}>
-              <Nav.Link onClick={() => setShowSidebar(true)}>
-                <GearFill />
-              </Nav.Link>
-            </Boop>
+            {isAuthenticated ? (
+              <>
+                <Boop timing={100}>
+                  <Nav.Link onClick={() => setShowSidebar(true)}>
+                    <GearFill />
+                  </Nav.Link>
+                </Boop>
+                <Nav.Link href="/logout">Log Out</Nav.Link>
+              </>
+            ) : (
+              <>
+                <Nav.Link href="/login">Login</Nav.Link>
+                <Nav.Link href="/register">Register</Nav.Link>
+              </>
+            )}
           </div>
         </Container>
       </Navbar>

frontend/src/hooks/api.tsx

@@ -33,9 +33,50 @@ export class api {
   constructor(api: AxiosInstance) {
     this.api = api;
   }
+
+  public async register(
+    email: string,
+    username: string,
+    password: string,
+  ): Promise<void> {
+    try {
+      await this.api.post("/users/register/", { email, username, password });
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        console.error("Error registering:", error.response?.data);
+        throw new Error(
+          error.response?.data?.detail ||
+            "Error registering with email " + email,
+        );
+      } else {
+        console.error("Unexpected error:", error);
+        throw new Error("Unexpected error");
+      }
+    }
+  }
+
+  public async login(email: string, password: string): Promise<void> {
+    try {
+      await this.api.post("/users/login/", { email, password });
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        console.error("Error logging in:", error.response?.data);
+        throw new Error(
+          error.response?.data?.detail ||
+            "Error logging in with email " + email,
+        );
+      } else {
+        console.error("Unexpected error:", error);
+        throw new Error("Unexpected error");
+      }
+    }
+  }
+  public async logout(): Promise<void> {
+    await this.api.delete("/users/logout/");
+  }
   public async getUserById(userId: string | undefined): Promise<string> {
     const response = await this.api.get(`/users/${userId}`);
-    return response.data.email;
+    return response.data.username;
   }
   public async getRobots(): Promise<Robot[]> {
     try {