| import React, { useEffect } from 'react'; |
| import { useSearchParams } from 'react-router-dom'; |
| import { Loader2, Zap } from 'lucide-react'; |
| import { Button } from '@/components/ui/button'; |
| import { cn } from '@/lib/utils'; |
| import { APP_NAME, APP_TAGLINE } from '@/lib/branding'; |
| import { useAuth } from '@/context/AuthContext'; |
| import { apiUrl } from '@/lib/api'; |
|
|
| export default function SignIn() { |
| const { phase, googleOn, microsoftOn } = useAuth(); |
| const [searchParams, setSearchParams] = useSearchParams(); |
|
|
| useEffect(() => { |
| const err = searchParams.get('auth_error'); |
| if (!err) return; |
| if (err === 'access_denied') { |
| console.info('Sign-in was cancelled.'); |
| } else if (err === 'invite_email_mismatch') { |
| console.warn( |
| 'Invitation email does not match your account. Sign in with the invited address.' |
| ); |
| } else { |
| console.warn('Sign-in error:', err); |
| } |
| const next = new URLSearchParams(searchParams); |
| next.delete('auth_error'); |
| setSearchParams(next, { replace: true }); |
| }, [searchParams, setSearchParams]); |
|
|
| const inviteParam = searchParams.get('invite'); |
| const googleHref = apiUrl( |
| inviteParam ? `/api/auth/google?invite=${encodeURIComponent(inviteParam)}` : '/api/auth/google' |
| ); |
| const microsoftHref = apiUrl( |
| inviteParam |
| ? `/api/auth/microsoft?invite=${encodeURIComponent(inviteParam)}` |
| : '/api/auth/microsoft' |
| ); |
|
|
| if (phase === 'loading') { |
| return ( |
| <div className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-violet-50"> |
| <Loader2 className="h-10 w-10 animate-spin text-violet-600" aria-label="Loading" /> |
| </div> |
| ); |
| } |
|
|
| if (phase === 'error') { |
| return ( |
| <div className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-violet-50 px-4"> |
| <div className="max-w-md rounded-2xl border border-slate-200 bg-white p-8 text-center shadow-sm"> |
| <p className="text-slate-700">Could not reach the server. Refresh and try again.</p> |
| </div> |
| </div> |
| ); |
| } |
|
|
| if (!googleOn && !microsoftOn) { |
| return ( |
| <div className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-violet-50 px-4"> |
| <div className="max-w-md rounded-2xl border border-amber-200 bg-white p-8 text-center shadow-sm"> |
| <p className="font-medium text-slate-800">Sign-in is not configured</p> |
| <p className="mt-2 text-sm text-slate-600"> |
| Set GOOGLE_CLIENT_ID/GOOGLE_CLIENT_SECRET and/or MICROSOFT_CLIENT_ID/ |
| MICROSOFT_CLIENT_SECRET on the server to enable access. |
| </p> |
| </div> |
| </div> |
| ); |
| } |
|
|
| return ( |
| <div className="flex min-h-[100dvh] flex-col items-center justify-center bg-gradient-to-br from-slate-50 via-white to-violet-50 px-4 py-12"> |
| <div className="w-full max-w-md rounded-2xl border border-slate-200 bg-white p-8 shadow-lg shadow-violet-100/50 sm:p-10"> |
| <div className="mb-8 flex flex-col items-center text-center"> |
| <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-600 to-purple-600 shadow-lg shadow-violet-200"> |
| <Zap className="h-7 w-7 text-white" aria-hidden /> |
| </div> |
| <h1 className="text-2xl font-bold text-slate-800">{APP_NAME}</h1> |
| <p className="mt-2 text-sm text-slate-500">{APP_TAGLINE}</p> |
| </div> |
| |
| <p className="mb-6 text-center text-slate-600"> |
| Sign in to access campaigns, contacts, leads, and deals. |
| </p> |
| |
| {inviteParam ? ( |
| <p className="mb-6 rounded-lg bg-violet-50 px-4 py-3 text-center text-sm text-violet-800"> |
| You have a workspace invitation. Sign in with the email address that received the |
| invite. |
| </p> |
| ) : null} |
| |
| <div className="flex flex-col gap-3"> |
| {googleOn ? ( |
| <Button |
| asChild |
| size="lg" |
| className={cn( |
| 'w-full gap-3 bg-white text-slate-800 border border-slate-200 shadow-sm', |
| 'hover:bg-slate-50' |
| )} |
| variant="outline" |
| > |
| <a href={googleHref} className="inline-flex items-center justify-center gap-3"> |
| <GoogleMark className="h-5 w-5 shrink-0" /> |
| <span>Sign in with Google</span> |
| </a> |
| </Button> |
| ) : null} |
| |
| {microsoftOn ? ( |
| <Button |
| asChild |
| size="lg" |
| className={cn( |
| 'w-full gap-3 bg-white text-slate-800 border border-slate-200 shadow-sm', |
| 'hover:bg-slate-50' |
| )} |
| variant="outline" |
| > |
| <a href={microsoftHref} className="inline-flex items-center justify-center gap-3"> |
| <MicrosoftMark className="h-5 w-5 shrink-0" /> |
| <span>Sign in with Microsoft</span> |
| </a> |
| </Button> |
| ) : null} |
| </div> |
| </div> |
| </div> |
| ); |
| } |
|
|
| function GoogleMark({ className }) { |
| return ( |
| <svg className={className} viewBox="0 0 24 24" aria-hidden> |
| <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.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" |
| /> |
| <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> |
| ); |
| } |
|
|
| function MicrosoftMark({ className }) { |
| return ( |
| <svg className={className} viewBox="0 0 23 23" aria-hidden> |
| <rect x="1" y="1" width="10" height="10" fill="#F25022" /> |
| <rect x="12" y="1" width="10" height="10" fill="#7FBA00" /> |
| <rect x="1" y="12" width="10" height="10" fill="#00A4EF" /> |
| <rect x="12" y="12" width="10" height="10" fill="#FFB900" /> |
| </svg> |
| ); |
| } |
|
|
