finish frontend FUNCTIONALITY (still looks bad)

kscalelabs · Jun 12, 2024 · d8470f0 · d8470f0
1 parent 3bbae6a
commit d8470f0
Show file tree

Hide file tree

Showing 12 changed files with 324 additions and 326 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -3,15 +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 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";
@@ -28,29 +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-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>

diff --git a/frontend/src/components/auth/AuthComponent.tsx b/frontend/src/components/auth/AuthComponent.tsx
diff --git a/frontend/src/components/auth/AuthenticationModal.tsx b/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>

diff --git a/frontend/src/components/auth/GoogleAuthComponent.tsx b/frontend/src/components/auth/GoogleAuthComponent.tsx
diff --git a/frontend/src/components/nav/TopNavbar.tsx b/frontend/src/components/nav/TopNavbar.tsx
@@ -27,13 +27,7 @@ const TopNavbar = () => {
                 {theme === "dark" ? <MoonFill /> : <SunFill />}
               </Nav.Link>
             </Boop>
-            {!isAuthenticated && (
-              <>
-                <Nav.Link href="/login">Login</Nav.Link>
-                <Nav.Link href="/register">Register</Nav.Link>
-              </>
-            )}
-            {isAuthenticated && (
+            {isAuthenticated ? (
               <>
                 <Boop timing={100}>
                   <Nav.Link onClick={() => setShowSidebar(true)}>
@@ -42,6 +36,11 @@ const TopNavbar = () => {
                 </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>

diff --git a/frontend/src/hooks/api.tsx b/frontend/src/hooks/api.tsx
@@ -33,6 +33,47 @@ 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;