1 files changed, 78 insertions, 0 deletions
diff --git a/pse-dashboard/src/views/RegistrationView.vue b/pse-dashboard/src/views/RegistrationView.vue
new file mode 100644
index 0000000..2d561f3
--- /dev/null
+++ b/pse-dashboard/src/views/RegistrationView.vue
@@ -0,0 +1,78 @@
+<script setup>
+import { FloatingLabelInput, FormLayout, PasswordValidator } from '@/components'
+import { ref } from 'vue';
+import router from '@/router.js';
+import { register } from '@/api/pse-squared.js'
+import { useLogger } from '@/logger.js'
+
+const username = ref("");
+const email = ref("");
+const passwordModel = ref(null);
+
+const { passwordRequirements, accountCreated } = useLogger();
+
+async function formRegister() {
+    if(!passwordModel.value.valid) {
+        // log.append({type: "info", message: "Password requirements are not met"})
+        passwordRequirements();
+        return;
+    } 
+
+    try {
+        await register({
+            username: username.value,
+            email: email.value, 
+            password: passwordModel.value.password
+        });
+
+        accountCreated();
+        router.push("/login");
+    } catch (err) {
+    }
+}
+
+</script>
+<template>
+    <FormLayout>
+        <!-- Text über Texteingabefeld -->
+        <h1 class="h3 mb-3 fw-normal">
+            {{ $t("message.registration") }}
+        </h1>
+
+        <form @submit.prevent="formRegister">
+            <!-- Eingabefeld für Nutzernamen -->
+            <FloatingLabelInput
+                v-model="username"
+                type="text"
+                :label="$t('form.username')"
+            />
+
+            <!-- Eingabefeld für E-Mail-Adresse -->
+            <FloatingLabelInput
+                v-model="email"
+                type="email"
+                :label="$t('form.emailAddress')"
+            />
+
+            <!-- Passwort-Validierungs-Komponente -->
+            <PasswordValidator v-model="passwordModel" />
+
+            <!-- Absende Knopf für E-Mail-Adresse -->
+            <button
+                type="submit"
+                class="w-100 btn btn-lg btn-primary"
+            >
+                {{ $t("message.signUp") }}
+            </button>
+        </form>
+
+        <!-- Zurück zur Anmeldung -->
+        <router-link to="/">
+            <button class="w-100 btn btn-lg btn-secondary mt-2">
+                {{ $t("message.close") }}
+            </button>
+        </router-link>
+    </FormLayout>
+</template>
+<style scoped>
+</style>