← back to Norma

app/login/page.tsx

293 lines

'use client';

import { useState, FormEvent, Suspense } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Loader2, Mail } from 'lucide-react';

/* ─── Google Icon (inline SVG) ──────────────────────────────────────────── */
function GoogleIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
      <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
      <path 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" fill="#34A853" />
      <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A11.96 11.96 0 0 0 0 12c0 1.94.46 3.77 1.28 5.4l3.56-2.77.01-.54z" fill="#FBBC05" />
      <path 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" fill="#EA4335" />
    </svg>
  );
}

/* ─── Apple Icon (inline SVG) ───────────────────────────────────────────── */
function AppleIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
      <path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
    </svg>
  );
}

/* ─── Login Flow ────────────────────────────────────────────────────────── */

function LoginFlow() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const returnTo = searchParams.get('returnTo');

  const [showEmailForm, setShowEmailForm] = useState(false);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  async function handleEmailLogin(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError('');
    setLoading(true);

    try {
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ username, password }),
      });

      const data = await res.json();

      if (res.ok && data.success) {
        const target = returnTo && returnTo.startsWith('/')
          ? returnTo
          : (data.role === 'pulse' ? '/pulse' : '/');
        router.push(target);
        router.refresh();
      } else {
        setError(data.error ?? 'Login failed. Please try again.');
      }
    } catch {
      setError('Network error. Please try again.');
    } finally {
      setLoading(false);
    }
  }

  function handleGoogleLogin() {
    // TODO: wire to Google OAuth
    window.location.href = '/api/auth/google';
  }

  function handleAppleLogin() {
    // TODO: wire to Apple OAuth
    window.location.href = '/api/auth/apple';
  }

  const btnBase: React.CSSProperties = {
    width: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 10,
    padding: '12px 16px',
    fontSize: 15,
    fontWeight: 600,
    borderRadius: 'var(--radius-md)',
    cursor: 'pointer',
    transition: 'all 0.15s',
    border: '1px solid var(--color-border)',
  };

  return (
    <div className="w-full" style={{ maxWidth: 380 }}>
      {/* Logo */}
      <div className="text-center mb-8">
        <div
          className="inline-flex items-center justify-center w-14 h-14 rounded-2xl mb-4"
          style={{
            backgroundColor: 'var(--color-surface-el)',
            border: '1px solid var(--color-border)',
          }}
        >
          <span className="text-2xl font-black" style={{ color: 'var(--color-primary)' }}>
            N
          </span>
        </div>
        <h1 className="text-xl font-bold" style={{ color: 'var(--color-text)' }}>
          Sign in
        </h1>
        <p className="mt-1 text-sm" style={{ color: 'var(--color-text-muted)' }}>
          Sign in or create an account
        </p>
      </div>

      {/* Card */}
      <div
        className="rounded-xl p-6"
        style={{
          backgroundColor: 'var(--color-surface)',
          border: '1px solid var(--color-border)',
        }}
      >
        {/* Social buttons */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {/* Google */}
          <button
            type="button"
            onClick={handleGoogleLogin}
            style={{
              ...btnBase,
              backgroundColor: '#fff',
              color: '#1f1f1f',
              border: '1px solid #dadce0',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = '#f7f8f8'; }}
            onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = '#fff'; }}
          >
            <GoogleIcon />
            Continue with Google
          </button>

          {/* Apple — hidden until /api/auth/apple is wired. The handler still
              exists for when Apple OAuth ships. */}
          {process.env.NEXT_PUBLIC_APPLE_OAUTH_ENABLED === 'true' && (
            <button
              type="button"
              onClick={handleAppleLogin}
              style={{
                ...btnBase,
                backgroundColor: '#000',
                color: '#fff',
                border: '1px solid #000',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = '#1a1a1a'; }}
              onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = '#000'; }}
            >
              <AppleIcon />
              Continue with Apple
            </button>
          )}
        </div>

        {/* Divider */}
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: 12,
            margin: '20px 0',
          }}
        >
          <div style={{ flex: 1, height: 1, backgroundColor: 'var(--color-border)' }} />
          <span style={{ fontSize: 12, color: 'var(--color-text-muted)', fontWeight: 500 }}>or</span>
          <div style={{ flex: 1, height: 1, backgroundColor: 'var(--color-border)' }} />
        </div>

        {/* Email sign in */}
        {!showEmailForm ? (
          <button
            type="button"
            onClick={() => setShowEmailForm(true)}
            style={{
              ...btnBase,
              backgroundColor: 'transparent',
              color: 'var(--color-text)',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = 'var(--color-surface-el)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; }}
          >
            <Mail size={18} />
            Continue with Email
          </button>
        ) : (
          <form onSubmit={handleEmailLogin} noValidate style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {error && (
              <div
                className="px-3 py-2 rounded-lg text-sm"
                style={{
                  backgroundColor: 'rgba(239,68,68,0.1)',
                  border: '1px solid rgba(239,68,68,0.3)',
                  color: 'var(--color-error)',
                }}
                role="alert"
              >
                {error}
              </div>
            )}

            <input
              type="text"
              autoComplete="username"
              autoFocus
              required
              className="input"
              placeholder="Username or email"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              disabled={loading}
              style={{ fontSize: 15, padding: '10px 14px' }}
            />

            <input
              type="password"
              autoComplete="current-password"
              required
              className="input"
              placeholder="Password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              disabled={loading}
              style={{ fontSize: 15, padding: '10px 14px' }}
            />

            <button
              type="submit"
              disabled={loading || !username || !password}
              className="btn btn-primary btn-lg w-full"
              style={{ fontSize: 15 }}
            >
              {loading ? (
                <>
                  <Loader2 size={16} className="animate-spin" />
                  Signing in...
                </>
              ) : (
                'Sign In'
              )}
            </button>
          </form>
        )}
      </div>

      {/* Footer */}
      <p className="text-center text-xs mt-5" style={{ color: 'var(--color-text-muted)', lineHeight: 1.5 }}>
        By continuing, you agree to our{' '}
        <a href="/terms" style={{ color: 'var(--color-text-secondary)', textDecoration: 'underline' }}>
          Terms of Service
        </a>{' '}
        and{' '}
        <a href="/privacy" style={{ color: 'var(--color-text-secondary)', textDecoration: 'underline' }}>
          Privacy Policy
        </a>
      </p>
    </div>
  );
}

/* ─── Page ──────────────────────────────────────────────────────────────── */

export default function LoginPage() {
  return (
    <div
      className="min-h-screen flex items-center justify-center px-4"
      style={{ backgroundColor: 'var(--color-bg)' }}
    >
      <Suspense
        fallback={
          <div className="w-full max-w-sm text-center">
            <Loader2 size={24} className="animate-spin mx-auto" style={{ color: 'var(--color-primary)' }} />
          </div>
        }
      >
        <LoginFlow />
      </Suspense>
    </div>
  );
}