mongoDB Login explination

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './Login.css'

function Login({ setUser }) {
  const navigate = useNavigate()
  const [mode, setMode] = useState('login')
  const [role, setRole] = useState('customer')
  const [form, setForm] = useState({
    first_name: '', last_name: '', email: '', password: '', address: ''
  })
  const [error, setError] = useState('')

  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value })
  }

  const handleSubmit = async () => {
    setError('')

    if (!form.email)    { setError('Please enter your email'); return }
    if (!form.password) { setError('Please enter your password'); return }

    if (mode === 'register') {
      if (!form.first_name) { setError('Please enter your first name'); return }
      if (!form.last_name)  { setError('Please enter your last name'); return }
      if (form.password.length < 6) { setError('Password must be at least 6 characters'); return }

      const res = await fetch('/api/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form)
      })
      if (!res.ok) { setError('Registration failed'); return }
    }

    const url = role === 'producer' ? '/api/producer/login' : '/api/login'
    const res = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: form.email, password: form.password })
    })
    const data = await res.json()
    if (!res.ok) { setError(data.error); return }

    localStorage.setItem('user', JSON.stringify(data))
    setUser(data)
    navigate(data.role === 'producer' ? '/producer' : '/')
  }

  return (
    <div className="login-page">
      <div className="login-card">
        <h1>{mode === 'login' ? 'Log In' : 'Create Account'}</h1>

        <div className="role-buttons">
          <button onClick={() => setRole('customer')} className={role === 'customer' ? 'active' : ''}>Customer</button>
          <button onClick={() => setRole('producer')} className={role === 'producer' ? 'active' : ''}>Producer</button>
        </div>

        {mode === 'register' && (
          <>
            <input name="first_name" placeholder="First name" onChange={handleChange} />
            <input name="last_name"  placeholder="Last name"  onChange={handleChange} />
            <input name="address"    placeholder="Address"    onChange={handleChange} />
          </>
        )}

        <input name="email"    placeholder="Email"    onChange={handleChange} />
        <input name="password" placeholder="Password" type="password" onChange={handleChange} />

        {error && <p className="error">{error}</p>}

        <button className="submit-btn" onClick={handleSubmit}>
          {mode === 'login' ? 'Log In' : 'Sign Up'}
        </button>

        <p className="toggle-link" onClick={() => setMode(mode === 'login' ? 'register' : 'login')}>
          {mode === 'login' ? 'No account? Create one' : 'Already have an account? Log in'}
        </p>
      </div>
    </div>
  )
}

export default Login

.login-page {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  background: white;
  border-radius: 12px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  border: 1px solid #ccc;
}

.login-card h1 { margin-bottom: 20px; }

.login-card input {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-family: 'Gluten', cursive;
  font-size: 14px;
}

.role-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.role-buttons button {
  flex: 1;
  padding: 10px;
  background: #ccc;
  color: #144A5C;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Gluten', cursive;
}

.role-buttons button.active {
  background: #144A5C;
  color: white;
}

.error {
  color: white;
  background: red;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  text-align: center;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background: #A2C24A;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Gluten', cursive;
  font-size: 16px;
  margin-bottom: 15px;
}

.toggle-link {
  text-align: center;
  color: #A2C24A;
  cursor: pointer;
  font-size: 14px;
}