prvi kod za live uporabu

2026-07-09 21:21:17 +02:00
parent 857bb65d52
commit 5d39e048ba
239 changed files with 25151 additions and 0 deletions
--- a/frontend/src/components/auth/LoginForm.jsx
+++ b/frontend/src/components/auth/LoginForm.jsx
@@ -0,0 +1,86 @@
+import { useStore } from '@nanostores/preact';
+import { useEffect, useState } from 'preact/hooks';
+import { $accessToken, $authReady, hydrateAuthFromStorage, loginWithCredentials } from '../../stores/authStore';
+import { showToast } from '../../stores/toastStore';
+
+export default function LoginForm() {
+    const token = useStore($accessToken);
+    const authReady = useStore($authReady);
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState('');
+
+    useEffect(() => {
+        hydrateAuthFromStorage();
+    }, []);
+
+    useEffect(() => {
+        if (authReady && token) {
+            window.location.href = '/';
+        }
+    }, [authReady, token]);
+
+    if (token) return null;
+
+    async function submit(event) {
+        event.preventDefault();
+        setError('');
+        setSubmitting(true);
+        try {
+            await loginWithCredentials(email.trim(), password);
+            showToast('Uspješna prijava.', 'success', 2500);
+            window.location.href = '/';
+        } catch (err) {
+            const message = err?.message || 'Prijava nije uspjela.';
+            setError(message);
+            showToast(message, 'error');
+        } finally {
+            setSubmitting(false);
+        }
+    }
+
+    return (
+        <section className="mx-auto w-full max-w-md rounded-xl border border-border-hairline bg-canvas-elevated p-6 shadow-sm">
+            <h2 className="text-xl font-semibold text-text-main">Prijava</h2>
+            <p className="mt-1 text-sm text-text-muted">Prijavite se za pristup dashboardu.</p>
+
+            <form className="mt-6 space-y-4" onSubmit={submit}>
+                <label className="flex flex-col gap-1 text-sm">
+                    <span className="text-text-main">Email</span>
+                    <input
+                        type="email"
+                        value={email}
+                        onInput={(event) => setEmail(event.currentTarget.value)}
+                        required
+                        className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main"
+                    />
+                </label>
+                <label className="flex flex-col gap-1 text-sm">
+                    <span className="text-text-main">Lozinka</span>
+                    <input
+                        type="password"
+                        value={password}
+                        onInput={(event) => setPassword(event.currentTarget.value)}
+                        required
+                        className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main"
+                    />
+                </label>
+
+                {error && (
+                    <div className="rounded-lg border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700">
+                        {error}
+                    </div>
+                )}
+
+                <button
+                    type="submit"
+                    disabled={submitting}
+                    className="w-full rounded-lg bg-brand-primary px-4 py-2 text-sm font-semibold text-white hover:opacity-90 disabled:opacity-60"
+                >
+                    {submitting ? 'Prijava...' : 'Prijavi se'}
+                </button>
+            </form>
+        </section>
+    );
+}