keksAccountGUI/src/views/Invite.vue

134 lines
4.1 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>Invite</v-card-title>
<v-card-text>
<p>If you have an invite code, enter it here to register a new account.</p>
<v-alert type="error" v-if="errorMsg">
{{ errorMsg }}
</v-alert>
<v-text-field
label="Invite Code"
value=""
v-model="code"
></v-text-field>
<v-btn
color="success"
@click="checkInviteCode"
>Check Invite Code</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'
export default {
data () {
return {
code: '',
errorMsg: ''
}
},
components: {
},
methods: {
checkInviteCode: function () {
UserService.getInviteCodeInfo(this.code).then((res) => {
if(res.data.data.usable) {
this.errorMsg = "";
this.$router.push({name: 'Register', query: {code: this.code}});
} else {
this.errorMsg = "Invite code not valide";
}
console.log(res.data);
}).catch((res) => {
if(res.response.data.msg == "Resource not Found") {
this.errorMsg = "Invite code not found";
}
});
}
},
mounted: function() {
this.nameBig = this.$store.getters.getSettingValue("name_big");
this.nameSmall = this.$store.getters.getSettingValue("name_small");
}
}
</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>