ChangePasswordForm

Code

import { ChangePasswordForm } from "@fadymondy/nasaq/web";declare const api: { changePassword(v: { currentPassword: string; newPassword: string; signOutOthers: boolean }): Promise<{ ok: boolean }> };export function Password() {  return (    <ChangePasswordForm      onSubmit={async (values) => {        const res = await api.changePassword(values);        if (!res.ok) return { fieldErrors: { currentPassword: "That is not your current password." } };      }}    />  );}

Account · beta

Live examples and controls: ChangePasswordForm in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/change-password-form.json

The form for a signed-in person to change their password. It checks the obvious things on the client, then calls your onSubmit. It does not talk to a server itself.

When to useCopy Anchor Link

• The security page of an account.

When not to useCopy Anchor Link

• Forgotten password: use the reset-password form; there is no current password to ask for.

ImportCopy Anchor Link

import { ChangePasswordForm } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { ChangePasswordForm } from "@fadymondy/nasaq/web";

declare const api: { changePassword(v: { currentPassword: string; newPassword: string; signOutOthers: boolean }): Promise<{ ok: boolean }> };

export function Password() {
  return (
    <ChangePasswordForm
      onSubmit={async (values) => {
        const res = await api.changePassword(values);
        if (!res.ok) return { fieldErrors: { currentPassword: "That is not your current password." } };
      }}
    />
  );
}

AnatomyCopy Anchor Link

ChangePasswordForm                 data-slot="change-password-form" (form, noValidate)
├─ Alert                           success or server error
├─ Field  current password         autocomplete="current-password"
├─ Field  new password             autocomplete="new-password", PasswordInput with strength meter
├─ Field  confirm                  autocomplete="new-password"
├─ Checkbox  sign out other sessions
└─ Button  Change password         loading while pending

APICopy Anchor Link

ChangePasswordForm: every form prop except onSubmit and children, plus:

Client checks: every field is required, the new password meets minLength and differs from the current one, and the confirmation matches. On success the fields are cleared and a success alert shows.

ExamplesCopy Anchor Link

Without the sign-out option

import { ChangePasswordForm } from "@fadymondy/nasaq/web";

export function Simple({ save }: { save: (v: { newPassword: string }) => Promise<void> }) {
  return <ChangePasswordForm showSignOutOthers={false} onSubmit={(v) => save(v)} />;
}

AccessibilityCopy Anchor Link

• Each field has a visible label, and errors are attached with FieldError and the invalid border, never colour alone.
• autocomplete is current-password for the first field and new-password for the other two, so password managers fill and save correctly.
• Each password field has the show/hide toggle from PasswordInput.
• The form has noValidate: messages come from the component, in the page language.
• The success and error alerts are announced (status and alert).

RTL & i18nCopy Anchor Link

• English and Arabic strings follow the Nasaq locale. Pass labels for other languages.
• The toggles sit at the inline end. Use ltr inside a custom field if you need the typed value pinned left-to-right.

Styling & tokensCopy Anchor Link

• Field, PasswordInput, Alert and --nq-* tokens. Target [data-slot="change-password-form"].

Do / Don'tCopy Anchor Link

• Do enforce the password policy on the server; the meter is only a hint.
• Do offer to sign out other sessions, and end them on the server when it is checked.
• Don't reveal whether an account exists in a field error.

RelatedCopy Anchor Link

• PasswordInput
• Field
• TwoFactorSetup

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-account-change-password-form--docs