Merge pull request #2802 from Bnyro/confirm-register

Register page: Add confirm password field and toggle to show passwords
This commit is contained in:
Bnyro 2023-08-14 10:46:44 +02:00 committed by GitHub
commit 2e98c72d08
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 7 deletions

View file

@ -1,12 +1,12 @@
<template>
<h1 v-t="'titles.register'" class="my-4 text-center font-bold" />
<hr />
<div class="text-center">
<form class="children:pb-3">
<div class="flex justify-center text-center">
<form class="items-center px-3 children:pb-3">
<div>
<input
v-model="username"
class="input"
class="input w-full"
type="text"
autocomplete="username"
:placeholder="$t('login.username')"
@ -14,16 +14,33 @@
@keyup.enter="register"
/>
</div>
<div>
<div class="flex justify-center">
<input
v-model="password"
class="input"
type="password"
class="input w-full"
:type="showPassword ? 'text' : 'password'"
autocomplete="password"
:placeholder="$t('login.password')"
:aria-label="$t('login.password')"
@keyup.enter="register"
/>
<button type="button" class="btn ml-2" @click="showPassword = !showPassword">
<div class="i-fa6-solid:eye" />
</button>
</div>
<div class="flex justify-center">
<input
v-model="passwordConfirm"
class="input w-full"
:type="showConfirmPassword ? 'text' : 'password'"
autocomplete="password"
:placeholder="$t('login.password_confirm')"
:aria-label="$t('login.password_confirm')"
@keyup.enter="register"
/>
<button type="button" class="btn ml-2" @click="showConfirmPassword = !showConfirmPassword">
<div class="i-fa6-solid:eye" />
</button>
</div>
<div>
<a v-t="'titles.register'" class="btn w-auto" @click="register" />
@ -52,6 +69,9 @@ export default {
return {
username: null,
password: null,
passwordConfirm: null,
showPassword: false,
showConfirmPassword: false,
showUnsecureRegisterDialog: false,
forceUnsecureRegister: false,
};
@ -68,6 +88,10 @@ export default {
methods: {
register() {
if (!this.username || !this.password) return;
if (this.password != this.passwordConfirm) {
alert(this.$t("login.passwords_incorrect"));
return;
}
if (isEmail(this.username) && !this.forceUnsecureRegister) {
this.showUnsecureRegisterDialog = true;
return;

View file

@ -162,7 +162,9 @@
},
"login": {
"username": "Username",
"password": "Password"
"password": "Password",
"password_confirm": "Confirm password",
"passwords_incorrect": "Passwords don't match!"
},
"video": {
"videos": "Videos",