feat: add register page
This commit is contained in:
parent
02bc32f138
commit
0c0f71a72e
3 changed files with 179 additions and 1 deletions
|
|
@ -12,6 +12,7 @@
|
|||
"@radix-ui/react-slot": "^1.1.2",
|
||||
"@supabase/ssr": "^0.5.2",
|
||||
"@supabase/supabase-js": "^2.49.1",
|
||||
"@types/zxcvbn": "^4.4.5",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.476.0",
|
||||
|
|
@ -20,7 +21,8 @@
|
|||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"tailwind-merge": "^3.0.2",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"zxcvbn": "^4.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
|
|
|
|||
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>
|
||||
);
|
||||
}
|
||||
10
yarn.lock
10
yarn.lock
|
|
@ -507,6 +507,11 @@
|
|||
dependencies:
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/zxcvbn@^4.4.5":
|
||||
version "4.4.5"
|
||||
resolved "https://registry.yarnpkg.com/@types/zxcvbn/-/zxcvbn-4.4.5.tgz#8ce8623ed7a36e3a76d1c0b539708dfb2e859bc0"
|
||||
integrity sha512-FZJgC5Bxuqg7Rhsm/bx6gAruHHhDQ55r+s0JhDh8CQ16fD7NsJJ+p8YMMQDhSQoIrSmjpqqYWA96oQVMNkjRyA==
|
||||
|
||||
"@typescript-eslint/eslint-plugin@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
|
||||
version "8.24.1"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.24.1.tgz#d104c2a6212304c649105b18af2c110b4a1dd4ae"
|
||||
|
|
@ -3169,3 +3174,8 @@ yocto-queue@^0.1.0:
|
|||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
|
||||
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
|
||||
|
||||
zxcvbn@^4.4.2:
|
||||
version "4.4.2"
|
||||
resolved "https://registry.yarnpkg.com/zxcvbn/-/zxcvbn-4.4.2.tgz#28ec17cf09743edcab056ddd8b1b06262cc73c30"
|
||||
integrity sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ==
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue