feat(NcPasswordField): allow to set obfuscation state

Signed-off-by: Ferdinand Thiessen <[email protected]>

Author: susnux

src/components/NcPasswordField/NcPasswordField.vue

@@ -93,40 +93,17 @@ export default {
 ```
 </docs>
 
-<template>
-	<NcInputField v-bind="propsToForward"
-		ref="inputField"
-		v-model="modelValue"
-		:error="error || isValid === false"
-		:helper-text="helperText || internalHelpMessage"
-		:input-class="[inputClass, { 'password-field__input--secure-text': isPasswordHidden && asText }]"
-		:minlength="minlength ?? passwordPolicy?.minLength ?? 0"
-		:success="success || isValid === true"
-		:trailing-button-label="isPasswordHidden ? t('Show password') : t('Hide password')"
-		:type="isPasswordHidden && !asText ? 'password' : 'text'"
-		@trailing-button-click="isPasswordHidden = !isPasswordHidden">
-		<template v-if="!!$slots.icon" #icon>
-			<!-- @slot Leading icon -->
-			<slot name="icon" />
-		</template>
-		<template #trailing-button-icon>
-			<Eye v-if="isPasswordHidden" :size="18" />
-			<EyeOff v-else :size="18" />
-		</template>
-	</NcInputField>
-</template>
-
 <script setup lang="ts">
 import type { NcInputFieldProps } from '../NcInputField/NcInputField.vue'
 import type { Writable } from '../../utils/VueTypes.ts'
 
-import debounce from 'debounce'
+import { mdiEye, mdiEyeOff } from '@mdi/js'
 import axios from '@nextcloud/axios'
 import { getCapabilities } from '@nextcloud/capabilities'
 import { generateOcsUrl } from '@nextcloud/router'
+import debounce from 'debounce'
 import { computed, ref, useTemplateRef, watch } from 'vue'
-import Eye from 'vue-material-design-icons/Eye.vue'
-import EyeOff from 'vue-material-design-icons/EyeOff.vue'
+import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
 import NcInputField from '../NcInputField/NcInputField.vue'
 import { t } from '../../l10n.js'
 import logger from '../../utils/logger.ts'
@@ -162,9 +139,14 @@ const props = withDefaults(defineProps<Omit<NcInputFieldProps, 'trailingButtonLa
 	showTrailingButton: true,
 })
 
-const modelValue = defineModel<string>('modelValue', { default: '' })
+const modelValue = defineModel<string>({ default: '' })
 watch(modelValue, debounce(checkPassword, 500))
 
+/**
+ * The obfuscating state of the password.
+ */
+const obfuscated = defineModel<boolean>('obfuscated', { default: true })
+
 const emit = defineEmits<{
 	valid: []
 	invalid: []
@@ -224,7 +206,6 @@ const { password_policy: passwordPolicy } = getCapabilities() as { password_poli
 // internal state
 const inputField = useTemplateRef('inputField')
 
-const isPasswordHidden = ref(true)
 const internalHelpMessage = ref('')
 const isValid = ref<boolean>()
 
@@ -276,6 +257,13 @@ async function checkPassword() {
 	}
 }
 
+/**
+ * Toggle the obfuscation of the password
+ */
+function toggleObfuscation() {
+	obfuscated.value = !obfuscated.value
+}
+
 /**
  * Focus the input element
  *
@@ -296,6 +284,28 @@ function select() {
 }
 </script>
 
+<template>
+	<NcInputField v-bind="propsToForward"
+		ref="inputField"
+		v-model="modelValue"
+		:error="error || isValid === false"
+		:helper-text="helperText || internalHelpMessage"
+		:input-class="[inputClass, { 'password-field__input--secure-text': obfuscated && asText }]"
+		:minlength="minlength ?? passwordPolicy?.minLength ?? 0"
+		:success="success || isValid === true"
+		:trailing-button-label="obfuscated ? t('Show password') : t('Hide password')"
+		:type="obfuscated && !asText ? 'password' : 'text'"
+		@trailing-button-click="toggleObfuscation">
+		<template v-if="!!$slots.icon" #icon>
+			<!-- @slot Leading icon -->
+			<slot name="icon" />
+		</template>
+		<template #trailing-button-icon>
+			<NcIconSvgWrapper :path="obfuscated ? mdiEye : mdiEyeOff" />
+		</template>
+	</NcInputField>
+</template>
+
 <style lang="scss" scoped>
 :deep(.password-field__input--secure-text) {
 	// Emulate password field look

tests/component/components/Nc*Field/NcPassword.story.vue

@@ -0,0 +1,33 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div class="story-wrapper">
+		<NcPasswordField :as-text
+			label="Password"
+			model-value="password"
+			:obfuscated />
+	</div>
+</template>
+
+<script setup lang="ts">
+import NcPasswordField from '../../../../src/components/NcPasswordField/NcPasswordField.vue'
+
+withDefaults(defineProps<{
+	asText?: boolean
+	obfuscated?: boolean
+}>(), {
+	asText: undefined,
+	obfuscated: undefined,
+})
+</script>
+
+<style scoped>
+.story-wrapper {
+	margin-inline: auto;
+	max-width: 300px;
+	padding-top: 8px;
+}
+</style>

tests/component/components/Nc*Field/NcPasswordField.visual.spec.ts

@@ -0,0 +1,78 @@
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { expect, test } from '@playwright/experimental-ct-vue'
+import NcPasswordField from './NcPassword.story.vue'
+
+test.skip(({ browserName }) => browserName !== 'chromium')
+
+test.describe('NcPasswordField', () => {
+	test('password is hidden', { tag: '@visual' }, async ({ mount, page }) => {
+		await mount(NcPasswordField)
+
+		await expect(page.getByRole('textbox', { name: 'Password' })).toBeVisible()
+		await expect(page.locator('.story-wrapper')).toHaveScreenshot()
+	})
+
+	test('password can be shown', { tag: '@visual' }, async ({ mount, page }) => {
+		await mount(NcPasswordField, {
+			props: {
+				obfuscated: false,
+			},
+		})
+
+		await expect(page.getByRole('textbox', { name: 'Password' })).toBeVisible()
+		await expect(page.locator('.story-wrapper')).toHaveScreenshot()
+	})
+
+	test('password can be shown by trailing button click', { tag: '@visual' }, async ({ mount, page }) => {
+		await mount(NcPasswordField)
+
+		const el = page.getByRole('textbox', { name: 'Password' })
+		await expect(el).toBeVisible()
+		await expect(el).toHaveAttribute('type', 'password')
+
+		await page.getByRole('button', { name: 'Show password' }).click()
+		await expect(el).toHaveAttribute('type', 'text')
+		await expect(page.locator('.story-wrapper')).toHaveScreenshot()
+	})
+
+	test('password as-text is hidden', { tag: '@visual' }, async ({ mount, page }) => {
+		await mount(NcPasswordField, {
+			props: {
+				asText: true,
+			},
+		})
+
+		await expect(page.getByRole('textbox', { name: 'Password' })).toBeVisible()
+		await expect(page.locator('.story-wrapper')).toHaveScreenshot()
+	})
+
+	test('password as-text can be shown', { tag: '@visual' }, async ({ mount, page }) => {
+		await mount(NcPasswordField, {
+			props: {
+				asText: true,
+				obfuscated: false,
+			},
+		})
+
+		await expect(page.getByRole('textbox', { name: 'Password' })).toBeVisible()
+		await expect(page.locator('.story-wrapper')).toHaveScreenshot()
+	})
+
+	test('password as-text can be shown by trailing button click', { tag: '@visual' }, async ({ mount, page }) => {
+		await mount(NcPasswordField, {
+			props: {
+				asText: true,
+			},
+		})
+
+		const el = page.getByRole('textbox', { name: 'Password' })
+		await expect(el).toBeVisible()
+
+		await page.getByRole('button', { name: 'Show password' }).click()
+		await expect(page.locator('.story-wrapper')).toHaveScreenshot()
+	})
+})