80% style done, shino il est 3h10 à l'aide..

src/App.vue

@@ -23,12 +23,12 @@
         {
           label: 'Gerer les produits',
           command:() => router.push({name:'products'}),
-          icon: 'pi pi-home',
+          icon: 'pi pi-barcode',
         },
         {
           label: 'Gerer les entrepôts',
           command:() => router.push({name:'warehouses'}),
-          icon: 'pi pi-home',
+          icon: 'pi pi-warehouse',
         },
         {
           label:userInfo.value ? userInfo.value.username : 'Profil',

src/style.css

@@ -60,3 +60,39 @@ h1 {
   grid-row: 1;
   grid-column: 2;
 }
+
+.create-btn{
+  margin-bottom: 1rem;
+}
+.form-update-user{
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.p-button-override{
+  width: auto !important;
+}
+.form-img-adds{
+  display: flex;
+  flex-direction: column;
+}
+
+.registered-container{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.account-container{
+  gap: 1rem;
+  display: flex;
+  flex-direction: column;
+  max-width: 450px;
+  margin: auto;
+}
+.account-login{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

src/views/Login.vue

@@ -9,6 +9,7 @@ import InputText from 'primevue/inputtext';
 import Password from 'primevue/password';
 import Button from 'primevue/button';
 import IftaLabel from 'primevue/iftalabel';
+import Divider from 'primevue/divider';
 
 
 const { userInfo, isAuth } = useAuth();
@@ -118,97 +119,96 @@ async function modify_user() {
 </script>
 
 <template>
-  <div class="container">
+  <div class="login-container">
-    <div v-if="isAuth" class="form-container" style="display: flex;flex-direction: column; justify-content: center; align-items: center;">
+    <div v-if="isAuth" class="registered-container">
-      <p v-if="userInfo">Bienvenue, {{ userInfo.username }}</p>
+      <h2 v-if="userInfo">Bienvenue, {{ userInfo.username }}</h2>
       <p v-if="userInfo">Email : {{ userInfo.email }}</p>
-      <Button label="Modifier l'utilisateur" icon="pi pi-user-edit" @click="showDialog = true">
+      <Button label="Modifier l'utilisateur" icon="pi pi-user-edit" @click="showDialog = true"></Button>
-        Modifier l'utilisateur
+      <Dialog header="Modifier l'utilisateur" v-model:visible="showDialog" :style="{ width: '30vw' }" modal>
-      </Button>
+        <form class="form-update-user" @submit.prevent="modify_user">
-      <Dialog header="Modifier l'utilisateur" v-model:visible="showDialog" :style="{ width: '30vw' }" modal:draggable="false">
-        <form @submit.prevent="modify_user">
           <div class="field">
             <IftaLabel>
-              <InputText id="modify-username" v-model="usernameModify" placeholder="" class="w-full" required fluid />
+              <InputText id="modify-username" v-model="usernameModify" placeholder="" required fluid />
               <label for="modify-username">Nom d'utilisateur :</label>
             </IftaLabel>
           </div>
           <div class="field">
             <IftaLabel>
-              <InputText id="modify-email" v-model="emailModify" type="email" class="w-full" required fluid />
+              <InputText id="modify-email" v-model="emailModify" type="email" required fluid />
               <label for="modify-email">Email :</label>
             </IftaLabel>
           </div>
           <div class="field">
             <IftaLabel>
-              <Password id="modify-password" v-model="passwordModify" feedback toggleMask class="w-full" required fluid/>
+              <Password id="modify-password" v-model="passwordModify" feedback toggleMask required fluid/>
               <label for="modify-password">Mot de passe :</label>
             </IftaLabel>
           </div>
-          <div class="flex justify-content-end mt-3">
+          <Button label="Annuler" icon="pi pi-ban" severity="secondary" class="p-button-text" @click="showDialog = false"></Button>
-            <Button label="Annuler" severity="secondary" class="p-button-text" @click="showDialog = false">
+          <Button label="Enregistrer" icon="pi pi-address-book" type="submit" class="p-button-primary"></Button>
-              Annuler
-            </Button>
-            <Button label="Enregistrer" type="submit" class="p-button-primary">
-              Enregistrer
-            </Button>
-          </div>
         </form>
       </Dialog>
     </div>
 
-    <div v-if="!isAuth" class="forms-container" style="display: flex;flex-direction: row; justify-content: space-around; align-items: center;">
+    <div v-if="!isAuth" class="account-container">
-      <div class="register form-container">
+      <div class="account-logon account-login">
-        <h2>Créer un Compte :</h2>
-        <form @submit.prevent="make_user">
-          <div class="form">
-            <label for="username">
-              Nom d'utilisateur :
-            </label>
-            <InputText type="text" id="register-username" 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>
-            <InputText type="email" id="register-email" v-model="emailRegister" required />
-            <p-message v-if="registerErrors.email" severity="error">
-              {{ registerErrors.email }}
-            </p-message>
-          </div>
-          <div class="form">
-            <label for="password">
-              Mot de passe :
-            </label>
-            <Password id="register-password" v-model="passwordRegister" toggleMask required />
-          </div>
-          <Button label="S'inscrire" type="submit" class="p-button-primary" />
-        </form>
-      </div>
-
-      <div class="login form-container">
         <h2>Se connecter :</h2>
-        <form @submit.prevent="login_user">
+        <form class="form-update-user" @submit.prevent="login_user">
           <div class="form">
+            <IftaLabel>
+              <InputText type="text" id="login-username" v-model="usernameLogin" required fluid/>
               <label for="username">Nom d'utilisateur :</label>
-            <InputText type="text" id="login-username" v-model="usernameLogin" required />
+            </IftaLabel>
             <p-message v-if="loginErrors.username" severity="error">
               {{ loginErrors.username }}
             </p-message>
           </div>
           <div class="form">
+            <IftaLabel>
+              <Password id="login-password" v-model="passwordLogin" toggleMask :feedback="false" required fluid />
               <label for="password">Mot de passe :</label>
-            <Password id="login-password" v-model="passwordLogin" toggleMask :feedback="false" required />
+            </IftaLabel>
             <p-message v-if="loginErrors.password" severity="error">
               {{ loginErrors.password }}
             </p-message>
           </div>
-          <Button label="Se connecter" type="submit" class="p-button-primary" />
+          <Button label="Se connecter" type="submit" icon="pi pi-sign-in" class="p-button-primary"/>
         </form>
       </div>
+      <Divider></Divider>
+      <Button label="Crée un Compte" icon="pi pi-user-plus" @click="showDialog = true"></Button>
+      <Dialog header="Inscription" v-model:visible="showDialog" :style="{ width: '30vw' }" modal>
+        <div class="account-logon account-register">
+          <form class="form-update-user" @submit.prevent="make_user">
+            <div class="form">
+              <IftaLabel>
+                <InputText type="text" id="register-username" v-model="usernameRegister" required fluid/>
+                <label for="username">Nom d'utilisateur :</label>
+              </IftaLabel>
+              <p-message v-if="registerErrors.username" severity="error">
+                {{ registerErrors.username }}
+              </p-message>
+            </div>
+            <div class="form">
+              <IftaLabel>
+              <InputText type="email" id="register-email" v-model="emailRegister" required fluid/>
+                <label for="email">Email :</label>
+              </IftaLabel>
+              <p-message v-if="registerErrors.email" severity="error">
+                {{ registerErrors.email }}
+              </p-message>
+            </div>
+            <div class="form">
+              <IftaLabel>
+                <Password id="register-password" v-model="passwordRegister" toggleMask required fluid/>
+                <label for="password">Mot de passe :</label>
+              </IftaLabel>
+            </div>
+            <Button type="button" label="Cancel" severity="secondary" class="p-button-text" @click="visible = false"></Button>
+            <Button label="S'inscrire" type="submit" class="p-button-primary" />
+          </form>
+        </div>
+      </Dialog>
     </div>
   </div>
 </template>

src/views/Products.vue

@@ -268,11 +268,11 @@ try {
 
 <template>
   <div>
-    <h2>Tableau de bord</h2>
+    <h2>Gérer les produits</h2>
     <div class="register form-container">
-      <Button label="Crée un nouveau produit" @click="visible = true" />
+      <Button class="create-btn" icon="pi pi-arrow-up-right-and-arrow-down-left-from-center" label="Crée un nouveau produit" @click="visible = true" />
       <Dialog v-model:visible="visible" modal header="Nouveau Produit" :style="{ width: '25rem' }">
-      <form @submit.prevent="create_product">
+      <form class="form-update-user" @submit.prevent="create_product">
         <div class="form">
           <IftaLabel>
             <InputText
@@ -303,10 +303,10 @@ try {
             <label for="register-reference">Reference :</label>
           </IftaLabel>
           <p-message
-            v-if="registerErrors.description"
+            v-if="registerErrors.reference"
             severity="error"
           >
-            {{ registerErrors.description }}
+            {{ registerErrors.reference }}
           </p-message>
         </div>
 
@@ -339,6 +339,12 @@ try {
             />
             <label for="register-quantity">Quantité :</label>
           </IftaLabel>
+          <p-message
+            v-if="registerErrors.quantity"
+            severity="error"
+          >
+            {{ registerErrors.quantity }}
+          </p-message>
         </div>
 
         <div class="form">
@@ -361,7 +367,18 @@ try {
               <label for="register-stock-limit">Alerte en dessous de :</label>
           </IftaLabel>
           </InputGroup>
+          <p-message
+            v-if="registerErrors.alert_enabled"
+            severity="error">
+            {{ registerErrors.alert_enabled }}
+          </p-message>
+          <p-message
+            v-if="registerErrors.stock_limit"
+            severity="error">
+            {{ registerErrors.stock_limit }}
+          </p-message>
         </div>
+        
         <div class="form">
           <IftaLabel>
               <MultiSelect
@@ -375,6 +392,11 @@ try {
                 ></MultiSelect>
                 <label for="register-warehouses">Entrepôt :</label>
           </IftaLabel>
+          <p-message
+            v-if="registerErrors.warehouses"
+            severity="error">
+            {{ registerErrors.warehouses }}
+          </p-message>
         </div>
         <div class="form">
           <FileUpload
@@ -388,47 +410,21 @@ try {
             :chooseLabel="'Choisir une image'"
             @uploader="handleFileUpload($event,true)" 
             />
-              <div v-if="b64Img">
-                <img :src="b64Img" alt="Image" style="width: 6rem">
-                <Button icon="pi pi-times" severity="secondary" @click="resetForms()"/>
-              </div>
-        </div>
-        <div class="alert">
-          <p-message
-            v-if="registerErrors.alert_enabled"
-            severity="error">
-            {{ registerErrors.alert_enabled }}
-          </p-message>
-          <p-message
-            v-if="registerErrors.stock_limit"
-            severity="error">
-            {{ registerErrors.stock_limit }}
-          </p-message>
             <p-message
             v-if="registerErrors.image"
             severity="error">
             {{ registerErrors.image }}
             </p-message>
-          <p-message
-            v-if="registerErrors.warehouses"
-            severity="error">
-            {{ registerErrors.warehouses }}
-          </p-message>
-          <p-message
-            v-if="registerErrors.quantity"
-            severity="error"
-          >
-            {{ registerErrors.quantity }}
-          </p-message>
-          <p-message
-            v-if="registerErrors.reference"
-            severity="error"
-          >
-            {{ registerErrors.reference }}
-          </p-message>
         </div>
-        <Button type="button" label="Cancel" severity="secondary" class="p-button-text" @click="visible = false" autofocus />
+
+        <div class="form-img-adds" v-if="b64Img">
+          <img :src="b64Img" alt="Image">
+          <Button class="p-button-override" icon="pi pi-times" severity="secondary" @click="resetForms()"/>
+        </div>
+
+        <Button type="button" icon="pi pi-ban" label="Cancel" severity="secondary" class="p-button-text" @click="visible = false" autofocus />
         <Button
+        icon="pi pi-check"
           label="Créer"
           type="submit"
           class="p-button-primary"

src/views/Warehouses.vue

@@ -131,10 +131,9 @@ onMounted(async () => {
     <div>
         <h2>Gérer les entrepôts</h2>
 
-        <Button label="Crée un nouvel entrepôt" @click="visible = true"></Button>
+        <Button class="create-btn" icon="pi pi-arrow-up-right-and-arrow-down-left-from-center" label="Crée un nouvel entrepôt" @click="visible = true"></Button>
         <Dialog v-model:visible="visible" modal header="Nouvel Entrepôt" :style="{ width: '25rem' }">
-        <div class="register form-container">
+            <form class="form-update-user" @submit.prevent="create_warehouse">
-            <form @submit.prevent="create_warehouse">
                 <div class="form">
                     <IftaLabel>
                         <InputText name="register-name" type="text" id="register-name" v-model="warehouseName" required fluid/>
@@ -158,10 +157,9 @@ onMounted(async () => {
                     </IftaLabel>
                     <p-message v-if="registerErrors.max_capacity" severity="error">{{ registerErrors.max_capacity }}</p-message>
                 </div>
-                <Button type="button" label="Cancel" severity="secondary" class="p-button-text" @click="visible = false"></Button>
+                <Button type="button" icon="pi pi-ban" label="Cancel" severity="secondary" class="p-button-text" @click="visible = false"></Button>
-                <Button type="submit" label="Créer" class="p-button-primary" @click="visible = false" />
+                <Button type="submit" icon="pi pi-check" label="Créer" class="p-button-primary" @click="visible = false" />
             </form>
-        </div>
         </Dialog>
 
         <DataTable v-model:editingRows="editingRows" editMode="row" dataKey="id" @row-edit-save="onRowEditSave" :value="warehouses" tableStyle="min-width: 50rem" removableSort>
@@ -198,7 +196,6 @@ onMounted(async () => {
             
             <Column field="actual_capacity" header="Capacité actuelle" editor="false" sortable />
 
-
             <Column editor="true">
                 <template #editor="slotProps">
                     <Button icon="pi pi-times" class="p-button-rounded p-button-danger" @click="removeWarehouse(slotProps.data.id)" />