191 lines
10 KiB
TypeScript
191 lines
10 KiB
TypeScript
import React from 'react';
|
|
import GuestLayout from '@/Layouts/GuestLayout';
|
|
import { Head, Link, useForm, usePage } from '@inertiajs/react';
|
|
|
|
interface LoginProps {
|
|
status?: string;
|
|
canResetPassword: boolean;
|
|
}
|
|
|
|
export default function Login({ status, canResetPassword }: LoginProps) {
|
|
const { system_settings } = usePage().props as any;
|
|
const isGoogleEnabled = system_settings?.oauth_google_enabled === '1' || system_settings?.oauth_google_enabled === true;
|
|
const isGithubEnabled = system_settings?.oauth_github_enabled === '1' || system_settings?.oauth_github_enabled === true;
|
|
|
|
const { data, setData, post, processing, errors, reset } = useForm({
|
|
email: '',
|
|
password: '',
|
|
remember: false,
|
|
});
|
|
|
|
const submit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
post(route('login'), { onFinish: () => reset('password') });
|
|
};
|
|
|
|
return (
|
|
<GuestLayout>
|
|
<Head title="Sign in" />
|
|
|
|
{/* Heading */}
|
|
<div className="mb-8 anim-down">
|
|
<h1 className="text-2xl font-bold text-[#1A2421] tracking-tight">Sign in</h1>
|
|
<p className="mt-1.5 text-sm text-gray-400 font-medium">
|
|
Enter your credentials to access the dashboard.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Status message */}
|
|
{status && (
|
|
<div className="mb-6 px-4 py-3 rounded-xl bg-emerald-50 border border-emerald-100 text-sm font-semibold text-emerald-700 anim-fade">
|
|
{status}
|
|
</div>
|
|
)}
|
|
|
|
{/* OAuth */}
|
|
{(isGoogleEnabled || isGithubEnabled) && (
|
|
<div className="mb-6 anim-up" style={{ animationDelay: '0.08s' }}>
|
|
<div className={`grid gap-3 ${isGoogleEnabled && isGithubEnabled ? 'grid-cols-2' : 'grid-cols-1'}`}>
|
|
{isGoogleEnabled && (
|
|
<a
|
|
href="/auth/google/redirect"
|
|
className="flex items-center justify-center gap-2.5 px-4 py-2.5 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 hover:border-gray-300 transition-colors duration-200 text-sm font-semibold text-gray-700"
|
|
>
|
|
<svg className="w-4 h-4 shrink-0" viewBox="0 0 24 24">
|
|
<path fill="#EA4335" d="M12 5c1.61 0 3.09.59 4.23 1.57l3.12-3.12C17.35 1.67 14.85 1 12 1 7.73 1 4.14 3.48 2.46 7.1l3.71 2.87C7.04 7.09 9.34 5 12 5z"/>
|
|
<path fill="#4285F4" d="M23.49 12.27c0-.79-.07-1.54-.19-2.27H12v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58l3.7 2.87c2.16-2 3.72-4.94 3.72-8.69z"/>
|
|
<path fill="#FBBC05" d="M6.17 14.77l-3.71 2.87C4.14 21.27 7.73 23 12 23c2.97 0 5.48-1 7.37-2.69l-3.7-2.87c-1.03.69-2.35 1.11-3.67 1.11-2.66 0-4.96-2.09-5.83-4.78z"/>
|
|
<path fill="#34A853" d="M12 19.45c1.32 0 2.64-.42 3.67-1.11l3.7 2.87C17.48 22 14.97 23 12 23 7.73 23 4.14 21.27 2.47 17.64l3.71-2.87c.86 2.69 3.16 4.68 5.82 4.68z"/>
|
|
</svg>
|
|
Google
|
|
</a>
|
|
)}
|
|
{isGithubEnabled && (
|
|
<a
|
|
href="/auth/github/redirect"
|
|
className="flex items-center justify-center gap-2.5 px-4 py-2.5 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 hover:border-gray-300 transition-colors duration-200 text-sm font-semibold text-gray-700"
|
|
>
|
|
<svg className="w-4 h-4 shrink-0" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
|
|
</svg>
|
|
GitHub
|
|
</a>
|
|
)}
|
|
</div>
|
|
|
|
<div className="relative my-6">
|
|
<div className="absolute inset-0 flex items-center">
|
|
<div className="w-full border-t border-gray-100" />
|
|
</div>
|
|
<div className="relative flex justify-center">
|
|
<span className="px-3 bg-white text-xs font-semibold text-gray-300 uppercase tracking-widest">or</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Form */}
|
|
<form onSubmit={submit} className="anim-up" style={{ animationDelay: '0.14s' }}>
|
|
<div className="space-y-4">
|
|
|
|
{/* Email */}
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-semibold text-gray-600 mb-1.5">
|
|
Email address
|
|
</label>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
autoComplete="email"
|
|
autoFocus
|
|
value={data.email}
|
|
onChange={(e) => setData('email', e.target.value)}
|
|
placeholder="you@company.com"
|
|
className={`auth-input${errors.email ? ' !border-red-300 !bg-red-50/50' : ''}`}
|
|
/>
|
|
{errors.email && (
|
|
<p className="mt-1.5 text-xs font-semibold text-red-500">{errors.email}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Password */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-1.5">
|
|
<label htmlFor="password" className="text-sm font-semibold text-gray-600">
|
|
Password
|
|
</label>
|
|
{canResetPassword && (
|
|
<Link
|
|
href={route('password.request')}
|
|
className="text-xs font-semibold text-[#D4A017] hover:text-[#B88B14] transition-colors duration-200"
|
|
>
|
|
Forgot password?
|
|
</Link>
|
|
)}
|
|
</div>
|
|
<input
|
|
id="password"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
value={data.password}
|
|
onChange={(e) => setData('password', e.target.value)}
|
|
placeholder="••••••••"
|
|
className={`auth-input${errors.password ? ' !border-red-300 !bg-red-50/50' : ''}`}
|
|
/>
|
|
{errors.password && (
|
|
<p className="mt-1.5 text-xs font-semibold text-red-500">{errors.password}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Remember me */}
|
|
<label className="mt-4 flex items-center gap-2.5 cursor-pointer select-none group w-fit">
|
|
<input
|
|
type="checkbox"
|
|
checked={data.remember}
|
|
onChange={(e) => setData('remember', e.target.checked)}
|
|
className="sr-only"
|
|
/>
|
|
<div className={`w-4 h-4 rounded-[5px] border flex items-center justify-center transition-colors duration-200 shrink-0 ${data.remember ? 'bg-[#3D4E4B] border-[#3D4E4B]' : 'bg-white border-gray-300'}`}>
|
|
{data.remember && (
|
|
<svg className="w-2.5 h-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3.5}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
)}
|
|
</div>
|
|
<span className="text-sm font-medium text-gray-500 group-hover:text-gray-700 transition-colors duration-200">
|
|
Keep me signed in
|
|
</span>
|
|
</label>
|
|
|
|
{/* Submit */}
|
|
<button
|
|
type="submit"
|
|
disabled={processing}
|
|
className="mt-6 w-full h-11 rounded-xl bg-[#3D4E4B] hover:bg-[#2D3A38] text-white text-sm font-bold tracking-tight transition-colors duration-200 flex items-center justify-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
|
|
>
|
|
{processing ? (
|
|
<>
|
|
<svg className="w-4 h-4 animate-spin text-white/60" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
|
</svg>
|
|
Signing in…
|
|
</>
|
|
) : (
|
|
'Sign in'
|
|
)}
|
|
</button>
|
|
</form>
|
|
|
|
{/* Register link */}
|
|
<p className="mt-7 text-center text-sm text-gray-400 font-medium anim-fade" style={{ animationDelay: '0.22s' }}>
|
|
Don't have an account?{' '}
|
|
<Link href={route('register')} className="text-[#3D4E4B] font-semibold hover:text-[#D4A017] transition-colors duration-200">
|
|
Create one
|
|
</Link>
|
|
</p>
|
|
</GuestLayout>
|
|
);
|
|
}
|