Merge pull request 'Updated Changes' (#1) from feature/dark-theme-v2 into main
Reviewed-on: https://git.tech4biz.wiki/Tech4Biz-Services/CodeNuk-FrontEnd/pulls/1
This commit is contained in:
commit
d9db753f21
@ -5,21 +5,68 @@ import { SignInForm } from "./signin-form"
|
||||
import { SignUpForm } from "./signup-form"
|
||||
|
||||
export function AuthPage() {
|
||||
const [isSignIn, setIsSignIn] = useState(true)
|
||||
const [isSignIn, setIsSignIn] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-2">Codenuk</h1>
|
||||
<p className="text-gray-600">AI-Powered Project Builder</p>
|
||||
</div>
|
||||
{isSignIn ? (
|
||||
<SignInForm onToggleMode={() => setIsSignIn(false)} />
|
||||
) : (
|
||||
<SignUpForm onToggleMode={() => setIsSignIn(true)} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="min-h-screen bg-black text-white flex items-center justify-center p-6">
|
||||
<div className="w-full max-w-6xl grid grid-cols-1 lg:grid-cols-2 gap-10">
|
||||
{/* Left: Gradient panel with steps */}
|
||||
<div className="hidden lg:block">
|
||||
<div className="relative h-full rounded-3xl overflow-hidden border border-white/10 bg-gradient-to-b from-purple-500 via-purple-600 to-black p-10">
|
||||
{/* subtle grain */}
|
||||
<div className="pointer-events-none absolute inset-0 opacity-20 [mask-image:radial-gradient(ellipse_at_center,black_70%,transparent_100%)]">
|
||||
<div className="w-full h-full bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.12)_1px,transparent_0)] bg-[length:18px_18px]"></div>
|
||||
</div>
|
||||
|
||||
{/* soft circular accents (minimal) */}
|
||||
<div className="pointer-events-none absolute -top-10 -right-10 w-72 h-72 rounded-full blur-3xl bg-purple-300/40"></div>
|
||||
<div className="pointer-events-none absolute top-1/3 -left-10 w-56 h-56 rounded-full blur-2xl bg-indigo-300/25"></div>
|
||||
<div className="pointer-events-none absolute -bottom-12 left-1/3 w-64 h-64 rounded-full blur-3xl bg-purple-400/20"></div>
|
||||
|
||||
<div className="relative z-10 flex h-full flex-col justify-center">
|
||||
<div className="mb-12">
|
||||
<p className="text-4xl font-bold text-white/80">Codenuk</p>
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold mb-3">Get Started with Us</h2>
|
||||
<p className="text-white/80 mb-10">Complete these easy steps to register your account.</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Step 1 */}
|
||||
<div className={`${!isSignIn ? "bg-white text-black" : "bg-white/10 text-white border border-white/20"} rounded-xl p-4 flex items-center`}>
|
||||
<div className={`${!isSignIn ? "bg-black text-white" : "bg-white/20 text-white"} w-9 h-9 rounded-full flex items-center justify-center mr-4 text-sm font-semibold`}>1</div>
|
||||
<span className="font-medium">Sign up your account</span>
|
||||
</div>
|
||||
{/* Step 2 */}
|
||||
<div className={`${isSignIn ? "bg-white text-black" : "bg-white/10 text-white border border-white/20"} rounded-xl p-4 flex items-center`}>
|
||||
<div className={`${isSignIn ? "bg-black text-white" : "bg-white/20 text-white"} w-9 h-9 rounded-full flex items-center justify-center mr-4 text-sm font-semibold`}>2</div>
|
||||
<span className="font-medium">Set up your workspace</span>
|
||||
</div>
|
||||
{/* Step 3 */}
|
||||
{/* <div className="bg-white/10 text-white border border-white/20 rounded-xl p-4 flex items-center">
|
||||
<div className="w-9 h-9 rounded-full bg-white/20 text-white flex items-center justify-center mr-4 text-sm font-semibold">3</div>
|
||||
<span className="font-medium">Set up your profile</span>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Form area */}
|
||||
<div className="flex items-center">
|
||||
<div className="w-full max-w-md ml-auto">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-2xl font-semibold text-white mb-1">{isSignIn ? "Sign In Account" : "Sign Up Account"}</h1>
|
||||
<p className="text-white/60">{isSignIn ? "Enter your credentials to access your account." : "Enter your personal data to create your account."}</p>
|
||||
</div>
|
||||
|
||||
{isSignIn ? (
|
||||
<SignInForm onToggleMode={() => setIsSignIn(false)} />
|
||||
) : (
|
||||
<SignUpForm onToggleMode={() => setIsSignIn(true)} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -7,7 +7,6 @@ import { useRouter } from "next/navigation"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Eye, EyeOff, Loader2 } from "lucide-react"
|
||||
import { useAuth } from "@/contexts/auth-context"
|
||||
|
||||
@ -47,71 +46,66 @@ export function SignInForm({ onToggleMode }: SignInFormProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader className="space-y-1">
|
||||
<CardTitle className="text-2xl font-bold">Sign In</CardTitle>
|
||||
<CardDescription>Enter your credentials to access your account</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<div className="w-full">
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email" className="text-white text-sm">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
required
|
||||
className="h-11 bg-white/5 border-white/10 text-white placeholder:text-white/40 focus:border-white/30 focus:ring-white/30"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password" className="text-white text-sm">Password</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
id="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="Enter your password"
|
||||
value={formData.password}
|
||||
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
|
||||
required
|
||||
className="h-11 bg-white/5 border-white/10 text-white placeholder:text-white/40 focus:border-white/30 focus:ring-white/30 pr-12"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="Enter your password"
|
||||
value={formData.password}
|
||||
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
|
||||
required
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
>
|
||||
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="text-red-600 text-sm text-center bg-red-50 p-2 rounded-md">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button type="submit" className="w-full cursor-pointer" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Signing In...
|
||||
</>
|
||||
) : (
|
||||
"Sign In"
|
||||
)}
|
||||
</Button>
|
||||
<div className="text-center">
|
||||
<Button type="button" variant="link" onClick={onToggleMode} className="text-sm cursor-pointer">
|
||||
Don't have an account? Sign up
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-0 top-0 h-full px-3 py-2 text-white/60 hover:text-white hover:bg-white/5"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
>
|
||||
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="text-red-300 text-sm text-center bg-red-900/20 p-3 rounded-md border border-red-500/30">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button type="submit" className="w-full h-11 cursor-pointer bg-white text-black hover:bg-white/90" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Signing In...
|
||||
</>
|
||||
) : (
|
||||
"Sign In"
|
||||
)}
|
||||
</Button>
|
||||
<div className="text-center">
|
||||
<Button type="button" variant="link" onClick={onToggleMode} className="text-sm cursor-pointer text-white/70 hover:text-white">
|
||||
Don't have an account? Sign up
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -56,15 +56,15 @@ export function SignUpForm({ onToggleMode }: SignUpFormProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader className="space-y-1">
|
||||
<CardTitle className="text-2xl font-bold">Sign Up</CardTitle>
|
||||
<CardDescription>Create your account to get started</CardDescription>
|
||||
<Card className="w-full max-w-md bg-transparent border-0 shadow-none">
|
||||
<CardHeader className="space-y-1 p-0 mb-2">
|
||||
<CardTitle className="sr-only">Sign Up</CardTitle>
|
||||
<CardDescription className="sr-only">Create your account to get started</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<CardContent className="p-0">
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Full Name</Label>
|
||||
<Label htmlFor="name" className="text-white text-sm">Full Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
@ -72,10 +72,11 @@ export function SignUpForm({ onToggleMode }: SignUpFormProps) {
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
required
|
||||
className="h-11 bg-white/5 border-white/10 text-white placeholder:text-white/40 focus:border-white/30 focus:ring-white/30"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Label htmlFor="email" className="text-white text-sm">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
@ -83,24 +84,26 @@ export function SignUpForm({ onToggleMode }: SignUpFormProps) {
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
required
|
||||
className="h-11 bg-white/5 border-white/10 text-white placeholder:text-white/40 focus:border-white/30 focus:ring-white/30"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Label htmlFor="password" className="text-white text-sm">Password</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="Create a password"
|
||||
placeholder="Enter your password"
|
||||
value={formData.password}
|
||||
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
|
||||
required
|
||||
className="h-11 bg-white/5 border-white/10 text-white placeholder:text-white/40 focus:border-white/30 focus:ring-white/30 pr-12"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
|
||||
className="absolute right-0 top-0 h-full px-3 py-2 text-white/60 hover:text-white hover:bg-white/5"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
>
|
||||
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
@ -108,7 +111,7 @@ export function SignUpForm({ onToggleMode }: SignUpFormProps) {
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm Password</Label>
|
||||
<Label htmlFor="confirmPassword" className="text-white text-sm">Confirm Password</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
@ -117,12 +120,13 @@ export function SignUpForm({ onToggleMode }: SignUpFormProps) {
|
||||
value={formData.confirmPassword}
|
||||
onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
|
||||
required
|
||||
className="h-11 bg-white/5 border-white/10 text-white placeholder:text-white/40 focus:border-white/30 focus:ring-white/30 pr-12"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
|
||||
className="absolute right-0 top-0 h-full px-3 py-2 text-white/60 hover:text-white hover:bg-white/5"
|
||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||||
>
|
||||
{showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
@ -130,14 +134,17 @@ export function SignUpForm({ onToggleMode }: SignUpFormProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="text-red-600 text-sm text-center bg-red-50 p-2 rounded-md">
|
||||
<div className="text-red-300 text-sm text-center bg-red-900/20 p-3 rounded-md border border-red-500/30">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button type="submit" className="w-full cursor-pointer" disabled={isLoading}>
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-11 cursor-pointer bg-white text-black hover:bg-white/90"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
@ -148,7 +155,12 @@ export function SignUpForm({ onToggleMode }: SignUpFormProps) {
|
||||
)}
|
||||
</Button>
|
||||
<div className="text-center">
|
||||
<Button type="button" variant="link" onClick={onToggleMode} className="text-sm cursor-pointer">
|
||||
<Button
|
||||
type="button"
|
||||
variant="link"
|
||||
onClick={onToggleMode}
|
||||
className="text-sm cursor-pointer text-white/70 hover:text-white"
|
||||
>
|
||||
Already have an account? Sign in
|
||||
</Button>
|
||||
</div>
|
||||
@ -157,3 +169,4 @@ export function SignUpForm({ onToggleMode }: SignUpFormProps) {
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user