modify user, refactoring, css adjustement

src/App.vue

@@ -4,6 +4,10 @@
   import { useRouter } from 'vue-router';
   import Toast from 'primevue/toast';
   import { useAuth } from './composables/useAuth.js';
+
+  import { useToast } from 'primevue/usetoast';
+
+  const toast = useToast();
   const router = useRouter();
 
   const { isAuth,userInfo,logout } = useAuth();
@@ -28,7 +32,10 @@
         },
         {
           label:'Logout',
-          command:() => logout(),
+          command:() => {
+            logout();
+            toast.add({severity:'success',summary:'Déconnexion',life:2500,detail:'Vous avez été déconnecté.'});
+          },
           icon:'pi pi-sign-out',
         },
       ];
@@ -55,9 +62,8 @@
 </script>
 
 <template>
-  <h1>Hello App!</h1>
+  <h1>StockSeeker</h1>
   <Toast />
-  <p><strong>Current route path:</strong> {{ $route.fullPath }}</p>
   <Menubar :model="getMenuItems()" />
   <RouterView />
   </template>

src/api.js

@@ -33,6 +33,12 @@ export const loginUser = async (userData) => {
     return response.data;
 };
 
+export const updateUser = async (userData) => {
+    const response = await api.put('/users/me/', userData, {
+        headers: {Authorization: `Bearer ${sessionStorage.getItem('access_token')}`},
+    });
+    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

@@ -1,7 +1,6 @@
 import { ref, onMounted } from 'vue';
 import { getuserinfo } from '../api.js';
 import Cookies from 'js-cookie';
-
 const isAuth = ref(false);
 const userInfo = ref(null);
 

src/views/Login.vue

@@ -1,11 +1,17 @@
 <script setup>
 import { ref } from 'vue';
-import { createUser, loginUser, getuserinfo } from '../api.js';
+import { createUser, loginUser,updateUser, getuserinfo } from '../api.js';
 import { useToast } from 'primevue/usetoast';
 import PMessage from 'primevue/message';
 import { useAuth } from '../composables/useAuth.js';
+import Dialog from 'primevue/dialog';
+import InputText from 'primevue/inputtext';
+import Password from 'primevue/password';
+import Button from 'primevue/button';
+
 
 const { userInfo, isAuth } = useAuth();
+const toast = useToast();
 
 const usernameRegister = ref('');
 const emailRegister = ref('');
@@ -14,9 +20,16 @@ const passwordRegister = ref('');
 const usernameLogin = ref('');
 const passwordLogin = ref('');
 
+const usernameModify = ref('');
+const emailModify = ref('');
+const passwordModify = ref('');
+
 const registerErrors = ref({ username: '', email: '' });
 const loginErrors = ref({ username: '', password: '' });
-const toast = useToast();
+const modifyErrors = ref({ username: '', email: '' });
+
+
+const showDialog = ref(false);
 
 async function make_user() {
   registerErrors.value = { username: '', email: '' };
@@ -28,7 +41,7 @@ async function make_user() {
     });
     isAuth.value = true;
     userInfo.value = await getuserinfo();
-    toast.add({ severity: 'success', summary: 'Succès', detail: 'Utilisateur créé !' });
+    toast.add({ severity: 'success', life: 2500, summary: 'Succès', detail: 'Utilisateur créé !' });
   } catch (error) {
     if (error.response && error.response.data) {
       const data = error.response.data;
@@ -39,26 +52,26 @@ async function make_user() {
         registerErrors.value.email = data.email[0];
       }
     } else {
-      toast.add({ severity: 'error', summary: 'Erreur', detail: 'Une erreur est survenue.' });
+      toast.add({ severity: 'error',life: 2500, summary: 'Erreur', detail: 'Une erreur est survenue.' });
     }
   }
 }
 
-async function login() {
+async function login_user() {
   loginErrors.value = { username: '', password: '' };
   try {
     await loginUser({
       username: usernameLogin.value,
       password: passwordLogin.value,
     });
-    toast.add({ severity: 'success', summary:`${usernameLogin.value} connecté`});
+    toast.add({ severity: 'success',life: 2500, summary:`${usernameLogin.value} connecté`});
     isAuth.value = true;
     userInfo.value = await getuserinfo();
   } catch (error) {
     if (error.response && error.response.data) {
       const data = error.response.data;
       if (data.detail) {
-        toast.add({ severity: 'error', summary: 'Erreur', detail: data.detail });
+        toast.add({ severity: 'error',life: 2500, summary: 'Erreur', detail: data.detail });
       }
       if (data.username) {
         loginErrors.value.username = data.username[0];
@@ -67,55 +80,133 @@ async function login() {
         loginErrors.value.password = data.password[0];
       }
     } else {
-      toast.add({ severity: 'error', summary: 'Erreur', detail: 'Une erreur est survenue.' });
+      toast.add({ severity: 'error',life: 2500, summary: 'Erreur', detail: 'Une erreur est survenue.' });
+    }
+  }
+}
+async function modify_user() {
+  modifyErrors.value = { username: '', email: '', password: '' };
+  try {
+    await updateUser({
+      username: usernameModify.value,
+      email: emailModify.value,
+      password: passwordModify.value,
+    });
+    isAuth.value = true;
+    userInfo.value = await getuserinfo();
+    showDialog.value = false;
+    toast.add({ severity: 'success',life: 2500, summary: 'Succès', detail: 'Utilisateur modifié !' });
+  } catch (error) {
+    if (error.response && error.response.data) {
+      const data = error.response.data;
+      if (data.username) {
+        modifyErrors.value.username = data.username[0];
+      }
+      if (data.email) {
+        modifyErrors.value.email = data.email[0];
+      }
+      if (data.password) {
+        modifyErrors.value.password = data.password[0];
+      }
+    } else {
+      toast.add({ severity: 'error',life: 2500, summary: 'Erreur', detail: 'Une erreur est survenue.' });
     }
   }
 }
 </script>
 
 <template>
-  <div class="container">  
+  <div class="container">
-    <span>StockSeeker Login</span>
+    <div v-if="isAuth" class="form-container" style="display: flex;flex-direction: column; justify-content: center; align-items: center;">
-    <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>
+      <Button label="Modifier l'utilisateur" icon="pi pi-user-edit" @click="showDialog = true">
+        Modifier l'utilisateur
+      </Button>
+      <Dialog header="Modifier l'utilisateur" v-model:visible="showDialog" :style="{ width: '30vw' }" modal:draggable="false">
+        <form @submit.prevent="modify_user">
+          <div class="field">
+            <label for="modify-username">
+              Nom d'utilisateur
+            </label>
+            <InputText id="modify-username" v-model="usernameModify" placeholder="Nom d'utilisateur" class="w-full" required />
+          </div>
+          <div class="field">
+            <label for="modify-email">
+              Email
+            </label>
+            <InputText id="modify-email" v-model="emailModify" type="email" placeholder="Adresse email" class="w-full" required />
+          </div>
+          <div class="field">
+            <label for="modify-password">
+              Mot de passe
+            </label>
+            <Password id="modify-password" v-model="passwordModify" feedback toggleMask placeholder="Nouveau mot de passe" class="w-full" required />
+          </div>
+          <div class="flex justify-content-end mt-3">
+            <Button label="Annuler" class="p-button-text" @click="showDialog = false">
+              Annuler
+            </Button>
+            <Button label="Enregistrer" type="submit" class="p-button-primary">
+              Enregistrer
+            </Button>
+          </div>
+        </form>
+      </Dialog>
     </div>
 
-    <div v-else class="forms-container">
+    <div v-if="!isAuth" class="forms-container" style="display: flex;flex-direction: row; justify-content: space-around; align-items: center;">
       <div class="register form-container">
-        <h2>Crée un Compte :</h2>
+        <h2>Créer un Compte :</h2>
-        <div class="form">
+        <form @submit.prevent="make_user">
-          <label for="username">Username:</label>
+          <div class="form">
-          <input type="text" class="p-inputtext" name="register-username" id="register-name" v-model="usernameRegister" required>
+            <label for="username">
-          <p-message v-if="registerErrors.username" severity="error">{{ registerErrors.username }}</p-message>
+              Nom d'utilisateur :
-        </div>
+            </label>
-        <div class="form">
+            <InputText type="text" id="register-username" v-model="usernameRegister" required />
-          <label for="email">email:</label>
+            <p-message v-if="registerErrors.username" severity="error">
-          <input type="text" name="register-email" id="register-email" v-model="emailRegister" class="p-inputtext" required>
+              {{ registerErrors.username }}
-          <p-message v-if="registerErrors.email" severity="error">{{ registerErrors.email }}</p-message>
+            </p-message>
-        </div>
+          </div>
-        <div class="form">
+          <div class="form">
-          <label for="password">password:</label>
+            <label for="email">
-          <input type="password" name="register-password" id="register-password" v-model="passwordRegister" class="p-inputtext" required>
+              Email :
-        </div>
+            </label>
-        <button @click="make_user" class="p-button p-component" type="button">S'inscrire</button>
+            <InputText type="email" id="register-email" v-model="emailRegister" required />
-        </div>
+            <p-message v-if="registerErrors.email" severity="error">
-
+              {{ registerErrors.email }}
-        <div class="login form-container">
+            </p-message>
-          <h2>Se connecter : </h2>
+          </div>
-        <div class="form">
+          <div class="form">
-          <label for="username">Username:</label>
+            <label for="password">
-          <input type="text" class="p-inputtext" name="login-username" id="login-name" v-model="usernameLogin" required>
+              Mot de passe :
-          <p-message v-if="loginErrors.username" severity="error">{{ loginErrors.username }}</p-message>
+            </label>
-        </div>
+            <Password id="register-password" v-model="passwordRegister" toggleMask required />
-        <div class="form">
+          </div>
-          <label for="password">password:</label>
+          <Button label="S'inscrire" type="submit" class="p-button-primary" />
-          <input type="password" name="login-password" id="login-password" v-model="passwordLogin" class="p-inputtext" required>
+        </form>
-          <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 class="login form-container">
+        <h2>Se connecter :</h2>
+        <form @submit.prevent="login_user">
+          <div class="form">
+            <label for="username">Nom d'utilisateur :</label>
+            <InputText type="text" id="login-username" v-model="usernameLogin" required />
+            <p-message v-if="loginErrors.username" severity="error">
+              {{ loginErrors.username }}
+            </p-message>
+          </div>
+          <div class="form">
+            <label for="password">Mot de passe :</label>
+            <Password id="login-password" v-model="passwordLogin" toggleMask :feedback="false" required />
+            <p-message v-if="loginErrors.password" severity="error">
+              {{ loginErrors.password }}
+            </p-message>
+          </div>
+          <Button label="Se connecter" type="submit" class="p-button-primary" />
+        </form>
       </div>
+    </div>
+  </div>
 </template>