Present password feedback directly to user

matthewbadeau · matthewbadeau · commit ef479948e246 · 2025-10-18T07:55:22.000+09:00
diff --git a/app/javascript/controllers/zxcvbn_controller.ts b/app/javascript/controllers/zxcvbn_controller.ts
@@ -30,7 +30,10 @@ export default class extends Controller {
     const widths = ['w-0', 'w-25', 'w-50', 'w-75', 'w-100']
     const severities = ['bg-danger', 'bg-danger', 'bg-danger', 'bg-warning', 'bg-success', 'bg-success', 'bg-success', 'bg-success', 'bg-success'].slice(4 - this.minScore, 4 - this.minScore + 5)
     const result = zxcvbn(this.value())
-    if (this.meter != null) { this.meter.className = `progress-bar zxcvbn-meter ${widths[result.score]} ${severities[result.score]}` }
+    if (this.meter != null) {
+      this.meter.className = `progress-bar zxcvbn-meter ${widths[result.score]} ${severities[result.score]}`
+      this.meter.textContent = String(result.feedback.warning ?? '')
+    }
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,10 @@ export default class extends Controller {`
`30`	`30`	`const widths = ['w-0', 'w-25', 'w-50', 'w-75', 'w-100']`
`31`	`31`	`const severities = ['bg-danger', 'bg-danger', 'bg-danger', 'bg-warning', 'bg-success', 'bg-success', 'bg-success', 'bg-success', 'bg-success'].slice(4 - this.minScore, 4 - this.minScore + 5)`
`32`	`32`	`const result = zxcvbn(this.value())`
`33`		- if (this.meter != null) { this.meter.className = `progress-bar zxcvbn-meter ${widths[result.score]} ${severities[result.score]}` }
	`33`	`+ if (this.meter != null) {`
	`34`	+ this.meter.className = `progress-bar zxcvbn-meter ${widths[result.score]} ${severities[result.score]}`
	`35`	`+ this.meter.textContent = String(result.feedback.warning ?? '')`
	`36`	`+ }`
`34`	`37`	`}`
`35`	`38`	`}`
`36`	`39`