From ed8eb846179f06bcb7a00938ed0bb62e2d3451e0 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Date: Sun, 10 Apr 2022 19:00:11 +0000
Subject: [PATCH] feat: improve password component (#1802)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1802
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
---
 src/components/input/password.vue | 34 ++++++++++++++-----------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/components/input/password.vue b/src/components/input/password.vue
index eb73683d..d32bae9c 100644
--- a/src/components/input/password.vue
+++ b/src/components/input/password.vue
@@ -13,13 +13,13 @@
 			@focusout="validate"
 			@input="handleInput"
 		/>
-		<a
+		<BaseButton
 			@click="togglePasswordFieldType"
 			class="password-field-type-toggle"
 			:aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
 			v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')">
 			<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'"/>
-		</a>
+		</BaseButton>
 	</div>
 	<p class="help is-danger" v-if="!isValid">
 		{{ $t('user.auth.passwordRequired') }}
@@ -29,6 +29,7 @@
 <script lang="ts" setup>
 import {ref, watch} from 'vue'
 import {useDebounceFn} from '@vueuse/core'
+import BaseButton from '@/components/base/BaseButton.vue'
 
 const props = defineProps({
 	tabindex: String,
@@ -39,24 +40,19 @@ const props = defineProps({
 
 const emit = defineEmits(['submit', 'update:modelValue'])
 
-const passwordFieldType = ref<String>('password')
-const password = ref<String>('')
-const isValid = ref<Boolean>(!props.validateInitially)
+const passwordFieldType = ref('password')
+const password = ref('')
+const isValid = ref(!props.validateInitially)
 
 watch(
-	() => props.validateInitially,
-	(doValidate: Boolean) => {
-		if (doValidate) {
-			validate()
-		}
-	},
+	props.validateInitially,
+	() => props.validateInitially && validate(),
+	{immediate: true},
 )
 
-function validate() {
-	useDebounceFn(() => {
-		isValid.value = password.value !== ''
-	}, 100)()
-}
+const validate = useDebounceFn(() => {
+	isValid.value = password.value !== ''
+}, 100)
 
 function togglePasswordFieldType() {
 	passwordFieldType.value = passwordFieldType.value === 'password'
@@ -64,9 +60,9 @@ function togglePasswordFieldType() {
 		: 'password'
 }
 
-function handleInput(e) {
-	password.value = e.target.value
-	emit('update:modelValue', e.target.value)
+function handleInput(e: Event) {
+	password.value = (e.target as HTMLInputElement)?.value
+	emit('update:modelValue', password.value)
 }
 </script>