feat(ui): add the Mosaic user profile password section

.changeset/user-profile-edit-password.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/lib/registry.ts

@@ -257,7 +257,11 @@ import {
 } from '../stories/user-profile-passkeys-section.stories';
 import {
   Default as UserProfilePasswordSectionDefault,
+  EditPasswordFails as UserProfilePasswordSectionEditPasswordFails,
+  ManagedByEnterprise as UserProfilePasswordSectionManagedByEnterprise,
   meta as userProfilePasswordSectionMeta,
+  SetPassword as UserProfilePasswordSectionSetPassword,
+  WithoutCurrentPassword as UserProfilePasswordSectionWithoutCurrentPassword,
 } from '../stories/user-profile-password-section.stories';
 import {
   Default as UserProfilePaymentMethodsSectionDefault,
@@ -527,6 +531,10 @@ const userProfileBillingHistorySectionModule: StoryModule = {
 const userProfilePasswordSectionModule: StoryModule = {
   meta: userProfilePasswordSectionMeta,
   Default: UserProfilePasswordSectionDefault,
+  SetPassword: UserProfilePasswordSectionSetPassword,
+  WithoutCurrentPassword: UserProfilePasswordSectionWithoutCurrentPassword,
+  ManagedByEnterprise: UserProfilePasswordSectionManagedByEnterprise,
+  EditPasswordFails: UserProfilePasswordSectionEditPasswordFails,
 };
 const userProfilePasskeysSectionModule: StoryModule = {
   meta: userProfilePasskeysSectionMeta,

packages/swingset/src/stories/fixtures/user-profile-edit-password.ts

@@ -0,0 +1,35 @@
+import type { UserProfileFormError } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types';
+import { UserProfileSaveError } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types';
+import type { UserProfileEditPasswordValue } from '@clerk/ui/mosaic/features/user-profile/user-profile-password-section/user-profile-password-section.types';
+import { useState } from 'react';
+
+export interface UserProfileEditPasswordFixtureOptions {
+  hasPassword?: boolean;
+  requiresCurrentPassword?: boolean;
+  latency?: number;
+  /** Rejects the first save so the next attempt can succeed. */
+  failWith?: UserProfileFormError;
+}
+
+export function useUserProfileEditPasswordFixture({
+  hasPassword: initialHasPassword = true,
+  requiresCurrentPassword = true,
+  latency = 800,
+  failWith,
+}: UserProfileEditPasswordFixtureOptions = {}) {
+  const [hasPassword, setHasPassword] = useState(initialHasPassword);
+  const [hasFailed, setHasFailed] = useState(false);
+
+  return {
+    hasPassword,
+    requiresCurrentPassword,
+    onSubmitPassword: async (_value: UserProfileEditPasswordValue) => {
+      await new Promise(resolve => setTimeout(resolve, latency));
+      if (failWith && !hasFailed) {
+        setHasFailed(true);
+        throw new UserProfileSaveError(failWith.message ?? 'Something went wrong.', failWith.fields);
+      }
+      setHasPassword(true);
+    },
+  };
+}

packages/swingset/src/stories/fixtures/user-profile.ts

@@ -20,6 +20,7 @@ import { createUserProfileAddEmailFixture } from './user-profile-add-email';
 import { createUserProfileAddPhoneFixture } from './user-profile-add-phone';
 import { useConnectedAccountsFixture } from './user-profile-connected-accounts';
 import { useUserProfileEditNameFixture } from './user-profile-edit-name';
+import { useUserProfileEditPasswordFixture } from './user-profile-edit-password';
 import { useUserProfileEditUsernameFixture } from './user-profile-edit-username';
 
 export interface UserProfileFixtureOptions {
@@ -53,6 +54,7 @@ export function useUserProfileFixture({ onAddEmail }: UserProfileFixtureOptions
   const connections = useConnectedAccountsFixture();
   const editName = useUserProfileEditNameFixture();
   const editUsername = useUserProfileEditUsernameFixture();
+  const editPassword = useUserProfileEditPasswordFixture();
   const [activePage, setActivePage] = useState<UserProfileViewProps['activePage']>('account');
   const [emails, setEmails] = useState<UserProfileEmail[]>([
     { id: 'email_1', value: 'preston@clerk.dev', isDefault: true, isVerified: true },
@@ -156,7 +158,7 @@ export function useUserProfileFixture({ onAddEmail }: UserProfileFixtureOptions
         setPhones(current => current.map(phone => (phone.id === id ? { ...phone, isVerified: true } : phone))),
     },
     security: {
-      hasPassword: true,
+      ...editPassword,
       passkeys,
       mfaMethods,
       devices,
@@ -170,7 +172,6 @@ export function useUserProfileFixture({ onAddEmail }: UserProfileFixtureOptions
           ...current,
           { id: `passkey-${Date.now()}`, name: `Passkey ${current.length + 1}`, createdAtLabel: 'Created just now' },
         ]),
-      onChangePassword: () => undefined,
       onDeleteAccount: () => Promise.resolve(),
       onManageDevice: () => undefined,
       onManagePasskey: () => undefined,

packages/swingset/src/stories/user-profile-password-section.mdx

@@ -2,10 +2,57 @@ import * as Stories from './user-profile-password-section.stories';
 
 # UserProfilePasswordSection
 
-Password management composed with `Section`.
+Password management composes a section row and an edit dialog. The row coordinates local form state;
+display data and the save callback come from the caller. Enterprise-managed passwords show their
+provider instead of an edit action.
 
 <Story
   name='Default'
   storyModule={Stories}
-  composition={[{ name: 'Section', href: '/components/section', layer: 'Components' }]}
+  composition={[
+    { name: 'Section', href: '/components/section', layer: 'Components' },
+    { name: 'Dialog', href: '/components/dialog', layer: 'Components' },
+    { name: 'Card', href: '/components/card', layer: 'Components' },
+    { name: 'Banner', href: '/components/banner', layer: 'Components' },
+    { name: 'Field', href: '/components/field', layer: 'Components' },
+    { name: 'InputGroup', href: '/components/input-group', layer: 'Components' },
+    { name: 'Button', href: '/components/button', layer: 'Components' },
+    { name: 'Icon', href: '/components/icon', layer: 'Components' },
+    { name: 'Text', href: '/components/text', layer: 'Components' },
+  ]}
+/>
+
+## Set password
+
+<Story
+  name='SetPassword'
+  storyModule={Stories}
+/>
+
+## Without current password
+
+<Story
+  name='WithoutCurrentPassword'
+  storyModule={Stories}
+/>
+
+## Managed by an enterprise connection
+
+The connection's logo is loaded from the image URL passed as `managedBy.iconUrl` — in production
+that's the enterprise account's `logoPublicUrl`. When a connection ships no logo, a lock icon stands
+in. The Okta logo below is a placeholder standing in for that URL.
+
+<Story
+  name='ManagedByEnterprise'
+  storyModule={Stories}
+/>
+
+## Save error and retry
+
+The first save shows a form error and a current-password error. Correct the value and retry to
+complete the simulated save and close the dialog.
+
+<Story
+  name='EditPasswordFails'
+  storyModule={Stories}
 />

packages/swingset/src/stories/user-profile-password-section.stories.tsx

@@ -1,7 +1,10 @@
-import { UserProfilePasswordSectionView } from '@clerk/ui/mosaic/features/user-profile/user-profile-password-section.view';
+import type { UserProfileFormError } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types';
+import { UserProfilePasswordSectionView } from '@clerk/ui/mosaic/features/user-profile/user-profile-password-section/user-profile-password-section.view';
 
 import type { StoryMeta } from '@/lib/types';
 
+import { useUserProfileEditPasswordFixture } from './fixtures/user-profile-edit-password';
+
 export { default as __source } from './user-profile-password-section.stories?raw';
 
 export const meta: StoryMeta = {
@@ -10,9 +13,70 @@ export const meta: StoryMeta = {
   title: 'UserProfilePasswordSection',
   label: 'Password',
   navigation: { category: 'Sections' },
-  source: 'packages/ui/src/mosaic/features/user-profile/user-profile-password-section.view.tsx',
+  source:
+    'packages/ui/src/mosaic/features/user-profile/user-profile-password-section/user-profile-password-section.view.tsx',
 };
 
+function PasswordSection({
+  hasPassword,
+  requiresCurrentPassword,
+  failWith,
+}: {
+  hasPassword?: boolean;
+  requiresCurrentPassword?: boolean;
+  failWith?: UserProfileFormError;
+}) {
+  const editPassword = useUserProfileEditPasswordFixture({ hasPassword, requiresCurrentPassword, failWith });
+
+  return <UserProfilePasswordSectionView {...editPassword} />;
+}
+
+// Stands in for the enterprise account's `logoPublicUrl`: a real hosted image URL, served from
+// swingset's `public/` the same way production serves the connection's logo.
+const oktaIcon = '/okta-placeholder.svg';
+
 export function Default() {
-  return <UserProfilePasswordSectionView onChangePassword={() => undefined} />;
+  return <PasswordSection />;
+}
+
+/** The account has no password yet, so the row sets one instead of changing one. */
+export function SetPassword() {
+  return <PasswordSection hasPassword={false} />;
+}
+
+/** Reverification already proved the user, so the dialog skips asking for the current password. */
+export function WithoutCurrentPassword() {
+  return <PasswordSection requiresCurrentPassword={false} />;
+}
+
+/**
+ * An enterprise connection owns the password, so the row names who manages it in place of an edit
+ * action and never opens the dialog. The connection's logo leads the label, or a generic lock when
+ * a custom IDP ships none.
+ */
+export function ManagedByEnterprise() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: '100%' }}>
+      <UserProfilePasswordSectionView
+        hasPassword
+        managedBy={{ name: 'Okta', iconUrl: oktaIcon }}
+      />
+      <UserProfilePasswordSectionView
+        hasPassword
+        managedBy={{ name: 'Acme SSO' }}
+      />
+    </div>
+  );
+}
+
+/** The first save shows field and form errors; retrying succeeds. */
+export function EditPasswordFails() {
+  return (
+    <PasswordSection
+      failWith={{
+        message: 'Your password could not be updated.',
+        fields: { currentPassword: 'Incorrect password.' },
+      }}
+    />
+  );
 }

packages/swingset/src/stories/user-profile-security-panel.stories.tsx

@@ -8,6 +8,8 @@ import { useState } from 'react';
 
 import type { StoryMeta } from '@/lib/types';
 
+import { useUserProfileEditPasswordFixture } from './fixtures/user-profile-edit-password';
+
 export { default as __source } from './user-profile-security-panel.stories?raw';
 
 export const meta: StoryMeta = {
@@ -20,6 +22,7 @@ export const meta: StoryMeta = {
 };
 
 export function Default() {
+  const editPassword = useUserProfileEditPasswordFixture();
   const [passkeys, setPasskeys] = useState<UserProfilePasskey[]>([
     {
       id: 'passkey',
@@ -56,8 +59,8 @@ export function Default() {
 
   return (
     <UserProfileSecurityPanelView
+      {...editPassword}
       devices={devices}
-      hasPassword
       mfaMethods={mfaMethods}
       passkeys={passkeys}
       onAddMfaMethod={type =>
@@ -82,7 +85,6 @@ export function Default() {
           { id: `passkey-${Date.now()}`, name: `Passkey ${current.length + 1}`, createdAtLabel: 'Created just now' },
         ])
       }
-      onChangePassword={() => undefined}
       onDeleteAccount={() => Promise.resolve()}
       onManageDevice={() => undefined}
       onManagePasskey={() => undefined}