Integrate "change email" into account settings page (#8840)

This PR moves the standalone "Change Email" view into the new account
settings akin to passwords.

<img width="1007" height="586" alt="Screenshot 2025-08-07 at 10 14 56"
src="https://github.com/user-attachments/assets/4563e87a-350a-4f01-88c8-62171c665ed9"
/>


### Steps to test:
- Go to Account Settings
- Click on Edit icon next to "Email"
- Change Email to confirm that the form is still working
- https://changeemailview.webknossos.xyz/


### Issues:
- Follow up to #8672 and #2494 

------
(Please delete unneeded items, merge only when none are left open)
- [x] Added changelog entry (create a `$PR_NUMBER.md` file in
`unreleased_changes` or use `./tools/create-changelog-entry.py`)
- [ ] Added migration guide entry if applicable (edit the same file as
for the changelog)
- [ ] Updated [documentation](../blob/master/docs) if applicable
- [ ] Adapted [wk-libs python
client](https://github.com/scalableminds/webknossos-libs/tree/master/webknossos/webknossos/client)
if relevant API parts change
- [ ] Removed dev-only changes like prints and application.conf edits
- [x] Considered [common edge
cases](../blob/master/.github/common_edge_cases.md)
- [ ] Needs datastore update after deployment

Author: hotzenklotz

frontend/javascripts/admin/account/account_password_view.tsx

@@ -152,7 +152,7 @@ function AccountPasswordView() {
   }
 
   function handleResetPassword() {
-    setResetPasswordVisible(true);
+    setResetPasswordVisible(!isResetPasswordVisible);
   }
 
   const passKeyList: SettingsCardProps[] = [

frontend/javascripts/admin/account/account_profile_view.tsx

@@ -1,8 +1,10 @@
-import { CheckOutlined, DownOutlined } from "@ant-design/icons";
+import { CheckOutlined, DownOutlined, EditOutlined } from "@ant-design/icons";
+import ChangeEmailView from "admin/auth/change_email_view";
 import { updateSelectedThemeOfUser } from "admin/rest_api";
-import { Col, Dropdown, Row } from "antd";
+import { Button, Col, Dropdown, Row } from "antd";
 import { useWkSelector } from "libs/react_hooks";
 import * as Utils from "libs/utils";
+import { useState } from "react";
 import { getSystemColorTheme } from "theme";
 import type { APIUserTheme } from "types/api_types";
 import { formatUserName } from "viewer/model/accessors/user_accessor";
@@ -16,7 +18,7 @@ function AccountProfileView() {
   const activeUser = useWkSelector((state) => state.activeUser);
   const activeOrganization = useWkSelector((state) => state.activeOrganization);
   const { selectedTheme } = activeUser || { selectedTheme: "auto" };
-
+  const [isChangeEmailVisible, setChangeEmailVisible] = useState(false);
   if (!activeUser) return null;
 
   const role = Utils.isUserAdmin(activeUser)
@@ -63,7 +65,20 @@ function AccountProfileView() {
     },
     {
       title: "Email",
-      content: activeUser.email,
+      content: isChangeEmailVisible ? (
+        <ChangeEmailView onCancel={() => setChangeEmailVisible(false)} />
+      ) : (
+        activeUser.email
+      ),
+      action: (
+        <Button
+          type="default"
+          shape="circle"
+          icon={<EditOutlined />}
+          size="small"
+          onClick={() => setChangeEmailVisible(!isChangeEmailVisible)}
+        />
+      ),
     },
     {
       title: "Organization",
@@ -95,7 +110,12 @@ function AccountProfileView() {
       <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
         {profileItems.map((item) => (
           <Col span={12} key={item.title}>
-            <SettingsCard title={item.title} content={item.content} tooltip={item.tooltip} />
+            <SettingsCard
+              title={item.title}
+              content={item.content}
+              tooltip={item.tooltip}
+              action={item.action}
+            />
           </Col>
         ))}
       </Row>

frontend/javascripts/admin/auth/change_email_view.tsx

@@ -1,6 +1,6 @@
 import { LockOutlined, MailOutlined } from "@ant-design/icons";
 import { logoutUser, updateUser } from "admin/rest_api";
-import { Alert, Button, Col, Form, Input, Row } from "antd";
+import { Alert, Button, Form, Input, Space } from "antd";
 import { useWkSelector } from "libs/react_hooks";
 import Toast from "libs/toast";
 import { logoutUserAction } from "viewer/model/actions/user_actions";
@@ -15,7 +15,7 @@ const NEW_EMAIL_FIELD_KEY = "newEmail";
 const CONFIRM_NEW_EMAIL_FIELD_KEY = "confirmNewEmail";
 const PASSWORD_FIELD_KEY = "password";
 
-function ChangeEmailView() {
+function ChangeEmailView({ onCancel }: { onCancel: () => void }) {
   const [form] = Form.useForm();
   const activeUser = useWkSelector((state) => state.activeUser);
   useNavigate();
@@ -31,6 +31,7 @@ function ChangeEmailView() {
   function onFinish() {
     const newEmail = form.getFieldValue(NEW_EMAIL_FIELD_KEY);
     const password = form.getFieldValue(PASSWORD_FIELD_KEY);
+
     changeEmail(newEmail, password)
       .then(async () => {
         handleResendVerificationEmail();
@@ -69,119 +70,104 @@ function ChangeEmailView() {
   }
 
   return (
-    <Row
-      justify="center"
-      align="middle"
-      style={{
-        padding: 50,
-      }}
-    >
-      <Col span={8}>
-        <h3>Change Email</h3>
-        <Alert
-          type="info"
-          message="You will be logged out after changing your email address."
-          showIcon
-          style={{
-            marginBottom: 24,
-          }}
-        />
-        <Form onFinish={onFinish} form={form}>
-          <FormItem
-            name={PASSWORD_FIELD_KEY}
-            rules={[
-              {
-                required: true,
-                message: "Please enter your password for verification",
-              },
-            ]}
-          >
-            <Input.Password
-              prefix={
-                <LockOutlined
-                  style={{
-                    fontSize: 13,
-                  }}
-                />
-              }
-              placeholder="Your Password"
-            />
-          </FormItem>
-          <FormItem
-            hasFeedback
-            name={NEW_EMAIL_FIELD_KEY}
-            rules={[
-              {
-                required: true,
-                message: "Please enter your new email address",
-              },
-              {
-                type: "email",
-                message: "Please enter a valid email address",
-              },
-              {
-                validator: (_, value: string) =>
-                  checkEmailsAreMatching(value, [CONFIRM_NEW_EMAIL_FIELD_KEY]),
-              },
-              {
-                validator: (_, value: string) => checkEmailIsDifferent(value),
-              },
-            ]}
-          >
-            <Input
-              prefix={
-                <MailOutlined
-                  style={{
-                    fontSize: 13,
-                  }}
-                />
-              }
-              placeholder="New Email Address"
+    <Form onFinish={onFinish} form={form}>
+      <FormItem
+        hasFeedback
+        name={NEW_EMAIL_FIELD_KEY}
+        rules={[
+          {
+            required: true,
+            message: "Please enter your new email address",
+          },
+          {
+            type: "email",
+            message: "Please enter a valid email address",
+          },
+          {
+            validator: (_, value: string) =>
+              checkEmailsAreMatching(value, [CONFIRM_NEW_EMAIL_FIELD_KEY]),
+          },
+          {
+            validator: (_, value: string) => checkEmailIsDifferent(value),
+          },
+        ]}
+      >
+        <Input
+          prefix={
+            <MailOutlined
+              style={{
+                fontSize: 13,
+              }}
             />
-          </FormItem>
-          <FormItem
-            hasFeedback
-            name={CONFIRM_NEW_EMAIL_FIELD_KEY}
-            rules={[
-              {
-                required: true,
-                message: "Please confirm your new email address",
-              },
-              {
-                type: "email",
-                message: "Please enter a valid email address",
-              },
-              {
-                validator: (_, value: string) =>
-                  checkEmailsAreMatching(value, [NEW_EMAIL_FIELD_KEY]),
-              },
-            ]}
-          >
-            <Input
-              prefix={
-                <MailOutlined
-                  style={{
-                    fontSize: 13,
-                  }}
-                />
-              }
-              placeholder="Confirm New Email Address"
+          }
+          placeholder="New Email Address"
+        />
+      </FormItem>
+      <FormItem
+        hasFeedback
+        name={CONFIRM_NEW_EMAIL_FIELD_KEY}
+        rules={[
+          {
+            required: true,
+            message: "Please confirm your new email address",
+          },
+          {
+            type: "email",
+            message: "Please enter a valid email address",
+          },
+          {
+            validator: (_, value: string) => checkEmailsAreMatching(value, [NEW_EMAIL_FIELD_KEY]),
+          },
+        ]}
+      >
+        <Input
+          prefix={
+            <MailOutlined
+              style={{
+                fontSize: 13,
+              }}
             />
-          </FormItem>
-          <FormItem>
-            <Button
-              type="primary"
-              htmlType="submit"
+          }
+          placeholder="Confirm New Email Address"
+        />
+      </FormItem>
+      <FormItem
+        name={PASSWORD_FIELD_KEY}
+        rules={[
+          {
+            required: true,
+            message: "Please enter your password for verification",
+          },
+        ]}
+      >
+        <Input.Password
+          prefix={
+            <LockOutlined
               style={{
-                width: "100%",
+                fontSize: 13,
               }}
-            >
-              Change Email
-            </Button>
-          </FormItem>
-        </Form>
-      </Col>
-    </Row>
+            />
+          }
+          placeholder="Your Password"
+        />
+      </FormItem>
+      <Alert
+        type="info"
+        message="You will be logged out after successfully changing your email address."
+        showIcon
+        style={{
+          marginBottom: 24,
+        }}
+      />
+      <FormItem>
+        <Space>
+          <Button onClick={onCancel}>Cancel</Button>
+          <Button type="primary" htmlType="submit">
+            Change Email
+          </Button>
+        </Space>
+      </FormItem>
+    </Form>
   );
 }
 

frontend/javascripts/navbar.tsx

@@ -616,10 +616,6 @@ function LoggedInAvatar({
             {
               type: "divider",
             },
-            {
-              key: "changeEmail",
-              label: <Link to="/auth/changeEmail">Change Email</Link>,
-            },
             {
               key: "account",
               label: <Link to="/account">Account Settings</Link>,

frontend/javascripts/router/router.tsx

@@ -48,7 +48,6 @@ const { Content } = Layout;
 import AccountAuthTokenView from "admin/account/account_auth_token_view";
 import AccountPasswordView from "admin/account/account_password_view";
 import AccountProfileView from "admin/account/account_profile_view";
-import ChangeEmailView from "admin/auth/change_email_view";
 import { OrganizationDangerZoneView } from "admin/organization/organization_danger_zone_view";
 import { OrganizationNotificationsView } from "admin/organization/organization_notifications_view";
 import { OrganizationOverviewView } from "admin/organization/organization_overview_view";
@@ -393,14 +392,6 @@ const routes = createRoutesFromElements(
 
     <Route path="/auth/resetPassword" element={<StartResetPasswordView />} />
     <Route path="/auth/finishResetPassword" element={<FinishResetPasswordView />} />
-    <Route
-      path="/auth/changeEmail"
-      element={
-        <SecuredRoute>
-          <ChangeEmailView />
-        </SecuredRoute>
-      }
-    />
     {/* legacy view mode route */}
     <Route
       path="/datasets/:organizationId/:datasetName/view"

unreleased_changes/8840.md

@@ -0,0 +1,2 @@
+### Changed
+- Integrated "Change Email" functionality into Account Settings