Add src/app/admin/login/page.tsx
This commit is contained in:
181
src/app/admin/login/page.tsx
Normal file
181
src/app/admin/login/page.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function AdminLoginPage() {
|
||||
const router = useRouter();
|
||||
const [id, setId] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Streetwear", id: "streetwear" },
|
||||
{ name: "Casuals", id: "casuals" },
|
||||
{ name: "Specials", id: "specials" },
|
||||
{ name: "Collections", id: "collections" },
|
||||
{ name: "About", id: "about" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "Streetwear", href: "#streetwear" },
|
||||
{ label: "Casuals", href: "#casuals" },
|
||||
{ label: "Specials", href: "#specials" },
|
||||
{ label: "Seasonal Drops", href: "#seasonal" },
|
||||
{ label: "New Arrivals", href: "#new" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/collections" },
|
||||
{ label: "Our Story", href: "#story" },
|
||||
{ label: "Careers", href: "#careers" },
|
||||
{ label: "Press", href: "#press" },
|
||||
{ label: "Blog", href: "#blog" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Contact Us", href: "#contact" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Shipping Info", href: "#shipping" },
|
||||
{ label: "Returns", href: "#returns" },
|
||||
{ label: "Track Order", href: "#track" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#privacy" },
|
||||
{ label: "Terms of Service", href: "#terms" },
|
||||
{ label: "Refund Policy", href: "#refund" },
|
||||
{ label: "Cookie Policy", href: "#cookies" },
|
||||
{ label: "Accessibility", href: "#accessibility" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
setIsLoading(true);
|
||||
|
||||
// Authenticate with hardcoded credentials
|
||||
if (id === "death" && password === "helloimdead") {
|
||||
// Store auth state in localStorage
|
||||
localStorage.setItem("adminAuth", JSON.stringify({ id, isAuthenticated: true }));
|
||||
// Redirect to admin dashboard
|
||||
router.push("/admin/dashboard");
|
||||
} else {
|
||||
setError("Invalid credentials. Please try again.");
|
||||
setPassword("");
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="aurora"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav" className="mx-auto px-4 md:px-6">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="DripDrop"
|
||||
bottomLeftText="Admin Login"
|
||||
bottomRightText="hello@dripdrop.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen flex items-center justify-center px-4 md:px-6 py-12">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-white dark:bg-slate-900 rounded-lg shadow-lg p-8">
|
||||
<h1 className="text-3xl font-bold text-center mb-2">Admin Login</h1>
|
||||
<p className="text-center text-gray-600 dark:text-gray-400 mb-8">
|
||||
Access the admin dashboard
|
||||
</p>
|
||||
|
||||
{error && (
|
||||
<div className="mb-6 p-4 bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-700 text-red-800 dark:text-red-200 rounded-md text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleLogin} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="id" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
ID
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="id"
|
||||
value={id}
|
||||
onChange={(e) => setId(e.target.value)}
|
||||
placeholder="Enter your ID"
|
||||
disabled={isLoading}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent outline-none transition disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-slate-800 text-gray-900 dark:text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Enter your password"
|
||||
disabled={isLoading}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent outline-none transition disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-slate-800 text-gray-900 dark:text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isLoading ? "Logging in..." : "Login"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<Link href="/" className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 text-sm">
|
||||
Back to Home
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer" className="mx-auto px-4 md:px-6 mt-12">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2024 DripDrop. All rights reserved. Premium fashion, worldwide."
|
||||
bottomRightText="Secure checkout powered by Razorpay & Stripe"
|
||||
ariaLabel="Site footer with navigation and legal information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user