karyaman-project/adventure-rental-app/src/ForgotPasswordForm.jsx

import React, { useState, useCallback } from 'react';
import axios from 'axios';

const ForgotPasswordForm = ({ showLogin, showReset }) => {
  const [mode, setMode] = useState('email'); // 'email' or 'whatsapp'
  const [identifier, setIdentifier] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const [loading, setLoading] = useState(false);
  const [emailError, setEmailError] = useState('');

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

  const handleIdentifierChange = (e) => {
    let value = e.target.value;
    if (mode === 'email') {
      if (!validateEmail(value) && value.length > 0) {
        setEmailError('Please enter a valid email address.');
      } else {
        setEmailError('');
      }
    } else {
      setEmailError('');
      if (value.startsWith('0')) {
        value = value.substring(1);
      }
      value = value.replace(/[^0-9]/g, '');
    }
    setIdentifier(value);
  };

  const handleModeChange = useCallback((newMode) => {
    setMode(newMode);
    setIdentifier('');
    setEmailError('');
    setError('');
    setSuccess('');
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (mode === 'email' && emailError) {
      setError('Please fix the errors before submitting.');
      return;
    }
    setLoading(true);
    setError('');
    setSuccess('');

    const finalIdentifier = mode === 'whatsapp' ? `62${identifier}` : identifier;

    try {
      await axios.post('https://api.karyamanswasta.my.id/webhook/forgot-password/adventure', { identifier: finalIdentifier });
      setSuccess('Password reset link sent. Please check your email/WhatsApp.');
      // showReset(); // You might want to navigate to reset password form after a delay
    } catch (err) {
      setError(err.response?.data?.message || 'Failed to send reset link.');
    } finally {
      setLoading(false);
    }
  };

  const isFormValid = identifier.trim() !== '' && !emailError;

  return (
    <>
      <div className="text-center">
        <h2 className="text-3xl font-bold text-white">Forgot Password</h2>
        <p className="mt-2 text-sm text-gray-300">Enter your email or WhatsApp to reset</p>
      </div>
      <div className="flex space-x-2 mt-6">
        <button onClick={() => handleModeChange('email')} className={`w-1/2 py-2 text-sm font-medium rounded-md focus:outline-none transition-colors duration-300 ${mode === 'email' ? 'bg-brand-orange text-white' : 'bg-white/20 text-white hover:bg-white/30'}`}>
          Email
        </button>
        <button onClick={() => handleModeChange('whatsapp')} className={`w-1/2 py-2 text-sm font-medium rounded-md focus:outline-none transition-colors duration-300 ${mode === 'whatsapp' ? 'bg-brand-orange text-white' : 'bg-white/20 text-white hover:bg-white/30'}`}>
          WhatsApp
        </button>
      </div>
      <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
        <div>
          <div className="relative">
            {mode === 'whatsapp' && (
              <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"><span className="text-white font-medium sm:text-sm">+62</span><span className="text-gray-400 mx-2">|</span></div>
            )}
            <input
              name="identifier"
              type={mode === 'email' ? 'email' : 'tel'}
              required
              className={`appearance-none relative block w-full px-4 py-3 border ${emailError ? 'border-red-500' : 'border-gray-500'} bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md ${mode === 'whatsapp' ? 'pl-16' : ''}`}
              placeholder={mode === 'email' ? 'Enter your email' : '812...'}
              value={identifier}
              onChange={handleIdentifierChange}
            />
          </div>
          {emailError && <p className="mt-2 text-xs text-red-400">{emailError}</p>}
        </div>
        {error && <p className="text-sm text-red-300 text-center">{error}</p>}
        {success && <p className="text-sm text-green-400 text-center">{success}</p>}
        <div>
          <button type="submit" disabled={loading || !isFormValid} className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-bold rounded-md text-white bg-brand-orange hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-orange focus:ring-offset-gray-800 disabled:opacity-60">
            {loading ? 'Sending...' : 'Send Reset Link'}
          </button>
        </div>
        <p className="text-center text-sm text-gray-300">
          <button type="button" onClick={showLogin} className="font-medium text-brand-orange hover:underline">
            Back to Login
          </button>
        </p>
      </form>
    </>
  );
};

export default ForgotPasswordForm;