LoginForm

'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('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [rememberMe, setRememberMe] = useState(false);

  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEmail(e.target.value);
  };

  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value);
  };

  const handleShowPasswordToggle = () => {
    setShowPassword(!showPassword);
  };

  const handleRememberMeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setRememberMe(e.target.checked);
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    onSubmit(email, password);
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="w-full max-w-md mx-auto p-4 bg-zinc-950 rounded-lg shadow-lg"
    >
      <h2 className="text-2xl font-bold text-gold mb-4">Login</h2>
      <div className="mb-4">
        <label
          htmlFor="email"
          className="block text-sm font-medium text-gray-300 mb-2"
        >
          Email
        </label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={handleEmailChange}
          className="block w-full p-2 text-sm text-gray-100 bg-zinc-800 border border-zinc-700 rounded-lg focus:outline-none focus:ring-gold focus:border-gold"
        />
      </div>
      <div className="mb-4 relative">
        <label
          htmlFor="password"
          className="block text-sm font-medium text-gray-300 mb-2"
        >
          Password
        </label>
        <input
          type={showPassword ? 'text' : 'password'}
          id="password"
          value={password}
          onChange={handlePasswordChange}
          className="block w-full p-2 text-sm text-gray-100 bg-zinc-800 border border-zinc-700 rounded-lg focus:outline-none focus:ring-gold focus:border-gold"
        />
        <button
          type="button"
          onClick={handleShowPasswordToggle}
          className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-sm text-gray-300 hover:text-gold transition duration-200"
        >
          {showPassword ? 'Hide' : 'Show'}
        </button>
      </div>
      <div className="flex items-center mb-4">
        <input
          type="checkbox"
          id="rememberMe"
          checked={rememberMe}
          onChange={handleRememberMeChange}
          className="mr-2"
        />
        <label htmlFor="rememberMe" className="text-sm text-gray-300">
          Remember me
        </label>
      </div>
      <button
        type="submit"
        className="w-full py-2 text-sm text-gold bg-zinc-800 hover:bg-zinc-700 transition duration-200 rounded-lg focus:outline-none focus:ring-gold focus:border-gold"
      >
        Login
      </button>
      <div className="flex justify-between mt-4">
        <a
          href="#"
          className="text-sm text-gray-300 hover:text-gold transition duration-200"
        >
          Forgot password?
        </a>
        <div className="flex items-center">
          <span className="text-sm text-gray-300 mr-2">Or login with:</span>
          <button
            type="button"
            className="p-2 text-sm text-gray-100 bg-zinc-800 hover:bg-zinc-700 transition duration-200 rounded-lg focus:outline-none focus:ring-gold focus:border-gold mr-2"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="w-4 h-4"
            >
              <path d="M20 6h-2a4 4 0 0 1-4-4 12 12 0 0 1-7 5 13 13 0 0 1 5-6v-1a4 4 0 0 1 4-4 12 12 0 0 1-7 5 13 13 0 0 1 5-6v-1a4 4 0 0 1 4-4 12 12 0 0 1-7 5 13 13 0 0 1 5-6v-1a4 4 0 0 1 4-4 12 12 0 0 1-7 5" />
            </svg>
          </button>
          <button
            type="button"
            className="p-2 text-sm text-gray-100 bg-zinc-800 hover:bg-zinc-700 transition duration-200 rounded-lg focus:outline-none focus:ring-gold focus:border-gold"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="w-4 h-4"
            >
              <path d="M9 19c-5 1.5-5-2.5-5-2.5s5 2.5 5 2.5z" />
              <path d="M15 19v-2a4 4 0 0 0-4-4H9c0 3.301 2.697 6 6 6a4 4 0 0 0 4-4 4 4 0 0 0-4-4z" />
            </svg>
          </button>
        </div>
      </div>
    </form>
  );
};

export default LoginForm;

Component info

About

Modern login form with social auth