139 lines
4.5 KiB
TypeScript
139 lines
4.5 KiB
TypeScript
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>
|
||
);
|
||
};
|