From 73ec1f841d4b87c639da30fe1b0f8d373c510c91 Mon Sep 17 00:00:00 2001
From: "@daniel-lxs" <57051444+daniel-lxs@users.noreply.github.com>
Date: Thu, 12 Nov 2026 05:20:34 +0000
Subject: [PATCH 1/2] [Fix] Profile offers email changes without verification
 delivery

---
 .../settings/UserProfileSection.test.tsx      | 45 +++++++++++++++++++
 .../settings/UserProfileSection.tsx           | 23 ++++++++--
 .../pages/PersonalSettingsPage.test.tsx       |  4 +-
 .../settings/pages/PersonalSettingsPage.tsx   |  3 ++
 .../pages/PersonalSettingsRoute.test.tsx      |  2 +
 .../settings/pages/PersonalSettingsRoute.tsx  |  1 +
 .../trpc/commands/preferences/index.test.ts   | 17 +++++++
 .../src/trpc/commands/preferences/index.ts    |  2 +
 8 files changed, 91 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/settings/UserProfileSection.test.tsx b/apps/web/src/components/settings/UserProfileSection.test.tsx
index 69e1d3c446..d086cfe322 100644
--- a/apps/web/src/components/settings/UserProfileSection.test.tsx
+++ b/apps/web/src/components/settings/UserProfileSection.test.tsx
@@ -139,6 +139,7 @@ describe('UserProfileSection', () => {
   it('updates name and email from the expanded profile form', async () => {
     render(
       <UserProfileSection
+        canChangeEmail
         canChangePassword={true}
         profile={{
           email: 'ada@example.com',
@@ -198,6 +199,7 @@ describe('UserProfileSection', () => {
 
     render(
       <UserProfileSection
+        canChangeEmail
         canChangePassword={true}
         profile={{
           email: 'ada@example.com',
@@ -221,4 +223,47 @@ describe('UserProfileSection', () => {
     });
     expect(toast.error).toHaveBeenCalledWith('Email update failed');
   });
+
+  it('keeps email read-only while allowing name changes without verification delivery', async () => {
+    render(
+      <UserProfileSection
+        profile={{ email: 'ada@example.com', imageUrl: '', name: 'Ada User' }}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Edit' }));
+    expect(screen.getByLabelText('Email')).toHaveAttribute('readonly');
+    expect(screen.getByLabelText('Email')).toHaveAccessibleDescription(
+      'Email changes require email verification to be enabled for this deployment.',
+    );
+    fireEvent.change(screen.getByLabelText('Name'), {
+      target: { value: 'New Name' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Save changes' }));
+    await waitFor(() =>
+      expect(updateUserMock).toHaveBeenCalledWith({ name: 'New Name' }),
+    );
+    expect(changeEmailMock).not.toHaveBeenCalled();
+    expect(toast.success).toHaveBeenCalledWith('Profile updated.');
+  });
+
+  it('does not submit an email draft after email capability becomes unavailable', async () => {
+    const profile = {
+      email: 'ada@example.com',
+      imageUrl: '',
+      name: 'Ada User',
+    };
+    const view = render(
+      <UserProfileSection canChangeEmail profile={profile} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Edit' }));
+    fireEvent.change(screen.getByLabelText('Email'), {
+      target: { value: 'new@example.com' },
+    });
+    view.rerender(
+      <UserProfileSection canChangeEmail={false} profile={profile} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Save changes' }));
+    expect(changeEmailMock).not.toHaveBeenCalled();
+    expect(updateUserMock).not.toHaveBeenCalled();
+  });
 });
diff --git a/apps/web/src/components/settings/UserProfileSection.tsx b/apps/web/src/components/settings/UserProfileSection.tsx
index b2b331a084..823c8ec2c9 100644
--- a/apps/web/src/components/settings/UserProfileSection.tsx
+++ b/apps/web/src/components/settings/UserProfileSection.tsx
@@ -35,9 +35,11 @@ function getAuthErrorMessage(
 }
 
 export function UserProfileSection({
+  canChangeEmail = false,
   canChangePassword = false,
   profile,
 }: {
+  canChangeEmail?: boolean;
   canChangePassword?: boolean;
   profile: UserProfileSectionProfile;
 }) {
@@ -53,7 +55,7 @@ export function UserProfileSection({
   const trimmedName = name.trim();
   const trimmedEmail = email.trim();
   const hasNameChange = trimmedName !== profile.name;
-  const hasEmailChange = trimmedEmail !== profile.email;
+  const hasEmailChange = canChangeEmail && trimmedEmail !== profile.email;
   // Only show the Remove control for avatars uploaded through this app's
   // /api/avatars/ endpoint. OAuth-provider avatar URLs are not removable here
   // — the user would lose their provider-supplied picture with no way back.
@@ -285,8 +287,8 @@ export function UserProfileSection({
         ) : (
           <form className="space-y-4 max-w-md" onSubmit={handleSubmit}>
             <p className="text-muted-foreground">
-              Update your name or email. Your profile picture can be changed
-              from the profile view.
+              Update your name{canChangeEmail ? ' or email' : ''}. Your profile
+              picture can be changed from the profile view.
             </p>
             <div className="space-y-1">
               <Label htmlFor="personal-name">Name</Label>
@@ -303,13 +305,26 @@ export function UserProfileSection({
               <Label htmlFor="personal-email">Email</Label>
               <Input
                 id="personal-email"
+                readOnly={!canChangeEmail}
+                aria-describedby={
+                  canChangeEmail ? undefined : 'personal-email-unavailable'
+                }
                 type="email"
                 autoComplete="email"
                 required
-                value={email}
+                value={canChangeEmail ? email : profile.email}
                 onChange={(event) => setEmail(event.target.value)}
                 disabled={isSubmitting}
               />
+              {!canChangeEmail && (
+                <p
+                  id="personal-email-unavailable"
+                  className="text-xs text-muted-foreground"
+                >
+                  Email changes require email verification to be enabled for
+                  this deployment.
+                </p>
+              )}
             </div>
             <div className="flex flex-wrap gap-2">
               <Button type="submit" size="sm" disabled={isSubmitting}>
diff --git a/apps/web/src/components/settings/pages/PersonalSettingsPage.test.tsx b/apps/web/src/components/settings/pages/PersonalSettingsPage.test.tsx
index a75d95edad..9cfa2f0e3e 100644
--- a/apps/web/src/components/settings/pages/PersonalSettingsPage.test.tsx
+++ b/apps/web/src/components/settings/pages/PersonalSettingsPage.test.tsx
@@ -70,7 +70,7 @@ describe('PersonalSettingsPage', () => {
 
     expect(screen.getByText('User profile')).toBeInTheDocument();
     expect(userProfileSectionMock).toHaveBeenCalledWith(
-      { canChangePassword: true, profile },
+      { canChangeEmail: false, canChangePassword: true, profile },
       undefined,
     );
     expect(screen.getByText('Change password')).toBeInTheDocument();
@@ -93,7 +93,7 @@ describe('PersonalSettingsPage', () => {
     );
 
     expect(userProfileSectionMock).toHaveBeenCalledWith(
-      { canChangePassword: false, profile },
+      { canChangeEmail: false, canChangePassword: false, profile },
       undefined,
     );
     expect(screen.getByText('Change password')).toBeInTheDocument();
diff --git a/apps/web/src/components/settings/pages/PersonalSettingsPage.tsx b/apps/web/src/components/settings/pages/PersonalSettingsPage.tsx
index a7d03e786a..e5b0067875 100644
--- a/apps/web/src/components/settings/pages/PersonalSettingsPage.tsx
+++ b/apps/web/src/components/settings/pages/PersonalSettingsPage.tsx
@@ -17,16 +17,19 @@ import {
 
 export function PersonalSettingsPage({
   profile,
+  canChangeEmail = false,
   canChangePassword,
   canSetPassword,
 }: {
   profile: UserProfileSectionProfile;
+  canChangeEmail?: boolean;
   canChangePassword: boolean;
   canSetPassword: boolean;
 }) {
   return (
     <SettingsShell pageId="personal">
       <UserProfileSection
+        canChangeEmail={canChangeEmail}
         canChangePassword={canChangePassword}
         profile={profile}
       />
diff --git a/apps/web/src/components/settings/pages/PersonalSettingsRoute.test.tsx b/apps/web/src/components/settings/pages/PersonalSettingsRoute.test.tsx
index 3652f7f385..6baf909b22 100644
--- a/apps/web/src/components/settings/pages/PersonalSettingsRoute.test.tsx
+++ b/apps/web/src/components/settings/pages/PersonalSettingsRoute.test.tsx
@@ -2,6 +2,7 @@ import { render } from '@testing-library/react';
 
 let accountCapabilities:
   | {
+      canChangeEmail?: boolean;
       canChangePassword: boolean;
       canSetPassword: boolean;
     }
@@ -63,6 +64,7 @@ describe('PersonalSettingsRoute', () => {
           imageUrl: 'https://example.com/ada.png',
           name: 'Ada Lovelace',
         },
+        canChangeEmail: false,
       },
       undefined,
     );
diff --git a/apps/web/src/components/settings/pages/PersonalSettingsRoute.tsx b/apps/web/src/components/settings/pages/PersonalSettingsRoute.tsx
index 58487d1365..d2879dc81a 100644
--- a/apps/web/src/components/settings/pages/PersonalSettingsRoute.tsx
+++ b/apps/web/src/components/settings/pages/PersonalSettingsRoute.tsx
@@ -16,6 +16,7 @@ export function PersonalSettingsRoute() {
 
   return (
     <PersonalSettingsPage
+      canChangeEmail={accountCapabilities.data?.canChangeEmail ?? false}
       canChangePassword={accountCapabilities.data?.canChangePassword ?? false}
       canSetPassword={accountCapabilities.data?.canSetPassword ?? false}
       profile={{
diff --git a/apps/web/src/trpc/commands/preferences/index.test.ts b/apps/web/src/trpc/commands/preferences/index.test.ts
index 20c2973af0..3b2cae5779 100644
--- a/apps/web/src/trpc/commands/preferences/index.test.ts
+++ b/apps/web/src/trpc/commands/preferences/index.test.ts
@@ -30,15 +30,22 @@ import {
 
 const auth = { userId: 'user-1' } as never;
 
+const emailCapability = vi.hoisted(() => ({ enabled: false }));
+vi.mock('@/lib/server/env', () => ({
+  isEmailChannelEnabled: () => emailCapability.enabled,
+}));
+
 describe('personal account capabilities', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    emailCapability.enabled = false;
   });
 
   it('offers password enrollment to OAuth-only users', async () => {
     userHasCredentialAccountMock.mockResolvedValue(false);
 
     await expect(getPersonalAccountCapabilitiesCommand(auth)).resolves.toEqual({
+      canChangeEmail: false,
       canChangePassword: false,
       canSetPassword: true,
     });
@@ -48,6 +55,7 @@ describe('personal account capabilities', () => {
     userHasCredentialAccountMock.mockResolvedValue(true);
 
     await expect(getPersonalAccountCapabilitiesCommand(auth)).resolves.toEqual({
+      canChangeEmail: false,
       canChangePassword: true,
       canSetPassword: false,
     });
@@ -61,4 +69,13 @@ describe('personal account capabilities', () => {
       headers: expect.any(Headers),
     });
   });
+
+  it('offers email changes only when verification delivery is configured', async () => {
+    emailCapability.enabled = true;
+    await expect(
+      getPersonalAccountCapabilitiesCommand(auth),
+    ).resolves.toMatchObject({
+      canChangeEmail: true,
+    });
+  });
 });
diff --git a/apps/web/src/trpc/commands/preferences/index.ts b/apps/web/src/trpc/commands/preferences/index.ts
index 071b4aa29c..11adb76ae1 100644
--- a/apps/web/src/trpc/commands/preferences/index.ts
+++ b/apps/web/src/trpc/commands/preferences/index.ts
@@ -14,6 +14,7 @@ import { headers } from 'next/headers';
 
 import type { UserAuthSuccess } from '@/types';
 import { getAuth } from '@/lib/server/auth';
+import { isEmailChannelEnabled } from '@/lib/server/env';
 import { userHasCredentialAccount } from '@/lib/server/user-management';
 import {
   DEFAULT_PERSONAL_PREFERENCES,
@@ -73,6 +74,7 @@ export async function getPersonalAccountCapabilitiesCommand(
   const hasCredentialAccount = await userHasCredentialAccount(auth.userId);
 
   return {
+    canChangeEmail: isEmailChannelEnabled(),
     canChangePassword: hasCredentialAccount,
     canSetPassword: !hasCredentialAccount,
   };

From cd3e570ef7c326f59bdb531bdd232d1e037e972c Mon Sep 17 00:00:00 2001
From: "@daniel-lxs" <57051444+daniel-lxs@users.noreply.github.com>
Date: Thu, 12 Nov 2026 06:02:41 +0000
Subject: [PATCH 2/2] [Docs] Explain when profile email editing is available

---
 apps/docs/personal-settings.mdx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/docs/personal-settings.mdx b/apps/docs/personal-settings.mdx
index e153312ae9..fbafe7c836 100644
--- a/apps/docs/personal-settings.mdx
+++ b/apps/docs/personal-settings.mdx
@@ -16,6 +16,11 @@ identities, adjust the app, and manage profile details.
 Use **Profile** to update account details such as your name, email,
 avatar, and security settings.
 
+Email editing requires account email verification to be enabled for the
+deployment. Otherwise, the email field is read-only with an explanation; you
+can still change your name. When email editing is available, the existing
+verification flow must complete before the new address takes effect.
+
 These settings affect your own Roomote account. They do not change deployment
 membership, environment access, or integration setup for the rest of the team.