first

src/routes/(app)/login/+page.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import type { LoginRequest } from '$lib/types/types';
+
+  let username = '';
+  let password = '';
+  let errorMessage = '';
+  let isLoading = false;
+
+  async function handleSubmit() {
+    const loginData: LoginRequest = {
+      username,
+      password
+    };
+
+    isLoading = true;
+    errorMessage = '';
+
+    try {
+      const response = await fetch('/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(loginData)
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        errorMessage = errorData.error || 'Login failed';
+      } else {
+        const data = await response.json();
+        // Assuming the backend returns a token or some success indicator
+        // Redirect to home page or dashboard after successful login
+        goto('/');
+      }
+    } catch (err) {
+      errorMessage = 'An error occurred. Please try again.';
+    } finally {
+      isLoading = false;
+    }
+  }
+</script>
+
+<div class="flex min-h-screen flex-col items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+  <div class="w-full max-w-md space-y-8">
+    <div>
+      <h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">Sign in to your account</h2>
+    </div>
+
+    {#if errorMessage}
+      <div class="rounded-md bg-red-50 p-4">
+        <div class="flex">
+          <div class="ml-3">
+            <p class="text-sm font-medium text-red-800">{errorMessage}</p>
+          </div>
+        </div>
+      </div>
+    {/if}
+
+    <form class="mt-8 space-y-6" on:submit|preventDefault={handleSubmit}>
+      <input type="hidden" name="remember" value="true" />
+      <div class="-space-y-px rounded-md shadow-sm">
+        <div>
+          <label for="username" class="sr-only">Username</label>
+          <input
+            id="username"
+            name="username"
+            type="text"
+            autocomplete="username"
+            required
+            bind:value={username}
+            class="relative block w-full rounded-t-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+            placeholder="Username"
+          />
+        </div>
+        <div>
+          <label for="password" class="sr-only">Password</label>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            autocomplete="current-password"
+            required
+            bind:value={password}
+            class="relative block w-full rounded-b-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+            placeholder="Password"
+          />
+        </div>
+      </div>
+
+      <div>
+        <button
+          type="submit"
+          disabled={isLoading}
+          class="group relative flex w-full justify-center rounded-md bg-indigo-600 py-2 px-3 text-sm font-semibold text-white hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+        >
+          {#if isLoading}
+            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            Signing in...
+          {:else}
+            Sign in
+          {/if}
+        </button>
+      </div>
+    </form>
+  </div>
+</div>