g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update page.tsx

Browse Source
This commit is contained in:
NotII
2025-10-16 00:43:09 +01:00
parent 1d7b378cd3
commit 7c9d83859f
1 changed files with 65 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
app/auth/reset-password/page.tsx
View File

@@ -1,8 +1,13 @@
"use client"; "use client";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation"; import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import { fetchClient } from "@/lib/api-client"; import { fetchClient } from "@/lib/api-client";
import { toast } from "sonner"; import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Loader2 } from "lucide-react";
interface Vendor { interface Vendor {
id: string; id: string;
@@ -80,10 +85,12 @@ export default function ResetPasswordPage() {
if (loading) { if (loading) {
return ( return (
<div className="min-h-screen flex items-center justify-center"> <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-[#0F0F12]">
<div className="text-center"> <div className="w-full max-w-md p-8 space-y-8 bg-white dark:bg-[#1F1F23] rounded-xl shadow-lg text-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div> <div className="mt-6 flex flex-col items-center justify-center">
<p className="mt-2 text-sm text-muted-foreground">Validating token...</p> <div className="w-12 h-12 border-4 border-t-blue-500 border-b-transparent border-l-transparent border-r-transparent rounded-full animate-spin"></div>
<p className="mt-4 text-gray-600 dark:text-gray-400">Validating token...</p>
</div>
</div> </div>
</div> </div>
); );
@@ -94,63 +101,71 @@ export default function ResetPasswordPage() {
} }
return ( return (
<div className="min-h-screen flex items-center justify-center bg-background"> <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-[#0F0F12]">
<div className="max-w-md w-full space-y-8 p-8"> <div className="w-full max-w-md p-8 space-y-8 bg-white dark:bg-[#1F1F23] rounded-xl shadow-lg">
<div className="text-center"> <div className="text-center">
<h1 className="text-2xl font-bold">Reset Password</h1> <h2 className="mt-6 text-3xl font-bold text-gray-900 dark:text-white">Reset Password</h2>
<p className="text-sm text-muted-foreground mt-2"> <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
Reset password for <span className="font-medium">{vendor.username}</span> Reset password for <span className="font-medium">{vendor.username}</span>
</p> </p>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-6"> <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
<div> <div className="space-y-4">
<label htmlFor="password" className="block text-sm font-medium mb-2"> <div className="animate-in fade-in duration-500">
New Password <Label htmlFor="password">New Password</Label>
</label> <Input
<input id="password"
id="password" name="password"
type="password" type="password"
required autoComplete="new-password"
value={password} required
onChange={(e) => setPassword(e.target.value)} value={password}
className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm" onChange={(e) => setPassword(e.target.value)}
placeholder="Enter new password" className="mt-1"
/> disabled={submitting}
placeholder="Enter new password"
/>
</div>
<div className="animate-in fade-in duration-500 delay-150">
<Label htmlFor="confirmPassword">Confirm Password</Label>
<Input
id="confirmPassword"
name="confirmPassword"
type="password"
autoComplete="new-password"
required
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
className="mt-1"
disabled={submitting}
placeholder="Confirm new password"
/>
</div>
</div> </div>
<div> <Button
<label htmlFor="confirmPassword" className="block text-sm font-medium mb-2"> type="submit"
Confirm Password className="w-full animate-in fade-in-50 duration-500 delay-300"
</label>
<input
id="confirmPassword"
type="password"
required
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
placeholder="Confirm new password"
/>
</div>
<button
type="submit"
disabled={submitting} disabled={submitting}
className="w-full rounded-md bg-primary px-3 py-2 text-sm text-primary-foreground disabled:opacity-60"
> >
{submitting ? "Resetting..." : "Reset Password"} {submitting ? (
</button> <span className="flex items-center justify-center">
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
Resetting password...
</span>
) : (
"Reset Password"
)}
</Button>
</form> </form>
<div className="text-center"> <p className="mt-10 text-sm text-center text-gray-600 dark:text-gray-400 animate-in fade-in duration-500 delay-500">
<a Remember your password?{" "}
href="/auth/login" <Link href="/auth/login" className="text-blue-600 hover:underline dark:text-blue-400">
className="text-sm text-muted-foreground hover:text-foreground" Sign in
> </Link>
Back to Login </p>
</a>
</div>
</div> </div>
</div> </div>
); );