Properly handling archived account login

client/src/App.tsx

@@ -36,7 +36,7 @@ import FeedbackPage from "./pages/FeedbackPage";
 import UserVouchersPage from "./pages/UserVouchersPage";
 import ManageFeedbacksPage from "./pages/ManageFeedbacksPage";
 import TagManagement from "./pages/TagManagement";
-
+import AccoutnInaccessiblePage from "./pages/AccountInaccessiblePage";
 
 function App() {
   return (
@@ -81,8 +81,6 @@ function App() {
             <Route element={<UserVouchersPage />} path="user-voucher" />
           </Route>
 
-          
-
           {/* Special (Restricted) Routes */}
           <Route element={<RestrictedLayout />}>
             <Route element={<ForgotPasswordPage />} path="forgot-password" />
@@ -91,6 +89,10 @@ function App() {
               path="reset-password/:token"
             />
             <Route element={<FeedbackPage />} path="feedback" />
+            <Route
+              element={<AccoutnInaccessiblePage />}
+              path="account-inaccessible"
+            />
           </Route>
         </Route>
 

client/src/components/SignInModule.tsx

@@ -39,14 +39,19 @@ export default function SignInModule() {
     instance
       .post(config.serverAddress + "/users/login", values)
       .then((response) => {
+        console.log("logging in");
         localStorage.setItem("accessToken", response.data.accessToken);
-        retrieveUserInformation().then((value) => {
-          if (value.accountType == 2) {
-            navigate("/admin");
-          } else {
-            window.location.reload();
-          }
-        });
+        retrieveUserInformation()
+          .then((value) => {
+            if (value.accountType == 2) {
+              navigate("/admin");
+            } else {
+              window.location.reload();
+            }
+          })
+          .catch(() => {
+            navigate("/account-inaccessible");
+          });
       })
       .catch((error) => {
         popErrorToast(error);

client/src/pages/AccountInaccessiblePage.tsx

@@ -0,0 +1,76 @@
+import { Button, Card, Link } from "@nextui-org/react";
+import { LockClosedIcon } from "../icons";
+import { useNavigate } from "react-router-dom";
+
+export default function AccoutnInaccessiblePage() {
+  const navigate = useNavigate();
+  return (
+    <div className=" flex flex-col gap-4">
+      <div className="flex flex-col m-8 gap-8">
+        <div className="rounded-xl flex flex-col gap-8 p-4 justify-center bg-primary-500 text-center text-white">
+          <div className="pt-10 w-full flex flex-row justify-center scale-150">
+            <div className="scale-150 pb-2">
+              <LockClosedIcon />
+            </div>
+          </div>
+          <div className="flex flex-col gap-8">
+            <div className="flex flex-col gap-2">
+              <p className="text-4xl font-bold">Account unavailable.</p>
+              <p className="text-xl opacity-70">
+                The access to this account has been revoked.
+              </p>
+            </div>
+            <p>
+              If you wish to recover the account, please{" "}
+              <Link
+                className="text-white px-1 rounded-md bg-primary-400"
+                onPress={() => {
+                  window.location.href = "mailto:support@ecoconnect.gov.sg";
+                }}
+              >
+                contact us
+              </Link>
+            </p>
+            <div className="w-min mx-auto"></div>
+          </div>
+        </div>
+        <div className="flex flex-col justify-center">
+          <div className="w-min mx-auto">
+            <Button size="lg" onPress={() => navigate("/signin")}>
+              Sign in with a different account
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div className="p-8 flex flex-col gap-4">
+        <p className="text-2xl font-semibold">Why am I seeing this?</p>
+        <div className="flex flex-col gap-2">
+          <p>
+            You have attempted to access an account that has been marked as
+            inactive.
+          </p>
+          <p>
+            This may due to, either manual operation by the owner of the
+            account, or administrative decision from the management team.
+          </p>
+          <p>
+            The information related to this account remains, however the access
+            to the account will not be available.
+          </p>
+          <p>
+            If you believe that this is incorrect, or would like to request a
+            re-activation, please{" "}
+            <Link
+              onPress={() => {
+                window.location.href = "mailto:support@ecoconnect.gov.sg";
+              }}
+            >
+              contact us
+            </Link>
+            .
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/pages/SpringboardPage.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { Button, Card, Link } from "@nextui-org/react";
-import { LockClosedIcon, PencilSquareIcon } from "../icons";
+import { PencilSquareIcon } from "../icons";
 import SpringboardButton from "../components/SpringboardButton";
 import { getTimeOfDay } from "../utilities";
 import { retrieveUserInformation } from "../security/users";
@@ -16,7 +16,6 @@ export default function SpringboardPage() {
     navigate("/signin");
   }
   const [userInformation, setUserInformation] = useState<any>();
-  const [accountUnavailable, setAccountUnavaliable] = useState(false);
   const [events, setEvents] = useState<any[]>([]);
   let timeOfDay = getTimeOfDay();
 
@@ -38,7 +37,7 @@ export default function SpringboardPage() {
         setUserInformation(response);
       })
       .catch((_) => {
-        setAccountUnavaliable(true);
+        navigate("/account-inaccessible");
       });
 
     instance.get("/events").then((response) => {
@@ -170,69 +169,6 @@ export default function SpringboardPage() {
           </div>
         )}
       </div>
-      <div>
-        {accountUnavailable && (
-          <div className="m-8 flex flex-col gap-4">
-            <Card>
-              <div className="flex flex-col m-8 gap-8">
-                <div className="rounded-xl flex flex-col gap-8 p-4 justify-center bg-primary-500 text-center text-white">
-                  <div className="pt-10 w-full flex flex-row justify-center scale-150">
-                    <div className="scale-150 pb-2">
-                      <LockClosedIcon />
-                    </div>
-                  </div>
-                  <div className="flex flex-col gap-8">
-                    <div className="flex flex-col">
-                      <p className="text-4xl font-bold">Account unavailable.</p>
-                      <p className="text-xl opacity-70">
-                        This account has been archived.
-                      </p>
-                    </div>
-                    <p>
-                      If you wish to recover the account, please{" "}
-                      <Link className="text-white px-1 rounded-md bg-primary-400">
-                        contact us
-                      </Link>
-                    </p>
-                    <div className="w-min mx-auto"></div>
-                  </div>
-                </div>
-                <div className="flex flex-col justify-center">
-                  <div className="w-min mx-auto">
-                    <Button color="primary" onPress={() => navigate("/signin")}>
-                      Sign in with a different account
-                    </Button>
-                  </div>
-                </div>
-              </div>
-            </Card>
-            <Card>
-              <div className="p-8 flex flex-col gap-4">
-                <p className="text-2xl font-semibold">Why am I seeing this?</p>
-                <div className="flex flex-col gap-2">
-                  <p>
-                    You have attempted to access an account that has been
-                    archived.
-                  </p>
-                  <p>
-                    This may due to, either manual operation by the owner of the
-                    account, or administrative decision from the management
-                    team.
-                  </p>
-                  <p>
-                    The information related to this account remains, however the
-                    access to the account will not be available.
-                  </p>
-                  <p>
-                    If you believe that this is incorrect, or would like to
-                    request an unarchive, please <Link>contact us</Link>.
-                  </p>
-                </div>
-              </div>
-            </Card>
-          </div>
-        )}
-      </div>
     </div>
   );
 }