refactoring, check auth

src/renderer/App.tsx

@@ -1,13 +1,78 @@
-import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
+import {
+  MemoryRouter as Router,
+  Routes,
+  Route,
+  Navigate,
+} from 'react-router-dom';
 import Login from './pages/Login';
+import Dashboard from './pages/Dashboard';
+import { ReactNode, useEffect, useState } from 'react';
 import './App.css';
 
-export default function App() {
+const AuthCheck = ({ children }: { children: ReactNode }) => {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      try {
+        const savedConfig = localStorage.getItem('launcher_config');
+        if (savedConfig) {
+          const config = JSON.parse(savedConfig);
+          if (config.accessToken) {
+            // Можно добавить дополнительную проверку токена
+            const isValid = await validateToken(config.accessToken);
+            setIsAuthenticated(isValid);
+            return;
+          }
+        }
+        setIsAuthenticated(false);
+      } catch (error) {
+        console.error('Ошибка проверки авторизации:', error);
+        setIsAuthenticated(false);
+      }
+    };
+
+    checkAuth();
+  }, []);
+
+  const validateToken = async (token: string) => {
+    try {
+      const response = await fetch('https://authserver.ely.by/auth/validate', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ accessToken: token }),
+      });
+      return response.ok;
+    } catch (error) {
+      return false;
+    }
+  };
+
+  if (isAuthenticated === null) {
+    return <div>Loading...</div>;
+  }
+
+  return isAuthenticated ? children : <Navigate to="/login" replace />;
+};
+
+const App = () => {
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<Login />} />
+        <Route path="/login" element={<Login />} />
+        <Route
+          path="/"
+          element={
+            <AuthCheck>
+              <Dashboard />
+            </AuthCheck>
+          }
+        />
       </Routes>
     </Router>
   );
-}
+};
+
+export default App;

src/renderer/components/Login/AuthForm.tsx

@@ -0,0 +1,39 @@
+import { Box, Button, TextField, Typography } from '@mui/material';
+
+interface AuthFormProps {
+  config: {
+    username: string;
+    password: string;
+  };
+  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onLogin: () => void;
+}
+
+const AuthForm = ({ config, handleInputChange, onLogin }: AuthFormProps) => {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1.5vw' }}>
+      <TextField
+        required
+        name="username"
+        label="Введите ник"
+        variant="outlined"
+        value={config.username}
+        onChange={handleInputChange}
+      />
+      <TextField
+        required
+        type="password"
+        name="password"
+        label="Введите пароль"
+        variant="outlined"
+        value={config.password}
+        onChange={handleInputChange}
+      />
+      <Button onClick={onLogin} variant="contained">
+        Войти
+      </Button>
+    </Box>
+  );
+};
+
+export default AuthForm;

src/renderer/components/Login/MemorySlider.tsx

@@ -0,0 +1,26 @@
+import { Slider } from '@mui/material';
+
+interface MemorySliderProps {
+  memory: number;
+  onChange: (e: Event, value: number | number[]) => void;
+}
+
+const MemorySlider = ({ memory, onChange }: MemorySliderProps) => {
+  return (
+    <Slider
+      name="memory"
+      aria-label="Memory"
+      defaultValue={4096}
+      valueLabelDisplay="auto"
+      shiftStep={1024}
+      step={1024}
+      marks
+      min={1024}
+      max={32628}
+      value={memory}
+      onChange={onChange}
+    />
+  );
+};
+
+export default MemorySlider;

src/renderer/hooks/useAuth.ts

@@ -0,0 +1,177 @@
+import { useState } from 'react';
+
+const useAuth = () => {
+  const [status, setStatus] = useState('');
+
+  const validateSession = async (accessToken: string) => {
+    try {
+      const response = await fetch('https://authserver.ely.by/auth/validate', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          accessToken: accessToken,
+        }),
+      });
+      return response.ok;
+    } catch (error) {
+      console.log(`Ошибка при проверке токена: ${error.message}`);
+      return false;
+    }
+  };
+
+  const refreshSession = async (accessToken: string, clientToken: string) => {
+    try {
+      const refreshData = {
+        accessToken: accessToken,
+        clientToken: clientToken,
+      };
+
+      const response = await fetch('https://authserver.ely.by/auth/refresh', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(refreshData),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        const newAccessToken = data.accessToken;
+        const profile = data.selectedProfile;
+        const uuid = profile.id;
+        const name = profile.name;
+
+        if (newAccessToken && uuid && name) {
+          return {
+            accessToken: newAccessToken,
+            uuid: uuid,
+            username: name,
+            clientToken: clientToken,
+          };
+        }
+      }
+      return null;
+    } catch (error) {
+      console.log(`Ошибка при обновлении сессии: ${error.message}`);
+      return null;
+    }
+  };
+
+  const authenticateWithElyBy = async (
+    username: string,
+    password: string,
+    saveConfig: Function,
+  ) => {
+    try {
+      const clientToken = crypto.randomUUID();
+      const authData = {
+        username: username,
+        password: password,
+        clientToken: clientToken,
+        requestUser: true,
+      };
+
+      console.log(`Аутентификация пользователя ${username} на Ely.by...`);
+
+      const response = await fetch(
+        'https://authserver.ely.by/auth/authenticate',
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(authData),
+        },
+      );
+
+      const responseData = await response.json();
+      if (response.ok) {
+        const accessToken = responseData.accessToken;
+        const profile = responseData.selectedProfile;
+        const uuid = profile.id;
+        const name = profile.name;
+
+        if (accessToken && uuid && name) {
+          saveConfig(
+            username,
+            4096, // default memory
+            accessToken,
+            clientToken,
+            '',
+            password,
+          );
+          console.log(`Аутентификация успешна: UUID=${uuid}, Username=${name}`);
+
+          return {
+            accessToken: accessToken,
+            uuid: uuid,
+            username: name,
+            clientToken: clientToken,
+          };
+        }
+      } else {
+        if (responseData.error === 'Account protected with two factor auth') {
+          const totpToken = prompt(
+            'Введите код двухфакторной аутентификации:',
+            '',
+          );
+
+          if (totpToken) {
+            authData.password = `${password}:${totpToken}`;
+            const totpResponse = await fetch(
+              'https://authserver.ely.by/auth/authenticate',
+              {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(authData),
+              },
+            );
+            if (totpResponse.ok) {
+              const totpData = await totpResponse.json();
+              const newAccessToken = totpData.accessToken;
+              const newProfile = totpData.selectedProfile;
+              const newUuid = newProfile.id;
+              const newName = newProfile.name;
+
+              if (newAccessToken && newUuid && newName) {
+                saveConfig(
+                  username,
+                  4096, // default memory
+                  newAccessToken,
+                  clientToken,
+                  '',
+                  password,
+                );
+                return {
+                  accessToken: newAccessToken,
+                  uuid: newUuid,
+                  username: newName,
+                  clientToken: clientToken,
+                };
+              }
+            }
+          }
+        }
+
+        throw new Error(responseData.error || 'Ошибка авторизации');
+      }
+    } catch (error) {
+      console.log(`Ошибка авторизации: ${error.message}`);
+      return null;
+    }
+  };
+
+  return {
+    status,
+    setStatus,
+    validateSession,
+    refreshSession,
+    authenticateWithElyBy,
+  };
+};
+
+export default useAuth;

src/renderer/hooks/useConfig.ts

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react';
+
+const useConfig = () => {
+  const [config, setConfig] = useState({
+    username: '',
+    password: '',
+    memory: 4096,
+    comfortVersion: '',
+    accessToken: '',
+    clientToken: '',
+  });
+
+  const loadInitialConfig = () => {
+    try {
+      const savedConfig = localStorage.getItem('launcher_config');
+      if (savedConfig) {
+        return JSON.parse(savedConfig);
+      }
+    } catch (error) {
+      console.log('Ошибка загрузки конфигурации:', error);
+    }
+    return {
+      username: '',
+      password: '',
+      memory: 4096,
+      comfortVersion: '',
+      accessToken: '',
+      clientToken: '',
+    };
+  };
+
+  useEffect(() => {
+    const savedConfig = loadInitialConfig();
+    setConfig(savedConfig);
+  }, []);
+
+  const saveConfig = (
+    username: string,
+    memory: number,
+    accessToken = '',
+    clientToken = '',
+    comfortVersion = '',
+    password = '',
+  ) => {
+    try {
+      const newConfig = {
+        username,
+        memory,
+        accessToken: accessToken || config.accessToken,
+        clientToken: clientToken || config.clientToken,
+        comfortVersion: comfortVersion || config.comfortVersion,
+        password: password || config.password,
+      };
+      setConfig(newConfig);
+      localStorage.setItem('launcher_config', JSON.stringify(newConfig));
+    } catch (error) {
+      console.log(`Ошибка при сохранении конфигурации: ${error.message}`);
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setConfig((prev) => ({ ...prev, [name]: value }));
+  };
+
+  return { config, setConfig, saveConfig, handleInputChange };
+};
+
+export default useConfig;

src/renderer/pages/Dashboard.tsx

@@ -0,0 +1,31 @@
+import { Box, Typography, Button } from '@mui/material';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const Dashboard = () => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Проверяем авторизацию при монтировании компонента
+    const savedConfig = localStorage.getItem('launcher_config');
+    if (!savedConfig || !JSON.parse(savedConfig).accessToken) {
+      navigate('/login');
+    }
+  }, [navigate]);
+
+  const handleLogout = () => {
+    localStorage.removeItem('launcher_config');
+    navigate('/login');
+  };
+
+  return (
+    <Box>
+      <Typography variant="h4">Добро пожаловать в лаунчер</Typography>
+      <Button onClick={handleLogout} variant="contained" color="error">
+        Выйти
+      </Button>
+    </Box>
+  );
+};
+
+export default Dashboard;

src/renderer/pages/Login.tsx

@@ -1,230 +1,15 @@
-import { Box, Button, Slider, TextField, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
-import { useEffect, useState } from 'react';
+import useConfig from '../hooks/useConfig';
+import useAuth from '../hooks/useAuth';
+import AuthForm from '../components/Login/AuthForm';
+import MemorySlider from '../components/Login/MemorySlider';
+import { useNavigate } from 'react-router-dom';
 
-export default function Login() {
+const Login = () => {
-  const [config, setConfig] = useState({
+  const navigate = useNavigate();
-    username: '',
+  const { config, setConfig, saveConfig, handleInputChange } = useConfig();
-    password: '',
+  const { status, validateSession, refreshSession, authenticateWithElyBy } =
-    memory: 4096,
+    useAuth();
-    comfortVersion: '',
-    accessToken: '',
-    clientToken: '',
-  });
-  const [status, setStatus] = useState('');
-
-  const loadInitialConfig = () => {
-    try {
-      const savedConfig = localStorage.getItem('launcher_config');
-      if (savedConfig) {
-        return JSON.parse(savedConfig);
-      }
-    } catch (error) {
-      console.log('Ошибка загрузки конфигурации:', error);
-    }
-    // Возвращаем значения по умолчанию
-    return {
-      username: '',
-      password: '',
-      memory: 4096,
-      comfortVersion: '',
-      accessToken: '',
-      clientToken: '',
-    };
-  };
-
-  useEffect(() => {
-    const savedConfig = loadInitialConfig();
-    setConfig(savedConfig);
-  }, []);
-
-  const handleInputChange = (e) => {
-    const { name, value } = e.target;
-    setConfig((prev) => ({ ...prev, [name]: value }));
-  };
-
-  const saveConfig = (
-    username,
-    memory,
-    accessToken = '',
-    clientToken = '',
-    comfortVersion = '',
-    password = '',
-  ) => {
-    try {
-      const newConfig = {
-        username,
-        memory,
-        accessToken: accessToken || config.accessToken,
-        clientToken: clientToken || config.clientToken,
-        comfortVersion: comfortVersion || config.comfortVersion,
-        password: password || config.password,
-      };
-      setConfig(newConfig);
-      localStorage.setItem('launcher_config', JSON.stringify(newConfig));
-    } catch (error) {
-      console.log(`Ошибка при сохранении конфигурации: ${error.message}`);
-    }
-  };
-
-  const loadConfig = () => {
-    try {
-      const savedConfig = localStorage.getItem('launcher_config');
-      if (savedConfig) {
-        const parsedConfig = JSON.parse(savedConfig);
-        setConfig(parsedConfig);
-        return parsedConfig;
-      }
-    } catch (error) {
-      console.log(`Ошибка при загрузке конфигурации: ${error.message}`);
-    }
-    return config;
-  };
-
-  const refreshSession = async (accessToken, clientToken) => {
-    try {
-      const refreshData = {
-        accessToken: accessToken,
-        clientToken: clientToken,
-      };
-
-      const response = await fetch('https://authserver.ely.by/auth/refresh', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(refreshData),
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        const newAccessToken = data.accessToken;
-        const profile = data.selectedProfile;
-        const uuid = profile.id;
-        const name = profile.name;
-
-        if (newAccessToken && uuid && name) {
-          saveConfig(
-            config.username,
-            config.memory,
-            newAccessToken,
-            clientToken,
-          );
-          return {
-            accessToken: newAccessToken,
-            uuid: uuid,
-            username: name,
-            clientToken: clientToken,
-          };
-        }
-      }
-      return null;
-    } catch (error) {
-      console.log(`Ошибка при обновлении сессии: ${error.message}`);
-      return null;
-    }
-  };
-
-  const authenticateWithElyBy = async (username, password) => {
-    try {
-      const clientToken = crypto.randomUUID();
-      const authData = {
-        username: username,
-        password: password,
-        clientToken: clientToken,
-        requestUser: true,
-      };
-
-      console.log(`Аутентификация пользователя ${username} на Ely.by...`);
-
-      const response = await fetch(
-        'https://authserver.ely.by/auth/authenticate',
-        {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(authData),
-        },
-      );
-
-      const responseData = await response.json();
-      if (response.ok) {
-        const accessToken = responseData.accessToken;
-        const profile = responseData.selectedProfile;
-        const uuid = profile.id;
-        const name = profile.name;
-
-        if (accessToken && uuid && name) {
-          saveConfig(
-            username,
-            config.memory,
-            accessToken,
-            clientToken,
-            '',
-            password,
-          );
-          console.log(`Аутентификация успешна: UUID=${uuid}, Username=${name}`);
-
-          return {
-            accessToken: accessToken,
-            uuid: uuid,
-            username: name,
-            clientToken: clientToken,
-          };
-        }
-      } else {
-        if (responseData.error === 'Account protected with two factor auth') {
-          const totpToken = prompt(
-            'Введите код двухфакторной аутентификации:',
-            '',
-          );
-
-          if (totpToken) {
-            authData.password = `${password}:${totpToken}`;
-            const totpResponse = await fetch(
-              'https://authserver.ely.by/auth/authenticate',
-              {
-                method: 'POST',
-                headers: {
-                  'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(authData),
-              },
-            );
-            if (totpResponse.ok) {
-              const totpData = await totpResponse.json();
-              const newAccessToken = totpData.accessToken;
-              const newProfile = totpData.selectedProfile;
-              const newUuid = newProfile.id;
-              const newName = newProfile.name;
-
-              if (newAccessToken && newUuid && newName) {
-                saveConfig(
-                  username,
-                  config.memory,
-                  newAccessToken,
-                  clientToken,
-                  '',
-                  password,
-                );
-                return {
-                  accessToken: newAccessToken,
-                  uuid: newUuid,
-                  username: newName,
-                  clientToken: clientToken,
-                };
-              }
-            }
-          }
-        }
-
-        throw new Error(responseData.error || 'Ошибка авторизации');
-      }
-    } catch (error) {
-      console.log(`Ошибка авторизации: ${error.message}`);
-      return null;
-    }
-  };
 
   const authorization = async () => {
     console.log('Начинаем процесс авторизации...');
@@ -255,6 +40,7 @@ export default function Login() {
             const newSession = await authenticateWithElyBy(
               config.username,
               config.password,
+              saveConfig,
             );
             if (!newSession) {
               console.log('Авторизация не удалась');
@@ -269,6 +55,7 @@ export default function Login() {
         const session = await authenticateWithElyBy(
           config.username,
           config.password,
+          saveConfig,
         );
         if (!session) {
           console.log('Авторизация не удалась');
@@ -277,7 +64,7 @@ export default function Login() {
       }
 
       console.log('Авторизация успешно завершена');
-      // Здесь можно добавить логику для запуска игры
+      navigate('/');
     } catch (error) {
       console.log(`ОШИБКА при авторизации: ${error.message}`);
     }
@@ -299,41 +86,19 @@ export default function Login() {
           POPA
         </Typography>
       </Box>
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1.5vw' }}>
+      <AuthForm
-        <TextField
+        config={config}
-          required
+        handleInputChange={handleInputChange}
-          name="username"
+        onLogin={authorization}
-          label="Введите ник"
-          variant="outlined"
-          value={config.username}
-          onChange={handleInputChange}
       />
-        <TextField
+      <MemorySlider
-          required
+        memory={config.memory}
-          type="password"
+        onChange={(e, value) => {
-          name="password"
+          setConfig((prev) => ({ ...prev, memory: value as number }));
-          label="Введите пароль"
+        }}
-          variant="outlined"
-          value={config.password}
-          onChange={handleInputChange}
       />
-        <Slider
-          name="memory"
-          aria-label="Temperature"
-          defaultValue={4096}
-          valueLabelDisplay="auto"
-          shiftStep={1024}
-          step={1024}
-          marks
-          min={1024}
-          max={32628}
-          value={config.memory}
-          onChange={handleInputChange}
-        />
-        <Button onClick={authorization} variant="contained">
-          Войти
-        </Button>
-      </Box>
     </Box>
   );
-}
+};
+
+export default Login;

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "useUnknownInCatchVariables": false,
     "incremental": true,
     "target": "es2022",
     "module": "node16",