style login and add simple route guard

tomhaerter · Sep 26, 2023 · 13b87fd · 13b87fd
1 parent 6ec842c
commit 13b87fd
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 36 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.ico">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Momentso</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,12 +1,22 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterLink, RouterView, useRouter } from 'vue-router'
+
+
+const router = useRouter()
+
+async function signOut() {
+  localStorage.removeItem('token')
+  await router.push('/login')
+}
+
 </script>
 
 <template>
-  <nav class="px-4 py-2 flex gap-2">
+  <nav class="px-4 py-2 flex gap-2" v-if="$route.name !== 'signup' && $route.name !== 'login'">
     <RouterLink class="p-2 bg-white/5 hover:bg-white/10 rounded-xl text-sm" to="/">Home</RouterLink>
     <RouterLink class="p-2 bg-white/5 hover:bg-white/10 rounded-xl text-sm" to="/login">Login</RouterLink>
     <RouterLink class="p-2 bg-white/5 hover:bg-white/10 rounded-xl text-sm" to="/signup">Sign up</RouterLink>
+    <button @click="signOut" class="p-2 bg-white/5 hover:bg-white/10 rounded-xl text-sm" to="/signup">Sign out</button>
   </nav>
 
   <main class="p-4">

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
@@ -22,4 +22,36 @@ const router = createRouter({
   ]
 })
 
+function isAuthenticated() {
+  return localStorage.getItem('token') ? true : false
+}
+
+router.beforeEach((to, from, next) => {
+  switch (to.name) {
+    case "login":
+      if (isAuthenticated()) {
+        next({ name: 'home' })
+      } else {
+        next()
+      }
+      break;
+    case "signup":
+      if (isAuthenticated()) {
+        next({ name: 'home' })
+      } else {
+        next()
+      }
+      break;
+    case "home":
+      if (!isAuthenticated()) {
+        next({ name: 'login' })
+      } else {
+        next()
+      }
+      break;
+    default:
+      next()
+  }
+})
+
 export default router
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
@@ -1,14 +1,19 @@
 <template>
   <div>
-    <div class="max-w-md mx-auto">
+    <div class="max-w-md mx-auto pt-24">
       <form class="flex text-center gap-4 flex-col" @submit.prevent="onSubmit">
         <h1 class="text-3xl mb-4">Sign in</h1>
         <input v-model="email" type="email" name="email" id="email" placeholder="Email" autocomplete="username"
-          class="placeholder:text-zinc-500 h-12 pl-4 w-full bg-zinc-700 focus:ring-0 p-2 text-sm border-none">
+          class="placeholder:text-zinc-500 h-12 pl-4 w-full bg-zinc-700 focus:ring-0 p-2 rounded-lg text-sm bg-neutral-inverted/10 placeholder:text-neutral-inverted/30 border-none text-neutral-inverted/90">
         <input v-model="password" type="password" name="password" id="password" placeholder="Password"
           autocomplete="current-password"
-          class="placeholder:text-zinc-500 h-12 pl-4 w-full bg-zinc-700 focus:ring-0 p-2 text-sm border-none">
-        <button type="submit" class="bg-zinc-700 text-sm px-4 py-2">Sign in</button>
+          class="placeholder:text-zinc-500 h-12 pl-4 w-full bg-zinc-700 focus:ring-0 p-2 text-sm rounded-lg bg-neutral-inverted/10 border-none placeholder:text-neutral-inverted/30 text-neutral-inverted/90">
+        <button type="submit"
+          class="bg-zinc-700 text-sm px-4 py-2 bg-neutral-inverted/10 rounded-lg h-12 text-neutral-inverted/70 hover:bg-neutral-inverted/20 transition-all">
+          Sign in</button>
+        <router-link to="/signup" class="text-neutral-inverted/50 text-sm hover:text-neutral-inverted/60">Sign
+          up</router-link>
+
       </form>
     </div>
 

diff --git a/frontend/src/views/SignUpView.vue b/frontend/src/views/SignUpView.vue
@@ -1,26 +1,24 @@
 <template>
   <div>
-    <div class="max-w-md mx-auto">
+    <div class="max-w-md mx-auto pt-24">
       <form class="flex text-center gap-4 flex-col" @submit.prevent="onSubmit">
         <h1 class="text-3xl mb-4">Sign up</h1>
-        <input
-          v-model="email"
-          type="email"
-          name="email"
-          id="email"
-          placeholder="Email"
-          autocomplete="username"
-        />
-        <input
-          v-model="password"
-          type="password"
-          name="password"
-          id="password"
-          placeholder="Password"
-          autocomplete="new-password"
-        />
-        <input v-model="name" type="text" name="name" id="name" placeholder="Name" />
-        <button type="submit" class="border border-black px-4 py-2">Sign up</button>
+        <input v-model="email" type="email" name="email" id="email" placeholder="Email" autocomplete="username"
+          class="placeholder:text-zinc-500 h-12 pl-4 w-full bg-zinc-700 focus:ring-0 p-2 rounded-lg text-sm bg-neutral-inverted/10 placeholder:text-neutral-inverted/30 border-none text-neutral-inverted/90">
+        <input v-model="password" type="password" name="password" id="password" placeholder="Password"
+          autocomplete="current-password"
+          class="placeholder:text-zinc-500 h-12 pl-4 w-full bg-zinc-700 focus:ring-0 p-2 text-sm rounded-lg bg-neutral-inverted/10 border-none placeholder:text-neutral-inverted/30 text-neutral-inverted/90">
+
+        <input v-model="name" type="text" name="name" id="name" placeholder="Name" autocomplete="name"
+          class="placeholder:text-zinc-500 h-12 pl-4 w-full bg-zinc-700 focus:ring-0 p-2 rounded-lg text-sm bg-neutral-inverted/10 placeholder:text-neutral-inverted/30 border-none text-neutral-inverted/90">
+
+        <button type="submit"
+          class="bg-zinc-700 text-sm px-4 py-2 bg-neutral-inverted/10 rounded-lg h-12 text-neutral-inverted/70 hover:bg-neutral-inverted/20 transition-all">
+          Sign up
+        </button>
+
+        <router-link to="/login"
+          class="text-neutral-inverted/50 text-sm hover:text-neutral-inverted/60">Login</router-link>
       </form>
     </div>
   </div>