92 lines
4.2 KiB
TypeScript
92 lines
4.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { toast } from 'sonner';
|
|
import { Loader2 } from 'lucide-react';
|
|
import api from '@/lib/api';
|
|
import { useAuthStore } from '@/lib/auth-store';
|
|
|
|
export default function LoginPage() {
|
|
const router = useRouter();
|
|
const setAuth = useAuthStore((s) => s.setAuth);
|
|
const [loading, setLoading] = useState(false);
|
|
const [form, setForm] = useState({ tenantSlug: '', email: '', password: '' });
|
|
const [errors, setErrors] = useState<Record<string, string>>({});
|
|
|
|
const validate = () => {
|
|
const e: Record<string, string> = {};
|
|
if (!form.tenantSlug) e.tenantSlug = 'Required';
|
|
if (!form.email || !/\S+@\S+\.\S+/.test(form.email)) e.email = 'Valid email required';
|
|
if (!form.password || form.password.length < 6) e.password = 'Min 6 characters';
|
|
setErrors(e);
|
|
return Object.keys(e).length === 0;
|
|
};
|
|
|
|
const onSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!validate()) return;
|
|
setLoading(true);
|
|
try {
|
|
const res = await api.post('/api/v1/auth/login', form);
|
|
const { accessToken, user } = res.data;
|
|
setAuth({ accessToken, tenantSlug: form.tenantSlug, user });
|
|
toast.success(`Welcome back, ${user.firstName}!`);
|
|
router.push('/dashboard');
|
|
} catch (err: any) {
|
|
toast.error(err.response?.data?.message || 'Login failed. Check your credentials.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const field = (key: keyof typeof form) => ({
|
|
value: form[key],
|
|
onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
|
|
setForm(f => ({ ...f, [key]: e.target.value })),
|
|
});
|
|
|
|
const inputClass = (key: string) =>
|
|
`w-full border rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors[key] ? 'border-red-400' : 'border-gray-300'}`;
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center p-4" style={{ backgroundColor: '#F8FAFC' }}>
|
|
<div className="w-full max-w-sm">
|
|
{/* Logo */}
|
|
<div className="text-center mb-8">
|
|
<div className="w-14 h-14 rounded-2xl flex items-center justify-center text-white font-bold text-2xl mx-auto mb-3 shadow-md"
|
|
style={{ backgroundColor: '#0891B2' }}>F</div>
|
|
<h1 className="text-2xl font-bold text-gray-800">FiberOps</h1>
|
|
<p className="text-gray-500 text-sm mt-1">ISP Management Platform</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
|
|
<h2 className="text-base font-semibold text-gray-800 mb-5">Sign in to your account</h2>
|
|
<form onSubmit={onSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Tenant Slug</label>
|
|
<input {...field('tenantSlug')} className={inputClass('tenantSlug')} placeholder="e.g. demo-isp" autoComplete="off" />
|
|
{errors.tenantSlug && <p className="text-xs text-red-500 mt-1">{errors.tenantSlug}</p>}
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
|
<input {...field('email')} type="email" className={inputClass('email')} placeholder="admin@yourisp.com" autoComplete="email" />
|
|
{errors.email && <p className="text-xs text-red-500 mt-1">{errors.email}</p>}
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
|
|
<input {...field('password')} type="password" className={inputClass('password')} placeholder="••••••••" autoComplete="current-password" />
|
|
{errors.password && <p className="text-xs text-red-500 mt-1">{errors.password}</p>}
|
|
</div>
|
|
<button type="submit" disabled={loading}
|
|
className="w-full py-2.5 rounded-lg text-white font-medium text-sm flex items-center justify-center gap-2 transition-colors disabled:opacity-70"
|
|
style={{ backgroundColor: '#0891B2' }}>
|
|
{loading ? <><Loader2 size={16} className="animate-spin" />Signing in…</> : 'Sign In'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|