[8664] No visual error feedback for incorrect password on Session Expired login dialog

[jvega190]

craftercms/craftercms#8664

[coderabbitai]

Warning

Review limit reached

@jvega190, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 4 minutes and 31 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more credits in the billing tab to continue.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: f8bed059-58c2-4197-b861-83cc9c534a99

📥 Commits

Reviewing files that changed from the base of the PR and between 9990ce9 and ae19793.

📒 Files selected for processing (4)

• ui/app/src/components/AuthMonitor/AuthMonitor.tsx
• ui/app/src/services/auth.ts
• ui/app/src/state/epics/auth.ts
• ui/app/src/state/reducers/auth.ts

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[jvega190]

@coderabbitai can you check if everything looks good? Please give it a final review before I hand over for human review

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== PR Details ==="
gh pr view 4899 --repo craftercms/studio-ui --json title,body,state,additions,deletions,changedFiles,files,commits

echo ""
echo "=== PR Diff ==="
gh pr diff 4899 --repo craftercms/studio-ui

Length of output: 6417

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== Full services/auth.ts ==="
cat ui/app/src/services/auth.ts

echo ""
echo "=== Full epics/auth.ts ==="
cat ui/app/src/state/epics/auth.ts

echo ""
echo "=== Palette file ==="
fd -e ts -e tsx "palette" --search-path ui/app/src/styles | head -5
fd -e ts -e tsx "palette" --search-path ui/app/src/styles -x cat {}

echo ""
echo "=== AuthMonitor.tsx full ==="
cat ui/app/src/components/AuthMonitor/AuthMonitor.tsx

echo ""
echo "=== reducers/auth.ts full ==="
cat ui/app/src/state/reducers/auth.ts

echo ""
echo "=== Check for error code 6004 constant ==="
rg -rn "6004" --type ts --type tsx -C2

echo ""
echo "=== Check reversePluckProps usage in epics/auth.ts ==="
rg -n "reversePluckProps" ui/app/src/state/epics/auth.ts

Length of output: 23805

---

---

@jvega190 The PR looks solid overall — the core logic (calling obtainAuthToken to detect failed logins, the custom catchError to avoid wiping error state via sessionTimeout, clearing error: null on re-submit, and the updated error message) is all well-reasoned and correct. Here are the issues I found before you hand this over:

---

🔴 Issues

1. Two unused imports in ui/app/src/state/epics/auth.ts

• reversePluckProps — imported but never used anywhere in the file.
• catchAjaxError — was moved to the bottom of the imports but is also never called in any epic in this file.

- import { reversePluckProps } from '../../utils/object';
...
- import { catchAjaxError } from '../../utils/ajax';

---

🟡 Minor suggestions

2. Unnecessary Fragment in AuthMonitor.tsx (Line 133)

The <>...</> wrapping a single <Typography> adds no value:

- <>
-   <Typography ...>
-     ...
-   </Typography>
- </>
+ <Typography ...>
+   ...
+ </Typography>

3. Magic number 6004 in the component

The error.code === 6004 check is spread into the view layer without a named constant. Consider defining it near the reducer where it originates, e.g.:

// reducers/auth.ts or a shared constants file
export const INCORRECT_CREDENTIALS_ERROR_CODE = 6004;

Then import and use it in both the reducer and the component.

4. placeContent: 'center' → alignItems: 'center'

placeContent is a shorthand for align-content + justify-content, which affects multi-line flex containers. For a single-line flex row where you want to vertically centre the icon next to the text, alignItems: 'center' is semantically correct:

- placeContent: 'center',
+ alignItems: 'center',

5. Colour contrast (accessibility)

palette.white (#fff) text on palette.red.tint (#FF6961) background has a contrast ratio of ~2.9:1, which falls below the WCAG AA threshold of 4.5:1. Switching to palette.red.highlight (#FFEBEA) as the background with a dark text colour (e.g. palette.red.shade #D70015) would meet contrast requirements and still convey the error state visually.

---

No blocking logic bugs found. Addressing the two unused imports (#1) before human review would be the most important cleanup.