Add SSO

frontend/src/components/Auth.jsx

@@ -1,6 +1,8 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Server, Eye, EyeOff } from 'lucide-react';
 import { getTheme } from '../themes';
+import { API_URL } from '../config';
+import axios from 'axios';
 
 export default function Auth({ onLogin }) {
   const [isLogin, setIsLogin] = useState(true);
@@ -10,9 +12,27 @@ export default function Auth({ onLogin }) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
   const [theme] = useState(localStorage.getItem('theme') || 'dark');
+  const [oidcProviders, setOidcProviders] = useState({});
 
   const currentTheme = getTheme(theme);
 
+  useEffect(() => {
+    loadOidcProviders();
+  }, []);
+
+  const loadOidcProviders = async () => {
+    try {
+      const { data } = await axios.get(`${API_URL}/api/auth/oidc/providers`);
+      setOidcProviders(data);
+    } catch (error) {
+      console.error('Ошибка загрузки OIDC провайдеров:', error);
+    }
+  };
+
+  const handleOidcLogin = (provider) => {
+    window.location.href = `${API_URL}/api/auth/oidc/${provider}/login`;
+  };
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     setError('');
@@ -129,11 +149,40 @@ export default function Auth({ onLogin }) {
             </button>
           </form>
 
+          {/* OpenID Connect Providers */}
+          {Object.keys(oidcProviders).length > 0 && (
+            <div className="mt-6">
+              <div className="relative">
+                <div className="absolute inset-0 flex items-center">
+                  <div className={`w-full border-t ${currentTheme.border}`} />
+                </div>
+                <div className="relative flex justify-center text-sm">
+                  <span className={`${currentTheme.secondary} px-2 ${currentTheme.textSecondary}`}>
+                    Или войдите через
+                  </span>
+                </div>
+              </div>
+
+              <div className="mt-6 grid gap-3">
+                {Object.entries(oidcProviders).map(([providerId, provider]) => (
+                  <button
+                    key={providerId}
+                    onClick={() => handleOidcLogin(providerId)}
+                    className={`w-full flex justify-center items-center px-4 py-3 border border-transparent rounded-xl text-sm font-medium text-white ${provider.color} transition-colors duration-200 shadow-sm hover:shadow-md`}
+                  >
+                    <span className="mr-2 text-lg">{provider.icon}</span>
+                    Войти через {provider.name}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
           {/* Default Credentials */}
           {isLogin && (
             <div className={`mt-6 text-center text-sm ${currentTheme.textSecondary}`}>
               <p>Учётные данные по умолчанию:</p>
-              <p className={`${currentTheme.text} font-mono mt-1`}>none / none</p>
+              <p className={`${currentTheme.text} font-mono mt-1`}>Sofa12345 / arkonsad123</p>
             </div>
           )}
         </div>