keksAccountGUI/src/views/Register.vue

151 lines
4.5 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>
<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
></v-text-field>
<v-text-field
label="Password"
value=""
v-model="password"
></v-text-field>
<v-text-field
label="E-Mail"
value=""
v-model="mail"
></v-text-field>
</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'
export default {
data () {
return {
inviteCode: '',
errorMsg: '',
username: '',
usernameForced: false,
password: '',
mail: ''
}
},
components: {
},
methods: {
},
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";
});
}
console.log(this.$route.query.code)
}
}
</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>