Centered Sign In Card

"use client";

import { Eye, EyeOff } from "lucide-react";
import Link from "next/link";
import { useId, useState } from "react";

import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldSeparator,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

interface SocialProvider {
  label: string;
  icon: React.ReactNode;
  href?: string;
}

interface Auth1Props {
  heading?: string;
  description?: string;
  socialProviders?: SocialProvider[];
  forgotPasswordLink?: {
    label: string;
    href: string;
  };
  signupPrompt?: {
    text: string;
    linkLabel: string;
    href: string;
  };
  labels?: {
    divider?: string;
    email?: string;
    emailPlaceholder?: string;
    password?: string;
    passwordPlaceholder?: string;
    rememberMe?: string;
    submit?: string;
    legal?: string;
    passwordToggle?: string;
  };
  className?: string;
}

const GoogleIcon = (
  <svg viewBox="0 0 24 24" className="size-4" aria-hidden="true">
    <path
      fill="#4285F4"
      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
    />
    <path
      fill="#34A853"
      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
    />
    <path
      fill="#FBBC05"
      d="M5.84 14.1c-.22-.66-.35-1.36-.35-2.1s.13-1.44.35-2.1V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.83z"
    />
    <path
      fill="#EA4335"
      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
    />
  </svg>
);

const AppleIcon = (
  <svg viewBox="0 0 24 24" fill="currentColor" className="size-4" aria-hidden="true">
    <path d="M17.05 12.04c-.03-2.6 2.13-3.85 2.22-3.91-1.21-1.77-3.1-2.02-3.77-2.04-1.6-.16-3.13.94-3.94.94-.81 0-2.07-.92-3.4-.89-1.75.03-3.37 1.02-4.27 2.58-1.82 3.16-.47 7.83 1.31 10.39.87 1.25 1.91 2.66 3.27 2.61 1.31-.05 1.81-.85 3.4-.85 1.59 0 2.03.85 3.41.82 1.41-.02 2.3-1.28 3.16-2.54.99-1.45 1.4-2.86 1.42-2.93-.03-.01-2.73-1.05-2.76-4.15zM14.5 4.5c.72-.87 1.21-2.08 1.08-3.29-1.04.04-2.3.69-3.04 1.56-.67.77-1.25 2-1.09 3.18 1.16.09 2.34-.59 3.05-1.45z" />
  </svg>
);

export const auth1Demo: Auth1Props = {
  heading: "Welcome back",
  description: "Sign in to your account to continue",
  socialProviders: [
    { label: "Continue with Google", icon: GoogleIcon, href: "https://beste.co" },
    { label: "Continue with Apple", icon: AppleIcon, href: "https://beste.co" },
  ],
  forgotPasswordLink: {
    label: "Forgot password?",
    href: "https://beste.co",
  },
  signupPrompt: {
    text: "Don't have an account?",
    linkLabel: "Sign up",
    href: "https://beste.co",
  },
  labels: {
    divider: "or continue with email",
    email: "Email",
    emailPlaceholder: "you@example.com",
    password: "Password",
    passwordPlaceholder: "Enter your password",
    rememberMe: "Remember me",
    submit: "Sign in",
    legal:
      'By signing in, you agree to our <a href="https://beste.co">Terms of Service</a> and <a href="https://beste.co">Privacy Policy</a>.',
    passwordToggle: "Toggle password visibility",
  },
};

export function Auth1({
  heading,
  description,
  socialProviders = [],
  forgotPasswordLink,
  signupPrompt,
  labels = {},
  className,
}: Auth1Props) {
  const [showPassword, setShowPassword] = useState(false);
  const fieldId = useId();

  const {
    divider: dividerLabel,
    email: emailLabel,
    emailPlaceholder,
    password: passwordLabel,
    passwordPlaceholder,
    rememberMe: rememberMeLabel,
    submit: submitLabel,
    legal: legalText,
    passwordToggle: passwordToggleLabel,
  } = labels;

  return (
    <section
      className={cn("flex min-h-screen items-center justify-center px-4 py-16 md:py-24 w-full", className)}
    >
      <div className="w-full max-w-md">
        <div className="mb-8 flex flex-col items-center text-center">
          {heading && <h1 className="text-2xl font-bold md:text-3xl">{heading}</h1>}
          {description && <p className="mt-2 text-base text-muted-foreground">{description}</p>}
        </div>

        <div className="rounded-md border bg-card p-6 md:p-8">
          <form onSubmit={(e) => e.preventDefault()}>
            <FieldGroup>
              {socialProviders.length > 0 && (
                <Field>
                  {socialProviders.map((provider, index) => (
                    <Button key={index} variant="outline" size="lg" asChild>
                      <Link href={provider.href ?? "#"}>
                        {provider.icon}
                        {provider.label}
                      </Link>
                    </Button>
                  ))}
                </Field>
              )}

              {dividerLabel && (
                <FieldSeparator className="*:data-[slot=field-separator-content]:bg-card">
                  {dividerLabel}
                </FieldSeparator>
              )}

              <Field>
                {emailLabel && (
                  <FieldLabel htmlFor={`${fieldId}-email`}>{emailLabel}</FieldLabel>
                )}
                <Input
                  id={`${fieldId}-email`}
                  type="email"
                  placeholder={emailPlaceholder}
                  className="h-11"
                />
              </Field>

              <Field>
                <div className="flex items-center">
                  {passwordLabel && (
                    <FieldLabel htmlFor={`${fieldId}-password`}>{passwordLabel}</FieldLabel>
                  )}
                  {forgotPasswordLink && (
                    <Link
                      href={forgotPasswordLink.href}
                      className="ml-auto text-sm font-medium text-primary hover:underline"
                    >
                      {forgotPasswordLink.label}
                    </Link>
                  )}
                </div>
                <div className="relative">
                  <Input
                    id={`${fieldId}-password`}
                    type={showPassword ? "text" : "password"}
                    placeholder={passwordPlaceholder}
                    className="h-11 pr-11"
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    aria-label={passwordToggleLabel}
                    onClick={() => setShowPassword((value) => !value)}
                    className="absolute right-1 top-1/2 size-9 -translate-y-1/2 text-muted-foreground"
                  >
                    {showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
                  </Button>
                </div>
              </Field>

              {rememberMeLabel && (
                <Field orientation="horizontal">
                  <Checkbox id={`${fieldId}-remember`} />
                  <FieldLabel
                    htmlFor={`${fieldId}-remember`}
                    className="font-normal text-muted-foreground"
                  >
                    {rememberMeLabel}
                  </FieldLabel>
                </Field>
              )}

              {submitLabel && (
                <Field>
                  <Button type="submit" size="lg">
                    {submitLabel}
                  </Button>
                </Field>
              )}
            </FieldGroup>
          </form>
        </div>

        {signupPrompt && (
          <FieldDescription className="!mt-6 text-center">
            {signupPrompt.text}{" "}
            <Link href={signupPrompt.href} className="font-medium text-foreground">
              {signupPrompt.linkLabel}
            </Link>
          </FieldDescription>
        )}

        {legalText && (
          <FieldDescription
            className="mt-4 px-6 text-center"
            dangerouslySetInnerHTML={{ __html: legalText }}
          />
        )}
      </div>
    </section>
  );
}