feat: create login register

src/app/providers/helper/protected.route.tsx

@@ -1,4 +1,5 @@
 import { Navigate } from "react-router-dom";
+import { authService } from "@/modules/auth/api/auth.service";
 
 interface ProtectedRouteProps {
   children: React.ReactNode;
@@ -9,7 +10,9 @@ export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
   children,
   fallbackPath = "/",
 }) => {
-  if (false) {
+  const isAuthenticated = authService.isAuthenticated();
+
+  if (!isAuthenticated) {
     return <Navigate to={fallbackPath} replace />;
   }
 

src/app/providers/routing.tsx

@@ -1,8 +1,10 @@
 import { Suspense } from "react";
+import { Routes as ReactRoutes, Route } from "react-router-dom";
 import { HomePage } from "@/pages/home.page";
 import { SecondaryPage } from "@/pages/secondary.page";
+import { AuthPage } from "@/pages/AuthPage";
+import { CreateOrganizationPage } from "@/pages/CreateOrganizationPage";
 import { ProtectedRoute } from "./helper/protected.route";
-import { Routes as ReactRoutes, Route } from "react-router-dom";
 
 export const Routing = () => {
   return (
@@ -14,18 +16,27 @@ export const Routing = () => {
       }
     >
       <ReactRoutes>
-        <Route path="/home" element={<HomePage />} />
+        <Route path="/" element={<AuthPage />} />
-
+        <Route
-        <Route>
+          path="/create-organization"
-          <Route
+          element={<CreateOrganizationPage />}
-            path="/secondary"
+        />
-            element={
+        <Route
-              <ProtectedRoute>
+          path="/home"
-                <SecondaryPage />
+          element={
-              </ProtectedRoute>
+            <ProtectedRoute>
-            }
+              <HomePage />
-          />
+            </ProtectedRoute>
-        </Route>
+          }
+        />
+        <Route
+          path="/secondary"
+          element={
+            <ProtectedRoute>
+              <SecondaryPage />
+            </ProtectedRoute>
+          }
+        />
       </ReactRoutes>
     </Suspense>
   );

src/modules/auth/api/auth.service.ts

@@ -0,0 +1,110 @@
+import { apiService } from "@/shared/api/api.service";
+import type {
+  LoginCredentials,
+  RegisterData,
+  AuthResponse,
+  OrganizationCreateData,
+  OrganizationResponse,
+} from "../types/auth.types";
+
+export const authService = {
+  async login(credentials: LoginCredentials): Promise<AuthResponse> {
+    const formData = new URLSearchParams();
+    formData.append("username", credentials.username);
+    formData.append("password", credentials.password);
+
+    return apiService.post<AuthResponse>("/auth/login", formData, {
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+    });
+  },
+
+  async register(
+    data: Omit<RegisterData, "confirmPassword">,
+  ): Promise<AuthResponse> {
+    return apiService.post<AuthResponse>("/auth/register", {
+      username: data.username,
+      email: data.email,
+      password: data.password,
+      first_name: data.first_name,
+      last_name: data.last_name,
+    });
+  },
+
+  async createOrganization(
+    data: OrganizationCreateData,
+  ): Promise<OrganizationResponse> {
+    const formData = new FormData();
+    formData.append("name", data.name);
+    if (data.logo) {
+      formData.append("logo", data.logo);
+    }
+
+    return apiService.post<OrganizationResponse>("/organizations", formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+
+  async getCurrentUser(): Promise<AuthResponse["user"]> {
+    return apiService.get<AuthResponse["user"]>("/users/me");
+  },
+
+  async getOrganizations(): Promise<OrganizationResponse[]> {
+    return apiService.get<OrganizationResponse[]>("/organizations");
+  },
+
+  logout(): void {
+    localStorage.removeItem("auth-storage");
+    localStorage.removeItem("organization-storage");
+  },
+
+  saveAuthData(token: string, user: AuthResponse["user"]): void {
+    const authStorage = {
+      state: {
+        token,
+        user,
+      },
+      version: 0,
+    };
+    localStorage.setItem("auth-storage", JSON.stringify(authStorage));
+  },
+
+  saveOrganization(organization: OrganizationResponse): void {
+    localStorage.setItem("organization-storage", JSON.stringify(organization));
+  },
+
+  getToken(): string | null {
+    const authStorage = localStorage.getItem("auth-storage");
+    if (!authStorage) return null;
+
+    try {
+      const parsed = JSON.parse(authStorage);
+      return parsed.state?.token || null;
+    } catch {
+      return null;
+    }
+  },
+
+  getCurrentOrganization(): OrganizationResponse | null {
+    const orgStorage = localStorage.getItem("organization-storage");
+    if (!orgStorage) return null;
+
+    try {
+      return JSON.parse(orgStorage);
+    } catch {
+      return null;
+    }
+  },
+
+  isAuthenticated(): boolean {
+    const token = this.getToken();
+    return !!token;
+  },
+
+  hasOrganization(): boolean {
+    return !!this.getCurrentOrganization();
+  },
+};

src/modules/auth/components/CreateOrganizationForm.tsx

@@ -0,0 +1,138 @@
+import React, { useState, useRef } from "react";
+import { useAuth } from "../hooks/useAuth";
+
+export const CreateOrganizationForm = () => {
+  const [organizationName, setOrganizationName] = useState("");
+  const [logo, setLogo] = useState<File | null>(null);
+  const [logoPreview, setLogoPreview] = useState<string>("");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { createOrganization, isLoading, error } = useAuth();
+
+  const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setLogo(file);
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setLogoPreview(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (organizationName.trim()) {
+      await createOrganization({
+        name: organizationName,
+        logo: logo || undefined,
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div className="flex justify-center">
+        <div className="relative">
+          <div
+            className="w-32 h-32 rounded-full border-2 border-dashed flex items-center justify-center cursor-pointer overflow-hidden transition-all hover:border-accent"
+            style={{
+              borderColor: "var(--border)",
+              backgroundColor: "var(--bg-secondary)",
+            }}
+            onClick={() => fileInputRef.current?.click()}
+          >
+            {logoPreview ? (
+              <img
+                src={logoPreview}
+                alt="Organization logo"
+                className="w-full h-full object-cover"
+              />
+            ) : (
+              <div className="text-center">
+                <svg
+                  className="w-10 h-10 mx-auto mb-1"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  style={{ color: "var(--text-muted)" }}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
+                </svg>
+                <span
+                  className="text-xs"
+                  style={{ color: "var(--text-muted)" }}
+                >
+                  Загрузить лого
+                </span>
+              </div>
+            )}
+          </div>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            onChange={handleLogoChange}
+            className="hidden"
+          />
+        </div>
+      </div>
+
+      <div>
+        <label
+          htmlFor="organizationName"
+          className="block text-sm font-medium mb-2"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          Название организации
+        </label>
+        <input
+          id="organizationName"
+          type="text"
+          value={organizationName}
+          onChange={(e) => setOrganizationName(e.target.value)}
+          className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
+          style={{
+            backgroundColor: "var(--input-bg)",
+            color: "var(--text-primary)",
+            borderColor: "var(--border)",
+            "--tw-ring-color": "var(--accent)",
+          }}
+          required
+          disabled={isLoading}
+          placeholder="Введите название организации"
+        />
+      </div>
+
+      {error && (
+        <div
+          className="p-3 rounded-lg text-sm"
+          style={{
+            backgroundColor: "var(--error-bg)",
+            borderColor: "var(--error-border)",
+            color: "var(--error-text)",
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      <button
+        type="submit"
+        disabled={isLoading}
+        className="w-full py-2 px-4 rounded-lg font-medium transition-all transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
+        style={{
+          backgroundColor: "var(--button-primary)",
+          color: "var(--button-primary-text)",
+        }}
+      >
+        {isLoading ? "Создание..." : "Создать организацию"}
+      </button>
+    </form>
+  );
+};

src/modules/auth/components/LoginForm.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from "react";
+import { useAuth } from "../hooks/useAuth";
+
+interface LoginFormProps {
+  onSwitchToRegister: () => void;
+}
+
+export const LoginForm: React.FC<LoginFormProps> = ({ onSwitchToRegister }) => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const { login, isLoading, error } = useAuth();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await login({ username, password });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div>
+        <label
+          htmlFor="username"
+          className="block text-sm font-medium mb-2"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          Имя пользователя
+        </label>
+        <input
+          id="username"
+          type="text"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
+          style={{
+            backgroundColor: "var(--input-bg)",
+            color: "var(--text-primary)",
+            borderColor: "var(--border)",
+            "--tw-ring-color": "var(--accent)",
+          }}
+          required
+          disabled={isLoading}
+          placeholder="Введите имя пользователя"
+        />
+      </div>
+
+      <div>
+        <label
+          htmlFor="password"
+          className="block text-sm font-medium mb-2"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          Пароль
+        </label>
+        <input
+          id="password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
+          style={{
+            backgroundColor: "var(--input-bg)",
+            color: "var(--text-primary)",
+            borderColor: "var(--border)",
+            "--tw-ring-color": "var(--accent)",
+          }}
+          required
+          disabled={isLoading}
+          placeholder="Введите пароль"
+        />
+      </div>
+
+      {error && (
+        <div
+          className="p-3 rounded-lg text-sm"
+          style={{
+            backgroundColor: "var(--error-bg)",
+            borderColor: "var(--error-border)",
+            color: "var(--error-text)",
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      <button
+        type="submit"
+        disabled={isLoading}
+        className="w-full py-2 px-4 rounded-lg font-medium transition-all transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
+        style={{
+          backgroundColor: "var(--button-primary)",
+          color: "var(--button-primary-text)",
+        }}
+      >
+        {isLoading ? "Вход..." : "Войти"}
+      </button>
+
+      <div className="text-center">
+        <button
+          type="button"
+          onClick={onSwitchToRegister}
+          className="text-sm transition-colors hover:underline"
+          style={{ color: "var(--link)" }}
+        >
+          Нет аккаунта? Зарегистрироваться
+        </button>
+      </div>
+    </form>
+  );
+};

src/modules/auth/components/RegisterForm.tsx

@@ -0,0 +1,231 @@
+import React, { useState } from "react";
+import { useAuth } from "../hooks/useAuth";
+
+interface RegisterFormProps {
+  onSwitchToLogin: () => void;
+}
+
+export const RegisterForm: React.FC<RegisterFormProps> = ({
+  onSwitchToLogin,
+}) => {
+  const [formData, setFormData] = useState({
+    first_name: "",
+    last_name: "",
+    username: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+  });
+
+  const { register, isLoading, error } = useAuth();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.id]: e.target.value,
+    });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await register(formData);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label
+            htmlFor="first_name"
+            className="block text-sm font-medium mb-2"
+            style={{ color: "var(--text-secondary)" }}
+          >
+            Имя
+          </label>
+          <input
+            id="first_name"
+            type="text"
+            value={formData.first_name}
+            onChange={handleChange}
+            className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
+            style={{
+              backgroundColor: "var(--input-bg)",
+              color: "var(--text-primary)",
+              borderColor: "var(--border)",
+              "--tw-ring-color": "var(--accent)",
+            }}
+            required
+            disabled={isLoading}
+            placeholder="Имя"
+          />
+        </div>
+
+        <div>
+          <label
+            htmlFor="last_name"
+            className="block text-sm font-medium mb-2"
+            style={{ color: "var(--text-secondary)" }}
+          >
+            Фамилия
+          </label>
+          <input
+            id="last_name"
+            type="text"
+            value={formData.last_name}
+            onChange={handleChange}
+            className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
+            style={{
+              backgroundColor: "var(--input-bg)",
+              color: "var(--text-primary)",
+              borderColor: "var(--border)",
+              "--tw-ring-color": "var(--accent)",
+            }}
+            required
+            disabled={isLoading}
+            placeholder="Фамилия"
+          />
+        </div>
+      </div>
+
+      <div>
+        <label
+          htmlFor="username"
+          className="block text-sm font-medium mb-2"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          Имя пользователя
+        </label>
+        <input
+          id="username"
+          type="text"
+          value={formData.username}
+          onChange={handleChange}
+          className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
+          style={{
+            backgroundColor: "var(--input-bg)",
+            color: "var(--text-primary)",
+            borderColor: "var(--border)",
+            "--tw-ring-color": "var(--accent)",
+          }}
+          required
+          disabled={isLoading}
+          placeholder="username"
+        />
+      </div>
+
+      <div>
+        <label
+          htmlFor="email"
+          className="block text-sm font-medium mb-2"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          Email
+        </label>
+        <input
+          id="email"
+          type="email"
+          value={formData.email}
+          onChange={handleChange}
+          className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
+          style={{
+            backgroundColor: "var(--input-bg)",
+            color: "var(--text-primary)",
+            borderColor: "var(--border)",
+            "--tw-ring-color": "var(--accent)",
+          }}
+          required
+          disabled={isLoading}
+          placeholder="example@mail.com"
+        />
+      </div>
+
+      <div>
+        <label
+          htmlFor="password"
+          className="block text-sm font-medium mb-2"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          Пароль
+        </label>
+        <input
+          id="password"
+          type="password"
+          value={formData.password}
+          onChange={handleChange}
+          className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
+          style={{
+            backgroundColor: "var(--input-bg)",
+            color: "var(--text-primary)",
+            borderColor: "var(--border)",
+            "--tw-ring-color": "var(--accent)",
+          }}
+          required
+          disabled={isLoading}
+          placeholder="Введите пароль"
+        />
+      </div>
+
+      <div>
+        <label
+          htmlFor="confirmPassword"
+          className="block text-sm font-medium mb-2"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          Подтверждение пароля
+        </label>
+        <input
+          id="confirmPassword"
+          type="password"
+          value={formData.confirmPassword}
+          onChange={handleChange}
+          className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
+          style={{
+            backgroundColor: "var(--input-bg)",
+            color: "var(--text-primary)",
+            borderColor: "var(--border)",
+            "--tw-ring-color": "var(--accent)",
+          }}
+          required
+          disabled={isLoading}
+          placeholder="Повторите пароль"
+        />
+      </div>
+
+      {error && (
+        <div
+          className="p-3 rounded-lg text-sm"
+          style={{
+            backgroundColor: "var(--error-bg)",
+            borderColor: "var(--error-border)",
+            color: "var(--error-text)",
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      <button
+        type="submit"
+        disabled={isLoading}
+        className="w-full py-2 px-4 rounded-lg font-medium transition-all transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
+        style={{
+          backgroundColor: "var(--button-primary)",
+          color: "var(--button-primary-text)",
+        }}
+      >
+        {isLoading ? "Регистрация..." : "Зарегистрироваться"}
+      </button>
+
+      <div className="text-center">
+        <button
+          type="button"
+          onClick={onSwitchToLogin}
+          className="text-sm transition-colors hover:underline"
+          style={{ color: "var(--link)" }}
+        >
+          Уже есть аккаунт? Войти
+        </button>
+      </div>
+    </form>
+  );
+};

src/modules/auth/hooks/useAuth.ts

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { authService } from "../api/auth.service";
+import { useApi } from "@/shared/api/hooks/use.api";
+import type {
+  LoginCredentials,
+  RegisterData,
+  OrganizationCreateData,
+} from "../types/auth.types";
+
+export const useAuth = () => {
+  const navigate = useNavigate();
+  const { isLoading, error, request } = useApi();
+  const [authError, setAuthError] = useState<string | null>(null);
+
+  const login = async (credentials: LoginCredentials) => {
+    setAuthError(null);
+    const result = await request(() => authService.login(credentials));
+
+    if (result) {
+      authService.saveAuthData(result.access_token, result.user);
+
+      // Проверяем, есть ли уже организация
+      const orgs = await request(() => authService.getOrganizations());
+      if (orgs && orgs.length > 0) {
+        authService.saveOrganization(orgs[0]);
+        navigate("/home");
+      } else {
+        navigate("/create-organization");
+      }
+    } else if (error) {
+      setAuthError(error);
+    }
+  };
+
+  const register = async (data: RegisterData) => {
+    setAuthError(null);
+
+    if (data.password !== data.confirmPassword) {
+      setAuthError("Пароли не совпадают");
+      return;
+    }
+
+    const { confirmPassword, ...registerData } = data;
+    const result = await request(() => authService.register(registerData));
+
+    if (result) {
+      authService.saveAuthData(result.access_token, result.user);
+      navigate("/create-organization");
+    } else if (error) {
+      setAuthError(error);
+    }
+  };
+
+  const createOrganization = async (data: OrganizationCreateData) => {
+    setAuthError(null);
+    const result = await request(() => authService.createOrganization(data));
+
+    if (result) {
+      authService.saveOrganization(result);
+      navigate("/home");
+    } else if (error) {
+      setAuthError(error);
+    }
+  };
+
+  const logout = () => {
+    authService.logout();
+    navigate("/");
+  };
+
+  return {
+    login,
+    register,
+    createOrganization,
+    logout,
+    isLoading,
+    error: authError,
+    isAuthenticated: authService.isAuthenticated(),
+    hasOrganization: authService.hasOrganization(),
+  };
+};

src/modules/auth/types/auth.types.ts

@@ -0,0 +1,38 @@
+export interface LoginCredentials {
+  username: string;
+  password: string;
+}
+
+export interface RegisterData {
+  username: string;
+  email: string;
+  password: string;
+  confirmPassword: string;
+  first_name: string;
+  last_name: string;
+}
+
+export interface AuthResponse {
+  access_token: string;
+  token_type: string;
+  user: {
+    id: number;
+    username: string;
+    email: string;
+    first_name: string;
+    last_name: string;
+  };
+}
+
+export interface OrganizationCreateData {
+  name: string;
+  logo?: File;
+}
+
+export interface OrganizationResponse {
+  id: number;
+  name: string;
+  logo_url?: string;
+  created_at: string;
+  owner_id: number;
+}

src/pages/AuthPage.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { ThemeToggle } from "@/modules/theme-changer/ui/Theme.toggle";
+import { LoginForm } from "@/modules/auth/components/LoginForm";
+import { RegisterForm } from "@/modules/auth/components/RegisterForm";
+
+export const AuthPage = () => {
+  const [isLogin, setIsLogin] = useState(true);
+
+  return (
+    <div
+      className="min-h-screen flex items-center justify-center p-4 transition-theme"
+      style={{ backgroundColor: "var(--bg-primary)" }}
+    >
+      <div className="absolute top-4 right-4">
+        <ThemeToggle />
+      </div>
+
+      <div
+        className="w-full max-w-md rounded-2xl shadow-xl p-8 transition-theme"
+        style={{
+          backgroundColor: "var(--card-bg)",
+          boxShadow: `0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color)`,
+        }}
+      >
+        <div className="text-center mb-8">
+          <h1
+            className="text-3xl font-bold mb-2 transition-theme"
+            style={{ color: "var(--text-primary)" }}
+          >
+            IPS Manager
+          </h1>
+          <p
+            className="text-sm transition-theme"
+            style={{ color: "var(--text-secondary)" }}
+          >
+            {isLogin
+              ? "Войдите в систему для управления IPS агентами"
+              : "Создайте аккаунт для начала работы"}
+          </p>
+        </div>
+
+        {isLogin ? (
+          <LoginForm onSwitchToRegister={() => setIsLogin(false)} />
+        ) : (
+          <RegisterForm onSwitchToLogin={() => setIsLogin(true)} />
+        )}
+      </div>
+    </div>
+  );
+};

src/pages/CreateOrganizationPage.tsx

@@ -0,0 +1,52 @@
+import { ThemeToggle } from "@/modules/theme-changer/ui/Theme.toggle";
+import { CreateOrganizationForm } from "@/modules/auth/components/CreateOrganizationForm";
+import { useAuth } from "@/modules/auth/hooks/useAuth";
+import { Navigate } from "react-router-dom";
+
+export const CreateOrganizationPage = () => {
+  const { isAuthenticated, hasOrganization } = useAuth();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/" replace />;
+  }
+
+  if (hasOrganization) {
+    return <Navigate to="/home" replace />;
+  }
+
+  return (
+    <div
+      className="min-h-screen flex items-center justify-center p-4 transition-theme"
+      style={{ backgroundColor: "var(--bg-primary)" }}
+    >
+      <div className="absolute top-4 right-4">
+        <ThemeToggle />
+      </div>
+
+      <div
+        className="w-full max-w-md rounded-2xl shadow-xl p-8 transition-theme"
+        style={{
+          backgroundColor: "var(--card-bg)",
+          boxShadow: `0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color)`,
+        }}
+      >
+        <div className="text-center mb-8">
+          <h1
+            className="text-2xl font-bold mb-2 transition-theme"
+            style={{ color: "var(--text-primary)" }}
+          >
+            Создание организации
+          </h1>
+          <p
+            className="text-sm transition-theme"
+            style={{ color: "var(--text-secondary)" }}
+          >
+            Создайте организацию для начала работы с IPS платформой
+          </p>
+        </div>
+
+        <CreateOrganizationForm />
+      </div>
+    </div>
+  );
+};