fix(FR-2228): add email input field to password change modal by ironAiken2 · Pull Request #5777 · lablup/backend.ai-webui

ironAiken2 · 2026-03-06T06:05:10Z

The 'Change Password' link in the login form previously opened a help panel (sidebar) instead of a proper input UI. This meant users had no way to actually enter their email address to receive a password change link.

This PR extracts the forgot-password flow into a standalone SendChangePasswordEmailModal component with a proper email form input, fixing the broken user flow.

Changes:

Added SendChangePasswordEmailModal as a dedicated React modal component
Modal includes email input with validation and submit button
Password change link now opens the modal instead of the help panel

Checklist: (if applicable)

Documentation
Minium required manager version
Specific setting for review (eg., KB link, endpoint or how to setup)
Minimum requirements to check during review
Test case(s) to demonstrate the difference of before/after

ironAiken2 · 2026-03-06T06:05:23Z

fix(FR-2228): add email input field to password change modal #5777 👈 (View in Graphite)
fix(FR-2173): fix password change modal blocked by login modal on password expiry #5655 : 1 other dependent PR (#5786 )
main

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

flow:merge-queue - adds this PR to the back of the merge queue
flow:hotfix - for urgent changes, fast-track this PR to the front of the merge queue

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has required the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

github-actions · 2026-03-06T06:07:55Z

Coverage report for `./react`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	7.55% (-0.01% 🔻)	1189/15742
🔴	Branches	6.36% (-0% 🔻)	695/10923
🔴	Functions	5.04% (-0.01% 🔻)	226/4480
🔴	Lines	7.39% (-0.01% 🔻)	1136/15365

Test suite run success

624 tests passing in 32 suites.

Report generated by 🧪jest coverage report action from 302c82c

Copilot

Pull request overview

Fixes the broken “forgot/change password” flow in the login UI by replacing the help-panel-only behavior with a modal that collects an email address and triggers the password-change email endpoint.

Changes:

Adds a new SendChangePasswordEmailModal UI with an email input + submit action.
Updates the “Change Password” link to open the modal instead of populating the help side panel.
Wires the modal submit to POST /cloud/send-password-change-email using the anonymous client.

You can also share your feedback on Copilot code review. Take the survey.

Copilot · 2026-03-10T10:30:47Z

+          <Form.Item name="email" rules={[{ required: true, type: 'email' }]}>
+            <Input
+              prefix={<MailOutlined />}
+              placeholder={t('login.E-mailOrUsername')}


The field is validated as type: 'email' but the placeholder uses t('login.E-mailOrUsername'), which suggests usernames are accepted even though they will be rejected by validation (and the API wrapper docs for /cloud/send-password-change-email indicate it expects an email). Consider using an email-only placeholder/label (and optionally type="email"/autoComplete="email") so the UI matches the actual accepted input.

Suggested change

placeholder={t('login.E-mailOrUsername')}

type="email"

autoComplete="email"

placeholder={t('login.E-mail')}

Copilot · 2026-03-10T10:30:47Z

+          <Form.Item name="email" rules={[{ required: true, type: 'email' }]}>
+            <Input
+              prefix={<MailOutlined />}
+              placeholder={t('login.E-mailOrUsername')}


The email input in this modal is missing an accessible label (aria-label or a visible Form.Item label). In the same file, the login identifier field sets aria-label="Email or Username"; adding a similar label here will improve screen reader support.

Suggested change

placeholder={t('login.E-mailOrUsername')}

placeholder={t('login.E-mailOrUsername')}

aria-label={t('login.E-mailOrUsername')}

Copilot · 2026-03-10T10:30:47Z

-                        content: t('login.DescChangePasswordEmail'),
-                      })
-                    }
+                    onClick={() => setShowChangePasswordEmail(true)}


Clicking “Change Password” only opens the modal, but it doesn’t clear/hide an already-open help side panel. Since the help panel uses a higher z-index (1060) than the modal (1002), the panel can visually overlap the modal and block interaction. Consider closing the help panel when opening this modal (e.g., setHelpPanel(null)) or adjust the visibility/z-index relationship so the modal always stays on top.

Suggested change

onClick={() => setShowChangePasswordEmail(true)}

onClick={() => {

setShowChangePasswordEmail(true);

setHelpPanel(null);

}}

Copilot · 2026-03-10T10:30:48Z

+  const onSubmit = () => {
+    form.validateFields().then((values) => {
+      mutation.mutate(
+        { email: values.email },
+        {
+          onSuccess() {
+            message.success(t('login.EmailSent'));
+            onCancel();
+          },
+        },
+      );
+    });


onSubmit calls form.validateFields().then(...) without handling the rejection path, which can result in an unhandled promise rejection when validation fails. Also, the mutation only defines onSuccess—errors (network/server) will fail silently with no user feedback. Please handle validation failures (catch/early return) and surface mutation errors (e.g., onError with message.error(...) or mutateAsync in a try/catch) similar to the pattern used in SignupModal.

Suggested change

const onSubmit = () => {

form.validateFields().then((values) => {

mutation.mutate(

{ email: values.email },

{

onSuccess() {

message.success(t('login.EmailSent'));

onCancel();

},

},

);

});

const onSubmit = async () => {

let values: { email: string };

try {

values = await form.validateFields();

} catch {

// Validation failed; do not proceed with mutation.

return;

}

mutation.mutate(

{ email: values.email },

{

onSuccess() {

message.success(t('login.EmailSent'));

onCancel();

},

onError(error) {

const errorMessage =

(error as { message?: string })?.message ||

t('login.EmailSendFailed');

message.error(errorMessage);

},

},

);

agatha197

please check copilot reviews

ironAiken2 · 2026-03-19T06:32:42Z

duplicated by #6033

ironAiken2 mentioned this pull request Mar 6, 2026

fix(FR-2173): fix password change modal blocked by login modal on password expiry #5655

Merged

5 tasks

github-actions Bot assigned ironAiken2 Mar 6, 2026

github-actions Bot added the size:L 100~500 LoC label Mar 6, 2026

fix(FR-2228): add email input field to password change modal

302c82c

ironAiken2 force-pushed the 02-26-fix_fr-2173_fix_password_change_modal_blocked_by_login_modal_on_password_expiry branch from 180cb24 to 4a8efd7 Compare March 6, 2026 08:19

ironAiken2 force-pushed the 03-06-fix_fr-2228_add_email_input_field_to_password_change_modal branch from 682c631 to 302c82c Compare March 6, 2026 08:19

ironAiken2 mentioned this pull request Mar 6, 2026

e2e(FR-2173): add E2E tests for password expiry flow #5786

Merged

1 task

ironAiken2 changed the base branch from 02-26-fix_fr-2173_fix_password_change_modal_blocked_by_login_modal_on_password_expiry to graphite-base/5777 March 9, 2026 02:36

ironAiken2 requested review from agatha197, nowgnuesLee and yomybaby March 10, 2026 10:15

ironAiken2 marked this pull request as ready for review March 10, 2026 10:27

Copilot AI review requested due to automatic review settings March 10, 2026 10:27

Copilot started reviewing on behalf of ironAiken2 March 10, 2026 10:27 View session

Copilot AI reviewed Mar 10, 2026

View reviewed changes

agatha197 requested changes Mar 17, 2026

View reviewed changes

ironAiken2 marked this pull request as draft March 18, 2026 03:43

ironAiken2 closed this Mar 19, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(FR-2228): add email input field to password change modal#5777

fix(FR-2228): add email input field to password change modal#5777
ironAiken2 wants to merge 1 commit intographite-base/5777from
03-06-fix_fr-2228_add_email_input_field_to_password_change_modal

ironAiken2 commented Mar 6, 2026 •

edited by agatha197

Loading

Uh oh!

ironAiken2 commented Mar 6, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 6, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

agatha197 left a comment

Uh oh!

ironAiken2 commented Mar 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-              placeholder={t('login.E-mailOrUsername')}
+              type="email"
+              autoComplete="email"
+              placeholder={t('login.E-mail')}

	placeholder={t('login.E-mailOrUsername')}
	placeholder={t('login.E-mailOrUsername')}
	aria-label={t('login.E-mailOrUsername')}

-                    onClick={() => setShowChangePasswordEmail(true)}
+                    onClick={() => {
+                      setShowChangePasswordEmail(true);
+                      setHelpPanel(null);
+                    }}

Conversation

ironAiken2 commented Mar 6, 2026 • edited by agatha197 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ironAiken2 commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

github-actions Bot commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage report for ./react

Test suite run success

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

agatha197 left a comment

Choose a reason for hiding this comment

Uh oh!

ironAiken2 commented Mar 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ironAiken2 commented Mar 6, 2026 •

edited by agatha197

Loading

ironAiken2 commented Mar 6, 2026 •

edited

Loading

github-actions Bot commented Mar 6, 2026 •

edited

Loading

Coverage report for `./react`