diff options
Diffstat (limited to 'core')
| -rw-r--r-- | core/css/guest.css | 11 | ||||
| -rw-r--r-- | core/src/components/login/LoginForm.vue | 50 |
2 files changed, 37 insertions, 24 deletions
diff --git a/core/css/guest.css b/core/css/guest.css index d859e121f2d..6608a18992d 100644 --- a/core/css/guest.css +++ b/core/css/guest.css @@ -296,17 +296,6 @@ input[type='password'].password-with-toggle, input[type='text'].password-with-to width: 219px; padding-right: 40px; } -.toggle-password { - position: absolute; - top: 1px; - right: 5px; - padding: 14px; - height: 16px; -} -.toggle-password:hover, -.toggle-password:focus { - opacity: .6; -} input.login { width: 260px; height: 50px; 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> |