- Fixed the way components get store data

client/src/pages/user/login-page.vue

@@ -3,7 +3,9 @@
     <section class="d-flex justify-content-center align-items-center">
       <main>
         <div class="title font-display mb-3">Connexion</div>
+
         <form @submit="logUser">
+
           <div class="form-group">
             <label for="email">Addresse mail</label>
             <input
@@ -11,10 +13,26 @@
               type="email"
               id="email"
               class="form-control"
+              :class="{
+                'is-invalid': errors.mailEmpty || errors.login,
+                'is-valid': submitted && !errors.mailEmpty }"
               placeholder="john.doe@gmail.com"
               autocomplete="email">
-            <small class="form-text text-muted">Votre addresse mail nous servira principalement à vous identifier et à retrouver votre compte si vous oubliez vos informations de connexion.</small>
+
+            <small
+              v-if="!errors.mailEmpty"
+              class="form-text text-muted"
+            >
+              Votre addresse mail nous servira principalement à vous identifier et à retrouver votre compte si vous oubliez vos informations de connexion.
+            </small>
+            <small
+              v-if="errors.mailEmpty"
+              class="form-text text-danger"
+            >
+              Veuillez renseigner une adresse mail.
+            </small>
           </div>
+
           <div class="form-group">
             <label for="password">Mot de passe</label>
             <input
@@ -22,11 +40,46 @@
               type="password"
               id="password"
               class="form-control"
+              :class="{
+                'is-invalid': errors.passwordEmpty || errors.login,
+                'is-valid': submitted && !errors.passwordEmpty }"
               autocomplete="current-password">
+            <small
+              v-if="!errors.passwordEmpty"
+              class="form-text text-muted"
+            >
+              Nous vous conseillons d'utiliser un mot de passe unique pour cette application seulement.
+            </small>
+            <small
+              v-if="errors.passwordEmpty"
+              class="form-text text-danger"
+            >
+              Veuillez renseigner un mot de passe.
+            </small>
           </div>
+
+          <div class="form-check">
+            <input
+              type="checkbox"
+              v-model="remember_me"
+              id="remember-me"
+              class="form-check-input">
+            <label
+              class="form-check-label"
+              for="remember-me"
+            >
+              Rester connecté
+            </label>
+          </div>
+
+          <div class="form-group">
+            <small v-if="errors.login" class="text-danger">{{ errors.login }}</small>
+          </div>
+
           <button type="submit" class="btn btn-primary">Connexion</button>
           <router-link :to="'/inscription'" class="btn btn-dark">Inscription</router-link>
-          <small class="form-text text-muted">Vous avez oublié votre mot de passe ? Cliquez-ici pour le changer !</small>
+          <small class="form-text text-muted">Mot de passe oublié ? <a href="#">Vous pouvez le changer ici !</a></small>
+
         </form>
       </main>
     </section>
@@ -41,26 +94,53 @@ export default {
       return {
         email: "",
         password: "",
+        remember_me: false,
         submitted: false,
+
         errors: {
-          login: ""
+          mailEmpty: "",
+          passwordEmpty: "",
+          login: "",
         }
       }
     },
     methods: {
       async logUser(e) {
 
+        this.submitted = true;
+
+        this.errors = this.resetErrors();
+
         let userInput = {
           "mail": this.email,
           "password": this.password
         };
 
-        this.$store.dispatch('user_login', userInput)
-          .then(() => {
-            this.$router.push('/profil');
-          })
+        if (this.email && this.password) {
+          this.$store.dispatch('user_login', userInput)
+            .then(() => {
+              this.$router.push('/profil');
+            })
+            .catch(() => {
+              this.errors.login = "Erreur d'authentification. Les identifiants ne correspondent pas."
+            });
+        } else {
+          if (!userInput.mail) {
+            this.errors.mailEmpty = "Veuillez entrer une addresse mail valide."
+          }
+          if (!userInput.password) {
+            this.errors.passwordEmpty = "Veuillez entrer un mot de passe."
+          }
+        }
 
         e.preventDefault();
+      },
+      resetErrors() {
+        return {
+          mailEmpty: "",
+          passwordEmpty: "",
+          login: "",
+        }
       }
     }
 }