Redesign password update UX - move banner to dashboard#1353
Conversation
…ssword settings - Remove sticky top password policy banner from layout - Add password update card to dashboard when password doesn't meet policy requirements - Enhance password settings page with clear requirements and verify/change instructions - Use custom color scheme (#FFFBEC background, #973C00 headers, #BB4D00 text, #FE9A02 key icon) - Add translation keys for improved messaging about password actions 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
📝 WalkthroughWalkthroughEight new password-related localization keys were added to support password policy UI messaging. Components were updated to conditionally display password update requirements in a failed-card component and provide enhanced policy-driven requirements display in the change-password form. A warning banner was removed from the default layout. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
src/pages/settings/account/ChangePassword.vue (1)
227-249: Consider extracting repeated SVG icon.The checkmark SVG icon is duplicated four times. Extract it to reduce code duplication.
🔎 Refactor option: extract to a component
Create a simple CheckIcon component:
<!-- CheckIcon.vue --> <template> <svg class="w-4 h-4 shrink-0" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> </template>Then use it:
+import CheckIcon from '~/components/CheckIcon.vue' + <ul class="text-sm space-y-1"> <li class="flex items-center gap-2"> - <svg class="w-4 h-4 shrink-0" viewBox="0 0 20 20" fill="currentColor"> - <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> - </svg> + <CheckIcon /> {{ passwordPolicy.min_length }} {{ t('characters-minimum') }} </li>
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
messages/en.jsonsrc/components/FailedCard.vuesrc/layouts/default.vuesrc/pages/settings/account/ChangePassword.vue
💤 Files with no reviewable changes (1)
- src/layouts/default.vue
🧰 Additional context used
📓 Path-based instructions (10)
src/**/*.vue
📄 CodeRabbit inference engine (CLAUDE.md)
src/**/*.vue: Use Vue 3 with Composition API and<script setup>syntax for frontend components
Style components using TailwindCSS with DaisyUI components
src/**/*.vue: Use Vue 3<script setup>syntax exclusively for all Vue component scripts
Use Tailwind utility classes for layout and spacing in Vue components
Use DaisyUI components (d-btn,d-input,d-card) for interactive elements in Vue components
Use Konsta components ONLY for safe area helpers (top/bottom insets) in Vue components; avoid other uses
UseuseRoute()fromvue-routerto access route parameters anduseRouter()for programmatic navigation in Vue componentsUse DaisyUI (
d-prefixed classes) for buttons, inputs, and other interactive primitives to keep behavior and spacing consistent
Files:
src/components/FailedCard.vuesrc/pages/settings/account/ChangePassword.vue
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use single quotes and no semicolons per @antfu/eslint-config
Files:
src/components/FailedCard.vuesrc/pages/settings/account/ChangePassword.vue
src/components/**/*.vue
📄 CodeRabbit inference engine (CLAUDE.md)
Reusable Vue components should be organized in
src/components/directory
Files:
src/components/FailedCard.vue
{capacitor.config.{ts,js},src/**/*.{ts,tsx,vue}}
📄 CodeRabbit inference engine (CLAUDE.md)
Mobile apps should use Capacitor with app ID
ee.forgr.capacitor_gofor native mobile functionality
Files:
src/components/FailedCard.vuesrc/pages/settings/account/ChangePassword.vue
src/**/*.{ts,tsx,vue,js}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use
~/alias for imports fromsrc/directory in frontend TypeScript and Vue components
Files:
src/components/FailedCard.vuesrc/pages/settings/account/ChangePassword.vue
src/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Frontend ESLint must pass before commit; run
bun lint:fixto auto-fix issues in frontend files
Files:
src/components/FailedCard.vuesrc/pages/settings/account/ChangePassword.vue
src/**/*.{vue,css,scss}
📄 CodeRabbit inference engine (AGENTS.md)
The web client is built with Vue.js and Tailwind CSS; lean on utility classes and composition-friendly patterns rather than bespoke CSS
Files:
src/components/FailedCard.vuesrc/pages/settings/account/ChangePassword.vue
src/**/*.{vue,ts,tsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Konsta components are reserved for the safe area helpers; avoid importing
konstaanywhere else in the app
Files:
src/components/FailedCard.vuesrc/pages/settings/account/ChangePassword.vue
src/**/*.{css,scss,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Mirror the Capgo design palette from
src/styles/style.css(e.g.,--color-primary-500: #515271,--color-azure-500: #119eff) when introducing new UI, using deep slate bases with the Extract azure highlight and soft radii
Files:
src/components/FailedCard.vuesrc/pages/settings/account/ChangePassword.vue
src/pages/**/*.vue
📄 CodeRabbit inference engine (CLAUDE.md)
Use file-based routing with unplugin-vue-router for frontend pages
Frontend file-based routing uses
src/pages/directory structure; routes auto-generate withunplugin-vue-routerand types are available insrc/typed-router.d.ts
Files:
src/pages/settings/account/ChangePassword.vue
🧠 Learnings (4)
📚 Learning: 2025-12-05T17:34:25.556Z
Learnt from: CR
Repo: Cap-go/capgo PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-05T17:34:25.556Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and `<script setup>` syntax for frontend components
Applied to files:
src/components/FailedCard.vue
📚 Learning: 2025-12-23T02:53:12.055Z
Learnt from: CR
Repo: Cap-go/capgo PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T02:53:12.055Z
Learning: Applies to src/**/*.vue : Use `useRoute()` from `vue-router` to access route parameters and `useRouter()` for programmatic navigation in Vue components
Applied to files:
src/components/FailedCard.vue
📚 Learning: 2025-12-23T02:53:12.055Z
Learnt from: CR
Repo: Cap-go/capgo PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T02:53:12.055Z
Learning: Applies to src/**/*.vue : Use Vue 3 `<script setup>` syntax exclusively for all Vue component scripts
Applied to files:
src/components/FailedCard.vue
📚 Learning: 2025-12-23T01:19:04.593Z
Learnt from: riderx
Repo: Cap-go/capgo PR: 1297
File: src/components/dashboard/DeploymentBanner.vue:77-79
Timestamp: 2025-12-23T01:19:04.593Z
Learning: In the Cap-go codebase, ensure that app permission checks never include the role 'owner'. App-level permissions should be based on the user_min_right enum with values: read, upload, write, admin, super_admin (and NOT owner). This pattern applies across Vue components that perform permission checks; if you find a check referencing 'owner' for app-level access, replace it with the appropriate user_min_right value and keep organization-level owner handling in organization.ts.
Applied to files:
src/components/FailedCard.vuesrc/pages/settings/account/ChangePassword.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Run tests
| "password-update-org-access": "Update your password to access this organization. Your current password doesn't meet the security requirements.", | ||
| "password-action-required": "Password Action Required", | ||
| "password-must-meet": "Your password must meet these requirements:", | ||
| "password-if-meets": "If your password already meets these requirements:", | ||
| "password-verify-it": "just verify it to regain access.", | ||
| "password-if-not-meets": "If your password doesn't meet these requirements:", | ||
| "password-change-then-verify": "change it first, then verify.", | ||
| "go-to-password-settings": "Go to Password Settings", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
rg -n --type vue --type ts --type js 'go-to-password-settings|password-update-org-access|password-action-required|password-must-meet|password-if-meets|password-verify-it|password-if-not-meets|password-change-then-verify' -C 2Repository: Cap-go/capgo
Length of output: 83
🏁 Script executed:
rg -n 'go-to-password-settings|password-update-org-access|password-action-required|password-must-meet|password-if-meets|password-verify-it|password-if-not-meets|password-change-then-verify' --glob '*.vue' --glob '*.ts' --glob '*.js' --glob '*.tsx' --glob '*.jsx' -C 2Repository: Cap-go/capgo
Length of output: 2121
Remove unused localization key or add its implementation.
Seven of the eight new password policy keys are properly used in src/pages/settings/account/ChangePassword.vue and src/components/FailedCard.vue. However, go-to-password-settings (Line 1379) is added to the localization file but is not referenced anywhere in the codebase. Either remove this unused key or implement its usage in the appropriate component.
🤖 Prompt for AI Agents
In messages/en.json around lines 1372 to 1379 the key "go-to-password-settings"
is unused; either remove this key from the JSON or add a corresponding usage
where appropriate (e.g., in src/pages/settings/account/ChangePassword.vue or
src/components/FailedCard.vue) by replacing the hardcoded label/link with
$t('go-to-password-settings') (or the i18n equivalent) and wiring it to the
existing route/button that opens Password Settings; after making the change, run
the linter/tests to ensure no missing i18n references remain.
|
…ssword settings (#1353) - Remove sticky top password policy banner from layout - Add password update card to dashboard when password doesn't meet policy requirements - Enhance password settings page with clear requirements and verify/change instructions - Use custom color scheme (#FFFBEC background, #973C00 headers, #BB4D00 text, #FE9A02 key icon) - Add translation keys for improved messaging about password actions 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>
Redesigned the password update UX to reduce clutter by moving the sticky top banner from the layout to the dashboard and enhancing the password settings page with clear requirements and instructions.
Before
After
Motivation
I hate how unclear the experience for password enforcement is. So I fixed it
Business impact
Highly low (3/9) - It doesn't impact the business directly, but it does significantly impact the user experience when using password rules enforcement