[Customer Portal][FE][Web] Refactor Auth Flow: Replace /login with Public /home Landing Page & Clean Up Legacy Components - #367
Merged
Rashmika998 merged 8 commits intoMar 19, 2026
Conversation
Remove LoginPage import and /login route, add HomePage import and register /home as the public entry. Update fallback Navigate to redirect to /home. Delete the unused login-screen-inverted.svg asset to clean up resources related to the old login page.
Hide GetHelp dropdown on the public landing page (/home) instead of the login page and rename the local flag accordingly; also tidy imports in Actions.tsx. Update Header.test.tsx to match route changes (/projects/:id/...) and adapt mocked project API responses to the paginated shape (pages array). Adjust mock import to preserve actual exports and reformat test fixtures. Add HomePageArrowIcon component (SVG) used for home page CTAs.
Delete obsolete login-screen.svg and its associated unit tests (LoginBackground.test.tsx, LoginFooter.test.tsx) from apps/customer-portal/webapp. Cleans up an unused login page asset and tests; verify no remaining imports reference these files.
Integrate Asgardeo sign-in into the HomePage: import useAsgardeo, add signIn handler (handleLogin) and wire CTAs to call it instead of using anchor hrefs. Apply JSX/formatting cleanups and style prop object formatting across HomePage. Remove the now-unused LoginPage.tsx. Update IdleTimeoutProvider to navigate to "/home" after sign-out (replacing previous "/login" redirects). These changes centralize the login flow and ensure redirects go to the home route after sign-out.
Delete LoginBackground.tsx, LoginBox.tsx, and LoginSlogan.test.tsx from apps/customer-portal/webapp/src/components/login-page. These files were removed as part of a cleanup/refactor of the login page implementation.
Delete unused login page components (LoginSlogan and ParticleBackground) and update AuthGuard to redirect unauthenticated users to /home instead of /login. Also update the JSDoc to reflect the new redirect behavior.
Delete apps/customer-portal/webapp/src/components/login-page/LoginFooter.tsx. Removes the obsolete login footer component (copyright notice and Privacy/Terms links) as part of UI cleanup in the customer-portal webapp.
Contributor
📝 WalkthroughWalkthroughThe PR replaces the dedicated Changes
Sequence Diagram(s)sequenceDiagram
participant Browser as Browser
participant Router as App/Router
participant Guard as AuthGuard
participant Home as HomePage
participant Auth as Asgardeo
Browser->>Router: Request unknown /some/path
Router->>Guard: Evaluate route (protected?)
Guard-->>Router: Redirect -> /home
Router->>Browser: Serve /home
Browser->>Home: Click hero CTA
Home->>Auth: call signIn()
Auth-->>Home: auth flow (redirect / callback)
Home-->>Browser: navigate post-auth
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
dileepapeiris
added
Type/New Feature
dileepapeiris
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
apps/customer-portal/webapp/src/pages/HomePage.tsx (1)
94-109: Removecomponent="a"when usingonClickinstead ofhref.The button has
component="a"but nohrefattribute. Since authentication is triggered viaonClick, this combination is semantically incorrect—it renders as an anchor without a valid link destination. Either removecomponent="a"or use a<button>explicitly.♻️ Proposed fix
<Button variant="contained" color="warning" - component="a" onClick={handleLogin} endIcon={<ArrowIcon />}Apply the same change to the other CTA buttons on lines 111-133 and 367-383.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/customer-portal/webapp/src/pages/HomePage.tsx` around lines 94 - 109, The Button rendering "Create Support Ticket" is using component="a" while relying on onClick (handleLogin) rather than an href; remove component="a" so the Button renders as a proper button element (or replace with an explicit <button> variant) and keep the onClick={handleLogin} intact; apply the same change to the other CTA Buttons that use component="a" with onClick (the other instances referenced around the same component, e.g., the CTAs at the other sections) to ensure semantic correctness and avoid rendering anchors without hrefs.apps/customer-portal/webapp/src/providers/IdleTimeoutProvider.tsx (1)
52-57: Consider logging sign-out failures inonIdle.The
.finally()ensures navigation happens regardless of sign-out success, which is correct. However, ifsignOut()rejects, the error is silently swallowed. Consider adding error logging for observability.💡 Optional: Add error logging
const onIdle = () => { if (isSignedIn && !isLoading) { setSessionWarningOpen(false); - signOut().finally(() => navigate("/home")); + signOut() + .catch((err) => logger.error("Sign-out failed during idle timeout", err)) + .finally(() => navigate("/home")); } };This would require importing and using the logger hook.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/customer-portal/webapp/src/providers/IdleTimeoutProvider.tsx` around lines 52 - 57, The onIdle handler currently calls signOut().finally(() => navigate("/home")) which silences any rejection; update onIdle to attach a .catch that logs sign-out failures using the app's logger hook (import and use the same logger hook used elsewhere in this file), then keep the .finally to always call navigate("/home"); reference the onIdle function and the signOut() call so the change is limited to adding error logging before the existing finally block and ensuring setSessionWarningOpen(false) remains unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/customer-portal/webapp/src/components/home-page/HomePageArrowIcon.tsx`:
- Around line 29-52: The HomePageArrowIcon component is unused and duplicates
the inline ArrowIcon defined in HomePage.tsx; either delete HomePageArrowIcon
(remove the file and any exports) or consolidate by importing HomePageArrowIcon
into HomePage.tsx and replacing the local ArrowIcon definition and usages (the
inline ArrowIcon at ~lines 26-39 and its usage at line ~99) with the imported
HomePageArrowIcon to avoid duplication and keep a single source of truth.
In `@apps/customer-portal/webapp/src/pages/HomePage.tsx`:
- Around line 65-67: handleLogin currently calls signIn() without error handling
or a loading flag; add a boolean state like isSigningIn, set it true before
calling signIn and false in a finally block, wrap signIn() in try/catch to
handle/rethrow or report errors (e.g., processLogger/console or a UI toast) and
prevent unhandled rejections, and use disabled={isSigningIn} on the CTA buttons
to prevent multiple clicks; update references to handleLogin and signIn
accordingly to wire the new state and error handling.
---
Nitpick comments:
In `@apps/customer-portal/webapp/src/pages/HomePage.tsx`:
- Around line 94-109: The Button rendering "Create Support Ticket" is using
component="a" while relying on onClick (handleLogin) rather than an href; remove
component="a" so the Button renders as a proper button element (or replace with
an explicit <button> variant) and keep the onClick={handleLogin} intact; apply
the same change to the other CTA Buttons that use component="a" with onClick
(the other instances referenced around the same component, e.g., the CTAs at the
other sections) to ensure semantic correctness and avoid rendering anchors
without hrefs.
In `@apps/customer-portal/webapp/src/providers/IdleTimeoutProvider.tsx`:
- Around line 52-57: The onIdle handler currently calls signOut().finally(() =>
navigate("/home")) which silences any rejection; update onIdle to attach a
.catch that logs sign-out failures using the app's logger hook (import and use
the same logger hook used elsewhere in this file), then keep the .finally to
always call navigate("/home"); reference the onIdle function and the signOut()
call so the change is limited to adding error logging before the existing
finally block and ensuring setSessionWarningOpen(false) remains unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 3446d6fe-0358-4557-a55b-2f0ecc0b7414
⛔ Files ignored due to path filters (2)
apps/customer-portal/webapp/src/assets/images/login-page/login-screen-inverted.svgis excluded by!**/*.svgapps/customer-portal/webapp/src/assets/images/login-page/login-screen.svgis excluded by!**/*.svg
📒 Files selected for processing (16)
apps/customer-portal/webapp/src/App.tsxapps/customer-portal/webapp/src/components/common/header/Actions.tsxapps/customer-portal/webapp/src/components/common/header/__tests__/Header.test.tsxapps/customer-portal/webapp/src/components/home-page/HomePageArrowIcon.tsxapps/customer-portal/webapp/src/components/login-page/LoginBackground.tsxapps/customer-portal/webapp/src/components/login-page/LoginBox.tsxapps/customer-portal/webapp/src/components/login-page/LoginFooter.tsxapps/customer-portal/webapp/src/components/login-page/LoginSlogan.tsxapps/customer-portal/webapp/src/components/login-page/ParticleBackground.tsxapps/customer-portal/webapp/src/components/login-page/__tests__/LoginBackground.test.tsxapps/customer-portal/webapp/src/components/login-page/__tests__/LoginFooter.test.tsxapps/customer-portal/webapp/src/components/login-page/__tests__/LoginSlogan.test.tsxapps/customer-portal/webapp/src/layouts/AuthGuard.tsxapps/customer-portal/webapp/src/pages/HomePage.tsxapps/customer-portal/webapp/src/pages/LoginPage.tsxapps/customer-portal/webapp/src/providers/IdleTimeoutProvider.tsx
💤 Files with no reviewable changes (9)
- apps/customer-portal/webapp/src/components/login-page/tests/LoginFooter.test.tsx
- apps/customer-portal/webapp/src/components/login-page/tests/LoginSlogan.test.tsx
- apps/customer-portal/webapp/src/components/login-page/LoginBox.tsx
- apps/customer-portal/webapp/src/components/login-page/LoginBackground.tsx
- apps/customer-portal/webapp/src/pages/LoginPage.tsx
- apps/customer-portal/webapp/src/components/login-page/ParticleBackground.tsx
- apps/customer-portal/webapp/src/components/login-page/LoginFooter.tsx
- apps/customer-portal/webapp/src/components/login-page/tests/LoginBackground.test.tsx
- apps/customer-portal/webapp/src/components/login-page/LoginSlogan.tsx
Add local isSigningIn state and useLogger to prevent multiple concurrent sign-in attempts. The sign-in handler now guards against re-entry, sets a pending flag, and catches errors to log them and reset the flag. Also update imports to include useState and useLogger.
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/customer-portal/webapp/src/pages/HomePage.tsx (1)
121-142:⚠️ Potential issue | 🟡 MinorAlign the “Browse Resources” CTA with its new behavior.
Line 125 now starts
signIn()instead of taking the user to resources, so the label no longer matches the action. If this button is meant to stay auth-first, please rename it; otherwise point it at the public resources section below.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/customer-portal/webapp/src/pages/HomePage.tsx` around lines 121 - 142, The "Browse Resources" button's label no longer matches its behavior because its click now triggers signIn() via the handleLogin flow; update the HomePage.tsx Button (the element using handleLogin and endIcon ArrowIcon) to either (A) keep the auth-first behavior and change the visible label to something like "Sign in to Browse" or "Sign in", or (B) keep the "Browse Resources" label and change the handler from handleLogin/signIn to route or scroll to the public resources section (e.g., use the router push to "/resources" or call a scrollIntoView to the resources container) so the action matches the text; update any tests or aria-labels accordingly to reflect the new label/behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@apps/customer-portal/webapp/src/pages/HomePage.tsx`:
- Around line 121-142: The "Browse Resources" button's label no longer matches
its behavior because its click now triggers signIn() via the handleLogin flow;
update the HomePage.tsx Button (the element using handleLogin and endIcon
ArrowIcon) to either (A) keep the auth-first behavior and change the visible
label to something like "Sign in to Browse" or "Sign in", or (B) keep the
"Browse Resources" label and change the handler from handleLogin/signIn to route
or scroll to the public resources section (e.g., use the router push to
"/resources" or call a scrollIntoView to the resources container) so the action
matches the text; update any tests or aria-labels accordingly to reflect the new
label/behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: b25203d5-a15e-40b0-bf9a-42cfb872d62f
📒 Files selected for processing (1)
apps/customer-portal/webapp/src/pages/HomePage.tsx
Rashmika998
approved these changes
Mar 19, 2026
Rashmika998
merged commit Mar 19, 2026
60e85e0
into
wso2-open-operations:customer-portal-milestone-1
1 check passed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This pull request refactors the customer portal's authentication flow and landing experience by removing the dedicated login page and introducing a new public landing page at
/home. It also updates routing logic and header behavior to reflect these changes, and removes obsolete login page components. Test cases are updated to match the new routing conventions.Routing and authentication changes:
/loginroute andLoginPagecomponent with a new/homeroute andHomePagecomponent inApp.tsx, making/homethe public entry point and updating the fallback navigation to redirect to/homeinstead of/[1] [2] [3] [4].Actions.tsxto useisPublicLandingPagefor/home, ensuring that header actions and dropdowns are not shown on the public landing page.Removal of login page components:
LoginBackground.tsx,LoginBox.tsx,LoginFooter.tsx, andLoginSlogan.tsx, as these are no longer needed with the removal of the login page [1] [2] [3] [4].Header and navigation test updates:
/projects/:projectId/dashboard) and to reflect the new structure of project data returned from the API, ensuring tests remain accurate and robust after routing changes [1] [2] [3] [4] [5] [6] [7] [8] [9].New home page assets:
HomePageArrowIcon.tsx, a new SVG icon component for CTAs on the home page.Code style improvements:
Actions.tsx.Summary by CodeRabbit
New Features
Updates
Removals
Tests