{"version":1,"id":"auth","framework":"next","kind":"block","files":[{"path":"src/blocks/gfa/auth-login.tsx","content":"/* eslint-disable @next/next/no-img-element */\n\"use client\";\n\nimport Link from \"next/link\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport QRCodeStyling from \"qr-code-styling\";\nimport { Button } from \"@/components/gfa/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport type AuthLoginPayload = {\n method: \"phone\" | \"email\";\n identifier: string;\n password: string;\n rememberMe: boolean;\n};\n\nexport type AuthLoginProps = {\n brandLogoSrc?: string;\n brandName?: string;\n signupHref?: string;\n qrData?: string;\n className?: string;\n /** Gallery / embed: no full-viewport height, always stacked. */\n compact?: boolean;\n /** When false, QR panel is omitted (useful for tight embeds). */\n showQr?: boolean;\n /** Demo / wire: called instead of next-auth signIn */\n onSubmit?: (payload: AuthLoginPayload) => void | Promise;\n};\n\nfunction normalizeEmailForAuth(raw: string) {\n const email = raw.trim().toLowerCase();\n const at = email.indexOf(\"@\");\n if (at === -1) return email;\n const local = email.slice(0, at);\n const domain = email.slice(at + 1);\n if (domain === \"gmail.com\" || domain === \"googlemail.com\") {\n const noPlus = (local.split(\"+\")[0] ?? local).replace(/\\./g, \"\");\n return `${noPlus}@gmail.com`;\n }\n return email;\n}\n\n/** Buss login UI — phone / email + QR panel (auth wiring via onSubmit). */\nexport function AuthLogin({\n brandLogoSrc = \"/brand/logo-icon.png\",\n brandName = \"GFA\",\n signupHref = \"#\",\n qrData = \"gfa-login\",\n className,\n compact = false,\n showQr = true,\n onSubmit,\n}: AuthLoginProps) {\n const [loginMethod, setLoginMethod] = useState<\"phone\" | \"email\">(\"phone\");\n const [phoneDigits, setPhoneDigits] = useState(\"\");\n const [emailValue, setEmailValue] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [error, setError] = useState(null);\n const [submitting, setSubmitting] = useState(false);\n const [rememberMe, setRememberMe] = useState(true);\n\n const formattedPhone = useMemo(() => {\n const d = phoneDigits.replace(/\\D/g, \"\").slice(0, 10);\n const p1 = d.slice(0, 3);\n const p2 = d.slice(3, 6);\n const p3 = d.slice(6, 8);\n const p4 = d.slice(8, 10);\n return [p1, p2, p3, p4].filter(Boolean).join(\" \");\n }, [phoneDigits]);\n\n const emailSuggestions = useMemo(() => {\n if (loginMethod !== \"email\") return [];\n const raw = emailValue.trim();\n if (!raw) return [];\n const domains = [\n \"gmail.com\",\n \"hotmail.com\",\n \"yandex.com\",\n \"outlook.com\",\n \"outlook.com.tr\",\n \"icloud.com\",\n ] as const;\n const atIndex = raw.indexOf(\"@\");\n if (atIndex === -1) {\n return domains.map((d) => `${raw}@${d}`).filter((s) => s !== raw);\n }\n const local = raw.slice(0, atIndex);\n const typedDomain = raw.slice(atIndex + 1);\n if (!local) return [];\n return domains\n .filter((d) => d.startsWith(typedDomain.toLowerCase()))\n .map((d) => `${local}@${d}`)\n .filter((s) => s !== raw);\n }, [emailValue, loginMethod]);\n\n const emailInputRef = useRef(null);\n const [emailOpen, setEmailOpen] = useState(false);\n const [emailActiveIndex, setEmailActiveIndex] = useState(0);\n\n useEffect(() => {\n if (loginMethod !== \"email\") {\n setEmailOpen(false);\n return;\n }\n setEmailActiveIndex(0);\n setEmailOpen(emailSuggestions.length > 0);\n }, [emailSuggestions.length, loginMethod]);\n\n const qrRef = useRef(null);\n const qr = useMemo(() => {\n if (typeof window === \"undefined\") return null;\n return new QRCodeStyling({\n width: 216,\n height: 216,\n type: \"canvas\",\n data: qrData,\n margin: 10,\n qrOptions: { errorCorrectionLevel: \"H\" },\n dotsOptions: { type: \"dots\", color: \"#ffffff\" },\n cornersSquareOptions: { type: \"extra-rounded\", color: \"#ffffff\" },\n cornersDotOptions: { type: \"dot\", color: \"#ffffff\" },\n backgroundOptions: { color: \"#c8102e\" },\n imageOptions: {\n margin: 0,\n hideBackgroundDots: true,\n imageSize: 0.36,\n },\n });\n }, [qrData]);\n\n useEffect(() => {\n if (!qrRef.current || !qr) return;\n qrRef.current.innerHTML = \"\";\n qr.append(qrRef.current);\n }, [qr]);\n\n useEffect(() => {\n if (!qr) return;\n let cancelled = false;\n\n const makeBadgedLogo = async () => {\n const img = new Image();\n img.src = brandLogoSrc;\n await new Promise((resolve, reject) => {\n img.onload = () => resolve();\n img.onerror = () => reject(new Error(\"Logo load failed\"));\n });\n\n const size = 1024;\n const canvas = document.createElement(\"canvas\");\n canvas.width = size;\n canvas.height = size;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return null;\n\n ctx.imageSmoothingEnabled = true;\n ctx.imageSmoothingQuality = \"high\";\n\n const r = Math.round(size * 0.17);\n const pad = Math.round(size * 0.09);\n const w = size - pad * 2;\n const h = size - pad * 2;\n ctx.fillStyle = \"#ffffff\";\n ctx.beginPath();\n ctx.moveTo(pad + r, pad);\n ctx.arcTo(pad + w, pad, pad + w, pad + h, r);\n ctx.arcTo(pad + w, pad + h, pad, pad + h, r);\n ctx.arcTo(pad, pad + h, pad, pad, r);\n ctx.arcTo(pad, pad, pad + w, pad, r);\n ctx.closePath();\n ctx.fill();\n\n // Contain logo in the badge — preserve aspect (square mark must not stretch).\n const maxW = Math.floor(w * 0.72);\n const maxH = Math.floor(h * 0.72);\n const nw = img.naturalWidth || img.width || 1;\n const nh = img.naturalHeight || img.height || 1;\n const scale = Math.min(maxW / nw, maxH / nh);\n const logoTargetW = Math.max(1, Math.floor(nw * scale));\n const logoTargetH = Math.max(1, Math.floor(nh * scale));\n const x = Math.floor((size - logoTargetW) / 2);\n const y = Math.floor((size - logoTargetH) / 2);\n ctx.drawImage(img, x, y, logoTargetW, logoTargetH);\n\n return canvas.toDataURL(\"image/png\");\n };\n\n makeBadgedLogo()\n .then((dataUrl) => {\n if (cancelled || !dataUrl) return;\n qr.update({\n image: dataUrl,\n imageOptions: { hideBackgroundDots: true, imageSize: 0.36, margin: 0 },\n });\n })\n .catch(() => {});\n\n return () => {\n cancelled = true;\n };\n }, [qr, brandLogoSrc]);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (submitting) return;\n\n if (loginMethod === \"phone\") {\n if (phoneDigits.length !== 10) {\n setError(\"Phone number must be 10 digits.\");\n return;\n }\n }\n\n setSubmitting(true);\n setError(null);\n try {\n const payload: AuthLoginPayload = {\n method: loginMethod,\n identifier:\n loginMethod === \"phone\"\n ? phoneDigits\n : normalizeEmailForAuth(emailValue),\n password: loginMethod === \"phone\" ? \"\" : password,\n rememberMe,\n };\n await onSubmit?.(payload);\n } catch {\n setError(\"Sign-in is unavailable right now. Please try again.\");\n } finally {\n setSubmitting(false);\n }\n };\n\n return (\n \n \n
\n
\n \n
\n\n
\n \n Welcome back\n \n

\n Enter the phone number linked to your account to continue.\n

\n
\n\n \n
\n
\n \n {loginMethod === \"phone\" ? \"Phone\" : \"Email\"}\n \n
\n {\n setLoginMethod(\"phone\");\n setPhoneDigits(\"\");\n setError(null);\n }}\n aria-pressed={loginMethod === \"phone\"}\n className={cn(\n \"h-9 rounded-lg px-3 text-sm font-medium transition\",\n loginMethod === \"phone\"\n ? \"bg-background text-foreground shadow-sm\"\n : \"text-muted-foreground hover:text-foreground\",\n )}\n >\n Phone\n \n {\n setLoginMethod(\"email\");\n setError(null);\n }}\n aria-pressed={loginMethod === \"email\"}\n className={cn(\n \"h-9 rounded-lg px-3 text-sm font-medium transition\",\n loginMethod === \"email\"\n ? \"bg-background text-foreground shadow-sm\"\n : \"text-muted-foreground hover:text-foreground\",\n )}\n >\n Email\n \n
\n
\n\n {loginMethod === \"phone\" ? (\n
\n
\n \n TR\n \n +90\n
\n {\n const next = e.target.value\n .replace(/\\D/g, \"\")\n .slice(0, 10);\n setPhoneDigits(next);\n }}\n />\n
\n ) : (\n <>\n setEmailValue(e.target.value)}\n onFocus={() => setEmailOpen(emailSuggestions.length > 0)}\n onBlur={() => {\n window.setTimeout(() => setEmailOpen(false), 120);\n }}\n onKeyDown={(e) => {\n if (\n !emailOpen &&\n (e.key === \"ArrowDown\" || e.key === \"ArrowUp\")\n ) {\n setEmailOpen(emailSuggestions.length > 0);\n return;\n }\n if (!emailOpen) return;\n if (e.key === \"Escape\") {\n setEmailOpen(false);\n return;\n }\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setEmailActiveIndex((i) =>\n Math.min(\n i + 1,\n Math.max(emailSuggestions.length - 1, 0),\n ),\n );\n return;\n }\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setEmailActiveIndex((i) => Math.max(i - 1, 0));\n return;\n }\n if (e.key === \"Enter\") {\n const chosen = emailSuggestions[emailActiveIndex];\n if (chosen) {\n e.preventDefault();\n setEmailValue(chosen);\n setEmailOpen(false);\n window.requestAnimationFrame(() =>\n emailInputRef.current?.focus(),\n );\n }\n }\n }}\n />\n\n {emailOpen ? (\n
\n \n {emailSuggestions.slice(0, 10).map((s, idx) => {\n const active = idx === emailActiveIndex;\n return (\n ev.preventDefault()}\n onClick={() => {\n setEmailValue(s);\n setEmailOpen(false);\n window.requestAnimationFrame(() =>\n emailInputRef.current?.focus(),\n );\n }}\n className={cn(\n \"flex w-full items-center justify-between rounded-xl px-3 py-2 text-left text-sm transition\",\n active\n ? \"bg-[#c8102e]/10 text-foreground dark:bg-[#c8102e]/20\"\n : \"text-foreground/85 hover:bg-muted\",\n )}\n >\n {s}\n \n );\n })}\n
\n
\n ) : null}\n \n )}\n
\n\n {loginMethod === \"email\" ? (\n
\n \n Password\n \n setPassword(e.target.value)}\n />\n
\n ) : null}\n\n \n\n {error ? (\n
{error}
\n ) : null}\n\n \n {submitting ? \"Continuing…\" : \"Continue\"}\n \n\n
\n Don't have an account?{\" \"}\n \n Create account\n \n
\n \n \n\n {showQr ? (\n \n
\n
\n
\n
\n
\n
\n

\n Sign in with QR code\n

\n

\n Scan with your phone camera to sign in instantly.\n

\n
\n
\n ) : null}\n \n \n );\n}\n\nexport default AuthLogin;\n"}],"meta":{"studioName":"GFA Development & Design Studio","siteUrl":"https://ui.gkhn.dev"}}