Merge pull request #8350 from nextcloud-libraries/fix/noid/password-validate

Author: Antreesy

src/components/NcPasswordField/NcPasswordField.vue

@@ -19,7 +19,9 @@ General purpose password field component.
 			<NcPasswordField v-model="text2"
 				id="textField"
 				:label-outside="true"
-				placeholder="Min. 12 characters" />
+				placeholder="Min. 12 characters"
+				:success="true"
+				helper-text="Password is secure" />
 		</div>
 		<div class="external-label">
 			<label for="textField2">New password</label>
@@ -32,10 +34,9 @@ General purpose password field component.
 		</div>
 
 		<NcPasswordField v-model="text4"
-			label="Good new password"
-			:success="true"
-			placeholder="Min. 12 characters"
-			helper-text="Password is secure">
+			label="Validate new password"
+			check-password-strength
+			placeholder="Min. 12 characters">
 			<template #icon>
 				<IconLockOutline :size="20" />
 			</template>
@@ -57,7 +58,7 @@ export default {
 	data() {
 		return {
 			text1: '',
-			text2: '',
+			text2: 'FWZxt29XEoTQfnBEa',
 			text3: 'hunter',
 			text4: '',
 			text5: '',
@@ -152,8 +153,6 @@ const emit = defineEmits<{
 	invalid: []
 }>()
 
-watch(modelValue, debounce(checkPassword, 500))
-
 // public API
 defineExpose({
 	focus,
@@ -232,12 +231,19 @@ const minLengthWithPolicy = computed(() => {
 		?? undefined
 })
 
+watch(modelValue, () => {
+	// Reset internal validation state on value change, before debounced checkPassword() is called
+	isValid.value = undefined
+	internalHelpMessage.value = ''
+})
+watch(modelValue, debounce(checkPassword, 500))
+
 /**
  * Validate the entered password.
  * If available this method will use the password-policy app API to validate the password.
  */
 async function checkPassword() {
-	if (!props.checkPasswordStrength) {
+	if (!props.checkPasswordStrength || !modelValue.value) {
 		return
 	}
 

styleguide/global.requires.js

@@ -28,7 +28,7 @@ const USER_GROUPS = [
  * @param {object} error Axios error
  */
 function mockRequests(error) {
-	const { request } = error
+	const { request, config } = error
 	let data = null
 
 	// Mock resolved link references for NcRichText
@@ -58,6 +58,22 @@ function mockRequests(error) {
 		data = { groups: USER_GROUPS.filter((e) => !requestGroups[1] || e.displayname.startsWith(requestGroups[1]) || e.id.startsWith(requestGroups[1])) }
 	}
 
+	const requestPasswordPolicy = request.responseURL.match(/apps\/password_policy\/api\/v1\/validate/)
+	if (requestPasswordPolicy) {
+		const payload = typeof config.data === 'string' ? JSON.parse(config.data) : config.data
+
+		if (payload.password.length < 12) {
+			data = {
+				passed: false,
+				reason: 'Password needs to be at least 12 characters long',
+			}
+		} else {
+			data = {
+				passed: true,
+			}
+		}
+	}
+
 	if (data) {
 		return Promise.resolve({ data: { ocs: { data } } })
 	}