local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: improve password component (#1802)

Browse source 
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>
This commit is contained in:
Dominik Pschenitschni 2022-04-10 19:00:11 +00:00 committed by konrad
parent 53c669b108
commit ed8eb84617
1 changed files with 15 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/components/input/password.vue
View file

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