class 11

src/auth/useAuth.js

@@ -1,12 +1,13 @@
 import axios from "axios";
-import {computed, reactive} from "vue";
+import {computed, reactive, ref} from "vue";
 
 const state = reactive({
     authenticated: false,
     user: {}
 })
 
 export default function useAuth() {
+    const errors = ref({})
     const getAuthenticated = computed(() => state.authenticated)
     const getUser = computed(() => state.user)
 
@@ -26,7 +27,8 @@ export default function useAuth() {
 
            return response;
        } catch (e) {
-           // errors
+           setAuthenticate(false)
+           setUser({})
        }
    }
 
@@ -36,14 +38,17 @@ export default function useAuth() {
             await axios.post('/login', credentials)
             await attempt()
         } catch (e) {
-            // validation errors
+            if (e.response.status === 422) {
+                errors.value = e.response.data.errors
+            }
         }
     }
 
     return {
         login,
         getUser,
         getAuthenticated,
-        attempt
+        attempt,
+        errors
     }
 }

src/pages/Login.vue

@@ -1,19 +1,40 @@
 <script setup>
 import {reactive} from "vue";
 import useAuth from "../auth/useAuth.js";
+import router from "../router/index.js";
 
 const form = reactive({
-  email: 'polashmahmud@gmail.com',
-  password: 'password'
+  email: '',
+  password: ''
 })
 
-const {login, getUser: user, getAuthenticated: authenticated} = useAuth()
+const {login, getUser: user, getAuthenticated: authenticated, errors} = useAuth()
+
+const handleLogin = () => {
+  login(form).then(() => {
+    router.push({ name: 'admin.post'} )
+  })
+}
 
 </script>
 
 <template>
-  {{ user }} {{ authenticated }}
-  <form v-on:submit.prevent="login(form)">
-    <button type="submit">Login</button>
+  <h1 class="text-xl font-medium text-center mb-6">Login</h1>
+  <form class="max-w-lg mx-auto border rounded-lg p-6" v-on:submit.prevent="handleLogin">
+    <div class="mb-3">
+      <label for="email" class="leading-7 text-gray-600 text-sm">Email</label>
+      <input v-model="form.email" type="email" name="email" id="email" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
+      <div v-if="errors.email">
+        <p class="text-xs text-red-500">{{ errors.email[0] }}</p>
+      </div>
+    </div>
+    <div class="mb-3">
+      <label for="password" class="leading-7 text-gray-600 text-sm">Password</label>
+      <input v-model="form.password" type="password" name="password" id="password" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
+      <div v-if="errors.password">
+        <p class="text-xs text-red-500">{{ errors.password[0] }}</p>
+      </div>
+    </div>
+    <button type="submit" class="text-white w-full bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Login</button>
   </form>
 </template>

src/pages/admin/Post.vue

@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+  Admin Posts
+</template>

src/router/index.js

@@ -2,6 +2,10 @@ import { createRouter, createWebHistory } from "vue-router";
 import Home from "../pages/Home.vue";
 import Post from "../pages/Post.vue";
 import Login from "../pages/Login.vue";
+import AdminPost from "../pages/admin/Post.vue";
+import useAuth from "../auth/useAuth.js";
+
+const {getAuthenticated: authenticated} = useAuth()
 
 const routes = [
     {
@@ -20,6 +24,11 @@ const routes = [
         name: 'login',
         component: Login
     },
+    {
+        path: '/admin/posts',
+        name: 'admin.post',
+        component: AdminPost
+    },
 ]
 
 export default createRouter({