home page #1
@@ -4,6 +4,7 @@ import { HomePage } from "@/pages/home.page";
|
||||
import { SecondaryPage } from "@/pages/secondary.page";
|
||||
import { AuthPage } from "@/pages/AuthPage";
|
||||
import { CreateOrganizationPage } from "@/pages/CreateOrganizationPage";
|
||||
import { OrganizationPage } from "@/pages/OrganizationPage";
|
||||
import { ProtectedRoute } from "./helper/protected.route";
|
||||
|
||||
export const Routing = () => {
|
||||
@@ -29,6 +30,14 @@ export const Routing = () => {
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/organization"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<OrganizationPage />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/secondary"
|
||||
element={
|
||||
|
||||
@@ -1,59 +1,343 @@
|
||||
import { apiService } from "@/shared/api/api.service";
|
||||
import type {
|
||||
LoginCredentials,
|
||||
RegisterData,
|
||||
AuthResponse,
|
||||
OrganizationCreateData,
|
||||
OrganizationResponse,
|
||||
OrganizationMember,
|
||||
} from "../types/auth.types";
|
||||
|
||||
// Заглушка для хранения данных в localStorage
|
||||
const MOCK_USERS_KEY = "mock_users";
|
||||
const MOCK_ORGS_KEY = "mock_organizations";
|
||||
const MOCK_MEMBERS_KEY = "mock_members";
|
||||
|
||||
const getMockUsers = () => {
|
||||
const users = localStorage.getItem(MOCK_USERS_KEY);
|
||||
if (!users) {
|
||||
const defaultUsers = [
|
||||
{
|
||||
id: 1,
|
||||
username: "admin",
|
||||
email: "admin@example.com",
|
||||
password: "admin123",
|
||||
first_name: "Admin",
|
||||
last_name: "User",
|
||||
},
|
||||
];
|
||||
localStorage.setItem(MOCK_USERS_KEY, JSON.stringify(defaultUsers));
|
||||
return defaultUsers;
|
||||
}
|
||||
return JSON.parse(users);
|
||||
};
|
||||
|
||||
const getMockOrganizations = () => {
|
||||
const orgs = localStorage.getItem(MOCK_ORGS_KEY);
|
||||
if (!orgs) {
|
||||
return [];
|
||||
}
|
||||
return JSON.parse(orgs);
|
||||
};
|
||||
|
||||
const getMockMembers = () => {
|
||||
const members = localStorage.getItem(MOCK_MEMBERS_KEY);
|
||||
if (!members) {
|
||||
return [];
|
||||
}
|
||||
return JSON.parse(members);
|
||||
};
|
||||
|
||||
export const authService = {
|
||||
async login(credentials: LoginCredentials): Promise<AuthResponse> {
|
||||
const formData = new URLSearchParams();
|
||||
formData.append("username", credentials.username);
|
||||
formData.append("password", credentials.password);
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
const users = getMockUsers();
|
||||
const user = users.find(
|
||||
(u: any) =>
|
||||
u.username === credentials.username &&
|
||||
u.password === credentials.password,
|
||||
);
|
||||
|
||||
return apiService.post<AuthResponse>("/auth/login", formData, {
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
if (user) {
|
||||
resolve({
|
||||
access_token: `mock_token_${user.id}_${Date.now()}`,
|
||||
token_type: "bearer",
|
||||
user: {
|
||||
id: user.id,
|
||||
username: user.username,
|
||||
email: user.email,
|
||||
first_name: user.first_name,
|
||||
last_name: user.last_name,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
reject({
|
||||
response: {
|
||||
data: { message: "Неверное имя пользователя или пароль" },
|
||||
},
|
||||
});
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
|
||||
async register(
|
||||
data: Omit<RegisterData, "confirmPassword">,
|
||||
): Promise<AuthResponse> {
|
||||
return apiService.post<AuthResponse>("/auth/register", {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
const users = getMockUsers();
|
||||
const existingUser = users.find(
|
||||
(u: any) => u.username === data.username,
|
||||
);
|
||||
|
||||
if (existingUser) {
|
||||
reject({
|
||||
response: {
|
||||
data: { message: "Пользователь с таким именем уже существует" },
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const existingEmail = users.find((u: any) => u.email === data.email);
|
||||
if (existingEmail) {
|
||||
reject({
|
||||
response: {
|
||||
data: { message: "Пользователь с таким email уже существует" },
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const newUser = {
|
||||
id: users.length + 1,
|
||||
username: data.username,
|
||||
email: data.email,
|
||||
password: data.password,
|
||||
first_name: data.first_name,
|
||||
last_name: data.last_name,
|
||||
};
|
||||
|
||||
users.push(newUser);
|
||||
localStorage.setItem(MOCK_USERS_KEY, JSON.stringify(users));
|
||||
|
||||
resolve({
|
||||
access_token: `mock_token_${newUser.id}_${Date.now()}`,
|
||||
token_type: "bearer",
|
||||
user: {
|
||||
id: newUser.id,
|
||||
username: newUser.username,
|
||||
email: newUser.email,
|
||||
first_name: newUser.first_name,
|
||||
last_name: newUser.last_name,
|
||||
},
|
||||
});
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
|
||||
async createOrganization(
|
||||
data: OrganizationCreateData,
|
||||
): Promise<OrganizationResponse> {
|
||||
const formData = new FormData();
|
||||
formData.append("name", data.name);
|
||||
if (data.logo) {
|
||||
formData.append("logo", data.logo);
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const orgs = getMockOrganizations();
|
||||
const token = this.getToken();
|
||||
const userId = token ? parseInt(token.split("_")[1]) : 1;
|
||||
|
||||
const newOrg = {
|
||||
id: orgs.length + 1,
|
||||
name: data.name,
|
||||
logo_url: data.logo ? URL.createObjectURL(data.logo) : undefined,
|
||||
created_at: new Date().toISOString(),
|
||||
owner_id: userId,
|
||||
};
|
||||
|
||||
orgs.push(newOrg);
|
||||
localStorage.setItem(MOCK_ORGS_KEY, JSON.stringify(orgs));
|
||||
|
||||
// Добавляем владельца в члены организации
|
||||
const members = getMockMembers();
|
||||
const newMember = {
|
||||
id: members.length + 1,
|
||||
organization_id: newOrg.id,
|
||||
user_id: userId,
|
||||
username: "temp_username",
|
||||
email: "temp_email",
|
||||
first_name: "temp_first",
|
||||
last_name: "temp_last",
|
||||
role: "owner",
|
||||
joined_at: new Date().toISOString(),
|
||||
};
|
||||
|
||||
// Получаем данные пользователя
|
||||
const users = getMockUsers();
|
||||
const user = users.find((u: any) => u.id === userId);
|
||||
if (user) {
|
||||
newMember.username = user.username;
|
||||
newMember.email = user.email;
|
||||
newMember.first_name = user.first_name;
|
||||
newMember.last_name = user.last_name;
|
||||
}
|
||||
|
||||
return apiService.post<OrganizationResponse>("/organizations", formData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
members.push(newMember);
|
||||
localStorage.setItem(MOCK_MEMBERS_KEY, JSON.stringify(members));
|
||||
|
||||
resolve(newOrg);
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
|
||||
async getOrganizations(): Promise<OrganizationResponse[]> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const orgs = getMockOrganizations();
|
||||
resolve(orgs);
|
||||
}, 300);
|
||||
});
|
||||
},
|
||||
|
||||
async getOrganizationMembers(
|
||||
organizationId: number,
|
||||
): Promise<OrganizationMember[]> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const members = getMockMembers();
|
||||
const orgMembers = members.filter(
|
||||
(m: any) => m.organization_id === organizationId,
|
||||
);
|
||||
resolve(orgMembers);
|
||||
}, 300);
|
||||
});
|
||||
},
|
||||
|
||||
async updateMemberRole(
|
||||
organizationId: number,
|
||||
userId: number,
|
||||
newRole: string,
|
||||
): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
const members = getMockMembers();
|
||||
const memberIndex = members.findIndex(
|
||||
(m: any) =>
|
||||
m.organization_id === organizationId && m.user_id === userId,
|
||||
);
|
||||
|
||||
if (memberIndex !== -1) {
|
||||
members[memberIndex].role = newRole;
|
||||
localStorage.setItem(MOCK_MEMBERS_KEY, JSON.stringify(members));
|
||||
resolve();
|
||||
} else {
|
||||
reject({ response: { data: { message: "Участник не найден" } } });
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
|
||||
async removeMember(organizationId: number, userId: number): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
const members = getMockMembers();
|
||||
const filteredMembers = members.filter(
|
||||
(m: any) =>
|
||||
!(m.organization_id === organizationId && m.user_id === userId),
|
||||
);
|
||||
|
||||
if (filteredMembers.length !== members.length) {
|
||||
localStorage.setItem(
|
||||
MOCK_MEMBERS_KEY,
|
||||
JSON.stringify(filteredMembers),
|
||||
);
|
||||
resolve();
|
||||
} else {
|
||||
reject({ response: { data: { message: "Участник не найден" } } });
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
|
||||
async addMember(
|
||||
organizationId: number,
|
||||
email: string,
|
||||
role: string,
|
||||
): Promise<OrganizationMember> {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
const users = getMockUsers();
|
||||
const user = users.find((u: any) => u.email === email);
|
||||
|
||||
if (!user) {
|
||||
reject({
|
||||
response: {
|
||||
data: { message: "Пользователь с таким email не найден" },
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const members = getMockMembers();
|
||||
const existingMember = members.find(
|
||||
(m: any) =>
|
||||
m.organization_id === organizationId && m.user_id === user.id,
|
||||
);
|
||||
|
||||
if (existingMember) {
|
||||
reject({
|
||||
response: {
|
||||
data: {
|
||||
message: "Пользователь уже является участником организации",
|
||||
},
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const newMember = {
|
||||
id: members.length + 1,
|
||||
organization_id: organizationId,
|
||||
user_id: user.id,
|
||||
username: user.username,
|
||||
email: user.email,
|
||||
first_name: user.first_name,
|
||||
last_name: user.last_name,
|
||||
role: role,
|
||||
joined_at: new Date().toISOString(),
|
||||
};
|
||||
|
||||
members.push(newMember);
|
||||
localStorage.setItem(MOCK_MEMBERS_KEY, JSON.stringify(members));
|
||||
|
||||
resolve(newMember);
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
|
||||
async getCurrentUser(): Promise<AuthResponse["user"]> {
|
||||
return apiService.get<AuthResponse["user"]>("/users/me");
|
||||
},
|
||||
return new Promise((resolve, reject) => {
|
||||
const token = this.getToken();
|
||||
if (!token) {
|
||||
reject({ response: { data: { message: "Не авторизован" } } });
|
||||
return;
|
||||
}
|
||||
|
||||
async getOrganizations(): Promise<OrganizationResponse[]> {
|
||||
return apiService.get<OrganizationResponse[]>("/organizations");
|
||||
const userId = parseInt(token.split("_")[1]);
|
||||
const users = getMockUsers();
|
||||
const user = users.find((u: any) => u.id === userId);
|
||||
|
||||
if (user) {
|
||||
resolve({
|
||||
id: user.id,
|
||||
username: user.username,
|
||||
email: user.email,
|
||||
first_name: user.first_name,
|
||||
last_name: user.last_name,
|
||||
});
|
||||
} else {
|
||||
reject({ response: { data: { message: "Пользователь не найден" } } });
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
logout(): void {
|
||||
|
||||
@@ -6,6 +6,7 @@ import type {
|
||||
LoginCredentials,
|
||||
RegisterData,
|
||||
OrganizationCreateData,
|
||||
OrganizationMember,
|
||||
} from "../types/auth.types";
|
||||
|
||||
export const useAuth = () => {
|
||||
@@ -20,7 +21,6 @@ export const useAuth = () => {
|
||||
if (result) {
|
||||
authService.saveAuthData(result.access_token, result.user);
|
||||
|
||||
// Проверяем, есть ли уже организация
|
||||
const orgs = await request(() => authService.getOrganizations());
|
||||
if (orgs && orgs.length > 0) {
|
||||
authService.saveOrganization(orgs[0]);
|
||||
|
||||
@@ -36,3 +36,14 @@ export interface OrganizationResponse {
|
||||
created_at: string;
|
||||
owner_id: number;
|
||||
}
|
||||
|
||||
export interface OrganizationMember {
|
||||
id: number;
|
||||
user_id: number;
|
||||
username: string;
|
||||
email: string;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
role: "owner" | "admin" | "member";
|
||||
joined_at: string;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,307 @@
|
||||
import React, { useState } from "react";
|
||||
import { useOrganization } from "../hooks/useOrganization";
|
||||
|
||||
export const OrganizationMembers = () => {
|
||||
const { members, isLoading, updateMemberRole, removeMember, addMember } =
|
||||
useOrganization();
|
||||
const [showAddModal, setShowAddModal] = useState(false);
|
||||
const [newMemberEmail, setNewMemberEmail] = useState("");
|
||||
const [newMemberRole, setNewMemberRole] = useState<"admin" | "member">(
|
||||
"member",
|
||||
);
|
||||
const [actionLoading, setActionLoading] = useState<number | null>(null);
|
||||
|
||||
const handleRoleChange = async (userId: number, newRole: string) => {
|
||||
setActionLoading(userId);
|
||||
await updateMemberRole(userId, newRole);
|
||||
setActionLoading(null);
|
||||
};
|
||||
|
||||
const handleRemoveMember = async (userId: number, memberName: string) => {
|
||||
if (
|
||||
confirm(
|
||||
`Вы уверены, что хотите удалить пользователя "${memberName}" из организации?`,
|
||||
)
|
||||
) {
|
||||
setActionLoading(userId);
|
||||
await removeMember(userId);
|
||||
setActionLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddMember = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const success = await addMember(newMemberEmail, newMemberRole);
|
||||
if (success) {
|
||||
setShowAddModal(false);
|
||||
setNewMemberEmail("");
|
||||
setNewMemberRole("member");
|
||||
}
|
||||
};
|
||||
|
||||
const getRoleLabel = (role: string) => {
|
||||
switch (role) {
|
||||
case "owner":
|
||||
return "Владелец";
|
||||
case "admin":
|
||||
return "Администратор";
|
||||
case "member":
|
||||
return "Участник";
|
||||
default:
|
||||
return role;
|
||||
}
|
||||
};
|
||||
|
||||
const getRoleColor = (role: string) => {
|
||||
switch (role) {
|
||||
case "owner":
|
||||
return "text-yellow-600 dark:text-yellow-400";
|
||||
case "admin":
|
||||
return "text-blue-600 dark:text-blue-400";
|
||||
case "member":
|
||||
return "text-green-600 dark:text-green-400";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading && members.length === 0) {
|
||||
return (
|
||||
<div className="flex justify-center py-12">
|
||||
<div style={{ color: "var(--text-secondary)" }}>
|
||||
Загрузка участников...
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2
|
||||
className="text-2xl font-bold"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
Участники организации
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => setShowAddModal(true)}
|
||||
className="px-4 py-2 rounded-lg font-medium transition-all transform hover:scale-[1.02] active:scale-[0.98]"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--button-primary-text)",
|
||||
}}
|
||||
>
|
||||
+ Добавить участника
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b" style={{ borderColor: "var(--border)" }}>
|
||||
<th
|
||||
className="text-left py-3 px-4"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
Имя
|
||||
</th>
|
||||
<th
|
||||
className="text-left py-3 px-4"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
Email
|
||||
</th>
|
||||
<th
|
||||
className="text-left py-3 px-4"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
Роль
|
||||
</th>
|
||||
<th
|
||||
className="text-left py-3 px-4"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
Действия
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{members.map((member) => (
|
||||
<tr
|
||||
key={member.id}
|
||||
className="border-b"
|
||||
style={{ borderColor: "var(--border)" }}
|
||||
>
|
||||
<td
|
||||
className="py-3 px-4"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
{member.first_name} {member.last_name}
|
||||
<div
|
||||
className="text-xs"
|
||||
style={{ color: "var(--text-muted)" }}
|
||||
>
|
||||
@{member.username}
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
className="py-3 px-4"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
{member.email}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
{member.role === "owner" ? (
|
||||
<span
|
||||
className={`font-medium ${getRoleColor(member.role)}`}
|
||||
>
|
||||
{getRoleLabel(member.role)}
|
||||
</span>
|
||||
) : (
|
||||
<select
|
||||
value={member.role}
|
||||
onChange={(e) =>
|
||||
handleRoleChange(member.user_id, e.target.value)
|
||||
}
|
||||
disabled={actionLoading === member.user_id}
|
||||
className="px-2 py-1 rounded border focus:outline-none focus:ring-2"
|
||||
style={{
|
||||
backgroundColor: "var(--input-bg)",
|
||||
color: "var(--text-primary)",
|
||||
borderColor: "var(--border)",
|
||||
"--tw-ring-color": "var(--accent)",
|
||||
}}
|
||||
>
|
||||
<option value="admin">{getRoleLabel("admin")}</option>
|
||||
<option value="member">{getRoleLabel("member")}</option>
|
||||
</select>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
{member.role !== "owner" && (
|
||||
<button
|
||||
onClick={() =>
|
||||
handleRemoveMember(
|
||||
member.user_id,
|
||||
`${member.first_name} ${member.last_name}`,
|
||||
)
|
||||
}
|
||||
disabled={actionLoading === member.user_id}
|
||||
className="px-3 py-1 rounded text-sm transition-all hover:scale-105 disabled:opacity-50"
|
||||
style={{
|
||||
backgroundColor: "var(--button-danger)",
|
||||
color: "var(--button-danger-text)",
|
||||
}}
|
||||
>
|
||||
{actionLoading === member.user_id ? "..." : "Удалить"}
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{members.length === 0 && !isLoading && (
|
||||
<div
|
||||
className="text-center py-12"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
В организации пока нет участников
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showAddModal && (
|
||||
<div className="fixed inset-0 bg-[#00000055] bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div
|
||||
className="rounded-2xl p-6 max-w-md w-full mx-4"
|
||||
style={{
|
||||
backgroundColor: "var(--card-bg)",
|
||||
boxShadow: `0 20px 25px -5px var(--shadow-color)`,
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
className="text-xl font-bold mb-4"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
Добавить участника
|
||||
</h3>
|
||||
<form onSubmit={handleAddMember}>
|
||||
<div className="mb-4">
|
||||
<label
|
||||
className="block text-sm font-medium mb-2"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
Email пользователя
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={newMemberEmail}
|
||||
onChange={(e) => setNewMemberEmail(e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-lg border focus:outline-none focus:ring-2"
|
||||
style={{
|
||||
backgroundColor: "var(--input-bg)",
|
||||
color: "var(--text-primary)",
|
||||
borderColor: "var(--border)",
|
||||
"--tw-ring-color": "var(--accent)",
|
||||
}}
|
||||
required
|
||||
placeholder="user@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<label
|
||||
className="block text-sm font-medium mb-2"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
Роль
|
||||
</label>
|
||||
<select
|
||||
value={newMemberRole}
|
||||
onChange={(e) =>
|
||||
setNewMemberRole(e.target.value as "admin" | "member")
|
||||
}
|
||||
className="w-full px-4 py-2 rounded-lg border focus:outline-none focus:ring-2"
|
||||
style={{
|
||||
backgroundColor: "var(--input-bg)",
|
||||
color: "var(--text-primary)",
|
||||
borderColor: "var(--border)",
|
||||
"--tw-ring-color": "var(--accent)",
|
||||
}}
|
||||
>
|
||||
<option value="admin">Администратор</option>
|
||||
<option value="member">Участник</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowAddModal(false)}
|
||||
className="flex-1 py-2 px-4 rounded-lg font-medium transition-all"
|
||||
style={{
|
||||
backgroundColor: "var(--bg-secondary)",
|
||||
color: "var(--text-secondary)",
|
||||
}}
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 py-2 px-4 rounded-lg font-medium transition-all transform hover:scale-[1.02]"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--button-primary-text)",
|
||||
}}
|
||||
>
|
||||
Добавить
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,82 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { authService } from "@/modules/auth/api/auth.service";
|
||||
import { useApi } from "@/shared/api/hooks/use.api";
|
||||
import type { OrganizationMember } from "@/modules/auth/types/auth.types";
|
||||
|
||||
export const useOrganization = () => {
|
||||
const { isLoading, error, request } = useApi();
|
||||
const [members, setMembers] = useState<OrganizationMember[]>([]);
|
||||
const [organization, setOrganization] = useState(
|
||||
authService.getCurrentOrganization(),
|
||||
);
|
||||
|
||||
const loadMembers = async () => {
|
||||
if (organization) {
|
||||
const result = await request(() =>
|
||||
authService.getOrganizationMembers(organization.id),
|
||||
);
|
||||
if (result) {
|
||||
setMembers(result);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadMembers();
|
||||
}, [organization]);
|
||||
|
||||
const updateMemberRole = async (userId: number, newRole: string) => {
|
||||
if (organization) {
|
||||
const result = await request(() =>
|
||||
authService.updateMemberRole(organization.id, userId, newRole),
|
||||
);
|
||||
if (result !== undefined) {
|
||||
await loadMembers();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const removeMember = async (userId: number) => {
|
||||
if (organization) {
|
||||
const result = await request(() =>
|
||||
authService.removeMember(organization.id, userId),
|
||||
);
|
||||
if (result !== undefined) {
|
||||
await loadMembers();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const addMember = async (email: string, role: string) => {
|
||||
if (organization) {
|
||||
const result = await request(() =>
|
||||
authService.addMember(organization.id, email, role),
|
||||
);
|
||||
if (result) {
|
||||
await loadMembers();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const refreshOrganization = () => {
|
||||
setOrganization(authService.getCurrentOrganization());
|
||||
};
|
||||
|
||||
return {
|
||||
members,
|
||||
organization,
|
||||
isLoading,
|
||||
error,
|
||||
updateMemberRole,
|
||||
removeMember,
|
||||
addMember,
|
||||
refreshOrganization,
|
||||
loadMembers,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,74 @@
|
||||
import React from "react";
|
||||
import { ThemeToggle } from "@/modules/theme-changer/ui/Theme.toggle";
|
||||
import { OrganizationMembers } from "@/modules/organization/components/OrganizationMembers";
|
||||
import { useAuth } from "@/modules/auth/hooks/useAuth";
|
||||
import { Navigate, useNavigate } from "react-router-dom";
|
||||
import { authService } from "@/modules/auth/api/auth.service";
|
||||
|
||||
export const OrganizationPage = () => {
|
||||
const { isAuthenticated, hasOrganization } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const organization = authService.getCurrentOrganization();
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return <Navigate to="/" replace />;
|
||||
}
|
||||
|
||||
if (!hasOrganization) {
|
||||
return <Navigate to="/create-organization" replace />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen transition-theme"
|
||||
style={{ backgroundColor: "var(--bg-primary)" }}
|
||||
>
|
||||
<div className="absolute top-4 right-4">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="mb-8">
|
||||
<button
|
||||
onClick={() => navigate("/home")}
|
||||
className="mb-4 inline-flex items-center gap-2 text-sm transition-colors hover:underline"
|
||||
style={{ color: "var(--link)" }}
|
||||
>
|
||||
← Назад
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
{organization?.logo_url && (
|
||||
<img
|
||||
src={organization.logo_url}
|
||||
alt={organization.name}
|
||||
className="w-16 h-16 rounded-full object-cover"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<h1
|
||||
className="text-3xl font-bold"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
{organization?.name}
|
||||
</h1>
|
||||
<p className="text-sm" style={{ color: "var(--text-secondary)" }}>
|
||||
Управление участниками организации
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="rounded-2xl p-6"
|
||||
style={{
|
||||
backgroundColor: "var(--card-bg)",
|
||||
boxShadow: `0 4px 6px -1px var(--shadow-color)`,
|
||||
}}
|
||||
>
|
||||
<OrganizationMembers />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+36
-2
@@ -1,13 +1,47 @@
|
||||
import { ThemeToggle } from "@/modules/theme-changer/ui/Theme.toggle";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useAuth } from "@/modules/auth/hooks/useAuth";
|
||||
|
||||
export const HomePage = () => {
|
||||
const navigate = useNavigate();
|
||||
const { logout } = useAuth();
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{ backgroundColor: "var(--bg-primary)" }}
|
||||
className="min-h-screen flex items-center justify-center p-4"
|
||||
className="min-h-screen p-4"
|
||||
>
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<ThemeToggle />
|
||||
Домашняя
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => navigate("/organization")}
|
||||
className="px-4 py-2 rounded-lg font-medium transition-all"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--button-primary-text)",
|
||||
}}
|
||||
>
|
||||
Управление организацией
|
||||
</button>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="px-4 py-2 rounded-lg font-medium transition-all"
|
||||
style={{
|
||||
backgroundColor: "var(--button-danger)",
|
||||
color: "var(--button-danger-text)",
|
||||
}}
|
||||
>
|
||||
Выйти
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center">
|
||||
<h1 className="text-2xl" style={{ color: "var(--text-primary)" }}>
|
||||
Добро пожаловать в IPS Manager
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user