halobestie-clone/control_center/src/pages/login/LoginPage.jsx

import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuth } from '../../core/auth/AuthContext'

const messageForError = (err) => {
  const code = err?.response?.data?.error?.code
  const msg = err?.response?.data?.error?.message
  switch (code) {
    case 'ACCOUNT_LOCKED':
      return msg || 'Akun terkunci sementara. Coba lagi nanti.'
    case 'INVALID_CREDENTIALS':
      return 'Email atau password salah.'
    case 'VALIDATION_ERROR':
      return 'Email dan password wajib diisi.'
    default:
      return 'Gagal masuk. Coba lagi.'
  }
}

export default function LoginPage() {
  const { user, loading: authLoading, login } = useAuth()
  const navigate = useNavigate()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    if (user) navigate('/', { replace: true })
  }, [user, navigate])

  const handleSubmit = async (e) => {
    e.preventDefault()
    setError('')
    setLoading(true)
    try {
      await login(email, password)
    } catch (err) {
      setError(messageForError(err))
      setLoading(false)
    }
  }

  if (authLoading) return <div style={{ padding: 24 }}>Loading...</div>

  return (
    <div style={{ maxWidth: 360, margin: '100px auto', padding: 24 }}>
      <h1>Halo Bestie</h1>
      <h2>Control Center</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="cc-login-email">Email</label>
          <input id="cc-login-email" type="email" value={email} onChange={e => setEmail(e.target.value)} required style={{ display: 'block', width: '100%', marginBottom: 12 }} />
        </div>
        <div>
          <label htmlFor="cc-login-password">Password</label>
          <input id="cc-login-password" type="password" value={password} onChange={e => setPassword(e.target.value)} required style={{ display: 'block', width: '100%', marginBottom: 12 }} />
        </div>
        {error && <p style={{ color: 'red' }}>{error}</p>}
        <button type="submit" disabled={loading} style={{ width: '100%' }}>
          {loading ? 'Loading...' : 'Masuk'}
        </button>
      </form>
    </div>
  )
}