Refactor support contact buttons in AgentAuthLayout and UserAuthLayou…#91
Refactor support contact buttons in AgentAuthLayout and UserAuthLayou…#91DinithEdirisinghe wants to merge 1 commit intoDevfrom
Conversation
…t to use Link component for navigation
WalkthroughAdmin login page form is refactored to controlled inputs with per-field error rendering and a loading-state submit label. Agent and User auth layouts replace “Contact Support” buttons with Next.js Links to /user/chat/bot. No exported API changes. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant C as AdminLogin Component
participant A as Auth API
U->>C: Type email/password (controlled inputs)
C-->>C: setState(values), setState(errors per-field)
U->>C: Click "Sign In" (isLoading=true)
C->>A: POST credentials
A-->>C: Success or errors
alt Success
C-->>C: isLoading=false, clear errors, navigate
else Validation/Auth Error
C-->>C: isLoading=false, setErrors(field-level)
C->>U: Show errors under fields
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Pull Request Overview
This PR refactors support contact buttons in authentication layouts to use proper navigation components instead of non-functional button elements. The main change replaces static button elements with Link components that provide actual navigation functionality to the support chat bot.
- Replace non-functional button elements with Next.js Link components for support contact
- Add proper navigation to "/user/chat/bot" route for both user and agent authentication layouts
- Update styling to maintain visual consistency with inline-block display
Reviewed Changes
Copilot reviewed 3 out of 5 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/components/user/auth/UserAuthLayout.tsx | Replace contact support button with Link component for navigation |
| src/components/agent/auth/AgentAuthLayout.tsx | Replace contact IT support button with Link component for navigation |
| src/app/admin/login/page.tsx | Code formatting changes from single quotes to double quotes |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| {t.technicalAssistance}{' '} | ||
| <button className="text-[#FFC72C] hover:text-[#FF5722] transition-all duration-300 underline font-medium hover:scale-105"> | ||
| <Link | ||
| href="/user/chat/bot" |
There was a problem hiding this comment.
The Link href points to '/user/chat/bot' in the Agent authentication layout, but this should likely point to an agent-specific support route like '/agent/chat/bot' to maintain consistency with the agent context.
| href="/user/chat/bot" | |
| href="/agent/chat/bot" |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
src/components/user/auth/UserAuthLayout.tsx (1)
218-224: Deduplicate the support URL via a shared constantThis path is now duplicated here and in AgentAuthLayout. Centralizing it reduces drift and eases future changes.
Apply this diff within this block:
- <Link - href="/user/chat/bot" + <Link + href={SUPPORT_CHAT_PATH} className="text-[#FFC72C] hover:text-[#FF5722] transition-all duration-300 underline font-medium hover:scale-105 inline-block" >Then add a routes constant and import it:
Create src/constants/routes.ts:
export const SUPPORT_CHAT_PATH = "/user/chat/bot";Import at the top of this file:
import { SUPPORT_CHAT_PATH } from "@/constants/routes";src/components/agent/auth/AgentAuthLayout.tsx (1)
218-224: Use a shared constant for the support pathReduce duplication across auth layouts by centralizing the support URL.
Apply this diff within this block:
- <Link - href="/user/chat/bot" + <Link + href={SUPPORT_CHAT_PATH} className="text-[#FFC72C] hover:text-[#FF5722] transition-all duration-300 underline font-medium hover:scale-105 inline-block" >Add the shared constant (if not already added for the user layout):
Create src/constants/routes.ts:
export const SUPPORT_CHAT_PATH = "/user/chat/bot";Import at the top of this file:
import { SUPPORT_CHAT_PATH } from "@/constants/routes";src/app/admin/login/page.tsx (3)
230-241: Accessibility: add autocomplete and associate error messaging for Email
- Improve UX with correct browser autofill hints.
- Convey validation state to assistive tech.
Apply this diff:
<input id="email" name="email" type="email" value={formData.email} onChange={handleInputChange} className={`w-full pl-10 pr-4 py-3 bg-card/60 dark:bg-card/40 backdrop-blur-sm border rounded-xl focus:ring-2 focus:ring-[#8D153A]/20 focus:border-[#8D153A]/50 transition-all duration-300 modern-card ${ errors.email ? "border-destructive" : "border-border/50" }`} placeholder="Enter your email address" disabled={isLoading} + autoComplete="username" + inputMode="email" + autoCapitalize="none" + aria-invalid={!!errors.email} + aria-describedby={errors.email ? "email-error" : undefined} /> </div> - {errors.email && ( - <p className="mt-2 text-sm text-destructive"> + {errors.email && ( + <p id="email-error" role="alert" className="mt-2 text-sm text-destructive"> {errors.email} </p> )}Also applies to: 243-247
263-275: Accessibility: add autocomplete + ARIA for Password and toggle control
- Add autocomplete for password managers.
- Expose invalid state and tie it to the error element.
- Give the visibility toggle an accessible name and pressed state.
Apply this diff:
<input id="password" name="password" type={showPassword ? "text" : "password"} value={formData.password} onChange={handleInputChange} className={`w-full pl-10 pr-12 py-3 bg-card/60 dark:bg-card/40 backdrop-blur-sm border rounded-xl focus:ring-2 focus:ring-[#8D153A]/20 focus:border-[#8D153A]/50 transition-all duration-300 modern-card ${ errors.password ? "border-destructive" : "border-border/50" }`} placeholder="Enter your password" disabled={isLoading} + autoComplete="current-password" + aria-invalid={!!errors.password} + aria-describedby={errors.password ? "password-error" : undefined} /> <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute inset-y-0 right-0 pr-3 flex items-center hover:text-[#8D153A] transition-colors duration-300 z-10" disabled={isLoading} + aria-label={showPassword ? "Hide password" : "Show password"} + aria-pressed={showPassword} > ... </button> </div> - {errors.password && ( - <p className="mt-2 text-sm text-destructive"> + {errors.password && ( + <p id="password-error" role="alert" className="mt-2 text-sm text-destructive"> {errors.password} </p> )}Also applies to: 276-288, 289-293
49-51: Tailwind class names: non-standard fractions may not resolveClasses like top-1/6 and left-1/5 aren’t in Tailwind’s default spacing scale. Unless you’ve extended your config, they’ll be dropped. Prefer arbitrary values to be safe.
Apply this diff:
- <div - className="absolute top-1/6 left-1/5 w-56 h-56 bg-[#8D153A]/5 dark:bg-[#8D153A]/2 rounded-full blur-3xl animate-pulse" + <div + className="absolute top-[16%] left-[20%] w-56 h-56 bg-[#8D153A]/5 dark:bg-[#8D153A]/2 rounded-full blur-3xl animate-pulse"If you’ve customized Tailwind to include those fractions, you can ignore this.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
src/app/admin/login/page.tsx(10 hunks)src/components/agent/auth/AgentAuthLayout.tsx(1 hunks)src/components/user/auth/UserAuthLayout.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/app/admin/login/page.tsx (1)
src/lib/auth/AdminAuthContext.tsx (1)
useAdminAuth(36-42)
🔇 Additional comments (3)
src/components/user/auth/UserAuthLayout.tsx (1)
218-224: Using Next.js Link here is the right semantic for navigationGood refactor from a button to a Link for client-side routing to the support chat.
src/components/agent/auth/AgentAuthLayout.tsx (2)
218-224: Nice swap to Next.js Link for supportThis aligns with the PR objective and keeps styling intact.
218-224: Confirm/user/chat/botsupport route for agents
- The route exists at
src/app/user/chat/bot/page.tsx.- Both AgentAuthLayout and User layout link to
/user/chat/bot.Please verify that this unified support chat path is intended for agent users as well. If agents require a dedicated endpoint or different access control, consider adding an agent‐specific route or redirect.
| const [formData, setFormData] = useState({ | ||
| email: '', | ||
| password: '' | ||
| email: "", | ||
| password: "", | ||
| }); | ||
| const [showPassword, setShowPassword] = useState(false); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
| const [errors, setErrors] = useState<{email?: string; password?: string}>({}); | ||
|
|
||
| const [errors, setErrors] = useState<{ email?: string; password?: string }>( | ||
| {} | ||
| ); |
There was a problem hiding this comment.
Fix TypeScript index typing: computed key from string ‘name’ breaks state updates
The current setFormData and setErrors use a string key (name) that isn’t constrained to "email" | "password". This typically causes TS errors like “Type '{ [x: string]: string; ... }' is not assignable to ...”. Constrain the key to the union of known fields to satisfy TS and prevent accidental keys.
Apply these diffs:
- Make state types explicit so we can safely use computed keys:
- const [formData, setFormData] = useState({
- email: "",
- password: "",
- });
+ const [formData, setFormData] = useState<Record<"email" | "password", string>>({
+ email: "",
+ password: "",
+ });
const [showPassword, setShowPassword] = useState(false);
const [isLoading, setIsLoading] = useState(false);
- const [errors, setErrors] = useState<{ email?: string; password?: string }>(
- {}
- );
+ const [errors, setErrors] = useState<Partial<Record<"email" | "password", string>>>({});- Use the constrained key when updating state:
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
- setFormData((prev) => ({
- ...prev,
- [name]: value,
- }));
+ const key = name as keyof typeof formData;
+ setFormData((prev) => ({
+ ...prev,
+ [key]: value,
+ }));
// Clear errors when user starts typing
- if (errors[name as keyof typeof errors]) {
- setErrors((prev) => ({
- ...prev,
- [name]: undefined,
- }));
+ if (errors[key]) {
+ setErrors((prev) => ({
+ ...prev,
+ [key]: undefined,
+ }));
}
};Also applies to: 127-141
| <span className="text-xs text-muted-foreground"> | ||
| Need technical assistance? | ||
| </span> | ||
| <Link | ||
| href="/contact" |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Consistency: align Admin footer support link with the new support chat Link
The other auth layouts now use /user/chat/bot. If that’s the canonical support entrypoint, mirror it here and centralize via a constant to avoid drift.
Apply this diff:
- <Link
- href="/contact"
+ <Link
+ href={SUPPORT_CHAT_PATH}
className="text-xs text-[#8D153A] hover:text-[#8D153A]/80 transition-colors font-medium"
>
Contact IT Support
</Link>And import the shared constant (if added):
import { SUPPORT_CHAT_PATH } from "@/constants/routes";Optionally verify the routes exist:
🏁 Script executed:
#!/bin/bash
set -euo pipefail
for d in "src/app/user/chat/bot" "src/app/contact"; do
if [ -d "$d" ]; then
echo "✓ Found $d"
else
echo "✗ MISSING: $d"
fi
doneLength of output: 321
Fix broken admin support link and centralize the support chat route
The /contact route is missing (src/app/contact not found), so the current footer link 404s. Replace it with the canonical support chat entrypoint (/user/chat/bot) and centralize the path in a shared constant to prevent future drift.
- In
src/app/admin/login/page.tsx(lines 348–352), update the<Link>:<span className="text-xs text-muted-foreground"> Need technical assistance? </span>
- href="/contact"
- href={SUPPORT_CHAT_PATH}
className="text-xs text-[#8D153A] hover:text-[#8D153A]/80 transition-colors font-medium"
Contact IT Support
🤖 Prompt for AI Agents
In src/app/admin/login/page.tsx around lines 348 to 352 the footer Link points
to a non-existent /contact route causing 404s; replace the href with a shared
constant SUPPORT_CHAT_PATH imported from src/constants/routes. Create or update
src/constants/routes.ts to export SUPPORT_CHAT_PATH = '/user/chat/bot', add the
import in the admin login page (import { SUPPORT_CHAT_PATH } from
'@/constants/routes') and update the Link href to use SUPPORT_CHAT_PATH instead
of the hard-coded string.
…t to use Link component for navigation
Pull Request
Summary
Area of change
Type of change
If Other, describe:
Screenshots or recordings (UI changes)
How to test
Acceptance criteria checklist
Accessibility checklist (if UI)
Security & privacy
Breaking changes
If breaking, describe migration steps and rollback plan:
Deployment notes
Additional notes
Summary by CodeRabbit
New Features
Refactor
Style