- Fixed the way components get store data

client/src/pages/spells/spells-page.vue

@@ -6,14 +6,14 @@
 </template>
 
 <script>
-  import SpellsList from "~/components/spells/spells-list"
+import SpellsList from "~/components/spells/spells-list"
 
-  export default {
-    name: 'spells-page',
-    components: {
-        'spell-list': SpellsList,
-    }
+export default {
+  name: 'spells-page',
+  components: {
+    'spell-list': SpellsList,
   }
+}
 </script>
 
 <style lang="scss"></style>

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: "",
+        }
       }
     }
 }

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

@@ -1,20 +1,35 @@
 <template>
-  <div class="container-fluid p-4" id="spell-container">
-    <div class="display-3 font-display mb-3">
-      <span class="username">{{ user_token }}</span>
-      <!-- <span v-if="user.verified" class="verified"><i class="mad">check_circle</i></span> -->
-    </div>
+  <div
+    v-if="user"
+    class="container-fluid p-4"
+    id="spell-container"
+  >
+    <h2 class="display-3 font-display mb-3">
+      <span class="username">{{ user.name }}</span>
+      <span
+        v-if="user.verified"
+        class="verified"
+      >
+        <i class="mad">check_circle</i>
+      </span>
+    </h2>
+
   </div>
 </template>
 
 <script>
+
 export default {
   name: 'profile-page',
-  computed: {
-    user_token() {
-      return this.$store.getters.getUserToken
+  data() {
+    return {
     }
   },
+  computed: {
+    user() {
+      return this.$store.getters.getUserProfile
+    }
+  }
 }
 </script>
 

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

@@ -17,7 +17,7 @@
                             placeholder="John Doe"
                             autocomplete="username">
                         <small v-if="!errors.name" class="form-text text-muted">Vous pouvez changer votre pseudo à tout moment.</small>
-                        <small v-if="errors.name" class="text-danger">{{ errors.name }}</small>
+                        <small v-if="errors.name" class="form-text text-danger">{{ errors.name }}</small>
                     </div>
                     <div class="form-group">
                         <label for="email">Addresse mail</label>
@@ -32,7 +32,7 @@
                             placeholder="john.doe@gmail.com"
                             autocomplete="email">
                         <small v-if="!errors.email" 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.email" class="text-danger">{{ errors.email }}</small>
+                        <small v-if="errors.email" class="form-text text-danger">{{ errors.email }}</small>
                     </div>
                     <div class="form-group">
                         <label for="password">Mot de passe</label>
@@ -58,8 +58,8 @@
                             class="form-control"
                             autocomplete="password-verification">
                         <small v-if="!errors.password && !errors.password_check" class="form-text text-muted">Votre mot de passe doit idéalement contenir des symboles ainsi que des lettres et des chiffres.</small>
-                        <small v-if="errors.password" class="text-danger">{{ errors.password }}</small>
-                        <small v-if="errors.password_check" class="text-danger">{{ errors.password_check }}</small>
+                        <small v-if="errors.password" class="form-text text-danger">{{ errors.password }}</small>
+                        <small v-if="errors.password_check" class="form-text text-danger">{{ errors.password_check }}</small>
                     </div>
                     <button type="submit" class="btn btn-dark">Inscription</button>
                 </form>