Add src/app/register/page.tsx
This commit is contained in:
281
src/app/register/page.tsx
Normal file
281
src/app/register/page.tsx
Normal file
@@ -0,0 +1,281 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
|
||||
export default function RegisterPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: "", email: "", password: "", confirmPassword: ""});
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [successMessage, setSuccessMessage] = useState("");
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "AI Models", id: "models" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "/#features" },
|
||||
{ label: "Pricing", href: "/#pricing" },
|
||||
{ label: "AI Models", href: "/#models" },
|
||||
{ label: "Blog", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "Community", href: "#" },
|
||||
{ label: "Guides", href: "#" },
|
||||
{ label: "Support", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Disclaimer", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!formData.name.trim()) {
|
||||
newErrors.name = "Name is required";
|
||||
}
|
||||
|
||||
if (!formData.email.trim()) {
|
||||
newErrors.email = "Email is required";
|
||||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
||||
newErrors.email = "Please enter a valid email";
|
||||
}
|
||||
|
||||
if (!formData.password) {
|
||||
newErrors.password = "Password is required";
|
||||
} else if (formData.password.length < 8) {
|
||||
newErrors.password = "Password must be at least 8 characters";
|
||||
}
|
||||
|
||||
if (formData.password !== formData.confirmPassword) {
|
||||
newErrors.confirmPassword = "Passwords do not match";
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
if (errors[name]) {
|
||||
setErrors((prev) => ({
|
||||
...prev,
|
||||
[name]: ""}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSuccessMessage("");
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const userData = {
|
||||
name: formData.name,
|
||||
email: formData.email,
|
||||
password: formData.password,
|
||||
createdAt: new Date().toISOString(),
|
||||
preferences: {
|
||||
theme: "light", notifications: true,
|
||||
language: "en"},
|
||||
};
|
||||
|
||||
localStorage.setItem(`user_${formData.email}`, JSON.stringify(userData));
|
||||
localStorage.setItem("currentUser", JSON.stringify(userData));
|
||||
|
||||
setSuccessMessage("Account created successfully! Redirecting to login...");
|
||||
setFormData({ name: "", email: "", password: "", confirmPassword: "" });
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = "/login";
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
setErrors({ form: "An error occurred. Please try again." });
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="large"
|
||||
background="noise"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Aarti AI"
|
||||
bottomLeftText="Divine AI Guidance"
|
||||
bottomRightText="connect@aartiAI.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-card rounded-lg shadow-md p-8 border border-background-accent">
|
||||
<h1 className="text-3xl font-bold text-center mb-2">Create Account</h1>
|
||||
<p className="text-center text-foreground/70 mb-8">
|
||||
Join Aarti AI and start your spiritual journey
|
||||
</p>
|
||||
|
||||
{successMessage && (
|
||||
<div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
|
||||
{successMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{errors.form && (
|
||||
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
|
||||
{errors.form}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-foreground mb-1">
|
||||
Full Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Your full name"
|
||||
className="w-full px-4 py-2 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-foreground mb-1">
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
placeholder="your@email.com"
|
||||
className="w-full px-4 py-2 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
{errors.email && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-foreground mb-1">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
value={formData.password}
|
||||
onChange={handleInputChange}
|
||||
placeholder="••••••••"
|
||||
className="w-full px-4 py-2 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
{errors.password && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.password}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground mb-1">
|
||||
Confirm Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
value={formData.confirmPassword}
|
||||
onChange={handleInputChange}
|
||||
placeholder="••••••••"
|
||||
className="w-full px-4 py-2 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
{errors.confirmPassword && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.confirmPassword}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold py-2 px-4 rounded-lg transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isSubmitting ? "Creating Account..." : "Create Account"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="mt-6 text-center text-sm text-foreground/70">
|
||||
Already have an account?{" "}
|
||||
<Link href="/login" className="text-primary-cta hover:underline font-medium">
|
||||
Sign In
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2025 Aarti AI. Bridging Spirituality & Technology."
|
||||
bottomRightText="Made with devotion for spiritual seekers"
|
||||
ariaLabel="Site footer"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user