feature(login) show invalid credentials feedback

rohrig · rohrig · commit dbc922f4ded5 · 2022-10-08T22:05:58.000+02:00
diff --git a/components/layout/navbar.vue b/components/layout/navbar.vue
@@ -26,8 +26,6 @@ watch(user, async () => {
   await checkIfLoggedIn()
 }, { deep: true });
 
-
-
 </script>
 
 <template>
@@ -53,12 +51,8 @@ watch(user, async () => {
                 src="/img/logo_clear_fsj.png" />
             </nuxt-link>
           </div>
-
         </div>
-
-
         <nav class="hidden md:flex justify-between space-x-10 align-bottom mt-14">
-
           <div class="hidden md:flex space-x-10 align-bottom">
             <nuxt-link to="/subscribe">
               <span
@@ -127,11 +121,6 @@ watch(user, async () => {
             </svg>
           </NuxtLink>
 
-      
-
-        
-       
-
           <span class="hidden md:block " @click="setColorTheme($colorMode.preference == 'dark' ? 'light' : 'dark')">
             <svg v-if="$colorMode.value == 'dark'" xmlns="http://www.w3.org/2000/svg"
               class="h-6 w-6 text-gray-50 hidden lg:block" viewBox="0 0 20 20" fill="currentColor">
@@ -146,27 +135,8 @@ watch(user, async () => {
           </span>
 
           <User :isLoggedIn="isLoggedIn" class="hidden md:block" />
-
-          <span class="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
-            <!-- <nuxt-link v-if="!user" to="/login"
-              class="whitespace-nowrap text-base font-medium text-gray-500 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300 "> Sign
-              in
-            </nuxt-link> -->
-
-            <!-- <User v-if="user" :user="user" /> -->
-
-            <!-- <nuxt-link v-if="!user" to="/register"
-              class="transition duration-500 hover:scale-110 ml-8 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700">
-              Sign up
-            </nuxt-link> -->
-          </span>
         </div>
-
-
-
-
       </div>
-      <!-- <BackButton /> -->
     </div>
 
 
@@ -190,9 +160,7 @@ watch(user, async () => {
       </button>
 
       <div class="py-4 overflow-y-auto">
-
         <ul class="space-y-2">
-         
           <li>
 
             <button class="ml-2" @click="setColorTheme($colorMode.preference == 'dark' ? 'light' : 'dark')">
@@ -208,8 +176,6 @@ watch(user, async () => {
               </svg>
             </button>
           </li>
-
-
           <NuxtLink to="https://github.com/jurassicjs/nuxt3-fullstack-tutorial">
             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
               role="img" class="text-gray-500 dark:text-gray-200 h-6 w-6 ml-2 mt-2 " width="0.97em" height="1em"
@@ -219,7 +185,6 @@ watch(user, async () => {
               </path>
             </svg>
           </NuxtLink>
-
           <NuxtLink to="https://discord.gg/tFGTQBdT" class="text-gray-800">
             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
               class="text-gray-500 dark:text-gray-200 h-6 w-6 ml-2 mt-2" viewBox="0 -28.5 256 256" version="1.1"
@@ -231,15 +196,13 @@ watch(user, async () => {
               </g>
             </svg>
           </NuxtLink>
-
           <NuxtLink to="https://twitter.com/jack_fullstack">
             <svg class="text-gray-500 dark:text-gray-200 h-6 w-6 ml-2 mt-2" fill="none" viewBox="0 0 24 24">
               <path fill-rule="evenodd" clip-rule="evenodd"
                 d="M22 5.897c-.75.33-1.5.577-2.333.66A4.4 4.4 0 0021.5 4.33c-.833.495-1.667.825-2.583.99a4.053 4.053 0 00-3-1.32c-2.25 0-4.084 1.814-4.084 4.041 0 .33 0 .66.084.907-3.5-.165-6.5-1.814-8.5-4.288-.417.66-.584 1.32-.584 2.062 0 1.402.75 2.639 1.834 3.381-.667 0-1.334-.165-1.834-.495v.083c0 1.98 1.417 3.629 3.25 3.958-.333.083-.666.165-1.083.165-.25 0-.5 0-.75-.082.5 1.65 2 2.804 3.833 2.804C6.667 17.608 4.917 18.268 3 18.268c-.333 0-.667 0-1-.082C3.833 19.34 6 20 8.25 20c7.583 0 11.667-6.186 11.667-11.546v-.495c.833-.578 1.5-1.32 2.083-2.062z"
                 fill="currentColor"></path>
             </svg>
           </NuxtLink>
-
           <li>
             <NuxtLink to="/dashboard"
               class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
@@ -303,7 +266,7 @@ watch(user, async () => {
               <span class="flex-1 ml-3 whitespace-nowrap">Ask Jack</span>
             </NuxtLink>
           </li>
-          <li  v-if="!isLoggedIn">
+          <li v-if="!isLoggedIn">
             <NuxtLink to="/login"
               class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
diff --git a/composables/useAuth.ts b/composables/useAuth.ts
@@ -78,8 +78,16 @@ export async function registerWithEmail(
   }
 }
 
-export async function loginWithEmail(usernameOrEmail: string, password: string) {
-  const user = await $fetch<IUser>('/api/auth/login', { method: 'POST', body: { usernameOrEmail: usernameOrEmail, password: password } })
-  useState('user').value = user
-  await useRouter().push('/dashboard')
+export async function loginWithEmail(usernameOrEmail: string, password: string): Promise<boolean> {
+
+  try{
+    const user = await $fetch<IUser>('/api/auth/login', { method: 'POST', body: { usernameOrEmail: usernameOrEmail, password: password } })
+    console.log(user)
+    useState('user').value = user
+    await useRouter().push('/dashboard')
+    return true
+  } catch(e) {
+     return false
+  }
+ 
 }
diff --git a/pages/login.vue b/pages/login.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "@vue/reactivity";
-import {loginWithEmail} from "~/composables/useAuth";
+import { loginWithEmail } from "~/composables/useAuth";
 
 const usernameOrEmail = ref(null)
 const password = ref(null)
@@ -13,24 +13,32 @@ definePageMeta({
 })
 
 const postLoginForm = async function () {
-  await loginWithEmail(usernameOrEmail.value, password.value)
+  const res = await loginWithEmail(usernameOrEmail.value, password.value)
+  if (!res) {
+    errorMessage.value = 'Invalid Credentials'
+    hasError.value = true
+    setTimeout(() => {
+      hasError.value = false
+    }, 3000)
+  }
 }
 </script>
 
 <template>
-  <div class="h-screen bg-gradient-to-b from-white to-blue-200 dark:bg-gradient-to-b dark:from-slate-800 dark:to-slate-400">
+  <div
+    class="h-screen bg-gradient-to-b from-white to-blue-200 dark:bg-gradient-to-b dark:from-slate-800 dark:to-slate-400">
     <div class="flex items-center justify-center  px-4 sm:px-6 lg:px-8">
       <div class="max-w-md w-full space-y-8">
         <div>
           <div class="h-25 w-25">
           </div>
           <div class="lg:flex mt-10">
-          <img class="mx-auto h-24 w-auto" src="/img/logo_clear_fsj.png" alt="full stack jack logo" />
-          <br>
-          <h1 class="py-9 text-center text-5xl font-extrabold text-gray-900 dark:text-gray-400">
-            Full Stack Jack</h1>
+            <img class="mx-auto h-24 w-auto" src="/img/logo_clear_fsj.png" alt="full stack jack logo" />
+            <br>
+            <h1 class="py-9 text-center text-5xl font-extrabold text-gray-900 dark:text-gray-400">
+              Full Stack Jack</h1>
           </div>
-          
+
           <h2 class="mt-6 py-9 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-400">Sign in</h2>
         </div>
 
@@ -51,7 +59,8 @@ const postLoginForm = async function () {
           <div class="rounded-md shadow-sm -space-y-px mb-1">
             <div>
               <label for="email-address" class="sr-only">Username or Email</label>
-              <input v-model="usernameOrEmail" id="email-address" name="email" type="email" autocomplete="email" required
+              <input v-model="usernameOrEmail" id="email-address" name="email" type="email" autocomplete="email"
+                required
                 class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                 placeholder="Username or Email">
             </div>
@@ -72,7 +81,8 @@ const postLoginForm = async function () {
             </div>
 
             <div class="text-sm">
-              <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-white"> Forgot your password? </a>
+              <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-white"> Forgot your
+                password? </a>
             </div>
           </div>
 
