created a new settings page for the new UI by L-Tarun-Aditya · Pull Request #959 · TeamShiksha/openlogo

L-Tarun-Aditya · 2026-02-18T12:42:56Z

Description

this pr closes #958

Title

Implement Dedicated Settings Page & 2FA

Description

This PR introduces a dedicated Settings Page to centralize account management and improve security. It migrates existing account features from the Dashboard and adds Two-Factor Authentication (2FA) support.

Key Changes:

New Settings Page: Created a dedicated page for user configuration.
2FA Integration: Added components to enable and disable Two-Factor Authentication.
Feature Migration: Moved the following from the Dashboard to the Settings page:
- User Info editing
- Change Password
- Download Data
Dashboard Cleanup: Removed account management forms from the main Dashboard view.

Why is this needed?

Security: Enables 2FA to prevent unauthorized access.
UX Best Practices: Separates operational data (Dashboard) from account configuration (Settings).
Maintainability: Consolidates user-related logic into a single location.

What type of PR is this? (Check all applicable)

Screenshots (if applicable)

mfa.mp4

Checklist

I have performed a self-review of my code
I have commented my code, particularly in hard-to-understand areas
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes

L-Tarun-Aditya · 2026-03-17T12:11:50Z

packages/ui/__tests__/components/auth/Signin.test.jsx

the tests will be in a different pr

L-Tarun-Aditya · 2026-03-17T12:12:08Z

packages/ui/__tests__/components/UserInfo.test.jsx

the tests will be in a different pr

Smayur0 · 2026-03-17T18:21:29Z

packages/app/utils/constants.js

  ALREADY_SEND_RESPOND: "Already sent the response.",
  UPDATE_SUCCESS: "Responded successfully.",
-  INCORRECT_PASSWORD: "Current password is incorrect", 
-  SAME_PASSWORD:"Current password is same as old password",


can use better messages
like

INCORRECT_PASSWORD: "Password is incorrect.",
SAME_PASSWORD: "Passwords must be different."

this was already there all i did was run pnpm format and add an extra space thats it. and i think "current password is same as the old password" is more helpful than "must be different" as it explains the problem better , same with the INCORRECT_PASSWORD variable

Smayur0 · 2026-03-17T18:25:31Z

packages/ui/src/components/pin/Pin.jsx

+  });
+
+  const handleSubmit = async () => {
+    console.log("pin", pin);


remove console

sonarqubecloud · 2026-03-18T04:21:48Z

Quality Gate passed

Issues
6 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Copilot

Pull request overview

This PR refactors account-related UI by moving profile/security functionality out of the dashboard into a new protected Settings route, and adds MFA flows (2FA setup/disable + MFA sign-in PIN).

Changes:

Add /settings route with a new UserSettings page (sidebar tabs) and new ProfileInfo + TwoFactorAuth components.
Add MFA sign-in PIN component and update Sign In to branch into MFA when mfaRequired is returned.
Update theme/button styling by introducing --white-fixed and adjusting several component CSS modules; remove some dashboard cards and delete Sign In/UserInfo tests.

Reviewed changes

Copilot reviewed 22 out of 23 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
packages/ui/src/utils/Constants.js	Reformat dashboard titles; add `USER_SETTINGS_TITLE`.
packages/ui/src/page/dashboard/Dashboard.jsx	Remove Plan/User Info/Password/Setting cards from dashboard.
packages/ui/src/index.css	Add `--white-fixed` theme token.
packages/ui/src/components/usersettings/UserSettings.module.css	New Settings page layout/styles.
packages/ui/src/components/usersettings/UserSettings.jsx	New Settings page with sidebar tabs.
packages/ui/src/components/userinfo/UserInfo.module.css	Adjust spacing + ensure primary button text uses `--white-fixed`.
packages/ui/src/components/twofactorauth/TwoFactorAuth.module.css	New 2FA UI styling.
packages/ui/src/components/twofactorauth/TwoFactorAuth.jsx	New 2FA enable/verify/disable flows using `/auth/mfa/*` endpoints.
packages/ui/src/components/settings/SettingCard.module.css	Ensure danger button text uses `--white-fixed`.
packages/ui/src/components/profileinfo/ProfileInfo.module.css	New profile/settings grid card layout styling.
packages/ui/src/components/profileinfo/ProfileInfo.jsx	New page composing UserInfo/ChangePassword/Setting/Plan.
packages/ui/src/components/pin/Pin.module.css	New MFA PIN input styling.
packages/ui/src/components/pin/Pin.jsx	New MFA PIN verification component (`/auth/mfa/signin`).
packages/ui/src/components/dropdown/UserDropDown.jsx	Add Settings link to dropdown.
packages/ui/src/components/currentplan/CurrentPlan.module.css	Update spacing and button text color variable.
packages/ui/src/components/currentplan/CurrentPlan.jsx	Set Button `variant="primary"` for upgrade button.
packages/ui/src/components/common/button/Button.module.css	Change disabled styling (remove opacity).
packages/ui/src/components/changepassword/ChangePassword.module.css	Ensure primary button text uses `--white-fixed`.
packages/ui/src/components/auth/Signin.jsx	Add MFA-required branch and render PIN UI; hide form while in MFA.
packages/ui/src/App.jsx	Add protected `/settings` route.
packages/ui/tests/components/UserInfo.test.jsx	Delete tests.
packages/ui/tests/components/auth/Signin.test.jsx	Delete tests.
packages/app/utils/constants.js	Formatting cleanup of message constants.

Comments suppressed due to low confidence (1)

packages/ui/src/utils/Constants.js:648

USER_SETTINGS_TITLE is exported but appears to be unused (no references in packages/ui/src). If it’s not needed, remove it; otherwise, wire it into the settings UI to avoid dead constants drifting out of sync.

export const DASHBOARD_CARDS_TITLE = ["Usage", "Generate New API Key"];
export const USER_SETTINGS_TITLE = [
  "Plan",
  "User Info",
  "Change Password",
  "Setting",
];

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/ui/src/components/common/button/Button.module.css

 .button:disabled {
  color: var(--white);
  cursor: not-allowed;
-  opacity: 0.8;
  pointer-events: none;
 }


packages/ui/src/components/twofactorauth/TwoFactorAuth.jsx

+      const { success, data, error } = await checkMFARequest();
+      if (success && data?.isMfaEnabled !== undefined) {
+        setIsMFAEnabled(data.isMfaEnabled);
+        setMode(data.isMfaEnabled ? "VERIFIED" : "INITIAL");
+      } else {
+        setIsMFAEnabled(false);
+        setMode("INITIAL");
+        toast.error(error);


packages/ui/src/components/twofactorauth/TwoFactorAuth.jsx

+
+export default function TwoFactorAuth() {
+  const [isMFAEnabled, setIsMFAEnabled] = useState(false);
+  const [mode, setMode] = useState("VERIFIED"); // INITIAL, SETUP, VERIFIED, DISABLE


packages/ui/src/components/twofactorauth/TwoFactorAuth.module.css

+.disableCancleBtn {
+  position: absolute;
+  right: 2rem;
+  bottom: 2rem;
+}


packages/ui/src/components/usersettings/UserSettings.jsx

+            <div className={styles.card}>
+              <div className={styles.cardBody}>
+                <div className={styles.initialState}>
+                  <h3 className={styles.heading}>Coming Soon</h3>
+                  <p className={styles.subtext}>
+                    The {menuItems.find((i) => i.id === activeTab)?.label}{" "}
+                    settings are currently under development.
+                  </p>
+                </div>


packages/ui/src/components/pin/Pin.jsx

+      setPin(new Array(6).fill(""));
+      setIsAuthenticated(true);
+      navigate("/dashboard");
+      onClose();


packages/ui/src/components/auth/Signin.jsx

      if (success) {
        if (data.source && data.statusCode === 201) {
          toast.success(MESSAGES.VERIFICATION_EMAIL_SENT);
+        } else if (data.mfaRequired && data.statusCode === 200) {
+          setIsMFAEnabled(true);
        } else {


packages/ui/src/components/auth/Signin.jsx

+        )}

-        {isForgotPassword && (
+        {isMFAEnabled && <Pin onClose={onClose} />}


packages/ui/src/components/usersettings/UserSettings.module.css

+  background-color: var(--background-light);
+  min-height: 100vh;
+}
+
+[data-theme="dark"] .container {
+  background-color: var(--background-dark);


packages/ui/src/components/profileinfo/ProfileInfo.module.css

+}
+
+[data-theme="dark"] .card {
+  background-color: var(--background-dark);


L-Tarun-Aditya requested review from MukeshAbhi and mridul-giri February 18, 2026 14:10

L-Tarun-Aditya marked this pull request as ready for review February 18, 2026 14:10

github-actions bot added the enhancement New feature or request label Feb 18, 2026

github-actions bot assigned L-Tarun-Aditya Feb 18, 2026

MukeshAbhi marked this pull request as draft February 18, 2026 16:01

L-Tarun-Aditya force-pushed the feat/2-factor-auth-frontend branch from 9eaf1bb to 305f129 Compare February 22, 2026 18:28

L-Tarun-Aditya requested review from Smayur0 and anujarora0502 and removed request for MukeshAbhi February 22, 2026 18:30

L-Tarun-Aditya marked this pull request as ready for review February 22, 2026 18:31

MukeshAbhi requested review from sachinkmrsin and removed request for mridul-giri February 24, 2026 14:17

anshj20 linked an issue Mar 2, 2026 that may be closed by this pull request

0.8.0 Update development.md with latest local setup instructions #952

Closed

2 tasks

anshj20 removed a link to an issue Mar 2, 2026

0.8.0 Update development.md with latest local setup instructions #952

Closed

2 tasks

L-Tarun-Aditya marked this pull request as draft March 8, 2026 00:23

L-Tarun-Aditya force-pushed the feat/2-factor-auth-frontend branch from 65351f3 to d315869 Compare March 15, 2026 13:02

L-Tarun-Aditya marked this pull request as ready for review March 16, 2026 11:04

Tarun Aditya and others added 8 commits March 16, 2026 16:39

added a new settings page

6ef7a46

frontend for the 2fa auth

6386cd2

moved profile info to the settings page

0d702c3

updated the css and tests according to the new ui

f5a85b0

added further updates to css to ensure uniformity

41456a2

Integrate MFA enable and disable flow across frontend and backend

cdd634e

Updated Sigin page to support MFA

ae6f89a

Add test

ec41666

L-Tarun-Aditya force-pushed the feat/2-factor-auth-frontend branch 2 times, most recently from a0a405a to 3c91ffe Compare March 17, 2026 11:45

fixed sonar qube issues

ed80ccc

L-Tarun-Aditya force-pushed the feat/2-factor-auth-frontend branch from 3c91ffe to ed80ccc Compare March 17, 2026 12:11

L-Tarun-Aditya commented Mar 17, 2026

View reviewed changes

packages/ui/__tests__/components/auth/Signin.test.jsx Outdated

Copy link
Copy Markdown

Member Author

L-Tarun-Aditya Mar 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the tests will be in a different pr

L-Tarun-Aditya commented Mar 17, 2026

View reviewed changes

packages/ui/__tests__/components/UserInfo.test.jsx Outdated

Copy link
Copy Markdown

Member Author

L-Tarun-Aditya Mar 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the tests will be in a different pr

L-Tarun-Aditya mentioned this pull request Mar 17, 2026

tests for the frontend settings page #980

Draft

11 tasks

Smayur0 reviewed Mar 17, 2026

View reviewed changes

minor bug fix

3a6b870

Copilot AI review requested due to automatic review settings March 18, 2026 04:20

Copilot started reviewing on behalf of L-Tarun-Aditya March 18, 2026 04:21 View session

Copilot AI reviewed Mar 18, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

created a new settings page for the new UI#959

created a new settings page for the new UI#959
L-Tarun-Aditya wants to merge 10 commits intostagefrom
feat/2-factor-auth-frontend

L-Tarun-Aditya commented Feb 18, 2026 •

edited

Loading

Uh oh!

L-Tarun-Aditya Mar 17, 2026

Uh oh!

L-Tarun-Aditya Mar 17, 2026

Uh oh!

Smayur0 Mar 17, 2026

Uh oh!

L-Tarun-Aditya Mar 18, 2026

Uh oh!

Smayur0 Mar 17, 2026

Uh oh!

L-Tarun-Aditya Mar 18, 2026

Uh oh!

sonarqubecloud bot commented Mar 18, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

L-Tarun-Aditya commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Title

Description

Why is this needed?

What type of PR is this? (Check all applicable)

Screenshots (if applicable)

Checklist

Uh oh!

L-Tarun-Aditya Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

L-Tarun-Aditya Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

Smayur0 Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

L-Tarun-Aditya Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

Smayur0 Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

L-Tarun-Aditya Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Mar 18, 2026

Quality Gate passed

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

L-Tarun-Aditya commented Feb 18, 2026 •

edited

Loading