LoginForm.tsx

Go to the documentation of this file.

"use client";
import { useState } from "react";
import { apiClient } from "@/lib/client/apiClient";
 
export default function LoginForm() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [storeName, setStoreName] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
 
  async function handleLogin(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError("");
    
    try {
      // Validate store name
      if (!storeName.trim()) {
        setError("Please enter a store name");
        setLoading(false);
        return;
      }
 
      // Demo mode for testing
      const demoUsername = process.env.NEXT_PUBLIC_DEMO_USERNAME || "demo";
      const isDemoMode = process.env.NEXT_PUBLIC_DEMO_MODE === "true";
      
      if (isDemoMode && (username.toLowerCase() === demoUsername || username === "admin@iig.cwanz.online")) {
        // Demo mode - redirect without server authentication
        window.location.href = "/pages/home";
        return;
      }
 
      // Use secure server-side authentication with store name
      console.log('[LoginForm] Attempting login:', { username, storeName, hasPassword: !!password });
      const result = await apiClient.login(username, password, storeName.toLowerCase().trim());
      
      console.log("Login result:", result);
      
      if (result.success) {
        // Redirect to specified page or default home
        const redirectUrl = result.data?.redirect || "/pages/home";
        console.log("Redirecting to:", redirectUrl);
        window.location.href = redirectUrl;
      } else {
        setError(result.error || "Login failed");
      }
    } catch (error) {
      console.error("Login error:", error);
      setError("Unable to connect to server");
    } finally {
      setLoading(false);
    }
  }
 
  return (
    <>
      <form onSubmit={handleLogin} className="space-y-6">
        {/* Store Name Input */}
        <div>
          <label htmlFor="storeName" className="block text-sm font-medium mb-2" style={{ color: '#1f2937' }}>
            Store Name
          </label>
          <input
            type="text"
            id="storeName"
            value={storeName}
            onChange={(e) => setStoreName(e.target.value)}
            className="w-full px-3 py-2 rounded-md focus:outline-none focus:ring-2" style={{ border: '1px solid #d1d5db', background: 'white', color: '#1f2937', borderColor: '#d1d5db' }}
            placeholder="e.g., iig, cowra, griffith, murwillumbah"
            required
          />
          <p className="mt-1 text-xs" style={{ color: '#6b7280' }}>
            Enter your store name (e.g., "iig" for management, "cowra" for Cowra store)
          </p>
        </div>
 
        <div>
          <label htmlFor="username" className="block text-sm font-medium mb-2" style={{ color: '#1f2937' }}>
            Username
          </label>
          <input
            type="text"
            id="username"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            className="w-full px-3 py-2 rounded-md focus:outline-none focus:ring-2" style={{ border: '1px solid #d1d5db', background: 'white', color: '#1f2937' }}
            placeholder="Enter your username"
            required
          />
        </div>
 
        <div>
          <label htmlFor="password" className="block text-sm font-medium mb-2" style={{ color: '#1f2937' }}>
            Password
          </label>
          <input
            type="password"
            id="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            className="w-full px-3 py-2 rounded-md focus:outline-none focus:ring-2" style={{ border: '1px solid #d1d5db', background: 'white', color: '#1f2937' }}
            placeholder="Enter your password"
            required
          />
        </div>
 
        {error && (
          <div className="px-4 py-3 rounded-md" style={{ background: '#fee2e2', border: '1px solid #fca5a5' }}>
            <span style={{ color: '#dc2626' }}>{error}</span>
          </div>
        )}
 
        <button
          type="submit"
          disabled={loading}
          className="w-full py-2 px-4 rounded-md hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
          style={{ background: 'linear-gradient(to right, #2563eb, #7c3aed)', color: 'white' }}
        >
          {loading ? "Signing in..." : "Sign In"}
        </button>
      </form>
 
    {process.env.NEXT_PUBLIC_DEMO_MODE === "true" && (
        <div className="mt-6 p-4 rounded-md" style={{ background: '#dbeafe', border: '1px solid #93c5fd' }}>
          <p className="text-sm" style={{ color: '#1e40af' }}>
            <strong>Demo Mode:</strong> Use username "demo" with any password to access the demo.
          </p>
        </div>
      )}
    </>
  );
}