feat: add login, forgot password, and reset password forms
This commit is contained in:
@@ -0,0 +1,5 @@
|
|||||||
|
import ForgotPasswordForm from "@/components/auth/forgot-password-form"
|
||||||
|
|
||||||
|
export default function ForgotPasswordPage() {
|
||||||
|
return <ForgotPasswordForm />
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import LoginForm from "@/components/auth/login-form"
|
||||||
|
|
||||||
|
export default function LoginPage() {
|
||||||
|
return <LoginForm />
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import { Suspense } from "react"
|
||||||
|
import ResetPasswordForm from "@/components/auth/reset-password-form"
|
||||||
|
import { redirect } from "next/navigation"
|
||||||
|
|
||||||
|
interface PageProps {
|
||||||
|
searchParams: Promise<{ email?: string }>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function ResetPasswordPage({ searchParams }: PageProps) {
|
||||||
|
const { email } = await searchParams
|
||||||
|
|
||||||
|
if (!email) {
|
||||||
|
redirect("/forgot-password")
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Suspense>
|
||||||
|
<ResetPasswordForm email={email} />
|
||||||
|
</Suspense>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState } from "react"
|
||||||
|
import { Lock, Loader2, ArrowLeft } from "lucide-react"
|
||||||
|
import { authClient } from "@/lib/auth-client"
|
||||||
|
import {
|
||||||
|
forgotPasswordSchema,
|
||||||
|
type ForgotPasswordInput,
|
||||||
|
} from "@/lib/auth/validation"
|
||||||
|
import Link from "next/link"
|
||||||
|
import { useRouter } from "next/navigation"
|
||||||
|
|
||||||
|
export default function ForgotPasswordForm() {
|
||||||
|
const router = useRouter()
|
||||||
|
const [email, setEmail] = useState("")
|
||||||
|
const [error, setError] = useState("")
|
||||||
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setError("")
|
||||||
|
|
||||||
|
const result = forgotPasswordSchema.safeParse({ email })
|
||||||
|
if (!result.success) {
|
||||||
|
setError(result.error.issues[0].message)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsLoading(true)
|
||||||
|
const { error } = await authClient.emailOtp.requestPasswordReset({
|
||||||
|
email,
|
||||||
|
})
|
||||||
|
setIsLoading(false)
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
setError(
|
||||||
|
error.message || "Something went wrong. Please try again.",
|
||||||
|
)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Redirect to reset password page with email
|
||||||
|
router.push(`/reset-password?email=${encodeURIComponent(email)}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div className="text-center mb-2">
|
||||||
|
<Lock className="h-10 w-10 text-[#eb3779] mx-auto mb-3" />
|
||||||
|
<h1 className="text-lg font-bold text-[#ebe4f1]">
|
||||||
|
Forgot your password?
|
||||||
|
</h1>
|
||||||
|
<p className="text-xs text-[#ebe4f1]/50 mt-1 leading-relaxed">
|
||||||
|
Enter your email and we'll send you a verification code to
|
||||||
|
reset your password.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="text-red-400 text-xs text-center bg-red-500/10 border border-red-500/20 rounded-lg px-3 py-2">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-[#ebe4f1]/60 block mb-1">
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
placeholder="you@example.com"
|
||||||
|
className="w-full px-3 py-2.5 rounded-lg border border-white/10 bg-white/[0.03] text-[#ebe4f1] text-sm placeholder:text-[#ebe4f1]/40 outline-none focus:border-[#eb3779] focus:ring-2 focus:ring-[#eb3779]/50 transition-colors"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full py-2.5 rounded-lg bg-[#eb3779] text-white text-sm font-semibold hover:bg-[#eb3779]/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{isLoading && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||||
|
Send verification code
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="/login"
|
||||||
|
className="flex items-center justify-center gap-1.5 text-xs text-[#ebe4f1]/50 hover:text-[#ebe4f1] transition-colors"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="h-3 w-3" />
|
||||||
|
Back to sign in
|
||||||
|
</Link>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,234 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState, useEffect, useCallback } from "react"
|
||||||
|
import { Loader2 } from "lucide-react"
|
||||||
|
import { authClient } from "@/lib/auth-client"
|
||||||
|
import {
|
||||||
|
loginEmailSchema,
|
||||||
|
loginSchema,
|
||||||
|
type LoginInput,
|
||||||
|
} from "@/lib/auth/validation"
|
||||||
|
import SocialButtons from "./social-buttons"
|
||||||
|
import Link from "next/link"
|
||||||
|
import { useRouter } from "next/navigation"
|
||||||
|
|
||||||
|
export default function LoginForm() {
|
||||||
|
const router = useRouter()
|
||||||
|
const [phase, setPhase] = useState<"email" | "password">("email")
|
||||||
|
const [email, setEmail] = useState("")
|
||||||
|
const [password, setPassword] = useState("")
|
||||||
|
const [error, setError] = useState("")
|
||||||
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
|
||||||
|
// Preload passkeys for conditional UI
|
||||||
|
useEffect(() => {
|
||||||
|
if (phase === "password" && "PublicKeyCredential" in window) {
|
||||||
|
authClient.signIn.passkey({ autoFill: true })
|
||||||
|
}
|
||||||
|
}, [phase])
|
||||||
|
|
||||||
|
const handleEmailSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setError("")
|
||||||
|
|
||||||
|
const result = loginEmailSchema.safeParse({ email })
|
||||||
|
if (!result.success) {
|
||||||
|
setError(result.error.issues[0].message)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if email exists by attempting sign-in with empty password
|
||||||
|
setIsLoading(true)
|
||||||
|
const { error } = await authClient.signIn.email(
|
||||||
|
{ email, password: "" },
|
||||||
|
{
|
||||||
|
onError: () => {
|
||||||
|
// Silently handle - we check the error type below
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
|
setIsLoading(false)
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
// If error is about invalid credentials, email exists but password is wrong
|
||||||
|
// If error is about user not found, email doesn't exist
|
||||||
|
if (
|
||||||
|
error.message?.toLowerCase().includes("not found") ||
|
||||||
|
error.message?.toLowerCase().includes("invalid email") ||
|
||||||
|
error.status === 404
|
||||||
|
) {
|
||||||
|
setError(
|
||||||
|
"No account found with this email.",
|
||||||
|
)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// Email exists, move to password phase
|
||||||
|
setPhase("password")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shouldn't reach here with empty password, but handle it
|
||||||
|
setPhase("password")
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleLogin = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setError("")
|
||||||
|
|
||||||
|
const result = loginSchema.safeParse({ email, password })
|
||||||
|
if (!result.success) {
|
||||||
|
setError(result.error.issues[0].message)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsLoading(true)
|
||||||
|
const { error } = await authClient.signIn.email({ email, password })
|
||||||
|
setIsLoading(false)
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
setError(error.message || "Invalid credentials. Please try again.")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
router.push("/")
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleChangeEmail = () => {
|
||||||
|
setPhase("email")
|
||||||
|
setPassword("")
|
||||||
|
setError("")
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="text-center mb-2">
|
||||||
|
<h1 className="text-lg font-bold text-[#ebe4f1]">
|
||||||
|
Welcome back
|
||||||
|
</h1>
|
||||||
|
<p className="text-xs text-[#ebe4f1]/50 mt-1">
|
||||||
|
{phase === "email"
|
||||||
|
? "Sign in to DeckyVault"
|
||||||
|
: `Signing in as `}
|
||||||
|
{phase === "password" && (
|
||||||
|
<>
|
||||||
|
<strong className="text-[#ebe4f1]">{email}</strong>
|
||||||
|
{" "}
|
||||||
|
<button
|
||||||
|
onClick={handleChangeEmail}
|
||||||
|
className="text-[#eb3779] hover:underline text-[11px]"
|
||||||
|
>
|
||||||
|
change
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SocialButtons />
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex-1 h-px bg-white/[0.08]" />
|
||||||
|
<span className="text-[11px] text-[#ebe4f1]/40 uppercase">
|
||||||
|
or continue with email
|
||||||
|
</span>
|
||||||
|
<div className="flex-1 h-px bg-white/[0.08]" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="text-red-400 text-xs text-center bg-red-500/10 border border-red-500/20 rounded-lg px-3 py-2">
|
||||||
|
{error}
|
||||||
|
{error.includes("No account found") && (
|
||||||
|
<>
|
||||||
|
{" "}
|
||||||
|
<Link
|
||||||
|
href="/signup"
|
||||||
|
className="text-[#eb3779] font-semibold hover:underline"
|
||||||
|
>
|
||||||
|
Create one →
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{phase === "email" ? (
|
||||||
|
<form onSubmit={handleEmailSubmit} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-[#ebe4f1]/60 block mb-1">
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
placeholder="you@example.com"
|
||||||
|
autoComplete="username webauthn"
|
||||||
|
className="w-full px-3 py-2.5 rounded-lg border border-white/10 bg-white/[0.03] text-[#ebe4f1] text-sm placeholder:text-[#ebe4f1]/40 outline-none focus:border-[#eb3779] focus:ring-2 focus:ring-[#eb3779]/50 transition-colors"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full py-2.5 rounded-lg bg-[#eb3779] text-white text-sm font-semibold hover:bg-[#eb3779]/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{isLoading && (
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
)}
|
||||||
|
Continue
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleLogin} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-[#ebe4f1]/60 block mb-1">
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
placeholder="Enter your password"
|
||||||
|
autoComplete="current-password webauthn"
|
||||||
|
autoFocus
|
||||||
|
className="w-full px-3 py-2.5 rounded-lg border border-white/10 bg-white/[0.03] text-[#ebe4f1] text-sm placeholder:text-[#ebe4f1]/40 outline-none focus:border-[#eb3779] focus:ring-2 focus:ring-[#eb3779]/50 transition-colors"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<Link
|
||||||
|
href="/forgot-password"
|
||||||
|
className="text-xs text-[#ebe4f1]/50 hover:text-[#ebe4f1] transition-colors"
|
||||||
|
>
|
||||||
|
Forgot password?
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full py-2.5 rounded-lg bg-[#eb3779] text-white text-sm font-semibold hover:bg-[#eb3779]/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{isLoading && (
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
)}
|
||||||
|
Sign in
|
||||||
|
</button>
|
||||||
|
{/* Passkey hint */}
|
||||||
|
<div className="text-center p-2.5 rounded-lg bg-[#eb3779]/5 border border-[#eb3779]/10">
|
||||||
|
<p className="text-xs text-[#ebe4f1]/50">
|
||||||
|
Your browser may offer to sign in with a passkey
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<p className="text-center text-xs text-[#ebe4f1]/50">
|
||||||
|
Don't have an account?{" "}
|
||||||
|
<Link
|
||||||
|
href="/signup"
|
||||||
|
className="text-[#eb3779] hover:underline"
|
||||||
|
>
|
||||||
|
Create one
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,222 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState, useEffect, useCallback } from "react"
|
||||||
|
import {
|
||||||
|
Mail,
|
||||||
|
CheckCircle2,
|
||||||
|
Loader2,
|
||||||
|
ArrowLeft,
|
||||||
|
} from "lucide-react"
|
||||||
|
import { authClient } from "@/lib/auth-client"
|
||||||
|
import {
|
||||||
|
resetPasswordSchema,
|
||||||
|
type ResetPasswordInput,
|
||||||
|
} from "@/lib/auth/validation"
|
||||||
|
import OtpInput from "./otp-input"
|
||||||
|
import PasswordStrengthMeter from "./password-strength"
|
||||||
|
import Link from "next/link"
|
||||||
|
|
||||||
|
interface ResetPasswordFormProps {
|
||||||
|
email: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ResetPasswordForm({
|
||||||
|
email,
|
||||||
|
}: ResetPasswordFormProps) {
|
||||||
|
const [otp, setOtp] = useState("")
|
||||||
|
const [newPassword, setNewPassword] = useState("")
|
||||||
|
const [confirmPassword, setConfirmPassword] = useState("")
|
||||||
|
const [error, setError] = useState("")
|
||||||
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
const [isSuccess, setIsSuccess] = useState(false)
|
||||||
|
const [resendTimer, setResendTimer] = useState(300)
|
||||||
|
const [canResend, setCanResend] = useState(false)
|
||||||
|
|
||||||
|
// Countdown timer
|
||||||
|
useEffect(() => {
|
||||||
|
if (resendTimer <= 0) {
|
||||||
|
setCanResend(true)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
setResendTimer((prev) => prev - 1)
|
||||||
|
}, 1000)
|
||||||
|
return () => clearInterval(interval)
|
||||||
|
}, [resendTimer])
|
||||||
|
|
||||||
|
const formatTime = (seconds: number) => {
|
||||||
|
const mins = Math.floor(seconds / 60)
|
||||||
|
const secs = seconds % 60
|
||||||
|
return `${mins}:${secs.toString().padStart(2, "0")}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setError("")
|
||||||
|
|
||||||
|
const result = resetPasswordSchema.safeParse({
|
||||||
|
otp,
|
||||||
|
newPassword,
|
||||||
|
confirmPassword,
|
||||||
|
})
|
||||||
|
if (!result.success) {
|
||||||
|
setError(result.error.issues[0].message)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsLoading(true)
|
||||||
|
const { error } = await authClient.resetPassword({
|
||||||
|
newPassword,
|
||||||
|
otp,
|
||||||
|
})
|
||||||
|
setIsLoading(false)
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
setError(
|
||||||
|
error.code === "TOO_MANY_ATTEMPTS"
|
||||||
|
? "Too many attempts. Please request a new code."
|
||||||
|
: error.message || "Failed to reset password.",
|
||||||
|
)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsSuccess(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleResend = async () => {
|
||||||
|
setError("")
|
||||||
|
await authClient.emailOtp.requestPasswordReset({ email })
|
||||||
|
setResendTimer(300)
|
||||||
|
setCanResend(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isSuccess) {
|
||||||
|
return (
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<CheckCircle2 className="h-10 w-10 text-[#22c55e] mx-auto" />
|
||||||
|
<h1 className="text-lg font-bold text-[#ebe4f1]">
|
||||||
|
Password reset successful
|
||||||
|
</h1>
|
||||||
|
<p className="text-xs text-[#ebe4f1]/50">
|
||||||
|
Your password has been updated. You can now sign in with
|
||||||
|
your new password.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/login"
|
||||||
|
className="inline-block w-full py-2.5 rounded-lg bg-[#eb3779] text-white text-sm font-semibold hover:bg-[#eb3779]/90 transition-colors text-center"
|
||||||
|
>
|
||||||
|
Sign in
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div className="text-center mb-2">
|
||||||
|
<Mail className="h-10 w-10 text-[#eb3779] mx-auto mb-3" />
|
||||||
|
<h1 className="text-lg font-bold text-[#ebe4f1]">
|
||||||
|
Check your email
|
||||||
|
</h1>
|
||||||
|
<p className="text-xs text-[#ebe4f1]/50 mt-1">
|
||||||
|
We sent a 6-digit code to{" "}
|
||||||
|
<strong className="text-[#ebe4f1]">{email}</strong>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-[#ebe4f1]/60 block mb-2 text-center">
|
||||||
|
Verification code
|
||||||
|
</label>
|
||||||
|
<OtpInput
|
||||||
|
value={otp}
|
||||||
|
onChange={setOtp}
|
||||||
|
disabled={isLoading}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center text-xs">
|
||||||
|
{canResend ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleResend}
|
||||||
|
className="text-[#eb3779] hover:underline"
|
||||||
|
>
|
||||||
|
Resend code
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<span className="text-[#ebe4f1]/40">
|
||||||
|
Resend code in{" "}
|
||||||
|
<span className="text-[#eb3779] font-semibold">
|
||||||
|
{formatTime(resendTimer)}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex-1 h-px bg-white/[0.08]" />
|
||||||
|
<span className="text-[11px] text-[#ebe4f1]/40">
|
||||||
|
then set new password
|
||||||
|
</span>
|
||||||
|
<div className="flex-1 h-px bg-white/[0.08]" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="text-red-400 text-xs text-center bg-red-500/10 border border-red-500/20 rounded-lg px-3 py-2">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-[#ebe4f1]/60 block mb-1">
|
||||||
|
New password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
value={newPassword}
|
||||||
|
onChange={(e) => setNewPassword(e.target.value)}
|
||||||
|
placeholder="Min. 10 characters"
|
||||||
|
className="w-full px-3 py-2.5 rounded-lg border border-white/10 bg-white/[0.03] text-[#ebe4f1] text-sm placeholder:text-[#ebe4f1]/40 outline-none focus:border-[#eb3779] focus:ring-2 focus:ring-[#eb3779]/50 transition-colors"
|
||||||
|
/>
|
||||||
|
<PasswordStrengthMeter password={newPassword} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-[#ebe4f1]/60 block mb-1">
|
||||||
|
Confirm new password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
value={confirmPassword}
|
||||||
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||||
|
placeholder="Re-enter password"
|
||||||
|
className="w-full px-3 py-2.5 rounded-lg border border-white/10 bg-white/[0.03] text-[#ebe4f1] text-sm placeholder:text-[#ebe4f1]/40 outline-none focus:border-[#eb3779] focus:ring-2 focus:ring-[#eb3779]/50 transition-colors"
|
||||||
|
/>
|
||||||
|
{confirmPassword &&
|
||||||
|
newPassword !== confirmPassword && (
|
||||||
|
<p className="text-red-400 text-xs mt-1">
|
||||||
|
Passwords do not match
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading || otp.length !== 6}
|
||||||
|
className="w-full py-2.5 rounded-lg bg-[#eb3779] text-white text-sm font-semibold hover:bg-[#eb3779]/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{isLoading && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||||
|
Reset password
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="/login"
|
||||||
|
className="flex items-center justify-center gap-1.5 text-xs text-[#ebe4f1]/50 hover:text-[#ebe4f1] transition-colors"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="h-3 w-3" />
|
||||||
|
Back to sign in
|
||||||
|
</Link>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user