feat(account): add editable phone and password change with validation

- Add editable phone field in /account General tab with UK phone
  validation
- Create PUT /api/user/change-password endpoint in backend
- Add zxcvbn password strength meter to change password modal
- Add "passwords don't match" validation message to both /account and
  /register
- Fix navbar logout reactivity with invalidateAll and $derived values
- Fix a11y warnings: add labels, roles, and keyboard handlers
- Remove unused CSS from account page
This commit is contained in:
2026-02-20 20:17:38 +00:00
parent 41dc839830
commit 5a4cd29b44
7 changed files with 285 additions and 141 deletions
@@ -416,27 +416,14 @@
</AlertDialog.Root>
<style>
/* Hide number input arrows for Chrome, Safari, Edge */
input.no-spin::-webkit-outer-spin-button,
input.no-spin::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Hide number input arrows for Firefox */
input.no-spin[type='number'] {
/* Hide number input arrows for all number inputs in the component */
:global(input[type='number']) {
-moz-appearance: textfield;
appearance: textfield;
}
/* Remove arrows from all number inputs in the component */
input[type='number'] {
-moz-appearance: textfield;
appearance: textfield;
}
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
:global(input[type='number']::-webkit-outer-spin-button),
:global(input[type='number']::-webkit-inner-spin-button) {
-webkit-appearance: none;
margin: 0;
}
@@ -440,7 +440,7 @@
</div>
<div class="space-y-1">
<label class="text-sm font-medium text-gray-700">Tags</label>
<label for="tag-input" class="text-sm font-medium text-gray-700">Tags</label>
<div class="relative">
<div
@@ -494,6 +494,9 @@
? 'bg-primary/10 text-primary font-medium'
: 'hover:bg-gray-100'}"
onclick={() => selectSuggestion(s)}
onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && selectSuggestion(s)}
role="button"
tabindex="0"
>
{s}
</div>