first commit
This commit is contained in:
Daniil
137
app/(home)/main/reset-password/page.tsx
Normal file
137
app/(home)/main/reset-password/page.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import Link from "next/link"
|
||||
import { ArrowLeft, Mail } from "lucide-react"
|
||||
|
||||
export default function ResetPasswordPage() {
|
||||
const [email, setEmail] = useState("")
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
// Здесь будет логика отправки письма для сброса пароля
|
||||
console.log("Reset password for:", email)
|
||||
setSubmitted(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0a0e1a] flex items-center justify-center p-6">
|
||||
{/* Background grid */}
|
||||
<div
|
||||
className="fixed inset-0 pointer-events-none -z-10"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: '50px 50px'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Glowing effects */}
|
||||
<div className="fixed top-20 left-20 w-96 h-96 bg-cyan-500/10 rounded-full blur-[120px] animate-pulse" />
|
||||
<div className="fixed bottom-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-[120px] animate-pulse" />
|
||||
|
||||
<Card className="w-full max-w-md bg-[#0d1117] border-2 border-cyan-500/40 shadow-[0_0_50px_rgba(6,182,212,0.2)] relative overflow-hidden">
|
||||
{/* Top accent line */}
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-cyan-400 to-transparent" />
|
||||
|
||||
<div className="p-8">
|
||||
{/* Back button */}
|
||||
<Link
|
||||
href="/login"
|
||||
className="inline-flex items-center gap-2 text-cyan-400/60 hover:text-cyan-400 font-mono text-sm mb-6 transition-colors group"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
|
||||
Back to login
|
||||
</Link>
|
||||
|
||||
{!submitted ? (
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="w-16 h-16 bg-cyan-500/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Mail className="w-8 h-8 text-cyan-400" />
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold text-cyan-400 font-mono mb-2">
|
||||
Reset my password
|
||||
</h1>
|
||||
<p className="text-cyan-400/50 font-mono text-sm">
|
||||
Enter your email to receive reset instructions
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Reset Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label
|
||||
htmlFor="email"
|
||||
className="text-cyan-400 font-mono text-sm"
|
||||
>
|
||||
Email Address
|
||||
</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="your.email@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
className="bg-[#0a0e1a] border-cyan-500/30 text-cyan-400 placeholder:text-cyan-400/30 font-mono focus:border-cyan-400 focus:ring-cyan-400/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full bg-cyan-500 hover:bg-cyan-400 text-black font-bold font-mono tracking-wider py-6 text-base shadow-[0_0_30px_rgba(6,182,212,0.3)] hover:shadow-[0_0_50px_rgba(6,182,212,0.5)] transition-all"
|
||||
>
|
||||
SEND RESET LINK
|
||||
</Button>
|
||||
</form>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Success State */}
|
||||
<div className="text-center py-8">
|
||||
<div className="w-20 h-20 bg-cyan-500/10 rounded-full flex items-center justify-center mx-auto mb-6 animate-pulse">
|
||||
<Mail className="w-10 h-10 text-cyan-400" />
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-cyan-400 font-mono mb-3">
|
||||
Check your email
|
||||
</h2>
|
||||
<p className="text-cyan-400/60 font-mono text-sm mb-6">
|
||||
We've sent password reset instructions to<br />
|
||||
<span className="text-cyan-400">{email}</span>
|
||||
</p>
|
||||
<div className="bg-cyan-500/5 border border-cyan-500/20 rounded-lg p-4 mb-6">
|
||||
<p className="text-cyan-400/70 font-mono text-xs">
|
||||
Didn't receive the email? Check your spam folder or try again in a few minutes.
|
||||
</p>
|
||||
</div>
|
||||
<Link href="/login">
|
||||
<Button
|
||||
className="w-full bg-[#0a0e1a] border-2 border-cyan-500/30 text-cyan-400 hover:bg-cyan-500/10 font-mono"
|
||||
variant="outline"
|
||||
>
|
||||
BACK TO LOGIN
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Corner decorations */}
|
||||
<div className="absolute top-2 left-2 w-4 h-4 border-t-2 border-l-2 border-cyan-500/30"></div>
|
||||
<div className="absolute top-2 right-2 w-4 h-4 border-t-2 border-r-2 border-cyan-500/30"></div>
|
||||
<div className="absolute bottom-2 left-2 w-4 h-4 border-b-2 border-l-2 border-cyan-500/30"></div>
|
||||
<div className="absolute bottom-2 right-2 w-4 h-4 border-b-2 border-r-2 border-cyan-500/30"></div>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user