kekscloud/keksAccountGUI
Archived
1
0
Fork 0
Code Issues 2 Pull requests Releases Wiki Activity

YoLo Love coding? here's the secret reason why

Browse source
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": { "vue-router": {
"version": "3.1.2", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.2.tgz", "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", "core-js": "^2.6.9",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-image-crop-upload": "^2.5.0", "vue-image-crop-upload": "^2.5.0",
"vue-recaptcha": "^1.2.0",
"vue-router": "^3.1.2", "vue-router": "^3.1.2",
"vuetify": "^2.0.5", "vuetify": "^2.0.5",
"vuex": "^3.1.1" "vuex": "^3.1.1"

2
public/index.html
View file

@ -8,6 +8,8 @@
<title>keksaccountgui</title> <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=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons"> <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> </head>
<body> <body>
<noscript> <noscript>

21
src/components/Login.vue
View file

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

12
src/router/index.js
View file

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

10
src/services/User.js
View file

@ -1,8 +1,8 @@
import Api from '@/services/Api' import Api from '@/services/Api'
export default { export default {
login(username, password) { login(username, password, recaptchaToken) {
return Api().post('/v1/user/login', {username: username, password: password}); return Api().post('/v1/user/login', {username: username, password: password, "g-recaptcha-response": recaptchaToken});
}, },
setAccessToken(access_token) { setAccessToken(access_token) {
@ -20,5 +20,11 @@ export default {
}, },
getMails() { getMails() {
return Api().get('/v1/user/me/mails'); 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>