146 lines
4.2 KiB
Vue
146 lines
4.2 KiB
Vue
<template>
|
|
<div>
|
|
<div class="my-5 text-center offset-2 col-8">
|
|
<img src="~@fortawesome/fontawesome-pro/svgs/solid/door-open.svg" class="img-fluid" />
|
|
</div>
|
|
<div class="text-center">
|
|
<h2>Jetzt registrieren</h2>
|
|
<p>
|
|
oder
|
|
<a class="text-vue2" role="button" @click="changeComponent('LoginUser')"
|
|
>melden Sie sich mit Ihrem Konto an</a
|
|
>
|
|
</p>
|
|
</div>
|
|
<div class="alert alert-danger col-md-8 offset-2" v-if="error"> {{ errorDisplayText }}</div>
|
|
|
|
|
|
<Form @submit="submitData" :validation-schema="schema" v-slot="{ errors }">
|
|
<div class="form-row">
|
|
<div class="form-group col-md-8 offset-2">
|
|
<label for="email"><strong>E-Mail-Adresse</strong></label>
|
|
<Field as="input" name="email" type="email" class="form-control" id="email" />
|
|
<small class="text-danger" v-if="errors.email">{{errors.email}}</small>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group col-md-8 offset-2">
|
|
<label for="password"><strong>Passwort</strong></label>
|
|
<Field type="password" name="password" class="form-control" id="password" />
|
|
<small class="text-danger" v-if="errors.password">{{errors.password}}</small>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group col-md-8 offset-2">
|
|
<label for="confirmPassword"
|
|
><strong>Passwort wiederholen</strong></label
|
|
>
|
|
<Field type="password" name="confirmPassword" class="form-control" id="confirmPassword" />
|
|
<small class="text-danger" v-if="errors.confirmPassword">{{errors.confirmPassword}}</small>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="form-row mt-3">
|
|
<div class="form-group col-md-8 offset-2">
|
|
<div class="d-grid">
|
|
<button class="btn bg-vue">
|
|
<span v-if="!isLoading">Registrieren</span>
|
|
<span v-else class="spinner-border spinner-border-sm"></span>
|
|
|
|
</button>
|
|
<button class="btn bg-vue"
|
|
@click="keyCloakLogin"
|
|
>
|
|
<span v-if="!isLoading">Keycloak Login</span>
|
|
<span v-else class="spinner-border spinner-border-sm"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Form, Field } from "vee-validate";
|
|
import * as yup from "yup";
|
|
|
|
export default {
|
|
name: "RegiterUser",
|
|
components: {
|
|
Form,
|
|
Field
|
|
},
|
|
emits: {
|
|
'change-component': (componentName) => {
|
|
if(componentName.componentName !== "LoginUser") {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
}, data() {
|
|
const schema = yup.object().shape({
|
|
email: yup.string()
|
|
.required("E-Mail Adresse wird benötigt")
|
|
.trim()
|
|
.email("Das ist keine gültige E-Mail-Adresse"),
|
|
password: yup.string()
|
|
.required("Ein Passwort wird benötigt")
|
|
.trim()
|
|
.min(6, "Das Passwort muss mindestens 6 Zeichen lang sein"),
|
|
confirmPassword: yup.string().required("Bitte wiederholen Sie Ihr Passwort")
|
|
.oneOf([yup.ref("password")], "Passwörter stimmen nicht überein")
|
|
});
|
|
return {
|
|
schema,
|
|
error: "",
|
|
isLoading: false
|
|
};
|
|
},
|
|
computed: {
|
|
errorDisplayText() {
|
|
if(this.error) {
|
|
if(this.error.includes("EMAIL_EXISTS")) {
|
|
return "Die E-Mail Adresse existiert bereits."
|
|
}
|
|
}
|
|
return "Es ist ein Fehler aufgetreten"
|
|
}
|
|
},
|
|
methods: {
|
|
keyCloakLogin() {
|
|
this.$store.dispatch("login", {
|
|
|
|
})
|
|
},
|
|
submitData(values) {
|
|
console.log(values);
|
|
this.isLoading = true;
|
|
this.error = "";
|
|
this.$store.dispatch("signup", {
|
|
email: values.email,
|
|
password: values.password
|
|
}) .then(()=> {
|
|
this.isLoading = false;
|
|
console.log(this.$store.state);
|
|
this.changeComponent("LoginUser")
|
|
})
|
|
.catch((error) => {
|
|
this.error = error.message;
|
|
this.isLoading = false;
|
|
}
|
|
)
|
|
},
|
|
changeComponent(componentName) {
|
|
this.$emit("change-component", {componentName})
|
|
;
|
|
},
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |