better error messages handling

frontend/src/views/Login.vue

@@ -5,6 +5,9 @@
             <div class="form-content">
                 <text-input id="login" label="Pseudo"/>
                 <pwd-input id="password" label="Mot de passe"/>
+                <error-message id="error-empty"  errormessage="Tous les champs ne sont pas remplis." v-show="this.showNotFilledError"/>
+                <error-message id="error-credentials"  errormessage="Identifiants incorrects, veuillez réessayer." v-show="this.showCredentialsError"/>
+                <error-message id="error-banned"  errormessage="Votre compte est banni." v-show="this.showBanError"/>
             </div>
             <div class="submit-buttons">
                 <svg-button id="validate" svg="/icons/validate.svg"/>
@@ -20,13 +23,15 @@ import PageTitle from '@/components/PageTitle.vue'
 import SvgButton from '@/components/SvgButton.vue'
 import TextInput from '@/components/form/TextInput.vue'
 import PwdInput from '@/components/form/PwdInput.vue'
+import ErrorMessage from '@/components/form/ErrorMessage.vue'
 export default {
     name: 'Login',
     components: {
         PageTitle,
         SvgButton,
         TextInput,
-        PwdInput
+        PwdInput,
+        ErrorMessage
     },
     beforeCreate () {
         if (localStorage.getItem('user') != null) {
@@ -36,10 +41,15 @@ export default {
     data() {
         return {
             showNotFilledError : false,
+            showCredentialsError : false,
+            showBanError : false
         }
     },
     methods: {
         onSubmit: async function(event){
+            
+            this.showCredentialsError = false;
+            this.showBanError = false;
             if (event.submitter.id=='back') {
                 this.$router.push('/');
             }
@@ -73,6 +83,20 @@ export default {
                     localStorage.setItem('user', JSON.stringify(json));
                     this.$router.push('lobby');
                 }
+                else{
+                    switch (response.status) {
+                        case 422:
+                            this.showCredentialsError = true;
+                            break;
+                        case 402:
+                            this.showBanError = true;
+                            break;
+                    
+                        default:
+                            this.showCredentialsError = true;
+                            break;
+                    }
+                }
             }
         }
     }

frontend/src/views/Register.vue

@@ -10,7 +10,7 @@
                 <error-message id="error-password" errormessage="Les mots de passe ne correspondent pas." v-show="this.showPwdError"/>
                 <error-message id="error-mail" errormessage="Le mail rentré n'est pas valide" v-show="this.showMailError"/>
                 <error-message id="error-back"  errormessage="Ce pseudo est déjà pris." v-show="this.showPseudoError"/>
-                <error-message id="error-back"  errormessage="Tous les champs obligatoires ne sont pas remplis." v-show="this.showNotFilledError"/>
+                <error-message id="error-empty"  errormessage="Tous les champs obligatoires ne sont pas remplis." v-show="this.showNotFilledError"/>
                 
             </div>
             <div class="submit-buttons">