buildmymcpserver/apps/web/app/login/page.tsx

'use client';

import { Input, Label } from '@/components/input';
import { Logo } from '@/components/logo';
import { Button } from '@/components/ui/button';
import { apiFetch, apiUrl } from '@/lib/api';
import Link from 'next/link';
import { useEffect, useState } from 'react';

const ERROR_COPY: Record<string, string> = {
  google_failed: 'Google sign-in could not be completed. Please try again.',
  google_state: 'Google sign-in expired or was interrupted. Please try again.',
};

export default function LoginPage() {
  const [email, setEmail] = useState('');
  const [state, setState] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');
  const [error, setError] = useState<string | null>(null);
  const [googleEnabled, setGoogleEnabled] = useState(false);

  useEffect(() => {
    apiFetch<{ google: boolean }>('/v1/auth/providers')
      .then((r) => setGoogleEnabled(r.google))
      .catch(() => setGoogleEnabled(false));

    const params = new URLSearchParams(window.location.search);
    const err = params.get('error');
    if (err && ERROR_COPY[err]) setError(ERROR_COPY[err]);
  }, []);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setState('sending');
    setError(null);
    try {
      await apiFetch('/v1/auth/magic-link', {
        method: 'POST',
        body: JSON.stringify({ email }),
      });
      setState('sent');
    } catch (err) {
      setState('error');
      setError((err as Error).message);
    }
  }

  return (
    <div className="flex min-h-screen items-center justify-center px-6">
      <div className="w-full max-w-sm">
        <Logo className="mb-10" />
        <h1 className="text-[20px] font-semibold tracking-tight">Sign in to your workspace</h1>
        <p className="mt-1 text-[13px] text-[--color-fg-muted]">
          Continue with Google, or get a magic link by email.
        </p>

        {state !== 'sent' ? (
          <>
            {googleEnabled && (
              <>
                <a
                  href={apiUrl('/v1/auth/google')}
                  className="mt-7 flex h-10 w-full items-center justify-center gap-2.5 rounded-md border border-[--color-border] bg-[--color-bg-elevated] text-[13px] font-medium text-[--color-fg] transition-colors duration-200 hover:border-[--color-border-strong]"
                >
                  <GoogleIcon />
                  Continue with Google
                </a>
                <div className="my-5 flex items-center gap-3">
                  <span className="h-px flex-1 bg-[--color-border]" />
                  <span className="text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
                    or
                  </span>
                  <span className="h-px flex-1 bg-[--color-border]" />
                </div>
              </>
            )}
            <form onSubmit={submit} className={googleEnabled ? 'space-y-3' : 'mt-7 space-y-3'}>
              <div className="space-y-1.5">
                <Label htmlFor="email">Email</Label>
                <Input
                  id="email"
                  type="email"
                  required
                  autoComplete="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="you@company.com"
                />
              </div>
              <Button
                type="submit"
                variant="primary"
                size="lg"
                className="w-full"
                disabled={state === 'sending'}
              >
                {state === 'sending' ? 'Sending…' : 'Send magic link'}
              </Button>
              {error && <p className="text-[12px] text-[--color-danger]">{error}</p>}
            </form>
          </>
        ) : (
          <div className="panel mt-7 p-4">
            <p className="text-[13px]">
              Magic link sent to <span className="mono">{email}</span>.
            </p>
            <p className="mt-1.5 text-[12px] text-[--color-fg-muted]">
              In dev mode the link is printed to the API console output. Check the terminal.
            </p>
          </div>
        )}

        <div className="mt-8 text-[12px] text-[--color-fg-subtle]">
          <Link href="/" className="transition-colors hover:text-[--color-fg]">
            ← Back to home
          </Link>
        </div>
      </div>
    </div>
  );
}

function GoogleIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 18 18" aria-hidden="true">
      <path
        fill="#4285F4"
        d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615Z"
      />
      <path
        fill="#34A853"
        d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18Z"
      />
      <path
        fill="#FBBC05"
        d="M3.964 10.706A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.706V4.962H.957A8.997 8.997 0 0 0 0 9c0 1.452.348 2.827.957 4.038l3.007-2.332Z"
      />
      <path
        fill="#EA4335"
        d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.962L3.964 7.294C4.672 5.167 6.656 3.58 9 3.58Z"
      />
    </svg>
  );
}