From aa12bffcbc09dfb9070a92232400c0d103d45c51 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 28 Nov 2021 16:33:49 +0100
Subject: [PATCH] feat: replace password comparison with password toggle

---
 src/views/user/Register.vue | 37 ++++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/views/user/Register.vue b/src/views/user/Register.vue
index a3a74da74..dbe5d4827 100644
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@@ -53,33 +53,20 @@
 						name="password"
 						:placeholder="$t('user.auth.passwordPlaceholder')"
 						required
-						type="password"
+						:type="passwordFieldType"
 						autocomplete="new-password"
 						v-model="credentials.password"
 						@keyup.enter="submit"
 						@focusout="validatePassword"
 					/>
+					<a @click="togglePasswordFieldType" class="password-field-type-toggle">
+						<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'"/>
+					</a>
 				</div>
 				<p class="help is-danger" v-if="!passwordValid">
 					{{ $t('user.auth.passwordRequired') }}
 				</p>
 			</div>
-			<div class="field">
-				<label class="label" for="passwordValidation">{{ $t('user.auth.passwordRepeat') }}</label>
-				<div class="control">
-					<input
-						class="input"
-						id="passwordValidation"
-						name="passwordValidation"
-						:placeholder="$t('user.auth.passwordPlaceholder')"
-						required
-						type="password"
-						autocomplete="new-password"
-						v-model="passwordValidation"
-						@keyup.enter="submit"
-					/>
-				</div>
-			</div>
 
 			<div class="field is-grouped">
 				<div class="control">
@@ -157,6 +144,13 @@ const everythingValid = computed(() => {
 		passwordValid.value
 })
 
+const passwordFieldType = ref('password')
+const togglePasswordFieldType = () => {
+	passwordFieldType.value = passwordFieldType.value === 'password'
+		? 'text'
+		: 'password'
+}
+
 async function submit() {
 	errorMessage.value = ''
 
@@ -171,3 +165,12 @@ async function submit() {
 	}
 }
 </script>
+
+<style scoped>
+.password-field-type-toggle {
+	position: absolute;
+	top: .5rem;
+	right: 1rem;
+	color: var(--grey-400);
+}
+</style>