feat: Next.js 14 web admin scaffold — auth, sidebar, dashboard, placeholders

2026-03-25 08:23:25 +08:00
parent dc01eac449
commit 310a9453de
37 changed files with 2755 additions and 292 deletions
--- a/app/(auth)/login/page.tsx
+++ b/app/(auth)/login/page.tsx
@@ -0,0 +1,138 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { toast } from 'sonner';
+import { api } from '@/lib/api';
+import { useAuthStore } from '@/lib/auth-store';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Loader2 } from 'lucide-react';
+
+const loginSchema = z.object({
+  tenantSlug: z.string().min(1, 'Tenant slug is required'),
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(6, 'Password must be at least 6 characters'),
+});
+
+type LoginForm = z.infer<typeof loginSchema>;
+
+export default function LoginPage() {
+  const router = useRouter();
+  const setAuth = useAuthStore((s) => s.setAuth);
+  const [loading, setLoading] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginForm>({
+    resolver: zodResolver(loginSchema),
+  });
+
+  const onSubmit = async (data: LoginForm) => {
+    setLoading(true);
+    try {
+      const res = await api.post('/api/v1/auth/login', data);
+      const { accessToken, user } = res.data;
+      setAuth({ accessToken, tenantSlug: data.tenantSlug, user });
+      toast.success('Welcome back, ' + user.firstName + '!');
+      router.push('/dashboard');
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { message?: string } } };
+      toast.error(error.response?.data?.message || 'Login failed. Check your credentials.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      className="min-h-screen flex items-center justify-center p-4"
+      style={{ backgroundColor: '#F8FAFC' }}
+    >
+      <div className="w-full max-w-md">
+        {/* Logo */}
+        <div className="text-center mb-8">
+          <div
+            className="w-12 h-12 rounded-xl flex items-center justify-center text-white font-bold text-xl mx-auto mb-3"
+            style={{ backgroundColor: '#0891B2' }}
+          >
+            F
+          </div>
+          <h1 className="text-2xl font-bold text-slate-800">FiberOps</h1>
+          <p className="text-slate-500 text-sm mt-1">ISP Management Platform</p>
+        </div>
+
+        <Card className="shadow-sm">
+          <CardHeader>
+            <CardTitle className="text-lg">Sign in to your account</CardTitle>
+            <CardDescription>Enter your tenant and credentials to continue</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+              <div className="space-y-1.5">
+                <Label htmlFor="tenantSlug">Tenant Slug</Label>
+                <Input
+                  id="tenantSlug"
+                  placeholder="e.g. demo-isp"
+                  {...register('tenantSlug')}
+                />
+                {errors.tenantSlug && (
+                  <p className="text-xs text-red-500">{errors.tenantSlug.message}</p>
+                )}
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="admin@yourisp.com"
+                  {...register('email')}
+                />
+                {errors.email && (
+                  <p className="text-xs text-red-500">{errors.email.message}</p>
+                )}
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="password">Password</Label>
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="••••••••"
+                  {...register('password')}
+                />
+                {errors.password && (
+                  <p className="text-xs text-red-500">{errors.password.message}</p>
+                )}
+              </div>
+
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={loading}
+                style={{ backgroundColor: '#0891B2' }}
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Signing in…
+                  </>
+                ) : (
+                  'Sign In'
+                )}
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}