Merge pull request #56 from hcp-uw/register-loading

logout css + loading screen for registering
hcp-uw · Oct 11, 2024 · 506f768 · 506f768
2 parents 190b243 + ed68ceb
commit 506f768
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 4 deletions.
diff --git a/starter-backend/src/routes.ts b/starter-backend/src/routes.ts
@@ -634,4 +634,7 @@ export async function getBio(req: SafeRequest, res: SafeResponse) {
         return;
     }
 }
-
+
+export async function isUp(req: SafeRequest, res: SafeResponse) {
+    res.send("we're up");
+}
diff --git a/starter-backend/src/server.ts b/starter-backend/src/server.ts
@@ -9,7 +9,8 @@ import { unknownEndpoint } from "./middleware.js";
 import { getNote, getFolderContents, createAccount, 
     createNote, createFolder, saveDoc, saveDetails, shareDoc,
     deleteDoc, getShared, deleteFolder, getFolders,
-    updateBio, getBio} from "./routes.js";
+    updateBio, getBio,
+    isUp} from "./routes.js";
 
 const app = express();
 
@@ -66,6 +67,8 @@ app.put("/updateBio", updateBio);
 
 app.get("/getBio", getBio);
 
+app.get("/isUp", isUp);
+
 // error handling
 app.use(unknownEndpoint);
 

diff --git a/starter-frontend/src/components/auth/Logout.tsx b/starter-frontend/src/components/auth/Logout.tsx
@@ -37,8 +37,11 @@ export default function Logout({ isModal, setIsModal }: LogoutParams) {
       <div>
           <div className="centText logout-popup">
             <h2>Are you sure you want to log out?</h2>
-            <button onClick={handleLogout}>Logout</button>
-            <button onClick={() => setIsModal(false)}>Cancel</button>
+            <button className="logout-exit" onClick={() => setIsModal(false)}>X</button>
+            <div className="modaltxt-wrap modal-centered">
+              <button className="input-button" onClick={handleLogout}>Logout</button>
+              <button className="input-button" onClick={() => setIsModal(false)}>Cancel</button>
+            </div>
           </div>
       </div>
     );

diff --git a/starter-frontend/src/pages/auth-pages/auth.css b/starter-frontend/src/pages/auth-pages/auth.css
@@ -116,4 +116,22 @@
     top: 50%;
     transform: translate(-50%, -50%);
     border-radius: 10px;
+}
+
+
+.logout-exit {
+    top: 0;
+    right: 0;
+    position: absolute;
+    margin: 10px;
+    cursor: pointer;
+    border: 2px solid red;
+    background-color: var(--green);
+    color: red;
+    font-size: 20px;
+}
+
+.logout-exit:hover {
+    background-color: red;
+    color: white;
 }
diff --git a/starter-frontend/src/pages/auth-pages/register.tsx b/starter-frontend/src/pages/auth-pages/register.tsx
@@ -1,9 +1,66 @@
 import React from 'react'
 import RegisterForm from '../../components/auth/Register'
 import { Link } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { auth } from '../../config/firebase';
+import { FetchRoute } from '../../components/file-navigation/routes';
 
 /** Register page */
 export default function Register(): JSX.Element {
+
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+
+    useEffect(() => {
+        const checkServer = async(): Promise<void> => {
+            try {
+                const user = auth.currentUser;
+                const token = user && (await user.getIdToken());
+
+                const payloadHeader = {
+                  headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${token}`,
+                  },
+                  method: "GET"
+                };
+
+                fetch(FetchRoute+"/isUp", payloadHeader)
+                    .then((res) => {
+                        if (res.status === 200) {
+
+                            res.json().then((val) => fetchResponse(val))
+                                .catch(() => console.error("Error fetching /isUp: 200 response is not JSON"))
+                        } else {
+                            console.error(`Error fetching /isUp: bad status code ${res.status}`)
+                        }
+                    })
+                    .catch(() => console.error("Error fetching /isUp: Failed to connect to server"));
+
+
+              } catch (e) {
+                console.log(e);
+              }
+        }
+
+        const fetchResponse = (val: unknown): void => {
+            setIsLoading(false);
+        }
+
+        checkServer();
+
+    }, [])
+
+    if (isLoading) {
+        return (
+            <div className="page flex green-background">
+            <div className="centText">
+                <h2 className="placeholder for title text">Register your account</h2>
+                <h1>Loading...</h1>
+                <Link to={'../login'} className="authlink">Already have an account? Login</Link>
+            </div>
+        </div>
+        )
+    }
     return (
         <div className="page flex green-background">
             <div className="centText">