vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: improve password component #1802

Merged
konrad merged 1 commits from dpschen/frontend:feature/feat-improve-password-component into main 2022-04-10 19:00:12 +00:00
Conversation 1 Commits 1 Files Changed 1 +15 -19
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')
dpschen commented 2022-04-10 11:13:40 +00:00
Review
Copy Link

Default ref field type is always undefined + type of initial value. So no need to explicity set.
Additionally if set the types should be the lower case version string and boolean

Default ref field type is always `undefined` + type of initial value. So no need to explicity set. Additionally if set the types should be the lower case version `string` and `boolean`
👍 1
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 !== ''
dpschen commented 2022-04-10 11:15:30 +00:00
Review
Copy Link

By using the useDebounceFn this way the returned function wouldn't be reused. Which is what you want, see: https://vueuse.org/shared/usedebouncefn/

By using the useDebounceFn this way the returned function wouldn't be reused. Which is what you want, see: https://vueuse.org/shared/usedebouncefn/
👍 1
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>