From 6ed65c34dd64e841bd0f7ff9531c5067f9b9a0c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o?= <cdf.leo.merkel@gmail.com>
Date: Fri, 7 Feb 2025 03:09:48 +0100
Subject: [PATCH] =?UTF-8?q?80%=20style=20done,=20shino=20il=20est=203h10?=
 =?UTF-8?q?=20=C3=A0=20l'aide..?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue              |   4 +-
 src/style.css            |  36 ++++++++++++
 src/views/Login.vue      | 116 +++++++++++++++++++--------------------
 src/views/Products.vue   | 100 ++++++++++++++++-----------------
 src/views/Warehouses.vue |  11 ++--
 5 files changed, 148 insertions(+), 119 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e2ff914..494598f 100644
--- a/src/App.vue
+++ b/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',
diff --git a/src/style.css b/src/style.css
index 4e70e64..95580e1 100644
--- a/src/style.css
+++ b/src/style.css
@@ -59,4 +59,40 @@ h1 {
 .fieldset-list-wh-p{
   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;
 }
\ No newline at end of file
diff --git a/src/views/Login.vue b/src/views/Login.vue
index fc895c5..2776b08 100644
--- a/src/views/Login.vue
+++ b/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 v-if="isAuth" class="form-container" style="display: flex;flex-direction: column; justify-content: center; align-items: center;">
-      <p v-if="userInfo">Bienvenue, {{ userInfo.username }}</p>
+  <div class="login-container">
+    <div v-if="isAuth" class="registered-container">
+      <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">
-        Modifier l'utilisateur
-      </Button>
-      <Dialog header="Modifier l'utilisateur" v-model:visible="showDialog" :style="{ width: '30vw' }" modal:draggable="false">
-        <form @submit.prevent="modify_user">
+      <Button label="Modifier l'utilisateur" icon="pi pi-user-edit" @click="showDialog = true"></Button>
+      <Dialog header="Modifier l'utilisateur" v-model:visible="showDialog" :style="{ width: '30vw' }" modal>
+        <form class="form-update-user" @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" severity="secondary" class="p-button-text" @click="showDialog = false">
-              Annuler
-            </Button>
-            <Button label="Enregistrer" type="submit" class="p-button-primary">
-              Enregistrer
-            </Button>
-          </div>
+          <Button label="Annuler" icon="pi pi-ban" severity="secondary" class="p-button-text" @click="showDialog = false"></Button>
+          <Button label="Enregistrer" icon="pi pi-address-book" type="submit" class="p-button-primary"></Button>
         </form>
       </Dialog>
     </div>
 
-    <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é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">
+    <div v-if="!isAuth" class="account-container">
+      <div class="account-logon account-login">
         <h2>Se connecter :</h2>
-        <form @submit.prevent="login_user">
+        <form class="form-update-user" @submit.prevent="login_user">
           <div class="form">
-            <label for="username">Nom d'utilisateur :</label>
-            <InputText type="text" id="login-username" v-model="usernameLogin" required />
+            <IftaLabel>
+              <InputText type="text" id="login-username" v-model="usernameLogin" required fluid/>
+              <label for="username">Nom d'utilisateur :</label>
+            </IftaLabel>
             <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 />
+            <IftaLabel>
+              <Password id="login-password" v-model="passwordLogin" toggleMask :feedback="false" required fluid />
+              <label for="password">Mot de passe :</label>
+            </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>
diff --git a/src/views/Products.vue b/src/views/Products.vue
index f612dbd..49ccea3 100644
--- a/src/views/Products.vue
+++ b/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,60 +392,39 @@ try {
                 ></MultiSelect>
                 <label for="register-warehouses">Entrepôt :</label>
           </IftaLabel>
-        </div>
-          <div class="form">
-              <FileUpload
-                name="productImage"
-                accept="image/*" 
-                mode="basic"
-                customUpload
-                :auto="true"
-                :multiple="false"
-                :maxFileSize="1000000"
-                :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">
+          <FileUpload
+            name="productImage"
+            accept="image/*" 
+            mode="basic"
+            customUpload
+            :auto="true"
+            :multiple="false"
+            :maxFileSize="1000000"
+            :chooseLabel="'Choisir une image'"
+            @uploader="handleFileUpload($event,true)" 
+            />
+            <p-message
+            v-if="registerErrors.image"
+            severity="error">
+            {{ registerErrors.image }}
+            </p-message>
+        </div>
+
+        <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"
diff --git a/src/views/Warehouses.vue b/src/views/Warehouses.vue
index fb4ed61..f600ca5 100644
--- a/src/views/Warehouses.vue
+++ b/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 @submit.prevent="create_warehouse">
+            <form class="form-update-user" @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="submit" label="Créer" class="p-button-primary" @click="visible = false" />
+                <Button type="button" icon="pi pi-ban" label="Cancel" severity="secondary" class="p-button-text" @click="visible = false"></Button>
+                <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)" />