feat: add register page
This commit is contained in:
parent
02bc32f138
commit
0c0f71a72e
3 changed files with 179 additions and 1 deletions
166
src/app/register/page.tsx
Normal file
166
src/app/register/page.tsx
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
'use client'
|
||||
|
||||
import { motion } from "motion/react";
|
||||
import { Navbar } from "@/components/navbar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Lock, Mail, User } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { createClient } from '@/utils/supabase/client'
|
||||
import zxcvbn from "zxcvbn";
|
||||
|
||||
export default function Register() {
|
||||
const supabase = createClient();
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [passwordStrength, setPasswordStrength] = useState<number | null>(null);
|
||||
|
||||
const handlePasswordInput = async (pass: string) => {
|
||||
// This function is called whenever the user types in the password field
|
||||
setPassword(pass);
|
||||
|
||||
// Calculate password strength with Dropbox's zxcvbn library
|
||||
setPasswordStrength(zxcvbn(password).score);
|
||||
|
||||
// TODO: Display password strength to the user
|
||||
console.log(passwordStrength);
|
||||
}
|
||||
|
||||
const handleSignUp = async () => {
|
||||
setError(null);
|
||||
|
||||
// TODO: Validate email address
|
||||
// TODO: Validate password strength
|
||||
// TODO: Validate password confirmation
|
||||
|
||||
const { error } = await supabase.auth.signUp({
|
||||
email, password, options: {
|
||||
data: {
|
||||
name: name
|
||||
}
|
||||
}
|
||||
});
|
||||
if (error) setError(error.message);
|
||||
|
||||
// TODO: Clear form fields after successful sign up
|
||||
// TODO: Display email verification message to the user
|
||||
};
|
||||
|
||||
const handleGoogleSignIn = async () => {
|
||||
const { error } = await supabase.auth.signInWithOAuth({ provider: 'google' });
|
||||
if (error) setError(error.message);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white flex flex-col">
|
||||
<div className="w-full">
|
||||
<Navbar />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex items-center justify-center px-6">
|
||||
{/* Card */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="w-full max-w-md p-8 bg-gray-800 rounded-lg shadow-md"
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-center mb-6">Register</h2>
|
||||
|
||||
{error && <p className="text-red-500 text-center mb-4">{error}</p>}
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-gray-400 mb-1">Name</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-2 text-gray-500" size={20} />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="John Doe"
|
||||
className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-gray-400 mb-1">Email</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-2 text-gray-500" size={20} />
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="john@example.com"
|
||||
className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-gray-400 mb-1">Password</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-2 text-gray-500" size={20} />
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
|
||||
value={password}
|
||||
onChange={(e) => handlePasswordInput(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-gray-400 mb-1">Confirm Password</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-2 text-gray-500" size={20} />
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Confirm password"
|
||||
className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full bg-white text-gray-900 font-semibold px-6 py-3 rounded-lg shadow-lg mt-4 hover:bg-gray-200"
|
||||
onClick={handleSignUp}
|
||||
>
|
||||
Sign Up
|
||||
</Button>
|
||||
|
||||
<div className="text-center text-gray-400">
|
||||
<p>By signing up, you agree to our <a href="#" className="text-blue-400 hover:underline">Terms of Service</a> and <a href="#" className="text-blue-400 hover:underline">Privacy Policy</a></p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="my-6 flex items-center">
|
||||
<div className="flex-1 border-t border-gray-600"></div>
|
||||
<p className="px-4 text-gray-400">or</p>
|
||||
<div className="flex-1 border-t border-gray-600"></div>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full bg-blue-500 text-white font-semibold px-6 py-3 rounded-lg shadow-lg mt-2 hover:bg-blue-600"
|
||||
onClick={handleGoogleSignIn}
|
||||
>
|
||||
Sign in with Google
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-gray-400 mt-4">
|
||||
Already have an account? <a href="/login" className="text-blue-400 hover:underline">Login</a>
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue