mirror of
				https://github.com/TeamPiped/Piped.git
				synced 2024-08-14 23:57:27 +00:00 
			
		
		
		
	Merge pull request #2802 from Bnyro/confirm-register
Register page: Add confirm password field and toggle to show passwords
This commit is contained in:
		
						commit
						2e98c72d08
					
				
					 2 changed files with 33 additions and 7 deletions
				
			
		| 
						 | 
				
			
			@ -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;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -162,7 +162,9 @@
 | 
			
		|||
    },
 | 
			
		||||
    "login": {
 | 
			
		||||
        "username": "Username",
 | 
			
		||||
        "password": "Password"
 | 
			
		||||
        "password": "Password",
 | 
			
		||||
        "password_confirm": "Confirm password",
 | 
			
		||||
        "passwords_incorrect": "Passwords don't match!"
 | 
			
		||||
    },
 | 
			
		||||
    "video": {
 | 
			
		||||
        "videos": "Videos",
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue