diff options
author | Christopher Ng <chrng8@gmail.com> | 2022-07-07 00:08:52 +0000 |
---|---|---|
committer | Christopher Ng <chrng8@gmail.com> | 2022-07-07 17:46:49 +0000 |
commit | 8aaac57ee62117d9f121ff45ca4973b72479d050 (patch) | |
tree | 562e8340d4089765631fe080c8fb339d8422c5de /core/src | |
parent | 744f1dd5638c7924be9c19621033d67991c65fd2 (diff) | |
download | nextcloud-server-8aaac57ee62117d9f121ff45ca4973b72479d050.tar.gz nextcloud-server-8aaac57ee62117d9f121ff45ca4973b72479d050.zip |
Use Button component to show password for improved accessibility
Signed-off-by: Christopher Ng <chrng8@gmail.com>
Diffstat (limited to 'core/src')
-rw-r--r-- | core/src/components/login/LoginForm.vue | 50 |
1 files changed, 37 insertions, 13 deletions
diff --git a/core/src/components/login/LoginForm.vue b/core/src/components/login/LoginForm.vue index 9114c0a728a..3fa02d5fa0b 100644 --- a/core/src/components/login/LoginForm.vue +++ b/core/src/components/login/LoginForm.vue @@ -84,9 +84,15 @@ required> <label for="password" class="infield">{{ t('Password') }}</label> - <a href="#" class="toggle-password" @click.stop.prevent="togglePassword"> - <img :src="toggleIcon" :alt="t('core', 'Toggle password visibility')"> - </a> + <Button class="toggle-password" + type="tertiary-no-background" + :aria-label="isPasswordHidden ? t('core', 'Show password') : t('core', 'Hide password')" + @click.stop.prevent="togglePassword"> + <template #icon> + <Eye v-if="isPasswordHidden" :size="20" /> + <EyeOff v-else :size="20" /> + </template> + </Button> </p> <LoginButton :loading="loading" /> @@ -128,15 +134,24 @@ <script> import jstz from 'jstimezonedetect' +import { generateUrl, imagePath } from '@nextcloud/router' + +import Button from '@nextcloud/vue/dist/Components/Button' +import Eye from 'vue-material-design-icons/Eye' +import EyeOff from 'vue-material-design-icons/EyeOff' + import LoginButton from './LoginButton' -import { - generateUrl, - imagePath, -} from '@nextcloud/router' export default { name: 'LoginForm', - components: { LoginButton }, + + components: { + Button, + Eye, + EyeOff, + LoginButton, + }, + props: { username: { type: String, @@ -167,6 +182,7 @@ export default { default: false, }, }, + data() { return { loading: false, @@ -177,6 +193,7 @@ export default { passwordInputType: 'password', } }, + computed: { apacheAuthFailed() { return this.errors.indexOf('apacheAuthFailed') !== -1 @@ -190,16 +207,17 @@ export default { userDisabled() { return this.errors.indexOf('userdisabled') !== -1 }, - toggleIcon() { - return imagePath('core', 'actions/toggle.svg') - }, loadingIcon() { return imagePath('core', 'loading-dark.gif') }, loginActionUrl() { return generateUrl('login') }, + isPasswordHidden() { + return this.passwordInputType === 'password' + }, }, + mounted() { if (this.username === '') { this.$refs.user.focus() @@ -207,6 +225,7 @@ export default { this.$refs.password.focus() } }, + methods: { togglePassword() { if (this.passwordInputType === 'password') { @@ -226,6 +245,11 @@ export default { } </script> -<style scoped> - +<style lang="scss" scoped> +.toggle-password { + position: absolute; + top: 6px; + right: 10px; + color: var(--color-text-lighter); +} </style> |