From 8aaac57ee62117d9f121ff45ca4973b72479d050 Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Thu, 7 Jul 2022 00:08:52 +0000
Subject: Use Button component to show password for improved accessibility

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 core/css/guest.css                      | 11 --------
 core/src/components/login/LoginForm.vue | 50 ++++++++++++++++++++++++---------
 2 files changed, 37 insertions(+), 24 deletions(-)

(limited to 'core')

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>
-- 
cgit v1.2.3