auth-5

1"use client";
2 
3import { EyeIcon } from "lucide-react";
4import { LogoIcon } from "@/components/logo";
5import { Plus } from "@/components/plus";
6import { Button } from "@/components/ui/button";
7import { Input } from "@/components/ui/input";
8import { Label } from "@/components/ui/label";
9 
10export function ResetPasswordForm() {
11  return (
12    <div className="group relative w-full max-w-md overflow-hidden rounded-2xl border bg-background p-8 shadow-lg">
13      <Plus className="-top-px -left-px" />
14      <Plus className="-top-px -right-px rotate-90" />
15      <Plus className="-bottom-px -left-px -rotate-90" />
16      <Plus className="-bottom-px -right-px rotate-180" />
17 
18      <div className="mb-8 flex flex-col items-center gap-4">
19        <LogoIcon className="size-8" />
20        <div className="text-center">
21          <h2 className="font-bold text-2xl tracking-tight">Reset Password</h2>
22          <p className="text-muted-foreground text-sm">
23            Please enter your new password below
24          </p>
25        </div>
26      </div>
27 
28      <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
29        <div className="grid gap-4">
30          <div className="grid gap-2 text-start">
31            <Label htmlFor="new-password">New Password</Label>
32            <div className="relative">
33              <Input
34                className="h-10 pr-10"
35                id="new-password"
36                placeholder="••••••••"
37                type="password"
38              />
39              <button
40                className="-translate-y-1/2 absolute top-1/2 right-3 text-muted-foreground transition-colors hover:text-foreground"
41                title="Toggle password visibility"
42                type="button"
43              >
44                <EyeIcon className="size-4" />
45              </button>
46            </div>
47          </div>
48          <div className="grid gap-2 text-start">
49            <Label htmlFor="confirm-password">Confirm Password</Label>
50            <div className="relative">
51              <Input
52                className="h-10 pr-10"
53                id="confirm-password"
54                placeholder="••••••••"
55                type="password"
56              />
57              <button
58                className="-translate-y-1/2 absolute top-1/2 right-3 text-muted-foreground transition-colors hover:text-foreground"
59                title="Toggle password visibility"
60                type="button"
61              >
62// … truncated