Sign Up Page

1"use client"
2 
3import { useMemo, useState } from "react"
4import { Eye, EyeOff, UserPlus, Check } from "lucide-react"
5import { GlassCard, GlassCardContent, GlassCardDescription, GlassCardHeader, GlassCardTitle } from "@/registry/liquid-glass/glass-card"
6import { GlassInput } from "@/registry/liquid-glass/glass-input"
7import { GlassButton } from "@/registry/liquid-glass/glass-button"
8import { GlassCheckbox } from "@/registry/liquid-glass/glass-checkbox"
9import { Label } from "@/components/ui/label"
10 
11interface ValidationRules {
12  minLength: boolean
13  hasUpperCase: boolean
14  hasLowerCase: boolean
15  hasNumber: boolean
16  hasSpecial: boolean
17}
18 
19export default function SignupPageBlock() {
20  const [showPassword, setShowPassword] = useState(false)
21  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
22  const [firstName, setFirstName] = useState("")
23  const [lastName, setLastName] = useState("")
24  const [email, setEmail] = useState("")
25  const [password, setPassword] = useState("")
26  const [confirmPassword, setConfirmPassword] = useState("")
27  const [agreeToTerms, setAgreeToTerms] = useState(false)
28  const [isLoading, setIsLoading] = useState(false)
29 
30  const validatePassword = (pwd: string): ValidationRules => ({
31    minLength: pwd.length >= 8,
32    hasUpperCase: /[A-Z]/.test(pwd),
33    hasLowerCase: /[a-z]/.test(pwd),
34    hasNumber: /\d/.test(pwd),
35    hasSpecial: /[!@#$%^&*(),.?":{}|<>]/.test(pwd),
36  })
37 
38  const validation = useMemo(() => validatePassword(password), [password])
39  const isPasswordValid = Object.values(validation).every(Boolean)
40  const passwordsMatch = password === confirmPassword && password.length > 0
41 
42  const handleSubmit = async (e: React.FormEvent) => {
43    e.preventDefault()
44    if (!isPasswordValid || !passwordsMatch || !agreeToTerms) return
45 
46    setIsLoading(true)
47    // Simulate API call
48    await new Promise((resolve) => setTimeout(resolve, 2000))
49    setIsLoading(false)
50    console.log({ firstName, lastName, email, password })
51  }
52 
53  return (
54    <div className=" flex items-center justify-center bg-linear-to-br from-slate-950 via-purple-900 to-slate-950 px-4 py-8">
55      <GlassCard className="w-full max-w-md">
56        <GlassCardHeader className="space-y-2 text-center">
57          <div className="flex justify-center mb-2">
58            <div className="p-2 rounded-lg bg-linear-to-br from-green-400 to-emerald-500">
59              <UserPlus className="h-6 w-6 text-white" />
60            </div>
61          </div>
62// … truncated