Function Signin

src/components/Signin.tsx:21–324

()

];

const Signin = () => {
  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
  const [checkingPassword, setCheckingPassword] = useState(false);
  const [requiredError, setRequiredError] = useState({
    emailReq: false,
    passReq: false,
  });
  const [suggestedDomains, setSuggestedDomains] =
    useState<string[]>(emailDomains);
  const [focusedIndex, setFocusedIndex] = useState(-1);
  const passwordRef = useRef<HTMLInputElement>(null);
  const suggestionRefs = useRef<HTMLLIElement[]>([]);
  const dropdownRef = useRef<HTMLUListElement>(null);

  function togglePasswordVisibility() {
    setIsPasswordVisible((prevState: any) => !prevState);
  }
  const router = useRouter();
  const email = useRef('');
  const password = useRef('');

  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    email.current = value;

    setFocusedIndex(0);
    setRequiredError((prevState) => ({
      ...prevState,
      emailReq: false,
    }));

    // Check if the input is a phone number
    const phoneNumberRegex = /^[0-9]{10}$/;
    if (phoneNumberRegex.test(value)) {
      setSuggestedDomains([]); // Clear suggestions for phone numbers
      return;
    }

    if (!value.includes('@')) {
      setSuggestedDomains(emailDomains);
      return;
    }

    const [, currentDomain] = value.split('@');

    // Clear suggestions if domain doesn't match
    if (
      !currentDomain ||
      !emailDomains.some((domain) => domain.startsWith(currentDomain))
    ) {
      setSuggestedDomains([]); // Hide suggestions for mismatched domains
      return;
    }

    // Check for exact matches and filter for partial matches
    const exactMatch = emailDomains.find((domain) => domain === currentDomain);
    if (exactMatch) {
      setSuggestedDomains([]);