feat: adminka2
This commit is contained in:
nikita
@@ -0,0 +1,310 @@
|
||||
import React, { useState } from "react";
|
||||
import { FaTimes, FaPlus } from "react-icons/fa";
|
||||
import { useAdminStore } from "../store/useAdminStore";
|
||||
|
||||
interface CreateUserModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const CreateUserModal: React.FC<CreateUserModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
}) => {
|
||||
const createUser = useAdminStore((s) => s.createUser);
|
||||
|
||||
const [form, setForm] = useState({
|
||||
login: "",
|
||||
name: "",
|
||||
last_name: "",
|
||||
password: "",
|
||||
is_active: true,
|
||||
permission_admin: false,
|
||||
permission_manage_agent: false,
|
||||
permission_view: true,
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!form.login || !form.password) return;
|
||||
setLoading(true);
|
||||
await createUser(form);
|
||||
setLoading(false);
|
||||
setForm({
|
||||
login: "",
|
||||
name: "",
|
||||
last_name: "",
|
||||
password: "",
|
||||
is_active: true,
|
||||
permission_admin: false,
|
||||
permission_manage_agent: false,
|
||||
permission_view: true,
|
||||
});
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: "rgba(0,0,0,0.6)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 2000,
|
||||
}}
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "var(--card-bg)",
|
||||
borderRadius: "8px",
|
||||
padding: "24px",
|
||||
minWidth: "380px",
|
||||
border: "1px solid var(--border)",
|
||||
boxShadow: "0 8px 24px rgba(0,0,0,0.4)",
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: "20px",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: "16px",
|
||||
fontWeight: 600,
|
||||
color: "var(--text-primary)",
|
||||
}}
|
||||
>
|
||||
Создать пользователя
|
||||
</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
color: "var(--text-secondary)",
|
||||
cursor: "pointer",
|
||||
padding: "4px",
|
||||
}}
|
||||
>
|
||||
<FaTimes size={14} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
|
||||
{/* Login */}
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "var(--text-secondary)",
|
||||
marginBottom: "4px",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
Логин
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={form.login}
|
||||
onChange={(e) => setForm({ ...form, login: e.target.value })}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "8px",
|
||||
backgroundColor: "var(--input-bg)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "6px",
|
||||
color: "var(--text-primary)",
|
||||
fontSize: "13px",
|
||||
outline: "none",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "var(--text-secondary)",
|
||||
marginBottom: "4px",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
Пароль
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={form.password}
|
||||
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "8px",
|
||||
backgroundColor: "var(--input-bg)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "6px",
|
||||
color: "var(--text-primary)",
|
||||
fontSize: "13px",
|
||||
outline: "none",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Name + Last name */}
|
||||
<div style={{ display: "flex", gap: "8px" }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<label
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "var(--text-secondary)",
|
||||
marginBottom: "4px",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
Имя
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={form.name}
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "8px",
|
||||
backgroundColor: "var(--input-bg)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "6px",
|
||||
color: "var(--text-primary)",
|
||||
fontSize: "13px",
|
||||
outline: "none",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<label
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "var(--text-secondary)",
|
||||
marginBottom: "4px",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
Фамилия
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={form.last_name}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, last_name: e.target.value })
|
||||
}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "8px",
|
||||
backgroundColor: "var(--input-bg)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "6px",
|
||||
color: "var(--text-primary)",
|
||||
fontSize: "13px",
|
||||
outline: "none",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Permissions */}
|
||||
<div style={{ paddingTop: "8px" }}>
|
||||
<label
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "var(--text-secondary)",
|
||||
marginBottom: "8px",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
Разрешения
|
||||
</label>
|
||||
<div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
|
||||
{[
|
||||
{ key: "is_active", label: "Active" },
|
||||
{ key: "permission_view", label: "View" },
|
||||
{ key: "permission_manage_agent", label: "Manage Agent" },
|
||||
{ key: "permission_admin", label: "Admin" },
|
||||
].map(({ key, label }) => (
|
||||
<label
|
||||
key={key}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "6px",
|
||||
cursor: "pointer",
|
||||
fontSize: "12px",
|
||||
color: "var(--text-secondary)",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={
|
||||
form[key as keyof typeof form] as boolean
|
||||
}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, [key]: e.target.checked })
|
||||
}
|
||||
style={{ accentColor: "var(--accent)" }}
|
||||
/>
|
||||
{label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={loading || !form.login || !form.password}
|
||||
style={{
|
||||
marginTop: "8px",
|
||||
padding: "10px",
|
||||
backgroundColor:
|
||||
loading || !form.login || !form.password
|
||||
? "var(--bg-secondary)"
|
||||
: "var(--accent)",
|
||||
color:
|
||||
loading || !form.login || !form.password
|
||||
? "var(--text-muted)"
|
||||
: "var(--accent-text)",
|
||||
border: "none",
|
||||
borderRadius: "6px",
|
||||
cursor:
|
||||
loading || !form.login || !form.password
|
||||
? "default"
|
||||
: "pointer",
|
||||
fontSize: "13px",
|
||||
fontWeight: 500,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: "6px",
|
||||
}}
|
||||
>
|
||||
<FaPlus size={12} />
|
||||
{loading ? "Создание..." : "Создать"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user