feat: Init project with frontend and rudimentary authentication

legalconsenthub/components/Register.vue

@@ -0,0 +1,94 @@
+<template>
+    <div class="form-container">
+        <h2>Registrieren</h2>
+        <form @submit.prevent="handleRegister">
+            <div class="form-group">
+                <label for="username">Benutzername:</label>
+                <input type="text" id="username" v-model="username" required />
+            </div>
+
+            <div class="form-group">
+                <label for="email">Email:</label>
+                <input type="email" id="email" v-model="email" required />
+            </div>
+
+            <div class="form-group">
+                <label for="password">Passwort:</label>
+                <input type="password" id="password" v-model="password" required />
+            </div>
+
+            <div class="form-group">
+                <label for="confirmPassword">Passwort bestätigen:</label>
+                <input type="password" id="confirmPassword" v-model="confirmPassword" required />
+            </div>
+
+            <button type="submit">Registrieren</button>
+        </form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const username = ref('');
+const email = ref('');
+const password = ref('');
+const confirmPassword = ref('');
+
+const handleRegister = () => {
+    if (!username.value || !email.value || !password.value || !confirmPassword.value) {
+        alert('Bitte alle Felder ausfüllen');
+        return;
+    }
+    if (password.value !== confirmPassword.value) {
+        alert('Passwörter stimmen nicht überein');
+        return;
+    }
+    authClient.signUp.email({
+        email: email.value,
+        password: password.value,
+        name: username.value
+    }, {
+        onRequest: (ctx) => {
+            console.log("Sending register request", ctx)
+        },
+        onSuccess: (ctx) => {
+            console.log("Successfully registered!")
+        },
+        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: #28a745;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+button:hover {
+    background: #218838;
+}
+</style>