Skip to content

feat: preserve login params in forgot password screen#819

Merged
steveiliop56 merged 1 commit into
mainfrom
feat/forgot-passwd-params
Apr 26, 2026
Merged

feat: preserve login params in forgot password screen#819
steveiliop56 merged 1 commit into
mainfrom
feat/forgot-passwd-params

Conversation

@steveiliop56
Copy link
Copy Markdown
Member

@steveiliop56 steveiliop56 commented Apr 26, 2026

Fixes #803

Summary by CodeRabbit

  • New Features

    • Added a "Back to login" button for the login flow.
    • Enhanced authentication pages to preserve URL parameters during navigation between login and forgot password sections.
  • Refactor

    • Updated redirect behavior for improved navigation handling in the authentication flow.

@dosubot dosubot Bot added the size:S This PR changes 10-29 lines, ignoring generated files. label Apr 26, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 26, 2026

📝 Walkthrough

Walkthrough

The changes modify the authentication flow to preserve URL query parameters when navigating between login and forgot-password pages. LoginPage now passes query parameters to LoginForm, which uses them to construct the forgot-password link destination. ForgotPasswordPage similarly preserves parameters when redirecting back to login. Translation keys are added for UI consistency.

Changes

Cohort / File(s) Summary
Authentication Components
frontend/src/components/auth/login-form.tsx, frontend/src/pages/login-page.tsx, frontend/src/pages/forgot-password-page.tsx
Added query parameter preservation across login and forgot-password flows. LoginPage extracts and passes searchParams to LoginForm; LoginForm uses the parameter in forgot-password link navigation. ForgotPasswordPage now uses useLocation() to capture and preserve query strings when redirecting back to login.
Internationalization
frontend/src/lib/i18n/locales/en-US.json, frontend/src/lib/i18n/locales/en.json
Added new translation key backToLoginButton with value "Back to login" and adjusted JSON formatting for validity.

Sequence Diagram

sequenceDiagram
    actor User
    participant LoginPage
    participant LoginForm
    participant ForgotPasswordPage
    
    User->>LoginPage: Navigate with ?ref=xyz
    LoginPage->>LoginPage: Extract searchParams
    LoginPage->>LoginForm: Pass params prop (?ref=xyz)
    LoginForm->>User: Render forgot password link
    
    User->>LoginForm: Click forgot password
    LoginForm->>ForgotPasswordPage: Navigate to /forgot-password?ref=xyz
    ForgotPasswordPage->>ForgotPasswordPage: useLocation captures ?ref=xyz
    ForgotPasswordPage->>User: Render back to login button
    
    User->>ForgotPasswordPage: Click back to login
    ForgotPasswordPage->>LoginPage: window.location.replace(/login?ref=xyz)
    LoginPage->>User: Restored with original params
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Parameters hop through our pages with care,
From login to forgot-password, they flow everywhere,
Query strings preserved in every redirect,
The auth flow's now seamless—just what we'd expect!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately reflects the main change: implementing parameter preservation when navigating between login and forgot password pages.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/forgot-passwd-params

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

🧹 Nitpick comments (3)
frontend/src/pages/forgot-password-page.tsx (1)

18-20: You can simplify redirect construction by using search directly.

search already contains either "" or "?...", so re-parsing/re-serializing is unnecessary here.

♻️ Suggested simplification
   const { t } = useTranslation();
   const { search } = useLocation();
-  const searchParams = new URLSearchParams(search);

...
           onClick={() => {
-            const eparams = searchParams.toString();
-            window.location.replace(
-              `/login${eparams.length > 0 ? `?${eparams}` : ""}`,
-            );
+            window.location.replace(`/login${search}`);
           }}

Also applies to: 40-43

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/pages/forgot-password-page.tsx` around lines 18 - 20, The code
re-parses the location query string by creating a URLSearchParams from
useLocation().search (variables search and searchParams) even though search
already contains the raw query string ("" or "?..."); remove the URLSearchParams
creation and any re-serialization and instead use search directly when
constructing redirects/links (e.g., where you currently use
searchParams.toString() or build "?"+searchParams), update the occurrences
around the redirect construction and the similar block at lines 40-43 to
reference search directly so you preserve the leading "?" when present and avoid
unnecessary parsing.
frontend/src/components/auth/login-form.tsx (1)

74-80: Keep href aligned with the click redirect target.

Right now the rendered link target omits params while onClick includes them. Making both use the same computed URL avoids inconsistent behavior.

♻️ Suggested update
                 <a
-                  href="/forgot-password"
+                  href={`/forgot-password${props.params ?? ""}`}
                   onClick={(e) => {
                     e.preventDefault();
-                    window.location.replace(
-                      `/forgot-password${props.params ? `${props.params}` : ""}`,
-                    );
+                    window.location.replace(e.currentTarget.href);
                   }}
                   className="text-muted-foreground hover:text-muted-foreground/80 text-sm absolute right-0 bottom-[2.565rem]" // 2.565 is *just* perfect
                 >
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/components/auth/login-form.tsx` around lines 74 - 80, The href
and onClick redirect are out of sync; compute a single target URL once (e.g.,
const target = `/forgot-password${props.params ? props.params : ""}`) in the
LoginForm component and use that same target for both the href attribute and
inside the onClick handler (replace the current inline string in
window.location.replace). Update references in the onClick closure and href to
use the shared target so the rendered link matches the programmatic redirect.
frontend/src/pages/login-page.tsx (1)

267-270: Consider removing the inline IIFE from JSX.

This works, but deriving the query suffix once above the return improves readability and avoids repeating URL-construction logic across pages.

♻️ Suggested refactor
+  const querySuffix = search ? search : "";
...
           <LoginForm
             onSubmit={(values) => loginMutate(values)}
             loading={loginIsPending || oauthIsPending}
             formId={formId}
-            params={(() => {
-              const eparams = searchParams.toString();
-              return eparams.length > 0 ? `?${eparams}` : "";
-            })()}
+            params={querySuffix}
           />
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/pages/login-page.tsx` around lines 267 - 270, The JSX currently
computes the query suffix inline with an IIFE for the params prop; pull that
logic out above the component's return by creating a single const (e.g.,
querySuffix or paramsSuffix) that builds `searchParams.toString()` and sets it
to either `'?'+eparams` or `''`, then replace the IIFE in the params prop with
that const; update usages in this file (login-page component, the params prop)
so URL-construction logic is centralized and not repeated.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@frontend/src/components/auth/login-form.tsx`:
- Around line 74-80: The href and onClick redirect are out of sync; compute a
single target URL once (e.g., const target = `/forgot-password${props.params ?
props.params : ""}`) in the LoginForm component and use that same target for
both the href attribute and inside the onClick handler (replace the current
inline string in window.location.replace). Update references in the onClick
closure and href to use the shared target so the rendered link matches the
programmatic redirect.

In `@frontend/src/pages/forgot-password-page.tsx`:
- Around line 18-20: The code re-parses the location query string by creating a
URLSearchParams from useLocation().search (variables search and searchParams)
even though search already contains the raw query string ("" or "?..."); remove
the URLSearchParams creation and any re-serialization and instead use search
directly when constructing redirects/links (e.g., where you currently use
searchParams.toString() or build "?"+searchParams), update the occurrences
around the redirect construction and the similar block at lines 40-43 to
reference search directly so you preserve the leading "?" when present and avoid
unnecessary parsing.

In `@frontend/src/pages/login-page.tsx`:
- Around line 267-270: The JSX currently computes the query suffix inline with
an IIFE for the params prop; pull that logic out above the component's return by
creating a single const (e.g., querySuffix or paramsSuffix) that builds
`searchParams.toString()` and sets it to either `'?'+eparams` or `''`, then
replace the IIFE in the params prop with that const; update usages in this file
(login-page component, the params prop) so URL-construction logic is centralized
and not repeated.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: b01900b1-2db9-4fc1-ae72-e4349a50fa56

📥 Commits

Reviewing files that changed from the base of the PR and between ab7c81f and e15e92c.

📒 Files selected for processing (5)
  • frontend/src/components/auth/login-form.tsx
  • frontend/src/lib/i18n/locales/en-US.json
  • frontend/src/lib/i18n/locales/en.json
  • frontend/src/pages/forgot-password-page.tsx
  • frontend/src/pages/login-page.tsx

@dosubot dosubot Bot added the lgtm This PR has been approved by a maintainer label Apr 26, 2026
@steveiliop56 steveiliop56 merged commit c364b86 into main Apr 26, 2026
2 checks passed
@Rycochet Rycochet deleted the feat/forgot-passwd-params branch May 14, 2026 12:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

lgtm This PR has been approved by a maintainer size:S This PR changes 10-29 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] Running a Docker container Tinyauth with a Synology reverse proxy

2 participants