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