232 lines
8.6 KiB
TypeScript
232 lines
8.6 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { motion } from "framer-motion"
|
|
import { Eye, EyeOff, Lock, Mail } from "lucide-react"
|
|
import { Link, useNavigate } from "react-router-dom"
|
|
import apiService from "@/services/apiService"
|
|
|
|
export default function SimpleForm() {
|
|
const [error, setError] = useState("")
|
|
const [showPassword, setShowPassword] = useState(false)
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
|
|
const [email, setEmail] = useState("")
|
|
const [password, setPassword] = useState("")
|
|
const [name, setName] = useState("")
|
|
|
|
const navigate = useNavigate()
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setIsLoading(true)
|
|
setError("")
|
|
|
|
try {
|
|
const response = await apiService.register({
|
|
name,
|
|
email,
|
|
password,
|
|
})
|
|
|
|
console.log("Response:", response.data)
|
|
alert("Registration successful!")
|
|
setName("")
|
|
setEmail("")
|
|
setPassword("")
|
|
} catch (error: any) {
|
|
console.error("Error submitting form:", error)
|
|
if (error.response && error.response.data && error.response.data.message) {
|
|
setError(error.response.data.message)
|
|
} else {
|
|
setError("Registration failed. Please check your input and try again.")
|
|
}
|
|
} finally {
|
|
setIsLoading(false)
|
|
navigate("/login")
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-[#E8DCCA] bg-opacity-30">
|
|
<div className="absolute inset-0 overflow-hidden z-0">
|
|
<motion.div
|
|
className="absolute inset-0 bg-[url('/italian-migrants-historical.jpg')] bg-cover bg-center"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 0.15 }}
|
|
transition={{ duration: 1.5 }}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-[#9B2335]/20 to-[#01796F]/20" />
|
|
</div>
|
|
|
|
<motion.div
|
|
className="max-w-md w-full mx-4 bg-white rounded-lg shadow-xl overflow-hidden z-10"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<div className="h-2 bg-gradient-to-r from-[#9B2335] via-[#E8DCCA] to-[#01796F]" />
|
|
|
|
<div className="px-8 pt-8 pb-6">
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.3, duration: 0.6 }}
|
|
className="text-center"
|
|
>
|
|
<h2 className="text-2xl font-serif font-bold text-[#1A2A57]">Admin Access</h2>
|
|
<p className="text-gray-600 mt-1 italic">
|
|
Northern Territory Italian Migration History
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<motion.div
|
|
className="px-8 pb-8"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.5, duration: 0.6 }}
|
|
>
|
|
{error && (
|
|
<motion.div
|
|
className="mb-4 p-3 bg-red-50 border-l-4 border-[#9B2335] text-[#9B2335]"
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
>
|
|
{error}
|
|
</motion.div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="mb-6">
|
|
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
|
|
Name
|
|
</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<Mail className="h-5 w-5 text-gray-400" />
|
|
</div>
|
|
<input
|
|
id="name"
|
|
type="text"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F]"
|
|
placeholder="John Doe"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
|
|
Email
|
|
</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<Mail className="h-5 w-5 text-gray-400" />
|
|
</div>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F]"
|
|
placeholder="admin@example.com"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
|
|
Password
|
|
</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<Lock className="h-5 w-5 text-gray-400" />
|
|
</div>
|
|
<input
|
|
id="password"
|
|
type={showPassword ? "text" : "password"}
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="block w-full pl-10 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F]"
|
|
placeholder="••••••••"
|
|
required
|
|
/>
|
|
<div className="absolute inset-y-0 right-0 pr-3 flex items-center">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="text-gray-400 hover:text-gray-500 focus:outline-none"
|
|
>
|
|
{showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<motion.button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-white bg-[#9B2335] hover:bg-[#9B2335]/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#9B2335] disabled:opacity-50 disabled:cursor-not-allowed"
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
>
|
|
{isLoading ? (
|
|
<div className="flex items-center">
|
|
<svg
|
|
className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<circle
|
|
className="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
></circle>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
></path>
|
|
</svg>
|
|
Signing in...
|
|
</div>
|
|
) : (
|
|
"Sign in"
|
|
)}
|
|
</motion.button>
|
|
</form>
|
|
|
|
<div className="mt-6 flex items-center justify-center">
|
|
<div className="h-px bg-gray-300 w-full" />
|
|
<span className="px-2 text-sm text-gray-500">or</span>
|
|
<div className="h-px bg-gray-300 w-full" />
|
|
</div>
|
|
|
|
<div className="mt-6 text-center">
|
|
<Link to="/" className="text-sm font-medium text-[#1A2A57] hover:text-[#1A2A57]/80">
|
|
Return to public site
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
className="absolute bottom-4 text-center text-xs text-gray-500"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 1, duration: 0.6 }}
|
|
>
|
|
© {new Date().getFullYear()} Northern Territory Italian Migration History Project
|
|
</motion.div>
|
|
</div>
|
|
)
|
|
}
|