add authentication with login form and token management

2026-04-16 12:47:42 +06:00
parent be0b13acbf
commit c373d82135
8 changed files with 262 additions and 6 deletions
@@ -0,0 +1,91 @@
+import { useState, type FormEvent } from 'react';
+import { Lock, User, Loader2 } from 'lucide-react';
+import { Button } from '../ui/Button';
+import { Input } from '../ui/Input';
+import { useAuthStore } from '../../stores/authStore';
+
+export const LoginForm = () => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const { login, isLoading } = useAuthStore();
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!username.trim() || !password.trim()) return;
+
+    try {
+      await login({ username: username.trim(), password });
+    } catch {
+      // Error is handled by store (toast)
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-[#fbf8fb] p-4">
+      <div className="w-full max-w-md bg-white rounded-xl shadow-lg p-8">
+        <div className="text-center mb-8">
+          <div className="w-16 h-16 bg-[#1B263B] rounded-xl flex items-center justify-center mx-auto mb-4">
+            <Lock className="w-8 h-8 text-white" />
+          </div>
+          <h1 className="text-2xl font-bold text-[#1b1b1d]">
+            Delivery Tracker
+          </h1>
+          <p className="text-[#75777d] mt-2">
+            Войдите в систему
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-5">
+          <div className="relative">
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-[#75777d]">
+              <User size={20} />
+            </div>
+            <Input
+              type="text"
+              placeholder="Имя пользователя"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              required
+              minLength={3}
+              disabled={isLoading}
+              className="pl-10"
+            />
+          </div>
+
+          <div className="relative">
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-[#75777d]">
+              <Lock size={20} />
+            </div>
+            <Input
+              type="password"
+              placeholder="Пароль"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              minLength={6}
+              disabled={isLoading}
+              className="pl-10"
+            />
+          </div>
+
+          <Button
+            type="submit"
+            variant="primary"
+            size="lg"
+            disabled={isLoading}
+            className="w-full"
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="w-5 h-5 mr-2 animate-spin" />
+                Вход...
+              </>
+            ) : (
+              'Войти'
+            )}
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { LoginForm } from './LoginForm';