Forgot Password

import Logo from "@/mynaui/Logo";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function Basic() {
  return (
    <section className="flex flex-col items-center gap-14 bg-primary-foreground py-20 md:min-h-screen">
      <Logo />
      <div className="flex w-full max-w-sm flex-col gap-6 rounded border bg-background p-6">
        <div>
          <h1 className="text-xl font-bold tracking-tight">Reset Password</h1>
          <p className="mt-1 text-sm text-muted-foreground">
            Enter your email address and we will send you a link to reset your
            password.
          </p>
        </div>
        <form className="grid gap-4">
          <div className="grid gap-2">
            <Label htmlFor="email">Email</Label>
            <Input
              required
              id="email"
              type="email"
              autoComplete="username"
              placeholder="team@mynaui.com"
            />
          </div>
          <Button type="submit" className="w-full">
            Send Reset Email
          </Button>
        </form>
        <p className="text-sm">
          ← Back to{" "}
          <a href="#" className="underline">
            Login
          </a>
        </p>
      </div>
      <p className="text-sm text-muted-foreground">© 2025 MynaUI</p>
    </section>
  );
}

import Logo from "@/mynaui/Logo";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function NewPassword() {
  return (
    <section className="flex flex-col items-center gap-14 bg-primary-foreground py-20 md:min-h-screen">
      <Logo />
      <div className="flex w-full max-w-sm flex-col gap-6 rounded border bg-background p-6">
        <div>
          <h1 className="text-xl font-bold tracking-tight">
            Set a New Password
          </h1>
          <p className="mt-1 text-sm text-muted-foreground">
            Enter your new password and confirm it to set a new password.
          </p>
        </div>
        <form className="grid gap-4">
          <div className="grid gap-2">
            <Label htmlFor="password">Password</Label>
            <Input
              required
              id="password"
              type="password"
              placeholder="••••••••••"
              autoComplete="new-password"
            />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="confirm-password">Confirm Password</Label>
            <Input
              required
              id="confirm-password"
              type="password"
              placeholder="••••••••••"
              autoComplete="new-password"
            />
          </div>
          <Button type="submit" className="w-full">
            Set New Password
          </Button>
        </form>
        <p className="text-sm">
          ← Back to{" "}
          <a href="#" className="underline">
            Login
          </a>
        </p>
      </div>
      <p className="text-sm text-muted-foreground">© 2025 MynaUI</p>
    </section>
  );
}

import Logo from "@/mynaui/Logo";
import { Button } from "@/components/ui/button";
import { CheckWaves } from "@mynaui/icons-react";

export default function Confirmation() {
  return (
    <section className="flex flex-col items-center gap-10 bg-primary-foreground py-14 md:min-h-screen">
      <Logo />
      <div className="flex w-full max-w-sm flex-col items-center rounded border bg-background p-8 text-center">
        <CheckWaves className="mb-4 size-12 shrink-0" />
        <h3 className="text-xl font-bold tracking-tight">Check your email!</h3>
        <p className="mt-1 text-balance text-muted-foreground">
          We sent you a magic link to sign in to your account.
        </p>
        <Button className="mt-6 w-full">Open Email App</Button>
        <Button variant="outline" className="mt-2 w-full">
          Resend Email
        </Button>
      </div>
      <p className="text-sm text-muted-foreground">© 2025 MynaUI</p>
    </section>
  );
}

import Logo from "@/mynaui/Logo";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function ForgotPasswordPage() {
  return (
    <div className="flex min-h-screen flex-col lg:flex-row">
      {/* Left Panel */}
      <div className="relative hidden lg:block lg:w-1/2">
        <img
          src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
          alt="Blog Post Image"
          className="size-full object-cover"
        />
        <div className="absolute inset-0 bg-linear-to-t from-background/80 to-background/20" />
      </div>

      {/* Right Panel (Form) */}
      <div className="flex w-full items-center justify-center px-4 py-12 sm:px-6 lg:w-1/2 lg:px-8">
        <div className="w-full max-w-md space-y-8">
          <div className="flex flex-col items-center">
            <Logo />
            <h2 className="mt-6 text-center text-2xl font-extrabold text-foreground">
              Forgot Password?
            </h2>
            <p className="mt-2 text-center text-sm text-muted-foreground">
              Enter the email associated with your account and we&apos;ll send
              you a link to reset your password.
            </p>
          </div>
          <form className="space-y-6">
            <div>
              <Label htmlFor="email">Email address</Label>
              <Input
                id="email"
                name="email"
                type="email"
                autoComplete="email"
                required
                className="mt-1"
              />
            </div>

            <Button type="submit" className="w-full">
              Reset Password
            </Button>

            <div className="flex items-center justify-between">
              <a href="/login" className="text-sm text-primary hover:underline">
                Back to Login
              </a>
              <a href="/help" className="text-sm text-primary hover:underline">
                Need Help?
              </a>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
} from "@/components/ui/card";
import { Envelope } from "@mynaui/icons-react";

export default function ForgotPassword5() {
  return (
    <div className="max-w-7xl flex h-screen flex-col items-center justify-center">
      <Card className="w-full max-w-sm">
        <CardHeader className="space-y-6">
          <div className="mx-auto flex size-12 items-center justify-center rounded-full bg-primary/10">
            <Envelope className="size-6 text-primary" aria-hidden="true" />
          </div>
          <div className="space-y-2 text-center">
            <h1 className="text-2xl font-semibold tracking-tight">
              Forgot Your Password?
            </h1>
            <p className="text-sm text-muted-foreground">
              Type in your email below, and we&apos;ll send you instructions on
              how to set a new password.
            </p>
          </div>
        </CardHeader>
        <CardContent>
          <form className="space-y-4">
            <div className="space-y-2">
              <label
                htmlFor="email"
                className="sr-only"
              >
                Email Address
              </label>
              <Input
                id="email"
                name="email"
                type="email"
                autoComplete="email"
                required
                placeholder="Email Address"
              />
            </div>
            <Button type="submit" className="w-full">
              Send Reset Link
            </Button>
          </form>
        </CardContent>
        <CardFooter className="flex justify-center font-medium">
          <Button variant="link" asChild>
            <a href="/login">Return to Login</a>
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
}

import Logo from "@/mynaui/Logo";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { ArrowLeft } from "@mynaui/icons-react";

export default function ForgotPassword6() {
  return (
    <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center">
      <img
        src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
        alt="Blog Post Image"
        className="absolute inset-0 size-full bg-top object-cover"
      />

      <div className="relative mx-auto flex w-full flex-col items-center justify-center space-y-8">
        <div className="text-white">
          <Logo />
        </div>

        <Card className="mx-auto w-full max-w-sm rounded-md border-0 pt-6 pb-4 shadow-2xl shadow-black/25">
          <CardHeader className="space-y-6">
            <div className="space-y-2 text-center">
              <h1 className="text-foreground text-base font-semibold tracking-tight">
                Forgot Password?
              </h1>
              <p className="text-muted-foreground max-w-prose text-sm text-balance">
                Lost your password? No worries! Pop in your email, and
                we&apos;ll zap you a reset link!
              </p>
            </div>
          </CardHeader>
          <CardContent>
            <form className="space-y-2">
              <div className="space-y-2">
                <label htmlFor="email" className="sr-only">
                  Email Address
                </label>
                <Input
                  id="email"
                  name="email"
                  type="email"
                  autoComplete="email"
                  required
                  placeholder="Eg. adam@example.com"
                />
              </div>
              <Button type="submit" className="w-full">
                Send Reset Link
              </Button>
              <CardFooter className="flex justify-center font-medium">
                <Button variant="link" asChild className="gap-1">
                  <a href="/login">
                    <ArrowLeft className="text-primary size-4" stroke={2} />
                    Back to Login
                  </a>
                </Button>
              </CardFooter>
            </form>
          </CardContent>
        </Card>

        <div className="flex items-center gap-1.5 text-sm font-medium text-white">
          <a href="/#">Legal</a>
          <span>•</span>
          <a href="/#">Self Hosted</a>
          <span>•</span>
          <a href="/#">Sign Up</a>
          <span>•</span>
          <a href="/#">Need Help?</a>
        </div>
      </div>
    </div>
  );
}