feat(frontend): add login UI and connect to backend auth

2026-05-27 20:44:55 +03:00
parent e7eaa42064
commit 24b1344d06
3 changed files with 147 additions and 2 deletions
--- a/frontend/src/routes/auth/+page.svelte
+++ b/frontend/src/routes/auth/+page.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+    let activeTab = $state<'login' | 'register'>('login');
+    let username = $state('');
+    let password = $state('');
+    let error = $state('');
+
+    async function handleSubmit() {
+        const endpoint = activeTab === 'login' ? '/api/auth/login' : '/api/auth/register';
+        const res = await fetch(`http://localhost:3000${endpoint}`, {
+            method: 'POST',
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ username, password })
+        });
+
+        if (res.ok) {
+            window.location.href = '/';
+        } else {
+            error = 'Invalid credentials';
+        }
+    }
+
+
+</script>
+
+<div class="flex-1 flex items-center justify-center -mt-16">
+    <div class="w-full max-w-xs">
+        <h1 class="text-4xl text-white mb-8" style="font-family: 'Caveat', cursive;">loft</h1>
+
+        <div class="flex mb-6 border-b border-sky-200/20">
+            <button
+                onclick={() => activeTab = 'login'}
+                class="flex-1 py-2 text-sm transition-colors cursor-pointer {activeTab === 'login' ? 'text-white border-b border-white -mb-px' : 'text-white/40 hover:text-white/60'}"
+            >
+                Login
+            </button>
+            <button
+                onclick={() => activeTab = 'register'}
+                class="flex-1 py-2 text-sm transition-colors cursor-pointer {activeTab === 'register' ? 'text-white border-b border-white -mb-px' : 'text-white/40 hover:text-white/60'}"
+            >
+                Register
+            </button>
+        </div>
+
+        <div class="flex flex-col gap-3">
+            <div class="flex flex-col gap-1">
+                <label for="username" class="text-white/30 text-xs">Username</label>
+                <input
+                    id="username"
+                    bind:value={username}
+                    type="text"
+                    autocomplete="username"
+                    class="px-4 py-2 rounded-sm !bg-[#0f1117] border border-sky-200/15 transition-colors hover:bg-black/20 hover:border-sky-200/30 text-white/80 text-sm focus:outline-none focus:border-sky-200/40"
+                />
+            </div>
+            <div class="flex flex-col gap-1">
+                <label for="password" class="text-white/30 text-xs">Password</label>
+                <input
+                    id="password"
+                    bind:value={password}
+                    type="password"
+                    autocomplete="current-password"
+                    class="px-4 py-2 rounded-sm !bg-[#0f1117] border border-sky-200/15 transition-colors hover:bg-black/20 hover:border-sky-200/30 text-white/80 text-sm focus:outline-none focus:border-sky-200/40"
+                />
+            </div>
+            {#if error}<p class="text-red-400/60 text-xs">{error}</p>{/if}
+            <button 
+                onclick={handleSubmit}
+                class="mt-1 px-4 py-2 border border-sky-200/15 text-white/40 hover:border-sky-200/30 hover:text-white/60 text-sm transition-colors rounded-sm cursor-pointer">
+                {activeTab === 'login' ? 'Login' : 'Register'}
+            </button>
+        </div>
+    </div>
+</div>