Refactor IDP selector into reusable UrlCombobox component

Co-authored-by: jeswr <63333554+jeswr@users.noreply.github.com>

Author: 2 people

app/components/LoginPage.tsx

@@ -1,16 +1,16 @@
 "use client";
 
-import { useState, useRef, useEffect, useMemo } from "react";
+import { useState, useEffect } from "react";
 import { useSolidAuth } from "@ldo/solid-react";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
 import Button from "./shared/Button";
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import UrlCombobox, { ComboboxOption } from "./shared/UrlCombobox";
 
-const PRESET_ISSUERS = [
-  { label: "Solid Community", value: "https://solidcommunity.net/" },
-  { label: "Inrupt", value: "https://login.inrupt.com" },
-] as const;
+const PRESET_ISSUERS: ComboboxOption[] = [
+  { label: "Solid Community", value: "https://solidcommunity.net/", secondaryLabel: "https://solidcommunity.net/" },
+  { label: "Inrupt", value: "https://login.inrupt.com", secondaryLabel: "https://login.inrupt.com" },
+];
 
 export default function LoginPage() {
   const { session, login } = useSolidAuth();
@@ -19,11 +19,7 @@ export default function LoginPage() {
     process.env.NEXT_PUBLIC_OIDC_ISSUER || ""
   );
   const [isLoading, setIsLoading] = useState(false);
-  const [showDropdown, setShowDropdown] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
 
   // Redirect to home if already authenticated
   useEffect(() => {
@@ -37,25 +33,6 @@ export default function LoginPage() {
     return null;
   }
 
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node) &&
-        inputRef.current &&
-        !inputRef.current.contains(event.target as Node)
-      ) {
-        setShowDropdown(false);
-      }
-    };
-
-    if (showDropdown) {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }
-  }, [showDropdown]);
-
   const validateIssuerUrl = (url: string): boolean => {
     if (!url.trim()) {
       setError("Please enter a Solid Identity Provider URL");
@@ -92,74 +69,13 @@ export default function LoginPage() {
     }
   };
 
-  const handleIssuerSelect = (value: string) => {
+  const handleIssuerChange = (value: string) => {
     setIssuerInput(value);
-    setShowDropdown(false);
-    setError(null);
-    setHighlightedIndex(-1);
-    inputRef.current?.focus();
-  };
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setIssuerInput(e.target.value);
-    setHighlightedIndex(-1);
     if (error) {
       setError(null);
     }
   };
 
-  const handleInputFocus = () => {
-    setShowDropdown(true);
-    setHighlightedIndex(-1);
-  };
-
-  // Filter preset issuers based on input
-  const filteredIssuers = useMemo(() => {
-    return PRESET_ISSUERS.filter((issuer) => {
-      if (!issuerInput.trim()) return true;
-      const query = issuerInput.toLowerCase();
-      return (
-        issuer.label.toLowerCase().includes(query) ||
-        issuer.value.toLowerCase().includes(query)
-      );
-    });
-  }, [issuerInput]);
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (!showDropdown) {
-      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-        e.preventDefault();
-        setShowDropdown(true);
-        setHighlightedIndex(-1);
-      }
-      return;
-    }
-
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        setHighlightedIndex((prev) =>
-          prev < filteredIssuers.length - 1 ? prev + 1 : prev
-        );
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : prev));
-        break;
-      case "Enter":
-        if (highlightedIndex >= 0 && highlightedIndex < filteredIssuers.length) {
-          e.preventDefault();
-          handleIssuerSelect(filteredIssuers[highlightedIndex].value);
-        }
-        break;
-      case "Escape":
-        e.preventDefault();
-        setShowDropdown(false);
-        setHighlightedIndex(-1);
-        break;
-    }
-  };
-
   return (
     <main className="flex min-h-screen bg-white" role="main" aria-label="Sign in page">
       {/* Left side - Logo and branding */}
@@ -221,98 +137,17 @@ export default function LoginPage() {
             noValidate
           >
             {/* Identity Provider Input */}
-            <div>
-              <label
-                htmlFor="oidc-issuer"
-                className="mb-2 block text-sm font-medium text-black"
-              >
-                Solid Identity Provider
-              </label>
-              <div className="relative">
-                <input
-                  ref={inputRef}
-                  id="oidc-issuer"
-                  name="oidc-issuer"
-                  type="text"
-                  value={issuerInput}
-                  onChange={handleInputChange}
-                  onFocus={handleInputFocus}
-                  onKeyDown={handleKeyDown}
-                  placeholder="Enter your provider URL or select from the list"
-                  className={`h-12 w-full rounded-md border bg-white px-4 pr-10 text-black placeholder:text-gray-500 focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 ${
-                    error
-                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                      : "border-gray-300 focus:border-[#7B42F6] focus:ring-[#7B42F6]"
-                  }`}
-                  disabled={isLoading}
-                  required
-                  aria-required="true"
-                  aria-label="Enter or select Solid Identity Provider"
-                  aria-describedby={error ? "oidc-issuer-error" : "oidc-issuer-description"}
-                  aria-invalid={!!error}
-                  aria-expanded={showDropdown}
-                  aria-activedescendant={highlightedIndex >= 0 ? `issuer-option-${highlightedIndex}` : undefined}
-                  role="combobox"
-                  aria-autocomplete="list"
-                  aria-controls="issuer-listbox"
-                  autoComplete="off"
-                />
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShowDropdown(!showDropdown);
-                    inputRef.current?.focus();
-                  }}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600"
-                  aria-label={showDropdown ? "Hide provider options" : "Show provider options"}
-                  aria-expanded={showDropdown}
-                >
-                  <ChevronDownIcon className={`h-5 w-5 transition-transform ${showDropdown ? "rotate-180" : ""}`} />
-                </button>
-
-                {/* Dropdown with preset options */}
-                {showDropdown && filteredIssuers.length > 0 && (
-                  <div
-                    ref={dropdownRef}
-                    id="issuer-listbox"
-                    className="absolute z-10 mt-1 w-full rounded-md border border-gray-200 bg-white shadow-lg max-h-60 overflow-auto"
-                    role="listbox"
-                    aria-label="Preset identity providers"
-                  >
-                    {filteredIssuers.map((issuer, index) => (
-                      <button
-                        key={issuer.value}
-                        id={`issuer-option-${index}`}
-                        type="button"
-                        onClick={() => handleIssuerSelect(issuer.value)}
-                        className={`w-full px-4 py-3 text-left focus:outline-none ${
-                          highlightedIndex === index
-                            ? "bg-gray-100"
-                            : "hover:bg-gray-100"
-                        }`}
-                        role="option"
-                        aria-selected={issuerInput === issuer.value}
-                      >
-                        <div className="text-sm font-medium text-gray-900">
-                          {issuer.label}
-                        </div>
-                        <div className="text-xs text-gray-500">
-                          {issuer.value}
-                        </div>
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-              {error && (
-                <p id="oidc-issuer-error" className="mt-1 text-xs text-red-600" role="alert">
-                  {error}
-                </p>
-              )}
-              <p id="oidc-issuer-description" className="sr-only">
-                Enter your Solid Identity Provider URL or select from the preset options
-              </p>
-            </div>
+            <UrlCombobox
+              id="oidc-issuer"
+              label="Solid Identity Provider"
+              value={issuerInput}
+              onChange={handleIssuerChange}
+              options={PRESET_ISSUERS}
+              placeholder="Enter your provider URL or select from the list"
+              error={error || undefined}
+              disabled={isLoading}
+              aria-label="Enter or select Solid Identity Provider"
+            />
 
             {/* Action button */}
             <div className="flex items-center justify-end pt-4">