0x1998 - MANAGER

Düzenlenen Dosya: ForgotPassword.jsx

import { useState } from 'react';
import { resetPassword } from './firebase';

/**
 * ForgotPassword Component
 * 
 * A modal/page component for password reset functionality.
 * Uses Firebase Authentication's sendPasswordResetEmail function.
 * 
 * @param {boolean} isOpen - Whether the modal is open
 * @param {function} onClose - Function to close the modal
 * @param {function} onBackToLogin - Function to go back to login
 */
function ForgotPasswordModal({ isOpen, onClose, onBackToLogin }) {
  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState('');

// If modal is not open, return null
  if (!isOpen) return null;

// Validate email format
  const validateEmail = (email) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  };

// Handle form submission
  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');

// Validate email
    if (!email.trim()) {
      setError('Please enter your email address');
      return;
    }

if (!validateEmail(email)) {
      setError('Please enter a valid email address');
      return;
    }

setLoading(true);

try {
      // Call Firebase resetPassword function
      const result = await resetPassword(email);

if (result.success) {
        setSuccess(true);
      } else {
        // Handle Firebase authentication errors
        const errorMessage = result.error;
        
        if (errorMessage.includes('user-not-found')) {
          setError('No account found with this email address');
        } else if (errorMessage.includes('invalid-email')) {
          setError('Invalid email address format');
        } else if (errorMessage.includes('too-many-requests')) {
          setError('Too many attempts. Please try again later');
        } else {
          setError('Failed to send reset email. Please try again');
        }
      }
    } catch (err) {
      setError('An unexpected error occurred. Please try again');
    } finally {
      setLoading(false);
    }
  };

// Handle closing/resetting the modal
  const handleClose = () => {
    setEmail('');
    setError('');
    setSuccess(false);
    setLoading(false);
    onClose();
  };

// Handle back to login
  const handleBackToLogin = () => {
    setEmail('');
    setError('');
    setSuccess(false);
    setLoading(false);
    onBackToLogin();
  };

return (
    <div className="modal-overlay" onClick={handleClose}>
      <div className="modal forgot-password-modal" onClick={e => e.stopPropagation()}>
        <button className="modal__close" onClick={handleClose}>×</button>
        
        <div className="forgot-password-modal__content">
          {success ? (
            // Success State
            <div className="forgot-password-modal__success">
              <div className="forgot-password-modal__success-icon">✓</div>
              <h2 className="forgot-password-modal__title">Reset Link Sent!</h2>
              <p className="forgot-password-modal__message">
                We've sent a password reset link to <strong>{email}</strong>
              </p>
              <p className="forgot-password-modal__help">
                Please check your email and follow the instructions to reset your password.
              </p>
              <button 
                className="btn btn-accent forgot-password-modal__btn"
                onClick={handleBackToLogin}
              >
                Back to Sign In
              </button>
            </div>
          ) : (
            // Form State
            <>
              <div className="forgot-password-modal__header">
                <div className="forgot-password-modal__icon">🔐</div>
                <h2 className="forgot-password-modal__title">Forgot Password?</h2>
                <p className="forgot-password-modal__subtitle">
                  No worries, we'll send you reset instructions
                </p>
              </div>

<form className="forgot-password-modal__form" onSubmit={handleSubmit}>
                <div className="login-form__field">
                  <label className="login-form__label">Email Address</label>
                  <input 
                    className="login-form__input" 
                    type="email" 
                    placeholder="Enter your registered email"
                    value={email}
                    onChange={(e) => {
                      setEmail(e.target.value);
                      setError('');
                    }}
                    disabled={loading}
                    required
                  />
                </div>

{error && (
                  <div className="forgot-password-modal__error">
                    {error}
                  </div>
                )}

<button 
                  type="submit" 
                  className="btn btn-accent forgot-password-modal__btn"
                  disabled={loading || !email.trim()}
                >
                  {loading ? 'Sending...' : 'Send Reset Link'}
                </button>
              </form>

<div className="forgot-password-modal__footer">
                <button 
                  className="forgot-password-modal__back-link"
                  onClick={handleBackToLogin}
                  disabled={loading}
                >
                  ← Back to Sign In
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

/**
 * ForgotPassword Page Component
 * 
 * A standalone page version of the forgot password component.
 * Use this if you want it as a separate route instead of a modal.
 */
function ForgotPasswordPage({ onBackToLogin }) {
  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState('');

const validateEmail = (email) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  };

const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');

if (!email.trim()) {
      setError('Please enter your email address');
      return;
    }

if (!validateEmail(email)) {
      setError('Please enter a valid email address');
      return;
    }

setLoading(true);

try {
      const result = await resetPassword(email);

if (result.success) {
        setSuccess(true);
      } else {
        const errorMessage = result.error;
        
        if (errorMessage.includes('user-not-found')) {
          setError('No account found with this email address');
        } else if (errorMessage.includes('invalid-email')) {
          setError('Invalid email address format');
        } else if (errorMessage.includes('too-many-requests')) {
          setError('Too many attempts. Please try again later');
        } else {
          setError('Failed to send reset email. Please try again');
        }
      }
    } catch (err) {
      setError('An unexpected error occurred. Please try again');
    } finally {
      setLoading(false);
    }
  };

if (success) {
    return (
      <div className="login-page">
        <div className="login-page__left">
          <div className="login-page__brand">
            <span className="login-page__brand-icon">🏢</span>
            <span className="login-page__brand-name">BEPARAGON <span>LLC</span></span>
          </div>
        </div>
        <div className="login-page__right">
          <div className="forgot-password-page__success">
            <div className="forgot-password-modal__success-icon">✓</div>
            <h1 className="login-page__form-title">Reset Link Sent!</h1>
            <p className="login-page__form-subtitle">
              We've sent a password reset link to <strong>{email}</strong>
            </p>
            <p className="forgot-password-modal__help">
              Please check your email and follow the instructions to reset your password.
            </p>
            <button 
              className="btn btn-accent login-form__submit"
              onClick={onBackToLogin}
            >
              Back to Sign In
            </button>
          </div>
        </div>
      </div>
    );
  }

return (
    <div className="login-page">
      <div className="login-page__left">
        <div className="login-page__brand">
          <span className="login-page__brand-icon">🏢</span>
          <span className="login-page__brand-name">BEPARAGON <span>LLC</span></span>
        </div>
        <h2 className="login-page__left-title">Reset your password</h2>
        <div className="login-page__features">
          <div className="login-page__feature"><span className="login-page__feature-icon">🔒</span>Secure password reset</div>
          <div className="login-page__feature"><span className="login-page__feature-icon">📧</span>Receive email instantly</div>
          <div className="login-page__feature"><span className="login-page__feature-icon">✨</span>Get back to your account</div>
        </div>
      </div>
      <div className="login-page__right">
        <form className="login-form" onSubmit={handleSubmit}>
          <h1 className="login-page__form-title">Forgot Password</h1>
          <p className="login-page__form-subtitle">Enter your email to receive reset instructions</p>
          
          <div className="login-form__field">
            <label className="login-form__label">Email Address</label>
            <input 
              className="login-form__input" 
              type="email" 
              placeholder="Enter your registered email"
              value={email}
              onChange={(e) => {
                setEmail(e.target.value);
                setError('');
              }}
              disabled={loading}
              required
            />
          </div>

{error && (
            <div className="forgot-password-modal__error">
              {error}
            </div>
          )}

<button 
            type="submit" 
            className="btn btn-accent login-form__submit"
            disabled={loading || !email.trim()}
          >
            {loading ? 'Sending...' : 'Send Reset Link'}
          </button>

<p className="login-form__footer">
            <button 
              type="button"
              className="forgot-password-modal__back-link"
              onClick={onBackToLogin}
              disabled={loading}
            >
              ← Back to Sign In
            </button>
          </p>
        </form>
      </div>
    </div>
  );
}

export { ForgotPasswordModal, ForgotPasswordPage };

geri dön