feat: create login register

2026-06-12 18:57:58 +03:00
parent b824795389
commit 444bc05f9d
10 changed files with 838 additions and 14 deletions
@@ -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>
+  );
+};