ForgotPassword

forgotpassword-1779372630181.tsx

'use client';

import React, { useState } from 'react';

interface ForgotPasswordProps {
  // No props needed for this component
}

const ForgotPassword: React.FC<ForgotPasswordProps> = () => {
  const [email, setEmail] = useState('');
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    // Simulate email sending
    setTimeout(() => {
      setIsSubmitted(true);
    }, 1000);
  };

  return (
    <div className="h-screen bg-zinc-950 flex justify-center items-center">
      <form
        onSubmit={handleSubmit}
        className="bg-zinc-900 p-8 rounded-lg shadow-lg flex flex-col gap-4"
      >
        <h2 className="text-2xl text-gold font-bold">Forgot Password</h2>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Enter your email"
          className="p-2 rounded-lg border border-zinc-800 focus:outline-gold"
        />
        <button
          type="submit"
          className="bg-gold p-2 rounded-lg text-zinc-900 hover:bg-gold/80 transition duration-200"
        >
          Send Confirmation
        </button>
        {isSubmitted && (
          <div className="flex flex-col items-center gap-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-8 w-8 text-gold"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={2}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M5 13l4 4L19 7"
              />
            </svg>
            <p className="text-gold">Email sent successfully!</p>
          </div>
        )}
      </form>
    </div>
  );
};

export default ForgotPassword;

Component info

CategoryAuthentication

Frameworkreact

TierFREE

Copies0

About

Forgot password email form

More from Authentication

'use client';

import React, { useState } from 'react';

interface LoginFormProps {
  onSubmit: (email: string, password: string) => void;
}

const LoginForm: React.FC<LoginFormProps> = ({ onSubmit }) => {
  const [email, setEmail] = useState('');

LoginForm

Authentication

'use client';

import { useState } from 'react';

interface SignupFormProps {
  // No props for this component
}

const SignupForm: React.FC<SignupFormProps> = () => {
  const [step, setStep] = useState(1);
  const [email, setEmail] = useState('');

SignupForm

Authentication

'use client';

import { useState, useEffect } from 'react';

interface TwoFactorAuthProps {
  onSubmit: (code: string) => void;
}

const TwoFactorAuth = ({ onSubmit }: TwoFactorAuthProps) => {
  const [code, setCode] = useState(['', '', '', '', '', '

TwoFactorAuth

Authentication

'use client';

import { useState } from 'react';

interface UserRole {
  name: string;
  color: string;
}

interface UserProfile {
  name: string;
  email: string;
  role: UserRole;
  avatar: string | null;
}

const demoProfile: UserProfile = {
  nam

UserAvatar

Authentication