217 lines
7.9 KiB
Vue
217 lines
7.9 KiB
Vue
<template>
|
|
<div style="min-height: 100pc;" class="bg">
|
|
<div class="header2">
|
|
</div>
|
|
<v-container grid-list-md>
|
|
<v-layout row wrap>
|
|
<v-flex md4></v-flex>
|
|
<v-flex md4 v-if="!$store.state.loggedIn" style="">
|
|
<template>
|
|
<v-card
|
|
class="mx-auto"
|
|
>
|
|
<v-card-title>Register</v-card-title>
|
|
<v-card-text v-if="success">
|
|
Your account is register, you can now login to your Account.<br><br>
|
|
<hr><br>
|
|
<login-component></login-component>
|
|
|
|
</v-card-text>
|
|
<v-card-text v-if="!success">
|
|
<p>Register a new Account</p>
|
|
|
|
<v-alert type="error" v-if="errorMsg">
|
|
{{ errorMsg }}
|
|
</v-alert>
|
|
|
|
<v-text-field
|
|
label="Username"
|
|
value=""
|
|
v-model="username"
|
|
:disabled=usernameForced
|
|
:error-messages=usernameError
|
|
:error=usernameErrorFlage
|
|
></v-text-field>
|
|
<v-text-field
|
|
label="Password"
|
|
value=""
|
|
v-model="password"
|
|
type="password"
|
|
:error-messages=passwordError
|
|
:error=passwordErrorFlag
|
|
></v-text-field>
|
|
<v-text-field
|
|
label="E-Mail"
|
|
value=""
|
|
v-model="mail"
|
|
:error-messages=mailError
|
|
:error=mailErrorFlag
|
|
></v-text-field>
|
|
|
|
<div v-if="recaptcha"><vue-recaptcha @verify="onCaptchaVerified" :sitekey="captchaCode"></vue-recaptcha></div>
|
|
|
|
<v-btn
|
|
color="success"
|
|
@click="register"
|
|
>Register</v-btn>
|
|
|
|
|
|
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
</v-flex>
|
|
<v-flex md4 v-if="$store.state.loggedIn">
|
|
<template>
|
|
<v-card
|
|
class="mx-auto"
|
|
>
|
|
<v-card-title>Login</v-card-title>
|
|
<v-card-text><p>Hallo {{$store.getters.getMe["username"]}}, du bist bereits eingeloggt.</p></v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
</v-flex>
|
|
|
|
|
|
|
|
</v-layout>
|
|
</v-container>
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import ServerService from '../services/Server'
|
|
import UserService from '../services/User'
|
|
import VueRecaptcha from 'vue-recaptcha';
|
|
import LoginComponent from '../components/Login'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
success: true,
|
|
inviteCode: '',
|
|
errorMsg: '',
|
|
username: '',
|
|
usernameForced: false,
|
|
password: '',
|
|
mail: '',
|
|
recaptcha: false,
|
|
captchaCode: '',
|
|
recaptchaToken: '',
|
|
usernameErrorFlag: false,
|
|
usernameError: "",
|
|
passwordErrorFlag: false,
|
|
passwordError: "",
|
|
mailErrorFlag: false,
|
|
mailError: ""
|
|
|
|
}
|
|
},
|
|
components: {
|
|
VueRecaptcha,
|
|
LoginComponent
|
|
},
|
|
methods: {
|
|
onCaptchaVerified: function (recaptchaToken) {
|
|
this.recaptchaToken = recaptchaToken;
|
|
},
|
|
register: function () {
|
|
UserService.register(this.username, this.password, this.mail, this.$route.query.code, this.recaptchaToken).then((res) => {
|
|
this.success = true;
|
|
}).catch((error) => {
|
|
if(error.response.status == 422){
|
|
this.usernameErrorFlag = false;
|
|
this.usernameError = "";
|
|
this.passwordErrorFlag = false;
|
|
this.passwordError = "";
|
|
this.mailErrorFlag = false;
|
|
this.mailError = "";
|
|
if(error.response.data.data.username != undefined) {
|
|
this.usernameErrorFlag = true;
|
|
this.usernameError = error.response.data.data.username[0]
|
|
}
|
|
if(error.response.data.data.password != undefined) {
|
|
this.passwordErrorFlag = true;
|
|
this.passwordError = error.response.data.data.password[0]
|
|
}
|
|
if(error.response.data.data.mail != undefined) {
|
|
this.mailErrorFlag = true;
|
|
this.mailError = error.response.data.data.mail[0]
|
|
}
|
|
console.log(error.response.data.data);
|
|
} else {
|
|
this.errorMsg = error.response.data.msg;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
mounted: function() {
|
|
this.nameBig = this.$store.getters.getSettingValue("name_big");
|
|
this.nameSmall = this.$store.getters.getSettingValue("name_small");
|
|
if(this.$route.query.code) {
|
|
UserService.getInviteCodeInfo(this.$route.query.code).then((res) => {
|
|
if(res.data.data.usable == false) {
|
|
this.errorMsg="Invite code not valide";
|
|
} else {
|
|
if(res.data.data.username != "") {
|
|
this.usernameForced = true;
|
|
this.username = res.data.data.username;
|
|
}
|
|
}
|
|
}).catch((res) => {
|
|
this.errorMsg="Invite code not valide";
|
|
});
|
|
}
|
|
UserService.getCaptchaSettings().then((res) => {
|
|
this.captchaCode = res.data.data.key;
|
|
this.recaptcha = res.data.data.register;
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.bg {
|
|
background-image: url('~@/assets/texture-1485529_1920.jpg');
|
|
}
|
|
.header2 {
|
|
background-image: url('~@/assets/texture-1485529_1920.jpg');
|
|
background-repeat: no-repeat;
|
|
margin-top: -100px;
|
|
height: 50vh;
|
|
text-align: center;
|
|
}
|
|
.header h1{
|
|
padding-top: 200px;
|
|
font-size: 56px !important;
|
|
font-weight: 400;
|
|
line-height: 32px !important;
|
|
letter-spacing: normal !important;
|
|
}
|
|
.header h1 .small{
|
|
font-weight: 300 !important;
|
|
}
|
|
.header h2{
|
|
padding-top: 30px;
|
|
font-size: 34px !important;
|
|
font-weight: 300;
|
|
line-height: 32px !important;
|
|
letter-spacing: normal !important;
|
|
}
|
|
h1{
|
|
font-weight: 300;
|
|
line-height: 32px !important;
|
|
letter-spacing: normal !important;
|
|
}
|
|
h2{
|
|
font-weight: 300;
|
|
line-height: 32px !important;
|
|
letter-spacing: normal !important;
|
|
}
|
|
</style>
|