Client - display conditions required for registration

fittrackee_client/src/components/Common/PasswordInput.vue

@@ -12,6 +12,11 @@
     />
     <div class="show-password" @click="togglePassword">
       {{ $t(`user.${showPassword ? 'HIDE' : 'SHOW'}_PASSWORD`) }}
+      <i
+        class="fa"
+        :class="`fa-eye${showPassword ? '-slash' : ''}`"
+        aria-hidden="true"
+      />
     </div>
   </div>
 </template>
@@ -67,8 +72,9 @@
     .show-password {
       font-style: italic;
       font-size: 0.85em;
+      text-align: right;
       margin-top: -0.75 * $default-margin;
-      padding-left: $default-padding;
+      padding-right: $default-padding;
       cursor: pointer;
     }
   }

fittrackee_client/src/components/User/UserAuthForm.vue

@@ -33,6 +33,10 @@
               v-model="formData.username"
               :placeholder="$t('user.USERNAME')"
             />
+            <div v-if="action === 'register'" class="form-info">
+              <i class="fa fa-info-circle" aria-hidden="true" />
+              {{ $t('user.USERNAME_INFO') }}
+            </div>
             <input
               v-if="action !== 'reset'"
               id="email"
@@ -41,12 +45,15 @@
               @invalid="invalidateForm"
               type="email"
               v-model="formData.email"
-              :placeholder="
-                action === 'reset-request'
-                  ? $t('user.ENTER_EMAIL')
-                  : $t('user.EMAIL')
-              "
+              :placeholder="$t('user.EMAIL')"
             />
+            <div
+              v-if="['reset-request', 'register'].includes(action)"
+              class="form-info"
+            >
+              <i class="fa fa-info-circle" aria-hidden="true" />
+              {{ $t('user.EMAIL_INFO') }}
+            </div>
             <PasswordInput
               v-if="action !== 'reset-request'"
               :disabled="registration_disabled"
@@ -60,6 +67,14 @@
               @updatePassword="updatePassword"
               @passwordError="invalidateForm"
             />
+
+            <div
+              v-if="['reset', 'register'].includes(action)"
+              class="form-info"
+            >
+              <i class="fa fa-info-circle" aria-hidden="true" />
+              {{ $t('user.PASSWORD_INFO') }}
+            </div>
             <PasswordStrength
               v-if="['reset', 'register'].includes(action)"
               :password="formData.password"
@@ -219,6 +234,12 @@
         font-style: italic;
         padding: 0 $default-padding;
       }
+      .form-info {
+        color: var(--alert-color);
+        font-size: 0.8em;
+        margin-top: -0.2 * $default-margin;
+        padding: 0 $default-padding * 1.5;
+      }
 
       button {
         margin: $default-margin;

fittrackee_client/src/locales/en/user.json

@@ -3,7 +3,7 @@
   "ALREADY_HAVE_ACCOUNT": "Already have an account?",
   "CONFIRM_ACCOUNT_DELETION": "Are you sure you want to delete your account? All data will be deleted, this cannot be undone",
   "EMAIL": "Email",
-  "ENTER_EMAIL": "Enter an email address",
+  "EMAIL_INFO": "Enter a valid email address.",
   "ENTER_PASSWORD": "Enter a password",
   "HIDE_PASSWORD": "hide password",
   "INVALID_TOKEN": "Invalid token, please request a new password reset.",
@@ -11,6 +11,7 @@
   "LOGIN": "Login",
   "LOGOUT": "Logout",
   "PASSWORD": "Password",
+  "PASSWORD_INFO": "At least 8 characters required.",
   "PASSWORD_FORGOTTEN": "Forgot password?",
   "PASSWORD_RESET": "Password reset",
   "PASSWORD_SENT_EMAIL_TEXT": "Check your email. If your address is in our database, you'll received an email with a link to reset your password.",
@@ -86,5 +87,6 @@
   "RESET_PASSWORD": "Reset your password",
   "SHOW_PASSWORD": "show password",
   "USER_PICTURE": "user picture",
-  "USERNAME": "Username"
+  "USERNAME": "Username",
+  "USERNAME_INFO": "3 to 30 characters required, only alphanumeric characters and the underscore character \"_\" allowed."
 }

fittrackee_client/src/locales/fr/user.json

@@ -3,7 +3,7 @@
   "ALREADY_HAVE_ACCOUNT": "Vous avez déjà un compte ?",
   "CONFIRM_ACCOUNT_DELETION": "Etes-vous sûr de vouloir supprimer votre compte ? Toutes les données seront définitivement effacés.",
   "EMAIL": "Email",
-  "ENTER_EMAIL": "Saisir une adresse email",
+  "EMAIL_INFO": "Saisir une adresse email valide.",
   "ENTER_PASSWORD": "Saisir un mot de passe",
   "HIDE_PASSWORD": "masquer le mot de passe",
   "INVALID_TOKEN": "Jeton invalide, veullez demander une nouvelle réinitialisation de mot de passe.",
@@ -11,6 +11,7 @@
   "LOGIN": "Se connecter",
   "LOGOUT": "Se déconnecter",
   "PASSWORD": "Mot de passe",
+  "PASSWORD_INFO": "8 caractères minimum.",
   "PASSWORD_FORGOTTEN": "Mot de passe oublié ?",
   "PASSWORD_RESET": "Réinitialisation du mot de passe",
   "PASSWORD_SENT_EMAIL_TEXT": "Vérifiez votre boite mail. Si vote adresse est dans notre base de données, vous recevrez un email avec un lien pour réinitialiser votre mot de passe.",
@@ -85,5 +86,6 @@
   "RESET_PASSWORD": "Réinitialiser votre mot de passe",
   "SHOW_PASSWORD": "afficher le mot de passe",
   "USER_PICTURE": "photo de l'utilisateur",
-  "USERNAME": "Nom d'utilisateur"
+  "USERNAME": "Nom d'utilisateur",
+  "USERNAME_INFO": "3 à 30 caractères requis, seuls les caractères alphanumériques et le caractère \"_\" sont autorisés."
 }