167 lines
4.8 KiB
Vue
167 lines
4.8 KiB
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'>
|
|
<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>
|