Handle authenticatoin

src/components/Authenticator/authenticator.ts

@@ -1,38 +1,48 @@
 import Cookies from 'js-cookie';
 import { TOKEN_COOKIE_NAME } from '../../lib/constants';
 
-/**
- * Prepares the UI for the user who is logged in
- */
-function handleLoggedOut() {
+function showHideAuthElements(hideOrShow: 'hide' | 'show' = 'hide') {
   document.querySelectorAll('[data-auth-required]').forEach((el) => {
-    el.classList.add('hidden');
+    if (hideOrShow === 'hide') {
+      el.classList.add('hidden');
+    } else {
+      el.classList.remove('hidden');
+    }
   });
+}
 
+function showHideGuestElements(hideOrShow: 'hide' | 'show' = 'hide') {
   document.querySelectorAll('[data-guest-required]').forEach((el) => {
-    el.classList.remove('hidden');
+    if (hideOrShow === 'hide') {
+      el.classList.add('hidden');
+    } else {
+      el.classList.remove('hidden');
+    }
   });
 }
 
 /**
- * Prepares the UI for the user who is logged out
+ * Prepares the UI for the user who is logged in
  */
-function handleLoggedIn() {
-  document.querySelectorAll('[data-auth-required]').forEach((el) => {
-    el.classList.remove('hidden');
-  });
+function handleGuest() {
+  showHideAuthElements('hide');
+  showHideGuestElements('show');
+}
 
-  document.querySelectorAll('[data-guest-required]').forEach((el) => {
-    el.classList.add('hidden');
-  });
+/**
+ * Prepares the UI for the user who is logged out
+ */
+function handleAuthenticated() {
+  showHideAuthElements('show');
+  showHideGuestElements('hide');
 }
 
 function handleAuthRequired() {
   const token = Cookies.get(TOKEN_COOKIE_NAME);
   if (token) {
-    handleLoggedIn();
+    handleAuthenticated();
   } else {
-    handleLoggedOut();
+    handleGuest();
   }
 }
 

src/components/Login/LoginCopmponent.astro

@@ -1,5 +1,5 @@
 ---
-import Divider from './Divider.astro';
+import Divider from '../AuthenticationFlow/Divider.astro';
 import EmailLoginForm from '../AuthenticationFlow/EmailLoginForm';
 import GithubLogin from './GithubLogin.astro';
 import GoogleLogin from './GoogleLogin.astro';

src/pages/forgot-password.astro

@@ -16,13 +16,3 @@ import SettingLayout from '../layouts/SettingLayout.astro';
     </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>

src/pages/login.astro

@@ -1,5 +1,5 @@
 ---
-import Divider from '../components/Login/Divider.astro';
+import Divider from '../components/AuthenticationFlow/Divider.astro';
 import { GitHubButton } from '../components/AuthenticationFlow/GitHubButton';
 import { GoogleButton } from '../components/AuthenticationFlow/GoogleButton';
 import EmailLoginForm from '../components/AuthenticationFlow/EmailLoginForm';

src/pages/signup.astro

@@ -1,5 +1,5 @@
 ---
-import Divider from '../components/Login/Divider.astro';
+import Divider from '../components/AuthenticationFlow/Divider.astro';
 import GoogleLogin from '../components/Login/GoogleLogin.astro';
 import EmailSignupForm from '../components/AuthenticationFlow/EmailSignupForm';
 import SettingLayout from '../layouts/SettingLayout.astro';