feat: Init project with frontend and rudimentary authentication

legalconsenthub/components/Login.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="form-container">
+        <h2>Login</h2>
+        <form @submit.prevent="handleLogin">
+            <div class="form-group">
+                <label for="email-login">Email:</label>
+                <input type="email" id="email-login" v-model="email" required />
+            </div>
+
+            <div class="form-group">
+                <label for="password-login">Passwort:</label>
+                <input type="password" id="password-login" v-model="password" required />
+            </div>
+
+            <button type="submit">Login</button>
+        </form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const email = ref('');
+const password = ref('');
+
+const handleLogin = () => {
+    if (!email.value || !password.value) {
+        alert('Bitte alle Felder ausfüllen');
+        return;
+    }
+    authClient.signIn.email({
+        email: email.value,
+        password: password.value
+    }, {
+        onRequest: (ctx) => {
+            console.log("Sending login request", ctx)
+        },
+        onSuccess: (ctx) => {
+            console.log("Successfully logged in!")
+        },
+        onError: (ctx) => {
+            console.log(ctx.error.message);
+        },
+    });
+};
+</script>
+
+<style scoped>
+.form-container {
+    max-width: 300px;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    background: #f9f9f9;
+}
+.form-group {
+    margin-bottom: 10px;
+}
+input {
+    width: 100%;
+    padding: 8px;
+    margin-top: 4px;
+}
+button {
+    width: 100%;
+    padding: 10px;
+    background: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+button:hover {
+    background: #0056b3;
+}
+</style>