feat: add change password to web and mobile settings

Add a change password feature using Better Auth's built-in
changePassword endpoint. On web, a dialog opens from a new card in the
Account section. On mobile, a dedicated screen is pushed from a new
SettingsRow. Both use listAccounts to detect credential-based accounts
and only show the option when the user has a password and password login
is enabled (respecting OIDC-only configurations).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/web/src/components/settings/change-password-section.tsx

@@ -0,0 +1,214 @@
+import { IconAlertTriangle, IconLock } from "@tabler/icons-react";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Spinner } from "@/components/ui/spinner";
+import { authClient } from "@/lib/auth/client";
+import { orpc } from "@/lib/orpc/client";
+
+export function ChangePasswordSection() {
+  const { data: authConfig, isPending: authConfigPending } = useQuery(
+    orpc.system.authConfig.queryOptions(),
+  );
+  const { data: accounts, isPending: accountsPending } = useQuery({
+    queryKey: ["auth", "listAccounts"],
+    queryFn: async () => {
+      const result = await authClient.listAccounts();
+      return result.data;
+    },
+  });
+
+  const isLoading = authConfigPending || accountsPending;
+  const passwordLoginDisabled = authConfig?.passwordLoginDisabled ?? true;
+  const hasPassword =
+    accounts?.some(
+      (a: { providerId: string }) => a.providerId === "credential",
+    ) ?? false;
+
+  // Only show for users who have a password account and password login is enabled
+  if (isLoading || passwordLoginDisabled || !hasPassword) return null;
+
+  return (
+    <Card>
+      <CardContent>
+        <div className="flex items-center justify-between gap-4">
+          <div className="flex items-start gap-3">
+            <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+              <IconLock aria-hidden={true} className="size-4 text-primary" />
+            </div>
+            <div>
+              <CardTitle>Change password</CardTitle>
+              <CardDescription>Update your account password</CardDescription>
+            </div>
+          </div>
+          <ChangePasswordDialog />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ChangePasswordDialog() {
+  const [open, setOpen] = useState(false);
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [revokeOtherSessions, setRevokeOtherSessions] = useState(false);
+  const [error, setError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  function resetForm() {
+    setCurrentPassword("");
+    setNewPassword("");
+    setConfirmPassword("");
+    setRevokeOtherSessions(false);
+    setError("");
+  }
+
+  function handleOpenChange(nextOpen: boolean) {
+    setOpen(nextOpen);
+    if (!nextOpen) resetForm();
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+
+    if (!currentPassword) {
+      setError("Current password is required");
+      return;
+    }
+    if (newPassword.length < 8) {
+      setError("New password must be at least 8 characters");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const result = await authClient.changePassword({
+        currentPassword,
+        newPassword,
+        revokeOtherSessions,
+      });
+      if (result.error) {
+        setError(result.error.message ?? "Failed to change password");
+        return;
+      }
+      toast.success("Password updated");
+      handleOpenChange(false);
+    } catch {
+      setError("Something went wrong");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
+        Change
+      </Button>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Change password</DialogTitle>
+          <DialogDescription>
+            Enter your current password and choose a new one.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="grid gap-3">
+          {error && (
+            <Alert variant="destructive">
+              <IconAlertTriangle />
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          <div className="grid gap-1.5">
+            <Label htmlFor="current-password">Current password</Label>
+            <Input
+              id="current-password"
+              type="password"
+              autoComplete="current-password"
+              value={currentPassword}
+              onChange={(e) => setCurrentPassword(e.target.value)}
+              disabled={isSubmitting}
+            />
+          </div>
+
+          <div className="grid gap-1.5">
+            <Label htmlFor="new-password">New password</Label>
+            <Input
+              id="new-password"
+              type="password"
+              autoComplete="new-password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              disabled={isSubmitting}
+            />
+          </div>
+
+          <div className="grid gap-1.5">
+            <Label htmlFor="confirm-password">Confirm new password</Label>
+            <Input
+              id="confirm-password"
+              type="password"
+              autoComplete="new-password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              disabled={isSubmitting}
+            />
+          </div>
+
+          <div className="flex items-center gap-2 pt-1">
+            <Checkbox
+              id="revoke-sessions"
+              checked={revokeOtherSessions}
+              onCheckedChange={(checked) =>
+                setRevokeOtherSessions(checked === true)
+              }
+              disabled={isSubmitting}
+            />
+            <Label htmlFor="revoke-sessions" className="cursor-pointer">
+              Sign out of other sessions
+            </Label>
+          </div>
+
+          <DialogFooter className="pt-2">
+            <DialogClose render={<Button variant="outline" />}>
+              Cancel
+            </DialogClose>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting && <Spinner className="size-3.5" />}
+              Update password
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/routes/_app/settings.tsx

@@ -8,6 +8,7 @@ import { AccountSection } from "@/components/settings/account-section";
 import { BackupRestoreSection } from "@/components/settings/backup-restore-section";
 import { BackupScheduleSection } from "@/components/settings/backup-schedule-section";
 import { BackupSection } from "@/components/settings/backup-section";
+import { ChangePasswordSection } from "@/components/settings/change-password-section";
 import { IntegrationsSection } from "@/components/settings/integrations-section";
 import { RegistrationSection } from "@/components/settings/registration-section";
 import { SettingsShell } from "@/components/settings/settings-shell";
@@ -82,6 +83,7 @@ function SettingsPage() {
           role: session.user.role ?? undefined,
         }}
       />
+      <ChangePasswordSection />
       <IntegrationsSection />
       {isAdmin && (
         <>