Merge pull request #23 from janniscloodt/login/loginRegister

Updated Login

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/routes/+layout.svelte

@@ -12,7 +12,7 @@
     <a href="/" class="text-blue-700 mx-4 hover:text-blue-500">Home</a>
     <a href="/" class="text-blue-700 mx-4 hover:text-blue-500">News</a>
     <a href="/" class="text-blue-700 mx-4 hover:text-blue-500">PlaceHolder</a>
-    <a href="/login" class="text-blue-700 mx-4 hover:text-blue-500 ml-auto">Login</a>
+    <a href="/login" class="text-blue-700 mx-4 hover:text-blue-500 ml-auto">Sign</a>
     <div class="relative ml-3 pr-5">
         <div>
             <button

frontend/src/routes/login/+page.server.ts

@@ -0,0 +1,35 @@
+import type {Actions} from "./$types";
+import {env} from "$env/dynamic/public";
+import { goto } from '$app/navigation';
+
+export const actions:Actions = {
+default: async ({request, fetch, cookies}) => {
+
+    const data = await request.formData();
+    const username = data.get('username');
+    const password = data.get('password');
+
+    const response = await fetch(env.PUBLIC_BACKEND_URL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ username, password }),
+    });
+
+    if (!response.ok) {
+        throw new Error('An error occurred during the API call.');
+    }
+    const responseData = await response.json();
+    const authToken = responseData.token;
+
+    // Setze das Cookie mit einer Gültigkeitsdauer von 30 Tagen
+    const expirationDate = new Date();
+    expirationDate.setDate(expirationDate.getDate() + 30);
+
+    cookies.set('authToken', authToken, { expires: expirationDate });
+
+    goto('/');
+
+}
+}

frontend/src/routes/login/+page.svelte

@@ -2,23 +2,24 @@
     <form method="post" class="w-full max-w-md bg-white shadow-md rounded-md p-6">
         <div class="mb-4">
             <label class="block text-gray-700 text-sm font-semibold mb-2">
-                Benutzername
+                Username
+                <input name="username" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-indigo-500" type="text">
             </label>
-            <input class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-indigo-500" type="text">
         </div>
 
         <div class="mb-4">
             <label class="block text-gray-700 text-sm font-semibold mb-2">
-                Passwort
+                Password
+                <input name="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-indigo-500" type="password">
             </label>
-            <input class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-indigo-500" type="password">
         </div>
 
         <button class="w-full bg-indigo-500 text-white py-2 rounded-md hover:bg-indigo-600 focus:outline-none" type="submit">
-            Einloggen
+            Sign In
         </button>
         <div class="pt-3">
-            <a>Don't have an Account? Create one</a> <a href="../register" class="text-blue-700 underline">here</a>
+            <a>Don't have an Account? Create one</a>
+            <a href="../register" class="text-blue-700 underline">here</a>
         </div>
 
     </form>

frontend/src/routes/register/+page.server.ts

@@ -0,0 +1,13 @@
+import type {Actions} from "./$types";
+import {env} from "$env/dynamic/public";
+
+export const actions:Actions = {
+    default: async ({request, fetch}) => {
+
+        const data = await request.formData();
+        const username = data.get('username');
+        const email = data.get('email')
+        const password = data.get('password');
+        const passwordConfirm = data.get('passwordConfirm');
+    }
+}

frontend/src/routes/register/+page.svelte

@@ -0,0 +1,40 @@
+<div class="flex items-center pb-80 justify-center h-screen">
+    <form method="post" class="w-full max-w-md bg-white shadow-md rounded-md p-6">
+        <div class="mb-4">
+            <label class="block text-gray-700 text-sm font-semibold mb-2">
+                Username
+                <input class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-indigo-500" type="text">
+            </label>
+        </div>
+
+        <div class="mb-4">
+            <label class="block text-gray-700 text-sm font-semibold mb-2">
+                E-Mail
+                <input class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-indigo-500" type="password">
+            </label>
+        </div>
+
+        <div class="mb-4">
+            <label class="block text-gray-700 text-sm font-semibold mb-2">
+                Password
+                <input class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-indigo-500" type="password">
+            </label>
+        </div>
+
+        <div class="mb-4">
+            <label class="block text-gray-700 text-sm font-semibold mb-2">
+                Repeat Password
+                <input class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-indigo-500" type="password">
+            </label>
+        </div>
+
+        <button class="w-full bg-indigo-500 text-white py-2 rounded-md hover:bg-indigo-600 focus:outline-none" type="submit">
+            Sign Up
+        </button>
+        <div class="pt-3">
+            <a>Already have an Accounr? Click</a>
+            <a href="../login" class="text-blue-700 underline">here</a>
+        </div>
+
+    </form>
+</div>

frontend/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+