Client - display conditions required for registration

This commit is contained in:
Sam 2022-02-26 18:13:20 +01:00
parent 80198f1dac
commit 5831a70d4b
4 changed files with 41 additions and 10 deletions

View File

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

View File

@ -33,6 +33,10 @@
v-model="formData.username" v-model="formData.username"
:placeholder="$t('user.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 <input
v-if="action !== 'reset'" v-if="action !== 'reset'"
id="email" id="email"
@ -41,12 +45,15 @@
@invalid="invalidateForm" @invalid="invalidateForm"
type="email" type="email"
v-model="formData.email" v-model="formData.email"
:placeholder=" :placeholder="$t('user.EMAIL')"
action === 'reset-request'
? $t('user.ENTER_EMAIL')
: $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 <PasswordInput
v-if="action !== 'reset-request'" v-if="action !== 'reset-request'"
:disabled="registration_disabled" :disabled="registration_disabled"
@ -60,6 +67,14 @@
@updatePassword="updatePassword" @updatePassword="updatePassword"
@passwordError="invalidateForm" @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 <PasswordStrength
v-if="['reset', 'register'].includes(action)" v-if="['reset', 'register'].includes(action)"
:password="formData.password" :password="formData.password"
@ -219,6 +234,12 @@
font-style: italic; font-style: italic;
padding: 0 $default-padding; 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 { button {
margin: $default-margin; margin: $default-margin;

View File

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

View File

@ -3,7 +3,7 @@
"ALREADY_HAVE_ACCOUNT": "Vous avez déjà un compte ?", "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.", "CONFIRM_ACCOUNT_DELETION": "Etes-vous sûr de vouloir supprimer votre compte ? Toutes les données seront définitivement effacés.",
"EMAIL": "Email", "EMAIL": "Email",
"ENTER_EMAIL": "Saisir une adresse email", "EMAIL_INFO": "Saisir une adresse email valide.",
"ENTER_PASSWORD": "Saisir un mot de passe", "ENTER_PASSWORD": "Saisir un mot de passe",
"HIDE_PASSWORD": "masquer le mot de passe", "HIDE_PASSWORD": "masquer le mot de passe",
"INVALID_TOKEN": "Jeton invalide, veullez demander une nouvelle réinitialisation de mot de passe.", "INVALID_TOKEN": "Jeton invalide, veullez demander une nouvelle réinitialisation de mot de passe.",
@ -11,6 +11,7 @@
"LOGIN": "Se connecter", "LOGIN": "Se connecter",
"LOGOUT": "Se déconnecter", "LOGOUT": "Se déconnecter",
"PASSWORD": "Mot de passe", "PASSWORD": "Mot de passe",
"PASSWORD_INFO": "8 caractères minimum.",
"PASSWORD_FORGOTTEN": "Mot de passe oublié ?", "PASSWORD_FORGOTTEN": "Mot de passe oublié ?",
"PASSWORD_RESET": "Réinitialisation du mot de passe", "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.", "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", "RESET_PASSWORD": "Réinitialiser votre mot de passe",
"SHOW_PASSWORD": "afficher le mot de passe", "SHOW_PASSWORD": "afficher le mot de passe",
"USER_PICTURE": "photo de l'utilisateur", "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."
} }