153 lines
4.9 KiB
Vue
153 lines
4.9 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])
|
|
}
|
|
})
|
|
const form = reactive({
|
|
email: '',
|
|
verificationToken: '',
|
|
password: '',
|
|
})
|
|
|
|
const errors = reactive({})
|
|
const { request } = useAjax()
|
|
|
|
const isValid = computed(() => {
|
|
errors.email = '';
|
|
errors.verificationToken = '';
|
|
errors.password = '';
|
|
|
|
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'
|
|
}
|
|
|
|
if (!form.verificationToken) {
|
|
errors.verificationToken = 'Bitte gib den Sicherheitsschlüssel, den du per E-Mail erhalten hast, ein'
|
|
}
|
|
|
|
if (!form.password) {
|
|
errors.password = 'Bitte gib ein Passwort ein'
|
|
} else if (form.password.length < 2) {
|
|
errors.password = 'Das Passwort muss mindestens 12 Zeichen lang sein'
|
|
}
|
|
|
|
if (form.password !== form.password_confirmation) {
|
|
errors.password = 'Das Passwort und die Wiederholung stimmen nicht überein'
|
|
}
|
|
|
|
return !errors.password && !errors.email && !errors.verificationToken
|
|
})
|
|
|
|
async function submit() {
|
|
|
|
if (!isValid.value) return false
|
|
|
|
const data = await request("/api/v1/register/confirmEmail", {
|
|
method: "POST",
|
|
body: {
|
|
"email": form.email,
|
|
"verificationToken": form.verificationToken,
|
|
"password": form.password,
|
|
}
|
|
});
|
|
|
|
if (data.error_types) {
|
|
Object.keys(data.error_types).forEach((key) => {
|
|
if (key in errors) {
|
|
errors[key] = data.error_types[key]
|
|
}
|
|
});
|
|
|
|
} else {
|
|
toast.success(data.message)
|
|
window.location.href = '/login';
|
|
}
|
|
return;
|
|
}
|
|
|
|
function resetPassword() {
|
|
window.location.href = '/reset-password';
|
|
}
|
|
|
|
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout title='E-Mail bestätigen' :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;">
|
|
<p>
|
|
Bitte prüfe dein E-Mail-Postfach.<br />
|
|
Solltest du keinen Aktivierungsschlüssel erhalten haben, kontaktiere bitte einen Administrator.
|
|
</p>
|
|
<table>
|
|
<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>
|
|
<th>Sicherheitsschlüssel</th>
|
|
<td>
|
|
<input type="text" name="verificationToken" id="verificationToken" v-model="form.verificationToken" />
|
|
<ErrorText :message="errors.verificationToken" />
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th>Dein neues Passwort</th>
|
|
<td><input type="password" name="password" id="password" v-model="form.password" /></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th>Passwort (wiederholen)</th>
|
|
<td>
|
|
<input type="password" name="password_retype" id="password_retype" v-model="form.password_confirmation" />
|
|
<ErrorText :message="errors.password" />
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td colspan="2">
|
|
<input type="submit" value="E-Mail validieren" style="margin-top: 20px;" />
|
|
<input type="button" @click="resetPassword" style="margin-top: 20px; margin-left: 20px;" value="Validierungscode neu zusenden" />
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</shadowed-box>
|
|
</form>
|
|
</AppLayout>
|
|
</template>
|
|
|
|
<style>
|
|
th {
|
|
width: 150px;
|
|
}
|
|
|
|
</style>
|