TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2802 from Bnyro/confirm-register

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/RegisterPage.vue
View file

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

4
src/locales/en.json
View file

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