linumiq_net-web_app/app/signup/page.tsx

'use client';

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

const RESEND_COOLDOWN = 45;

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

  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 { data, error } = await supabase.auth.signUp({
        email,
        password,
        options: {
          emailRedirectTo: `${process.env.NEXT_PUBLIC_APP_URL ?? ''}/auth/confirm`,
        },
      });
      if (error) {
        setError(error.message);
        return;
      }
      // GoTrue returns a decoy user with an empty `identities` array when the
      // email is already registered (to avoid leaking existence). Treat it as
      // "already registered" and point them at login.
      if (data.user && data.user.identities?.length === 0) {
        setError(
          'An account with this email already exists. Try signing in instead.',
        );
        return;
      }
      if (data.session) {
        router.push('/dashboard');
        router.refresh();
        return;
      }
      setSubmitted(true);
      setCooldown(RESEND_COOLDOWN);
    });
  }

  function onResend() {
    setError(null);
    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);
    });
  }

  if (submitted) {
    return (
      <div className="card form-card">
        <h1>Check your email</h1>
        <p>
          We sent a confirmation link to <strong>{email}</strong>. Click the
          link in that email to activate your account, then sign in.
        </p>
        {error && <p className="error">{error}</p>}
        {resendInfo && <p className="success">{resendInfo}</p>}
        <div className="row" style={{ marginTop: '1rem' }}>
          <button
            type="button"
            onClick={onResend}
            disabled={isResending || cooldown > 0}
          >
            {cooldown > 0
              ? `Resend in ${cooldown}s`
              : isResending
                ? 'Sending…'
                : 'Resend confirmation email'}
          </button>
          <Link className="muted" href="/login">
            Back to login
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="card form-card">
      <h1>Sign up</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="new-password"
          required
          minLength={8}
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        {error && <p className="error">{error}</p>}
        <div className="row" style={{ marginTop: '1rem' }}>
          <button type="submit" disabled={isPending}>
            {isPending ? 'Creating…' : 'Create account'}
          </button>
          <Link className="muted" href="/login">
            Already have one?
          </Link>
        </div>
      </form>
    </div>
  );
}