From 91ce20776cf6a0a157f4cca57e609c7d802e7960 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 10 Apr 2023 16:42:20 +0100
Subject: [PATCH] Add route protection

---
 src/components/Authenticator/authenticator.ts | 25 ++++++++++++++-----
 src/components/Navigation/navigation.ts       |  2 +-
 src/pages/signup.astro                        | 22 ++++++----------
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/components/Authenticator/authenticator.ts b/src/components/Authenticator/authenticator.ts
index 183e3dc9f..91cf60bf4 100644
--- a/src/components/Authenticator/authenticator.ts
+++ b/src/components/Authenticator/authenticator.ts
@@ -29,20 +29,33 @@ function showHideGuestElements(hideOrShow: 'hide' | 'show' = 'hide') {
   });
 }
 
-/**
- * Prepares the UI for the user who is logged in
- */
+// Prepares the UI for the user who is logged in
 function handleGuest() {
+  const authenticatedRoutes = [
+    '/settings/profile',
+    '/settings/change-password',
+  ];
+
   showHideAuthElements('hide');
   showHideGuestElements('show');
+
+  // If the user is on an authenticated route, redirect them to the home page
+  if (authenticatedRoutes.includes(window.location.pathname)) {
+    window.location.href = '/';
+  }
 }
 
-/**
- * Prepares the UI for the user who is logged out
- */
+// Prepares the UI for the user who is logged out
 function handleAuthenticated() {
+  const guestRoutes = ['/login', '/signup'];
+
   showHideGuestElements('hide');
   showHideAuthElements('show');
+
+  // If the user is on a guest route, redirect them to the home page
+  if (guestRoutes.includes(window.location.pathname)) {
+    window.location.href = '/';
+  }
 }
 
 export function handleAuthRequired() {
diff --git a/src/components/Navigation/navigation.ts b/src/components/Navigation/navigation.ts
index ceab0a675..82aaf9233 100644
--- a/src/components/Navigation/navigation.ts
+++ b/src/components/Navigation/navigation.ts
@@ -4,7 +4,7 @@ import { handleAuthRequired } from '../Authenticator/authenticator';
 
 function logout() {
   Cookies.remove(TOKEN_COOKIE_NAME);
-  handleAuthRequired();
+  // Reloading will automatically redirect the user if required
   window.location.reload();
 }
 
diff --git a/src/pages/signup.astro b/src/pages/signup.astro
index 1db5e3717..7cd9bb4cf 100644
--- a/src/pages/signup.astro
+++ b/src/pages/signup.astro
@@ -15,16 +15,17 @@ import { GoogleButton } from '../components/AuthenticationFlow/GoogleButton';
 >
   <div class='container'>
     <div
-      class='mx-auto flex flex-col items-start justify-start pt-10 sm:pt-20 pb-28 sm:max-w-[400px] sm:items-center sm:justify-center'
+      class='mx-auto flex flex-col items-start justify-start pb-28 pt-10 sm:max-w-[400px] sm:items-center sm:justify-center sm:pt-20'
     >
       <div class='mb-2 text-left sm:mb-5 sm:text-center'>
         <h1 class='mb-2 text-3xl font-semibold sm:mb-5 sm:text-5xl'>Sign Up</h1>
-        <p class='text-base hidden text-gray-600 sm:block leading-6 mb-3'>
-          Create an account to track your progress, showcase your skill-set and be a part of the community.
+        <p class='mb-3 hidden text-base leading-6 text-gray-600 sm:block'>
+          Create an account to track your progress, showcase your skill-set and
+          be a part of the community.
         </p>
-        <p class='block text-sm text-gray-600 mb-3 sm:hidden'>
-          Create an account to track your progress, showcase your skill-set and be a part of the community.
-          videos.
+        <p class='mb-3 block text-sm text-gray-600 sm:hidden'>
+          Create an account to track your progress, showcase your skill-set and
+          be a part of the community. videos.
         </p>
       </div>
 
@@ -46,12 +47,3 @@ import { GoogleButton } from '../components/AuthenticationFlow/GoogleButton';
     </div>
   </div>
 </SettingLayout>
-
-<script>
-  import Cookies from 'js-cookie';
-  import { TOKEN_COOKIE_NAME } from '../lib/constants';
-  const token = Cookies.get(TOKEN_COOKIE_NAME);
-  if (token) {
-    window.location.href = '/';
-  }
-</script>