linumiq_net-web_app/app/login/page.tsx

'use client';

import { useEffect, useState, useTransition } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import type { AuthError } from '@supabase/supabase-js';
import { createSupabaseBrowserClient } from '@/lib/supabase/browser';

const RESEND_COOLDOWN = 45;

function isEmailNotConfirmed(error: AuthError): boolean {
  return error.code === 'email_not_confirmed' || /not confirmed/i.test(error.message);
}

export default function LoginPage() {
  const router = useRouter();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [needsConfirm, setNeedsConfirm] = useState(false);
  const [resendInfo, setResendInfo] = useState<string | null>(null);
  const [cooldown, setCooldown] = useState(0);
  const [isPending, startTransition] = useTransition();
  const [isResending, startResend] = useTransition();

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    if (params.get('error') === 'verification_failed') {
      setError(
        'Email verification failed or the link expired. Sign in below to resend a confirmation email.',
      );
    }
  }, []);

  useEffect(() => {
    if (cooldown <= 0) return;
    const t = setTimeout(() => setCooldown((c) => c - 1), 1000);
    return () => clearTimeout(t);
  }, [cooldown]);

  function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    setResendInfo(null);
    const supabase = createSupabaseBrowserClient();
    startTransition(async () => {
      const { error } = await supabase.auth.signInWithPassword({
        email,
        password,
      });
      if (error) {
        if (isEmailNotConfirmed(error)) {
          setNeedsConfirm(true);
          setError(
            'Please confirm your email address before signing in. Check your inbox or resend the confirmation email below.',
          );
        } else {
          setError(error.message);
        }
        return;
      }
      router.push('/dashboard');
      router.refresh();
    });
  }

  function onResend() {
    setResendInfo(null);
    const supabase = createSupabaseBrowserClient();
    startResend(async () => {
      const { error } = await supabase.auth.resend({ type: 'signup', email });
      if (error) {
        setError(error.message);
        return;
      }
      setResendInfo('Confirmation email sent. Check your inbox.');
      setCooldown(RESEND_COOLDOWN);
    });
  }

  return (
    <div className="card">
      <h1>Login</h1>
      <form onSubmit={onSubmit}>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="email"
          autoComplete="email"
          required
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          autoComplete="current-password"
          required
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        {error && <p className="error">{error}</p>}
        {resendInfo && <p className="success">{resendInfo}</p>}
        {needsConfirm && (
          <div className="row" style={{ marginTop: '0.75rem' }}>
            <button
              type="button"
              className="secondary"
              onClick={onResend}
              disabled={isResending || cooldown > 0 || !email}
            >
              {cooldown > 0
                ? `Resend in ${cooldown}s`
                : isResending
                  ? 'Sending…'
                  : 'Resend confirmation email'}
            </button>
          </div>
        )}
        <div className="row" style={{ marginTop: '1rem' }}>
          <button type="submit" disabled={isPending}>
            {isPending ? 'Signing in…' : 'Sign in'}
          </button>
          <Link className="muted" href="/signup">
            Need an account?
          </Link>
        </div>
      </form>
    </div>
  );
}