keksCloud
/
keksAccountGUI
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

YoLo Love coding? here's the secret reason why

This commit is contained in:
Kekskurse 2019-09-24 19:00:22 +02:00
parent 21fb038128
commit 8f3c2754d2
9 changed files with 332 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -1 +1 @@
VUE_APP_API_URL=http://localhost:8000
VUE_APP_API_URL=http://localhost:8000/

5
package-lock.json generated
View File

@ -12074,6 +12074,11 @@
}
}
},
"vue-recaptcha": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/vue-recaptcha/-/vue-recaptcha-1.2.0.tgz",
"integrity": "sha512-zgt8bAmlHbLT2XY0diwA/UgGcbp1cOYXJ8za17WM1zlOC8EiO0mpGvYzXaR1aeU0gaiv1qLO6GOUwQVVAjgwMw=="
},
"vue-router": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.2.tgz",

1
package.json
View File

@ -12,6 +12,7 @@
"core-js": "^2.6.9",
"vue": "^2.6.10",
"vue-image-crop-upload": "^2.5.0",
"vue-recaptcha": "^1.2.0",
"vue-router": "^3.1.2",
"vuetify": "^2.0.5",
"vuex": "^3.1.1"

2
public/index.html
View File

@ -8,6 +8,8 @@
<title>keksaccountgui</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
</script>
</head>
<body>
<noscript>

21
src/components/Login.vue
View File

@ -19,6 +19,7 @@
type="password"
v-model="password"
></v-text-field>
<div v-if="recaptcha"><vue-recaptcha @verify="onCaptchaVerified" :sitekey="captchaCode"></vue-recaptcha></div>
<v-checkbox
v-model="logintoMainAccount"
:label="loginText"
@ -41,6 +42,7 @@
<script>
import UserService from '../services/User'
import VueRecaptcha from 'vue-recaptcha';
export default {
data () {
@ -51,16 +53,22 @@
nameBig: '',
nameSmall: '',
loginText: '',
logintoMainAccount: true
logintoMainAccount: true,
recaptcha: false,
captchaCode: '',
recaptchaToken: ''
}
},
props: [
'loginToService',
'serviceName'
],
components: {
VueRecaptcha
},
methods: {
'login': function () {
UserService.login(this.username, this.password).then((res) => {
UserService.login(this.username, this.password, this.recaptchaToken).then((res) => {
this.errorMessage = '';
UserService.setAccessToken(res.data.data["access_token"]);
console.log("Login ok, dispatch event");
@ -79,12 +87,21 @@
return true;
}
return false;
},
onCaptchaVerified: function (recaptchaToken) {
this.recaptchaToken = recaptchaToken;
}
},
mounted: function() {
this.nameBig = this.$store.getters.getSettingValue("name_big");
this.nameSmall = this.$store.getters.getSettingValue("name_small");
this.recaptcha = this.$store.getters.getSettingValue("");
this.loginText = "Login to "+this.nameBig+this.nameSmall+" too"
UserService.getCaptchaSettings().then((res) => {
this.captchaCode = res.data.data.key;
this.recaptcha = res.data.data.login;
});
}
}
</script>

12
src/router/index.js
View File

@ -9,6 +9,8 @@ import ListApps from '../views/ListApps'
import AppDetails from '../views/AppDetails'
import NewApp from '../views/NewApp'
import Mail from '../views/Mail'
import Invite from '../views/Invite'
import Register from '../views/Register'
Vue.use(Router)
@ -33,6 +35,16 @@ export default new Router({
name: 'Login',
component: Login
},
{
path: '/invited',
name: 'Invite',
component: Invite
},
{
path: '/register',
name: 'Register',
component: Register
},
{
path: '/oauth',
name: 'oAuthPermission',

12
src/services/User.js
View File

@ -1,8 +1,8 @@
import Api from '@/services/Api'
export default {
login(username, password) {
return Api().post('/v1/user/login', {username: username, password: password});
login(username, password, recaptchaToken) {
return Api().post('/v1/user/login', {username: username, password: password, "g-recaptcha-response": recaptchaToken});
},
setAccessToken(access_token) {
@ -20,5 +20,11 @@ export default {
},
getMails() {
return Api().get('/v1/user/me/mails');
},
getCaptchaSettings() {
return Api().get("/v1/user/captcha");
},
getInviteCodeInfo(code) {
return Api().get("/v1/user/invites?code="+code)
}
}
}

133
src/views/Invite.vue Normal file
View File

@ -0,0 +1,133 @@
<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>

150
src/views/Register.vue Normal file
View File

@ -0,0 +1,150 @@
<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>