Skip to content

Commit 39955e6

Browse files
committed
Token proxy
1 parent 884d4ba commit 39955e6

File tree

4 files changed

+192
-0
lines changed

4 files changed

+192
-0
lines changed

src/App.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ $shocker-limit-color: #f16051;
4242
--main-text-hover-color: #282828;
4343
--main-seperator-color: #373b3e;
4444
color: #000;
45+
--invert-color: #fff;
4546

4647
--hover-darken-color: #e0e0e0;
4748
--secondary-color: #666666;
@@ -74,6 +75,7 @@ $shocker-limit-color: #f16051;
7475
--main-text-hover-color: #c8c8c8;
7576
--main-seperator-color: #373b3e;
7677
color: #fff;
78+
--invert-color: #000;
7779

7880
--hover-darken-color: #373b3e;
7981
--secondary-color: #c7c7c7;
@@ -94,6 +96,8 @@ $shocker-limit-color: #f16051;
9496
--bs-table-hover-bg: #323539;
9597
--bs-table-hover-color: #fff;
9698
color: #fff;
99+
100+
97101
border-color: #373b3e;
98102
}
99103

src/router/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,10 @@ const routes = [
182182
component: lazyLoad('public/proxy/ShareCodeProxy'),
183183
props: true
184184
},
185+
{
186+
path: 'proxy/token',
187+
component: lazyLoad('public/proxy/TokenProxy')
188+
},
185189
]
186190
}
187191
]
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
3+
</template>
4+
5+
<script>
6+
export default {
7+
data() {
8+
return {
9+
permissions: [
10+
{
11+
name: 'Read',
12+
value: 'read'
13+
},
14+
{
15+
name: 'Write',
16+
value: 'write'
17+
},
18+
{
19+
name: 'Execute',
20+
value: 'execute'
21+
}
22+
],
23+
selectedPermissions: []
24+
}
25+
}
26+
27+
}
28+
</script>
29+
30+
31+
<style scoped lang="scss">
32+
33+
</style>

src/views/public/proxy/TokenProxy.vue

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<template>
2+
<div class="base-wrap">
3+
<b-container class="token-create">
4+
<b-row align-h="center">
5+
<b-col md="auto">
6+
<h1>API Token Request</h1>
7+
</b-col>
8+
</b-row>
9+
<br />
10+
<div style="text-align: center;" v-if="error">
11+
<h1>Invalid Request</h1>
12+
<p>Make sure `name`, `redirect_uri` and `permissions` are set as get parameters</p>
13+
</div>
14+
<div v-else-if="loading">
15+
<loading v-if="loading"></loading>
16+
</div>
17+
<div v-else-if="redirectedUri !== null">
18+
<b-row style="text-align: center;" align-h="center">
19+
<b-col md="auto">
20+
<h2>Success!</h2>
21+
<h5>You can now return to {{ name }}</h5>
22+
<br/>
23+
<br/>
24+
<b-button @click="redirectToUri">Open URI again</b-button>
25+
</b-col>
26+
</b-row>
27+
</div>
28+
<div v-else>
29+
<b-row style="text-align: center;" align-h="center">
30+
<b-col md="auto">
31+
<h5>{{ name }} is requesting access<br>to your account.</h5>
32+
</b-col>
33+
</b-row>
34+
<br />
35+
<b-row>
36+
<b-col>
37+
<p>Permissions:</p>
38+
<ul>
39+
<li v-for="permission in permissions" :key="permission">{{ permission }}</li>
40+
</ul>
41+
</b-col>
42+
</b-row>
43+
44+
<br />
45+
46+
<b-row style="text-align: center;" align-h="center">
47+
<b-col md="auto">
48+
<h6>You will be redirected to <span class="redirect-backdrop">{{ redirectUri
49+
}}</span><br />which should be a part of {{ name }}<br /><br /></h6>
50+
<p>Your new API Token will be shared with the application at this address.<br />
51+
Are you sure you want to proceed?</p>
52+
</b-col>
53+
</b-row>
54+
<br />
55+
<b-row align-h="center">
56+
<b-col md="auto">
57+
<loading-button @click="proceed" :loading="loadingProceed" text="Continue"></loading-button>
58+
</b-col>
59+
</b-row>
60+
</div>
61+
62+
</b-container>
63+
</div>
64+
</template>
65+
66+
<script>
67+
import LoadingButton from '../../utils/LoadingButton.vue';
68+
import Loading from '../../utils/Loading.vue';
69+
70+
export default {
71+
components: { LoadingButton, Loading },
72+
data() {
73+
return {
74+
name: null,
75+
redirectUri: null,
76+
permissions: null,
77+
loading: true,
78+
error: false,
79+
loadingProceed: false,
80+
redirectedUri: null
81+
}
82+
},
83+
async beforeMount() {
84+
// Read get params
85+
this.name = this.$route.query.name;
86+
this.redirectUri = this.$route.query.redirect_uri;
87+
this.permissions = this.$route.query.permissions.split(',');
88+
89+
if (!this.name || !this.redirectUri || !this.permissions || !this.permissions.length) {
90+
this.error = true;
91+
return;
92+
}
93+
94+
this.loading = true;
95+
var loggedIn = await utils.checkIfLoggedIn();
96+
this.loading = false;
97+
98+
if (!loggedIn) {
99+
this.login();
100+
return;
101+
}
102+
},
103+
methods: {
104+
login() {
105+
this.$store.dispatch('setReturnUrl', "/public/proxy/token/?redirect_uri=" + this.redirectUri + "&permissions=" + this.permissions);
106+
this.$router.push("/account/login");
107+
},
108+
async proceed() {
109+
if(this.loadingProceed) return;
110+
this.loadingProceed = true;
111+
112+
const res = await apiCall.makeCall('POST', `1/tokens`, {
113+
name: this.name,
114+
validUntil: null,
115+
permissions: this.permissions
116+
});
117+
if (res === undefined || res.status !== 200) {
118+
this.$swal('Error', 'Error while adding new token', 'error');
119+
return;
120+
}
121+
122+
this.redirectedUri = this.redirectUri.replace("%", res.data.data.token);
123+
this.redirectToUri();
124+
this.loadingProceed = false;
125+
},
126+
redirectToUri() {
127+
window.location = this.redirectedUri;
128+
}
129+
}
130+
131+
}
132+
</script>
133+
134+
<style scoped>
135+
.redirect-backdrop {
136+
background-color: var(--main-text-hover-color);
137+
padding: 0 5px;
138+
border-radius: 5px;
139+
color: var(--invert-color);
140+
}
141+
142+
.token-create {
143+
max-width: 800px;
144+
width: 500px;
145+
min-height: 600px;
146+
border: 1px solid var(--main-text-hover-color);
147+
border-radius: 15px;
148+
padding: 20px;
149+
background-color: var(--secondary-background-color);
150+
}
151+
</style>

0 commit comments

Comments
 (0)