Skip to content

Commit ba5e8a4

Browse files
shivamluthrashivamluthra
authored
Merge pull request #26 from Torpedo99/oauth_ui
Modified Login UI
2 parents 8586200 + 7f146e0 commit ba5e8a4

File tree

8 files changed

+159
-77
lines changed

8 files changed

+159
-77
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@
99
},
1010
"dependencies": {
1111
"axios": "^0.18.0",
12+
"bootstrap": "^4.4.1",
13+
"bootstrap-vue": "^2.1.0",
1214
"core-js": "^2.6.5",
13-
"cors": "^2.8.5",
1415
"vue": "^2.6.10",
1516
"vue-router": "^3.0.3",
1617
"vuetify": "^1.5.5",

‎public/index.html

+41-32
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,43 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
7-
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
8-
<title>CodeBadge</title>
9-
<link
10-
rel="stylesheet"
11-
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
12-
/>
13-
<link
14-
rel="stylesheet"
15-
href="https://fonts.googleapis.com/css?family=Material+Icons"
16-
/>
17-
<link
18-
rel="stylesheet"
19-
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
20-
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
21-
crossorigin="anonymous"
22-
/>
23-
</head>
24-
<body>
25-
<noscript>
26-
<strong
27-
>We're sorry but codebadge doesn't work properly without JavaScript
28-
enabled. Please enable it to continue.</strong
29-
>
30-
</noscript>
31-
<div id="app"></div>
32-
<!-- built files will be auto injected -->
33-
</body>
34-
</html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=yes" />
8+
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
9+
<title>CodeBadge</title>
10+
<link
11+
href="https://fonts.googleapis.com/css?family=Playfair+Display&display=swap"
12+
rel="stylesheet"
13+
/>
14+
<link
15+
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
16+
rel="stylesheet"
17+
/>
18+
<link
19+
href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap"
20+
rel="stylesheet"
21+
/>
22+
<link
23+
href="https://fonts.googleapis.com/css?family=Material+Icons"
24+
rel="stylesheet"
25+
/>
26+
<link
27+
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
28+
rel="stylesheet"
29+
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
30+
crossorigin="anonymous"
31+
/>
32+
</head>
33+
34+
<body>
35+
<noscript>
36+
<strong>We're sorry but codebadge doesn't work properly without JavaScript
37+
enabled. Please enable it to continue.</strong>
38+
</noscript>
39+
<div id="app"></div>
40+
<!-- built files will be auto injected -->
41+
</body>
42+
43+
</html>

‎src/App.vue

+7-14
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,19 @@
11
<template>
22
<v-app>
3-
<v-toolbar color="white" app>
4-
<v-toolbar-title class="headline text-uppercase">
5-
<span>Codebadge</span>
6-
<span class="font-weight-light text-none">&nbsp;(Production Stage)</span>
7-
</v-toolbar-title>
8-
</v-toolbar>
9-
3+
<Toolbar/>
104
<v-content class="content">
11-
<router-view></router-view>
5+
<router-view />
126
</v-content>
137
</v-app>
148
</template>
159

1610
<script>
11+
import Toolbar from "./components/general/Toolbar";
12+
1713
export default {
18-
name: 'App',
19-
components: {},
20-
data() {
21-
return {
22-
//
23-
};
14+
name: "App",
15+
components: {
16+
Toolbar
2417
}
2518
};
2619
</script>

‎src/assets/loaders/bars.svg

+1-1
Loading

‎src/components/auth/Login.vue

+25-23
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,37 @@
11
<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
115
</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>
1310
</template>
1411

1512
<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();
1818
1919
export default {
20-
name: 'Login',
20+
name: "Login",
2121
data() {
2222
return {
2323
isLoading: false
2424
};
2525
},
2626
methods: {
2727
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`;
3129
}
3230
},
3331
created: function() {
32+
if (authService.isLoggedIn()) {
33+
window.location = AxiosHelper.homeUrl;
34+
}
3435
const code = window.location.href.match(/\?code=(.*)/);
3536
if (code) {
3637
this.isLoading = true;
@@ -42,12 +43,12 @@ export default {
4243
}&client_secret=${
4344
process.env.VUE_APP_CLIENT_SECRET
4445
}&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);
5050
window.location = AxiosHelper.homeUrl;
51+
this.isLoading = false;
5152
})
5253
.catch(err => {
5354
this.isLoading = false;
@@ -60,10 +61,11 @@ export default {
6061

6162
<style lang="scss" scoped>
6263
.i-github {
63-
font-size: 64px;
64+
font-size: 80px;
6465
}
6566
6667
.btn-login {
67-
width: 170px;
68+
width: 200px;
69+
height: 40px;
6870
}
6971
</style>

‎src/components/general/Toolbar.vue

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<v-toolbar color="white" app>
3+
<v-toolbar-title style="font-size: 30px; font-family: Raleway; padding-right: 20px">
4+
<span>Codebadge</span>
5+
</v-toolbar-title>
6+
<v-spacer />
7+
<div class="toolbar-contents">
8+
<v-btn flat class="toolbar-button">About Us</v-btn>
9+
<v-btn flat class="toolbar-button">Join Us</v-btn>
10+
<v-btn color="primary" @click="logout" v-if="isLogged" round>Logout</v-btn>
11+
</div>
12+
</v-toolbar>
13+
</template>
14+
15+
<script>
16+
import AxiosHelper from "../../config/AxiosHelper";
17+
import AuthService from "../../services/authService";
18+
19+
const authService = new AuthService();
20+
21+
export default {
22+
name: "Toolbar",
23+
data() {
24+
return {
25+
isLogged: false
26+
};
27+
},
28+
created: function() {
29+
this.isLogged = authService.isLoggedIn();
30+
},
31+
methods: {
32+
logout() {
33+
localStorage.removeItem("token");
34+
this.isLogged = authService.isLoggedIn();
35+
window.location = AxiosHelper.homeAuthUrl;
36+
}
37+
}
38+
};
39+
</script>
40+
41+
<style lang="scss" >
42+
.toolbar-button {
43+
padding-top: 5px;
44+
}
45+
</style>

‎src/config/AxiosHelper.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@ module.exports = {
22
baseUrl: 'https://api.github.com',
33
authUrl: 'https://github.com/login/oauth/authorize',
44
gatekeeperUrl: 'https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token',
5-
homeUrl: 'http://localhost:8080/#/home'
5+
homeUrl: 'http://localhost:8080/#/home',
6+
homeAuthUrl: 'http://localhost:8080/#/auth'
67
};

‎src/views/AuthView.vue

+36-5
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,52 @@
11
<template>
22
<div>
3-
<v-layout class="ma-5" justify-center>
4-
<Login/>
5-
</v-layout>
3+
<div class="login-menu">
4+
<v-container style="widh=200px;">
5+
<v-layout class="header1" justify-center>Welcome to CodeBadge!</v-layout>
6+
<v-layout class="header2" justify-center>TRACK ALL YOUR PROJECTS AT ONE PLACE</v-layout>
7+
<v-layout class="text1" justify-center>
8+
Having a hard time tracking all your project contributors?
9+
</v-layout>
10+
<v-layout class="text1" style="padding-top:0px;" justify-center>CodeBadge does it for you!
11+
</v-layout>
12+
<v-layout class="ma-3" align-center justify-center>
13+
<Login />
14+
</v-layout>
15+
</v-container>
16+
</div>
617
</div>
718
</template>
819

920
<script>
10-
import Login from '../components/auth/Login';
21+
import Login from "../components/auth/Login";
1122
1223
export default {
13-
name: 'AuthView',
24+
name: "AuthView",
1425
components: {
1526
Login
1627
}
1728
};
1829
</script>
1930

2031
<style lang="scss" scoped>
32+
.login-menu {
33+
padding-top: 100px;
34+
}
35+
36+
.header1 {
37+
font-family: 'Playfair Display';
38+
font-size: 70px;
39+
padding-top: 50px;
40+
}
41+
42+
.header2 {
43+
font-family: 'Roboto';
44+
font-size: 33px;
45+
}
46+
47+
.text1 {
48+
padding-top: 25px;
49+
font-family: 'Roboto Condensed';
50+
font-size: 20px;
51+
}
2152
</style>

0 commit comments

Comments
 (0)