Added login option, useAuth composable created

src/App.vue

@@ -3,17 +3,26 @@
   import Menubar from 'primevue/menubar';
   import { useRouter } from 'vue-router';
   import Toast from 'primevue/toast';
-
+  import { useAuth } from './composables/useAuth.js';
   const router = useRouter();
 
-  const menuItems =[
+  const { isAuth,userInfo,logout } = useAuth();
+  
+  const getMenuItems = () =>{
+    if(isAuth.value){
+      return [
         {
           label: 'Accueil',
           command:() => router.push({name:'home'}),
           icon: 'pi pi-home',
         },
         {
-      label:'Login',
+          label:'Logout',
+          command:() => logout(),
+          icon:'pi pi-sign-out',
+        },
+        {
+          label:userInfo.value ? userInfo.value.username : 'Profil',
           command:() => router.push({name:'login'}),
           icon:'pi pi-user',
         },
@@ -21,14 +30,34 @@
           label:'Swagger',
           command:() => router.push({name:'swagger'}),
           icon:'pi pi-cog',
-    }
+        },
       ];
+      } else {
+          return [
+          {
+            label: 'Accueil',
+            command:() => router.push({name:'home'}),
+            icon: 'pi pi-home',
+          },
+          {
+            label:'Register/Login',
+            command:() => router.push({name:'login'}),
+            icon:'pi pi-user',
+          },
+          {
+            label:'Swagger',
+            command:() => router.push({name:'swagger'}),
+            icon:'pi pi-cog',
+          },
+        ];
+        }
+      };
 </script>
 
 <template>
   <h1>Hello App!</h1>
   <Toast />
   <p><strong>Current route path:</strong> {{ $route.fullPath }}</p>
-  <Menubar :model="menuItems" />
+  <Menubar :model="getMenuItems()" />
   <RouterView />
   </template>

src/api.js

@@ -20,6 +20,19 @@ export const createUser = async (userData) => {
     return response.data
 };
 
+export const loginUser = async (userData) => {
+    const response = await api.post('/token/', userData);
+    const { access, refresh } = response.data;
+
+    Cookies.set('refresh', refresh,{
+        expires: 1,
+        secure: true,
+        sameSite: 'strict',
+    });
+    sessionStorage.setItem('access_token', access);
+    return response.data;
+};
+
 export const getuserinfo = async () => {
     const response = await api.get('/users/me/', {
         headers: {Authorization: `Bearer ${sessionStorage.getItem('access_token')}`},

src/composables/useAuth.js

@@ -0,0 +1,35 @@
+import { ref, onMounted } from 'vue';
+import { getuserinfo } from '../api.js';
+import Cookies from 'js-cookie';
+
+const isAuth = ref(false);
+const userInfo = ref(null);
+
+export function useAuth() {
+  onMounted(async () => {
+    const accessToken = sessionStorage.getItem('access_token');
+    if (accessToken) {
+      isAuth.value = true;
+      try {
+        userInfo.value = await getuserinfo();
+      } catch (error) {
+        console.error('Erreur de récupération des informations utilisateur :', error);
+        isAuth.value = false;
+        userInfo.value = null;
+      }
+    }
+  });
+
+  const logout = () => {
+    sessionStorage.removeItem('access_token');
+    Cookies.remove('refresh');
+    isAuth.value = false;
+    userInfo.value = null;
+  };
+
+  return {
+    isAuth,
+    userInfo,
+    logout,
+  };
+}

src/views/Login.vue

@@ -1,34 +1,40 @@
 <script setup>
-import { onMounted, ref } from 'vue';
-import { createUser, getuserinfo} from '../api.js';
+import { ref } from 'vue';
+import { createUser, loginUser } from '../api.js';
 import { useToast } from 'primevue/usetoast';
 import PMessage from 'primevue/message';
+import { useAuth } from '../composables/useAuth.js';
 
-const username = ref('');
-const email = ref('');
-const password = ref('');
-const errors = ref({ username: '', email: '' });
+const { userInfo, isAuth } = useAuth();
+
+const usernameRegister = ref('');
+const emailRegister = ref('');
+const passwordRegister = ref('');
+
+const usernameLogin = ref('');
+const passwordLogin = ref('');
+
+const registerErrors = ref({ username: '', email: '' });
+const loginErrors = ref({ username: '', password: '' });
 const toast = useToast();
-const isAuth = ref(false);
-const userInfo = ref(null);
 
 async function make_user() {
-  errors.value = { username: '', email: '' };
+  registerErrors.value = { username: '', email: '' };
   try {
     await createUser({
-      username: username.value,
-      email: email.value,
-      password: password.value,
+      username: usernameRegister.value,
+      email: emailRegister.value,
+      password: passwordRegister.value,
     });
     toast.add({ severity: 'success', summary: 'Succès', detail: 'Utilisateur créé !' });
   } catch (error) {
     if (error.response && error.response.data) {
       const data = error.response.data;
       if (data.username) {
-        errors.value.username = data.username[0];
+        registerErrors.value.username = data.username[0];
       }
       if (data.email) {
-        errors.value.email = data.email[0];
+        registerErrors.value.email = data.email[0];
       }
     } else {
       toast.add({ severity: 'error', summary: 'Erreur', detail: 'Une erreur est survenue.' });
@@ -36,19 +42,28 @@ async function make_user() {
   }
 }
 
-onMounted(async() => {
-  const accessToken = sessionStorage.getItem('access_token');
-  if (accessToken) {
-    isAuth.value = true;
-    try{
-      userInfo.value = await getuserinfo();}
-      catch (error){
-        console.error("erreur de récupération: ", error);
-        isAuth.value = false;
+async function login() {
+  loginErrors.value = { username: '', password: '' };
+  try {
+    await loginUser({
+      username: usernameLogin.value,
+      password: passwordLogin.value,
+    });
+    toast.add({ severity: 'success', summary:`${usernameLogin.value} connecté`});
+  } catch (error) {
+    if (error.response && error.response.data) {
+      const data = error.response.data;
+      if (data.username) {
+        loginErrors.value.username = data.username[0];
+      }
+      if (data.password) {
+        loginErrors.value.password = data.password[0];
+      }
+    } else {
+      toast.add({ severity: 'error', summary: 'Erreur', detail: 'Une erreur est survenue.' });
     }
   }
-});
-
+}
 </script>
 
 <template>
@@ -56,25 +71,44 @@ onMounted(async() => {
     <span>StockSeeker Login</span>
     <div v-if="isAuth" class="form-container">
       <p v-if="userInfo">Bienvenue, {{ userInfo.username }}</p>
-      <p v-if="userInfo">email :{{ userInfo.email }}</p>
+      <p v-if="userInfo">email : {{ userInfo.email }}</p>
     </div>
 
-    <div v-else class="form-container">
+    <div v-else class="forms-container">
+      <div class="register form-container">
+        <h2>Crée un Compte :</h2>
         <div class="form">
           <label for="username">Username:</label>
-        <input type="text" class="p-inputtext" name="username" id="name" v-model="username" required>
-        <p-message v-if="errors.username" severity="error">{{ errors.username }}</p-message>
+          <input type="text" class="p-inputtext" name="register-username" id="register-name" v-model="usernameRegister" required>
+          <p-message v-if="registerErrors.username" severity="error">{{ registerErrors.username }}</p-message>
         </div>
         <div class="form">
           <label for="email">email:</label>
-        <input type="text" name="email" id="email" v-model="email" class="p-inputtext" required>
-        <p-message v-if="errors.email" severity="error">{{ errors.email }}</p-message>
+          <input type="text" name="register-email" id="register-email" v-model="emailRegister" class="p-inputtext" required>
+          <p-message v-if="registerErrors.email" severity="error">{{ registerErrors.email }}</p-message>
         </div>
         <div class="form">
           <label for="password">password:</label>
-        <input type="password" name="password" id="password" v-model="password" class="p-inputtext" required>
+          <input type="password" name="register-password" id="register-password" v-model="passwordRegister" class="p-inputtext" required>
         </div>
         <button @click="make_user" class="p-button p-component" type="button">S'inscrire</button>
         </div>
+
+        <div class="login form-container">
+          <h2>Se connecter : </h2>
+        <div class="form">
+          <label for="username">Username:</label>
+          <input type="text" class="p-inputtext" name="login-username" id="login-name" v-model="usernameLogin" required>
+          <p-message v-if="loginErrors.username" severity="error">{{ loginErrors.username }}</p-message>
+        </div>
+        <div class="form">
+          <label for="password">password:</label>
+          <input type="password" name="login-password" id="login-password" v-model="passwordLogin" class="p-inputtext" required>
+          <p-message v-if="loginErrors.password" severity="error">{{ loginErrors.password }}</p-message>
+
+        </div>
+        <button @click="login" class="p-button p-component" type="button">Se connecter</button>
+        </div>
+      </div>
       </div>
 </template>