142 lines
4.9 KiB
Vue
142 lines
4.9 KiB
Vue
<template>
|
|
<div style="">
|
|
<div class="header">
|
|
</div>
|
|
<v-container grid-list-md>
|
|
<v-layout row wrap>
|
|
<v-flex md4></v-flex>
|
|
<v-flex md4 v-if="!$store.state.loggedIn">
|
|
<Login loginToService="true" serviceName="Jenkins" @loggedIn="getAppData();"></Login>
|
|
</v-flex>
|
|
<v-flex md4 v-if="$store.state.loggedIn && app != null">
|
|
<h1>Login to {{ app.name }}</h1>
|
|
<p>{{ app.description }}</p>
|
|
<hr>
|
|
<div style="margin-top:20px;margin-bottom:20px;">
|
|
This App get the following permissions:<br /><br />
|
|
<ul>
|
|
<li v-if="app.access.read_profile">Read your Profile information</li>
|
|
<li v-if="app.access.update_profile">>Update your Profile information</li>
|
|
|
|
<li v-if="app.access.read_apps">>Read your App information</li>
|
|
<li v-if="app.access.update_apps">>Update your App information</li>
|
|
|
|
<li v-if="app.access.read_access">>Read your Access information</li>
|
|
<li v-if="app.access.update_access">>Update your Access information</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<v-btn color="success" @click="allowAccess()" :disabled="disabledLoginButton" style="width: 100%;">Login to {{ app.name }}</v-btn>
|
|
<br><br>
|
|
|
|
<a :href="app.url">Go to App-Webpage</a>
|
|
</v-flex>
|
|
|
|
</v-layout>
|
|
</v-container>
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import ServerService from '../services/Server'
|
|
import UserService from '../services/User'
|
|
import LoginComponent from '../components/Login'
|
|
import AppsService from '../services/Apps'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
nameBig: '',
|
|
nameSmall: '',
|
|
username: '',
|
|
password: '',
|
|
errorMessage: '',
|
|
app: null,
|
|
disabledLoginButton: true,
|
|
appId: null
|
|
}
|
|
},
|
|
components: {
|
|
'Login': LoginComponent
|
|
},
|
|
methods: {
|
|
getAppData: function () {
|
|
AppsService.getAppByKey(this.$route.query.client_id).then((res) => {
|
|
this.appId = res.data.data[0].id
|
|
AppsService.getAccess(res.data.data[0].id).then((access) => {
|
|
if(access.data.data.status == "allowed") {
|
|
if(res.data.data[0].properties.stopAutoRedirect) {
|
|
this.disabledLoginButton = false;
|
|
console.log("Disabled Auto redirect");
|
|
} else {
|
|
this.allowAccess();
|
|
}
|
|
console.log("ALLOWED");
|
|
} else {
|
|
this.disabledLoginButton = false;
|
|
}
|
|
console.log("Access Data", res.data);
|
|
});
|
|
console.log("App Data", res.data);
|
|
this.app = res.data.data[0];
|
|
});
|
|
},
|
|
allowAccess: function () {
|
|
console.log(this.$route.query);
|
|
AppsService.allowAccess(this.appId, this.$route.query.redirect_uri, this.$route.query.scope, this.$route.query.state).then((res) => {
|
|
console.log("App Access", res);
|
|
location.href=res.data.data.redirectUrl
|
|
});
|
|
}
|
|
|
|
},
|
|
mounted: function() {
|
|
|
|
this.nameBig = this.$store.getters.getSettingValue("name_big");
|
|
this.nameSmall = this.$store.getters.getSettingValue("name_small");
|
|
this.getAppData();
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.header {
|
|
background-image: url('~@/assets/texture-1485529_1920.jpg');
|
|
background-repeat: no-repeat;
|
|
margin-top: -100px;
|
|
height: 30vh;
|
|
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>
|