1
1
<template >
2
- <div >
3
- <div >
4
- <v-layout justify-center >
5
- <i class =" fab fa-github-square i-github" ></i >
6
- </v-layout >
7
- </div >
8
- <v-btn class =" btn-login" v-if =" !isLoading" outline @click =" login" >Login with GitHub</v-btn >
9
- <v-btn class =" btn-login" v-if =" isLoading" outline >
10
- <img src =" @/assets/loaders/bars.svg" alt =" loading..." >
2
+ <v-layout align-center justify-center >
3
+ <v-btn dark class =" btn-login" v-if =" !isLoading" @click =" login" >
4
+ <v-icon dark left >fab fa-github</v-icon >Login with GitHub
11
5
</v-btn >
12
- </div >
6
+ <v-btn dark class =" btn-login" v-if =" isLoading" >
7
+ <img src =" @/assets/loaders/bars.svg" alt =" loading..." />
8
+ </v-btn >
9
+ </v-layout >
13
10
</template >
14
11
15
12
<script >
16
- import axios from ' axios' ;
17
- import AxiosHelper from ' ../../config/AxiosHelper' ;
13
+ import axios from " axios" ;
14
+ import AxiosHelper from " ../../config/AxiosHelper" ;
15
+ import AuthService from " ../../services/authService" ;
16
+
17
+ const authService = new AuthService ();
18
18
19
19
export default {
20
- name: ' Login' ,
20
+ name: " Login" ,
21
21
data () {
22
22
return {
23
23
isLoading: false
24
24
};
25
25
},
26
26
methods: {
27
27
login () {
28
- window .location = ` ${ AxiosHelper .authUrl } ?client_id=${
29
- process .env .VUE_APP_CLIENT_ID
30
- } &scope=user%20repo%20read:org` ;
28
+ window .location = ` ${ AxiosHelper .authUrl } ?client_id=${ process .env .VUE_APP_CLIENT_ID } &scope=user%20repo%20read:org` ;
31
29
}
32
30
},
33
31
created : function () {
32
+ if (authService .isLoggedIn ()) {
33
+ window .location = AxiosHelper .homeUrl ;
34
+ }
34
35
const code = window .location .href .match (/ \? code=(. * )/ );
35
36
if (code) {
36
37
this .isLoading = true ;
@@ -42,12 +43,12 @@ export default {
42
43
} &client_secret=${
43
44
process .env .VUE_APP_CLIENT_SECRET
44
45
} &code=${ code[1 ].slice (0 , 20 )} `
45
- }).then (res => {
46
- this .isLoading = false ;
47
- var token = res .data .match (/ access_token=(. * )/ )[1 ].slice (0 ,40 );
48
- console .log (" access_token:" + token);
49
- localStorage .setItem (' token' , token);
46
+ })
47
+ .then (res => {
48
+ var token = res .data .match (/ access_token=(. * )/ )[1 ].slice (0 , 40 );
49
+ localStorage .setItem (" token" , token);
50
50
window .location = AxiosHelper .homeUrl ;
51
+ this .isLoading = false ;
51
52
})
52
53
.catch (err => {
53
54
this .isLoading = false ;
@@ -60,10 +61,11 @@ export default {
60
61
61
62
<style lang="scss" scoped>
62
63
.i-github {
63
- font-size : 64 px ;
64
+ font-size : 80 px ;
64
65
}
65
66
66
67
.btn-login {
67
- width : 170px ;
68
+ width : 200px ;
69
+ height : 40px ;
68
70
}
69
71
</style >
0 commit comments