Fix jwt-token

client/src/pages/Login.jsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Navigate } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
 import toast from 'react-hot-toast';
+import api from '../services/api';
 
 const Login = () => {
   const [credentials, setCredentials] = useState({
@@ -10,8 +11,54 @@ const Login = () => {
     password: ''
   });
   const [showPassword, setShowPassword] = useState(false);
+  const [tenantConfig, setTenantConfig] = useState(null);
+  const [configLoading, setConfigLoading] = useState(true);
   const { login, loading, isAuthenticated } = useAuth();
 
+  // Fetch tenant configuration on mount
+  useEffect(() => {
+    const fetchTenantConfig = async () => {
+      try {
+        const response = await api.get('/auth/config');
+        setTenantConfig(response.data.data);
+      } catch (error) {
+        console.error('Failed to fetch tenant config:', error);
+        toast.error('Failed to load authentication configuration');
+      } finally {
+        setConfigLoading(false);
+      }
+    };
+
+    fetchTenantConfig();
+  }, []);
+
+  if (isAuthenticated) {
+    return <Navigate to="/" replace />;
+  }
+
+  // Show loading while fetching config
+  if (configLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto"></div>
+          <p className="mt-4 text-gray-600">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Handle different auth providers
+  const handleSSO = (provider) => {
+    if (provider === 'saml' && tenantConfig?.saml?.login_url) {
+      window.location.href = tenantConfig.saml.login_url;
+    } else if (provider === 'oauth' && tenantConfig?.oauth?.login_url) {
+      window.location.href = tenantConfig.oauth.login_url;
+    } else {
+      toast.error(`${provider.toUpperCase()} authentication not configured`);
+    }
+  };
+
   if (isAuthenticated) {
     return <Navigate to="/" replace />;
   }
@@ -50,74 +97,127 @@ const Login = () => {
             </svg>
           </div>
           <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
-            Drone Detection System
+            {tenantConfig?.tenant_name || 'Drone Detection System'}
           </h2>
           <p className="mt-2 text-center text-sm text-gray-600">
             Sign in to your account
           </p>
+          {tenantConfig?.auth_provider && (
+            <p className="mt-1 text-center text-xs text-gray-500">
+              Authentication: {tenantConfig.auth_provider.toUpperCase()}
+            </p>
+          )}
         </div>
         
-        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
-          <div className="rounded-md shadow-sm -space-y-px">
-            <div>
-              <label htmlFor="username" className="sr-only">
-                Username or Email
-              </label>
-              <input
-                id="username"
-                name="username"
-                type="text"
-                required
-                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
-                placeholder="Username or Email"
-                value={credentials.username}
-                onChange={handleChange}
-                disabled={loading}
-              />
+        {/* Local/LDAP Authentication Form */}
+        {(tenantConfig?.auth_provider === 'local' || tenantConfig?.auth_provider === 'ldap') && (
+          <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+            <div className="rounded-md shadow-sm -space-y-px">
+              <div>
+                <label htmlFor="username" className="sr-only">
+                  Username or Email
+                </label>
+                <input
+                  id="username"
+                  name="username"
+                  type="text"
+                  required
+                  className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
+                  placeholder="Username or Email"
+                  value={credentials.username}
+                  onChange={handleChange}
+                  disabled={loading}
+                />
+              </div>
+              <div className="relative">
+                <label htmlFor="password" className="sr-only">
+                  Password
+                </label>
+                <input
+                  id="password"
+                  name="password"
+                  type={showPassword ? 'text' : 'password'}
+                  required
+                  className="appearance-none rounded-none relative block w-full px-3 py-2 pr-10 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
+                  placeholder="Password"
+                  value={credentials.password}
+                  onChange={handleChange}
+                  disabled={loading}
+                />
+                <button
+                  type="button"
+                  className="absolute inset-y-0 right-0 pr-3 flex items-center"
+                  onClick={() => setShowPassword(!showPassword)}
+                >
+                  {showPassword ? (
+                    <EyeSlashIcon className="h-5 w-5 text-gray-400" />
+                  ) : (
+                    <EyeIcon className="h-5 w-5 text-gray-400" />
+                  )}
+                </button>
+              </div>
             </div>
-            <div className="relative">
-              <label htmlFor="password" className="sr-only">
-                Password
-              </label>
-              <input
-                id="password"
-                name="password"
-                type={showPassword ? 'text' : 'password'}
-                required
-                className="appearance-none rounded-none relative block w-full px-3 py-2 pr-10 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
-                placeholder="Password"
-                value={credentials.password}
-                onChange={handleChange}
-                disabled={loading}
-              />
+
+            <div>
               <button
-                type="button"
-                className="absolute inset-y-0 right-0 pr-3 flex items-center"
-                onClick={() => setShowPassword(!showPassword)}
+                type="submit"
+                disabled={loading}
+                className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed"
               >
-                {showPassword ? (
-                  <EyeSlashIcon className="h-5 w-5 text-gray-400" />
+                {loading ? (
+                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                 ) : (
-                  <EyeIcon className="h-5 w-5 text-gray-400" />
+                  'Sign in'
                 )}
               </button>
             </div>
-          </div>
+          </form>
+        )}
 
-          <div>
+        {/* SAML Authentication */}
+        {tenantConfig?.auth_provider === 'saml' && (
+          <div className="mt-8">
             <button
-              type="submit"
-              disabled={loading}
-              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed"
+              onClick={() => handleSSO('saml')}
+              className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
             >
-              {loading ? (
-                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-              ) : (
-                'Sign in'
-              )}
+              <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 2L2 7v10c0 5.55 3.84 9.739 9 11 5.16-1.261 9-5.45 9-11V7l-10-5z"/>
+              </svg>
+              Sign in with SAML SSO
             </button>
           </div>
+        )}
 
+        {/* OAuth Authentication */}
+        {tenantConfig?.auth_provider === 'oauth' && (
+          <div className="mt-8">
+            <button
+              onClick={() => handleSSO('oauth')}
+              className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
+            >
+              <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+              </svg>
+              Sign in with OAuth
+            </button>
+          </div>
+        )}
+
+        {/* Registration link for local auth if enabled */}
+        {tenantConfig?.auth_provider === 'local' && tenantConfig?.local?.allow_registration && (
+          <div className="text-center">
+            <p className="text-sm text-gray-600">
+              Don't have an account?{' '}
+              <a href="/register" className="font-medium text-primary-600 hover:text-primary-500">
+                Sign up
+              </a>
+            </p>
+          </div>
+        )}
+
+        {/* Demo credentials for local/ldap auth */}
+        {(tenantConfig?.auth_provider === 'local' || tenantConfig?.auth_provider === 'ldap') && (
           <div className="text-center">
             <p className="text-sm text-gray-600">
               Demo credentials: <br />
@@ -125,7 +225,16 @@ const Login = () => {
               Password: <code className="bg-gray-100 px-1 rounded">admin123</code>
             </p>
           </div>
-        </form>
+        )}
+
+        {/* Error message if auth provider not configured */}
+        {!tenantConfig?.auth_provider && (
+          <div className="mt-8 p-4 bg-red-50 border border-red-200 rounded-md">
+            <p className="text-sm text-red-600">
+              Authentication not configured for this tenant. Please contact your administrator.
+            </p>
+          </div>
+        )}
       </div>
     </div>
   );