chore: wip

Author: glennmichael123

app/Actions/LoginAction.ts

@@ -41,6 +41,6 @@ export default new Action({
       return { token, team: teamValue }
     }
 
-    return 'fail'
+    return { message: 'Incorrect email or password', status: 401 }
   },
 })

resources/views/auth/login.vue

@@ -1,3 +1,45 @@
+<script setup>
+import { ref } from 'vue'
+
+const router = useRouter()
+
+// Reactive state for the email input
+const email = ref('')
+const password = ref('')
+
+// Method to handle email submission
+async function login() {
+  const body = {
+    email: email.value,
+    password: password.value,
+  }
+
+  const url = 'http://localhost:3008/api/login'
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Accept': 'application/json',
+    },
+    body: JSON.stringify(body),
+  })
+
+  if (!response.ok) {
+    const res = await response.json()
+  }
+  else {
+    const data = await response.json()
+
+    localStorage.setItem('token', data.token)
+
+    router.push({ path: '/dashboard' })
+  }
+
+  password.value = ''
+}
+</script>
+
 <template>
   <div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
     <div class="sm:mx-auto sm:w-full sm:max-w-md">
@@ -9,18 +51,18 @@
 
     <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
       <div class="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
-        <form class="space-y-6" action="#" method="POST">
+        <div class="space-y-6">
           <div>
             <label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email address</label>
             <div class="mt-2">
-              <input id="email" name="email" type="email" autocomplete="email" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+              <input id="email" v-model="email" name="email" type="email" autocomplete="email" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
             </div>
           </div>
 
           <div>
             <label for="password" class="block text-sm font-medium leading-6 text-gray-900">Password</label>
             <div class="mt-2">
-              <input id="password" name="password" type="password" autocomplete="current-password" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+              <input id="password" v-model="password" name="password" type="password" autocomplete="current-password" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
             </div>
           </div>
 
@@ -36,11 +78,11 @@
           </div>
 
           <div>
-            <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+            <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" @click="login">
               Sign in
             </button>
           </div>
-        </form>
+        </div>
 
         <div>
           <div class="relative mt-10">

storage/framework/core/router/src/server.ts

@@ -218,8 +218,7 @@ async function execute(foundRoute: Route, req: Request, { statusCode }: Options)
   }
 
   if (isObject(foundCallback) && foundCallback.status) {
-    if (foundCallback.status === 422) {
-      // biome-ignore lint/performance/noDelete: <explanation>
+    if (foundCallback.status === 401) {
       delete foundCallback.status
 
       return await new Response(JSON.stringify(foundCallback), {
@@ -228,13 +227,24 @@ async function execute(foundRoute: Route, req: Request, { statusCode }: Options)
           'Access-Control-Allow-Origin': '*',
           'Access-Control-Allow-Headers': '*',
         },
-        status: 422,
+        status: 401,
       })
     }
-  }
 
-  if (isObject(foundCallback) && foundCallback.status) {
-    if (foundCallback.status === 401) {
+    if (foundCallback.status === 403) {
+      delete foundCallback.status
+      return await new Response(JSON.stringify(foundCallback), {
+        headers: {
+          'Content-Type': 'json',
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Headers': '*',
+        },
+        status: 403,
+      })
+    }
+    
+    if (foundCallback.status === 422) {
+      // biome-ignore lint/performance/noDelete: <explanation>
       delete foundCallback.status
 
       return await new Response(JSON.stringify(foundCallback), {
@@ -243,21 +253,20 @@ async function execute(foundRoute: Route, req: Request, { statusCode }: Options)
           'Access-Control-Allow-Origin': '*',
           'Access-Control-Allow-Headers': '*',
         },
-        status: 401,
+        status: 422,
       })
     }
-  }
 
-  if (isObject(foundCallback) && foundCallback.status) {
-    if (foundCallback.status === 403) {
+
+    if (foundCallback.status === 500) {
       delete foundCallback.status
       return await new Response(JSON.stringify(foundCallback), {
         headers: {
           'Content-Type': 'json',
           'Access-Control-Allow-Origin': '*',
           'Access-Control-Allow-Headers': '*',
         },
-        status: 403,
+        status: 500,
       })
     }
   }