Login.jsx

Go to the documentation of this file.

// dashboard/src/pages/Login.jsx
import { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import PublicLayout from '../components/Layout/PublicLayout';
import './Login.css';
import { apiFetch } from '../lib/api';
 
function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();
 
  const handleLogin = async (e) => {
    e.preventDefault();
    setLoading(true);
 
    try {
      // ✅ Use direct fetch so future requests inherit Authorization logic
      const res = await apiFetch('/users/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password, mfaCode: window._mfaCode || undefined }),
      });
 
      const contentType = res.headers.get('content-type') || '';
      let data;
      if (contentType.includes('application/json')) {
        data = await res.json();
      } else {
        const text = await res.text();
        try { data = JSON.parse(text); } catch { data = { error: text }; }
      }
 
      if (!res.ok) {
        alert((data && (data.error || data.message)) || 'Login failed');
        setLoading(false);
        return;
      }
 
      // ✅ Save JWT token for future API calls
      if (data.token) {
        localStorage.setItem('token', data.token);
      } else {
        alert('Login succeeded but no token returned.');
        setLoading(false);
        return;
      }
 
      // Always redirect to dashboard after login
      navigate('/dashboard');
    } catch (err) {
      console.error('Login error:', err);
      alert('Cannot reach API. Please ensure the backend and database are running.');
    } finally {
      setLoading(false);
    }
  };
 
  return (
    <PublicLayout>
      <section className="login-hero">
        <div className="login-hero-container">
          <div className="login-hero-content">
            <h1 className="login-hero-title">Welcome Back</h1>
            <p className="login-hero-subtitle">Sign in to access your dashboard and manage your MSP clients.</p>
            <form onSubmit={handleLogin} className="login-form">
              <div className="form-group">
                <label htmlFor="email">Email</label>
                <input
                  id="email"
                  name="email"
                  type="email"
                  placeholder="Enter your email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                  disabled={loading}
                />
              </div>
              <div className="form-group">
                <label htmlFor="password">Password</label>
                <input
                  id="password"
                  name="password"
                  type="password"
                  placeholder="Enter your password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
                  disabled={loading}
                />
              </div>
              <div className="form-group">
                <label htmlFor="mfa">MFA Code (if enabled)</label>
                <input
                  id="mfa"
                  name="mfa"
                  type="text"
                  placeholder="123456"
                  inputMode="numeric"
                  pattern="[0-9]*"
                  disabled={loading}
                  onChange={(e) => (window._mfaCode = e.target.value)}
                />
              </div>
              <button type="submit" className="login-button" disabled={loading}>
                {loading ? 'Signing In...' : 'Sign In'}
              </button>
            </form>
            <div className="login-footer">
              <p><Link to="/forgot-password">Forgot your password?</Link></p>
              <p>
                Don't have an account? <Link to="/">Contact Sales</Link>
              </p>
            </div>
          </div>
          <div className="login-hero-image">
            <div className="dashboard-preview">
              <img 
                src="/dashboard-preview.png" 
                alt="RMM+PSA Dashboard Preview - Ticket Management Interface" 
                className="preview-screenshot"
              />
            </div>
          </div>
        </div>
      </section>
    </PublicLayout>
  );
}
 
export default Login;