Archived
120 lines
3.4 KiB
TypeScript
120 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { createClient } from "@/utils/supabase/client";
|
|
import { useRouter } from "next/navigation";
|
|
import React, { useState } from "react";
|
|
|
|
export default function AdminLoginPage() {
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const router = useRouter();
|
|
const supabase = createClient();
|
|
|
|
const handleLogin = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
const { error: signInError } = await supabase.auth.signInWithPassword({
|
|
email,
|
|
password,
|
|
});
|
|
|
|
if (signInError) {
|
|
setError(signInError.message);
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
// Verify the user is an admin
|
|
const {
|
|
data: { user },
|
|
} = await supabase.auth.getUser();
|
|
|
|
if (!user) {
|
|
setError("Authentication failed.");
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
const { data: adminUser } = await supabase
|
|
.from("admin_users")
|
|
.select("role")
|
|
.eq("user_id", user.id)
|
|
.single();
|
|
|
|
if (!adminUser) {
|
|
await supabase.auth.signOut();
|
|
setError("You do not have admin access.");
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
router.push("/admin");
|
|
router.refresh();
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
|
<div className="max-w-md w-full bg-white rounded-lg shadow-md p-8">
|
|
<h1 className="text-2xl font-bold text-center mb-6">Admin Login</h1>
|
|
<p className="text-gray-600 text-center mb-8">
|
|
Sign in to the Confessions of Grace admin panel.
|
|
</p>
|
|
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md mb-6">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleLogin} className="space-y-4">
|
|
<div>
|
|
<label
|
|
htmlFor="email"
|
|
className="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="password"
|
|
className="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full bg-accent text-white py-2 px-4 rounded-md hover:bg-accent-dark disabled:opacity-50 transition-colors"
|
|
>
|
|
{loading ? "Signing in..." : "Sign In"}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|