MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): keep password visible when tabbing from 'show password' into input

This commit is contained in:
upsiflu 2024-12-29 17:51:06 +01:00
parent f3da51bbe6
commit bb4fbd6e50
1 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
front/src/components/ui/Input.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref, useAttrs } from 'vue' import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import onKeyboardShortcut from '~/composables/onKeyboardShortcut'; import onKeyboardShortcut from '~/composables/onKeyboardShortcut';
@ -14,13 +14,17 @@ const { icon, placeholder, ...restProps } = defineProps<{
numeric?:true, numeric?:true,
}>() }>()
const isNumeric = restProps.numeric // TODO(A11y): Add `inputmode="numeric" pattern="[0-9]*"` to input if model type is number:
// https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
// const isNumeric = restProps.numeric
const showPassword = ref(false) const showPassword = ref(false)
onKeyboardShortcut('escape', () => showPassword.value = false) onKeyboardShortcut('escape', () => showPassword.value = false)
// TODO: Accept fallback $attrs: `const fallthroughAttrs = useAttrs()` // TODO: Accept fallback $attrs: `const fallthroughAttrs = useAttrs()`
// TODO: Implement `copy password` button?
const attributes = computed(() => ({ const attributes = computed(() => ({
...(restProps.password && !showPassword.value? {type:'password'} : {}), ...(restProps.password && !showPassword.value? {type:'password'} : {}),
...(restProps.search? {type:'search'} : {}), ...(restProps.search? {type:'search'} : {}),
@ -30,12 +34,6 @@ const attributes = computed(() => ({
const { t } = useI18n() const { t } = useI18n()
const model = defineModel<string|number>() const model = defineModel<string|number>()
const input = ref()
// TODO(A11y): Add `inputmode="numeric" pattern="[0-9]*"` to input if model type is number:
// https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
</script> </script>
<template> <template>
@ -48,7 +46,7 @@ const input = ref()
</span> </span>
<input <input
v-bind="attributes" v-bind="{...$attrs, ...attributes}"
v-model="model" v-model="model"
ref="input" ref="input"
:placeholder="placeholder" :placeholder="placeholder"
@ -82,7 +80,7 @@ const input = ref()
role="switch" role="switch"
type="button" type="button"
@click="showPassword = !showPassword" @click="showPassword = !showPassword"
@blur="showPassword = false" @blur="(e) => { console.log(e.relatedTarget); if (e.relatedTarget && 'value' in e.relatedTarget && e.relatedTarget.value === model) showPassword = showPassword; else showPassword = false; }"
class="input-right show-password" title="toggle visibility" class="input-right show-password" title="toggle visibility"
> >
<i class="bi bi-eye" /> <i class="bi bi-eye" />