diff --git a/src/app/error.tsx b/src/app/error.tsx index db6d36727..87bf2262c 100644 --- a/src/app/error.tsx +++ b/src/app/error.tsx @@ -1,16 +1,13 @@ 'use client'; -import { Button } from '@/components/ui/button'; import { InfoIcon } from 'lucide-react'; import Link from 'next/link'; import { useEffect } from 'react'; export default function ErrorPage({ error, - reset, }: { error: Error & { digest?: string }; - reset: () => void; }) { useEffect(() => { // Log the error to an error reporting service diff --git a/src/components/Signin.tsx b/src/components/Signin.tsx index 99b033d80..87be1005c 100644 --- a/src/components/Signin.tsx +++ b/src/components/Signin.tsx @@ -15,6 +15,7 @@ const emailDomains = [ 'outlook.com', 'icloud.com', 'hotmail.com', + 'rediffmail.com', ]; const Signin = () => { @@ -26,6 +27,9 @@ const Signin = () => { }); const [suggestedDomains, setSuggestedDomains] = useState(emailDomains); + const [focusedIndex, setFocusedIndex] = useState(-1); + const passwordRef = useRef(null); + const suggestionRefs = useRef([]); function togglePasswordVisibility() { setIsPasswordVisible((prevState: any) => !prevState); @@ -38,34 +42,54 @@ const Signin = () => { const value = e.target.value; email.current = value; - if (value.includes('@')) { - const [, domainPart] = value.split('@'); - // Check for exact matches and filter for partial matches - const exactMatch = emailDomains.find((domain) => domain === domainPart); - if (exactMatch) { - setSuggestedDomains([]); - } else { - const matchingDomains = emailDomains.filter((domain) => - domain.startsWith(domainPart), - ); - setSuggestedDomains(matchingDomains); - } - } else { - setSuggestedDomains(emailDomains); - } + setFocusedIndex(0); setRequiredError((prevState) => ({ ...prevState, emailReq: false, })); + + if (!value.includes('@')) { + setSuggestedDomains(emailDomains); + return; + } + + const [, currentDomain] = value.split('@'); + // Check for exact matches and filter for partial matches + const exactMatch = emailDomains.find((domain) => domain === currentDomain); + if (exactMatch) { + setSuggestedDomains([]); + return; + } + + const matchingDomains = emailDomains.filter((domain) => + domain.startsWith(currentDomain), + ); + setSuggestedDomains(matchingDomains); }; const handleSuggestionClick = (domain: string) => { - const [userPart] = email.current.split('@'); - const newEmail = `${userPart}@${domain}`; + const [username] = email.current.split('@'); + const newEmail = `${username}@${domain}`; email.current = newEmail; + passwordRef.current?.focus(); setSuggestedDomains([]); }; + // Handle keyboard events for navigating and selecting suggestions + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && focusedIndex >= 0 && suggestedDomains.length > 0) { + handleSuggestionClick(suggestedDomains[focusedIndex]); + } else if (e.key === 'ArrowDown') { + e.preventDefault(); + setFocusedIndex((prevIndex) => + Math.min(prevIndex + 1, suggestedDomains.length - 1), + ); + } else if (e.key === 'ArrowUp') { + e.preventDefault(); + setFocusedIndex((prevIndex) => Math.max(prevIndex - 1, 0)); + } + }; + const handleSubmit = async (e?: React.FormEvent) => { const loadId = toast.loading('Signing in...'); if (e) { @@ -112,13 +136,7 @@ const Signin = () => { placeholder="name@email.com" value={email.current} onChange={handleEmailChange} - onFocus={() => { - if (email.current.includes('@')) { - handleEmailChange({ - target: { value: email.current }, - } as React.ChangeEvent); - } - }} + onKeyDown={handleKeyDown} /> {email.current && suggestedDomains.length > 0 && (
    { {suggestedDomains.map((domain: string, index: number) => ( <>
  • + (suggestionRefs.current[index] = listItem!) + } onClick={() => handleSuggestionClick(domain)} + className={`relative flex w-full cursor-default select-none items-center rounded-sm p-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${ + focusedIndex === index + ? 'bg-primary-foreground font-medium' + : '' + }`} > {email.current.split('@')[0]}@{domain}
  • @@ -151,6 +177,7 @@ const Signin = () => { type={isPasswordVisible ? 'text' : 'password'} id="password" placeholder="••••••••" + ref={passwordRef} onChange={(e) => { setRequiredError((prevState) => ({ ...prevState,