mareike/app/Domains/UserManagement/Views/Registration.vue

<script setup>
import AppLayout from '../../../../resources/js/layouts/AppLayout.vue'
import {computed, onMounted, reactive, ref} from 'vue'
import { toast } from 'vue3-toastify'
import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
import {useAjax} from "../../../../resources/js/components/ajaxHandler.js";
import ErrorText from "../../../Views/Components/ErrorText.vue";


const props = defineProps({
    navbar: Object,
    tenant: String,
    user: Object,
    currentPath: String,
    errors: Object,
    availableLocalGroups: Array,
})

onMounted(() => {
    if (undefined !== props.errors && undefined !== props.errors.username) {
        toast.error(props.errors.username[0])
    }
})

//console.log(props.errors.password[0])
const username = ref('')
const password = ref('')

const form = reactive({
    firstname: '',
    lastname: '',
    nickname: '',
    email: '',
    localGroup: '',
    password: '',
    password_confirmation: ''
})

const errors = reactive({})
const { request } = useAjax()

const isValid = computed(() => {
    errors.firstname = ''
    errors.lastname = ''
    errors.localGroup = ''
    errors.email = ''


    if (!form.firstname) {
        errors.firstname = 'Bitte gib deinen Vornamen ein'
    }

    if (!form.lastname) {
        errors.lastname = 'Bitte gib deinen Nachnamen ein'
    }

    if (!form.localGroup) {
        errors.localGroup = 'Bitte gib deinen Stamm an'
    }


    if (!form.email) {
        errors.email = 'Bitte gib deine E-Mail-Adresse ein'
    } else if (!/^\S+@\S+\.\S+$/.test(form.email)) {
        errors.email = 'Ungültige E-Mail'
    }

    return !errors.password && !errors.firstname && !errors.lastname && !errors.localGroup
})

async function submit() {

    if (!isValid.value) return false

    const data = await request("/api/v1/register", {
        method: "POST",
        body: {
            "firstname": form.firstname,
            "lastname": form.lastname,
            'nickname': form.nickname,
            "email": form.email,
            "localGroup": form.localGroup,
        }
    });

    if (data.status === 'error') {
        toast.error(data.message);
    } else {
        toast.success(data.message)
        window.location.href = '/register/verifyEmail';
    }

    return;
}


const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
</script>

<template>
    <AppLayout title='Registrieren' :user="props.user" :navbar="props.navbar" :tenant="props.tenant" :currentPath="props.currentPath">
        <form method="POST" action="/register" @submit.prevent="submit">
            <input type="hidden" name="_token" :value="csrfToken" />
            <shadowed-box style="width: 75%; margin: 150px auto; padding: 20px;">
                <table>
                    <tr>
                        <th>Vorname</th>
                        <td>
                            <input type="text" name="firstname" id="firstname" v-model="form.firstname" />
                            <ErrorText :message="errors.firstname" />
                        </td>
                    </tr>

                    <tr>
                        <th>Nachname</th>
                        <td>
                            <input type="text" name="lastname" id="lastname" v-model="form.lastname" />
                            <ErrorText :message="errors.lastname" />
                        </td>
                    </tr>

                    <tr>
                        <th>
                            Pfadi-Name*<br />
                            <small>*Falls vorhanden</small>
                        </th>
                        <td>
                            <input type="text" name="nickname" id="nickname" v-model="form.nickname" />
                        </td>
                    </tr>

                    <tr>
                        <th>E-Mail-Adresse</th>
                        <td>
                            <input type="email" name="email" id="email" v-model="form.email" />
                            <ErrorText :message="errors.email" />
                        </td>
                    </tr>

                    <tr v-if="props.tenant.slug === 'lv'">
                        <th>Stamm</th>
                        <td>
                            <select name="localgroup" v-model="form.localGroup">
                                <option v-for="localGroup in props.availableLocalGroups" :value="localGroup.slug">{{localGroup.name}}</option>
                            </select>
                            <ErrorText :message="errors.localGroup" />
                        </td>
                    </tr>

                    <tr>
                        <td colspan="2">
                            <input type="submit" value="Registrieren" style="margin-top: 20px;" />
                        </td>
                    </tr>
                </table>
            </shadowed-box>
        </form>
    </AppLayout>
</template>

<style>
    th {
        width: 150px;
    }

</style>