codeuino · shivamluthra · Dec 13, 2019 · Dec 10, 2019
diff --git a/package.json b/package.json
@@ -9,8 +9,9 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "bootstrap": "^4.4.1",
+    "bootstrap-vue": "^2.1.0",
     "core-js": "^2.6.5",
-    "cors": "^2.8.5",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
     "vuetify": "^1.5.5",

diff --git a/public/index.html b/public/index.html
@@ -1,34 +1,43 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <title>CodeBadge</title>
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
-    />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Material+Icons"
-    />
-    <link
-      rel="stylesheet"
-      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
-      integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
-      crossorigin="anonymous"
-    />
-  </head>
-  <body>
-    <noscript>
-      <strong
-        >We're sorry but codebadge doesn't work properly without JavaScript
-        enabled. Please enable it to continue.</strong
-      >
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=yes" />
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+  <title>CodeBadge</title>
+  <link 
+    href="https://fonts.googleapis.com/css?family=Playfair+Display&display=swap" 
+   rel="stylesheet"
+  />
+  <link 
+    href="https://fonts.googleapis.com/css?family=Roboto&display=swap" 
+    rel="stylesheet"
+  />
+  <link 
+    href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" 
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css?family=Material+Icons" 
+    rel="stylesheet" 
+  />
+  <link 
+    href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    rel="stylesheet" 
+    integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" 
+    crossorigin="anonymous" 
+  />
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but codebadge doesn't work properly without JavaScript
+      enabled. Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -1,26 +1,19 @@
 <template>
   <v-app>
-    <v-toolbar color="white" app>
-      <v-toolbar-title class="headline text-uppercase">
-        <span>Codebadge</span>
-        <span class="font-weight-light text-none">&nbsp;(Production Stage)</span>
-      </v-toolbar-title>
-    </v-toolbar>
-
+    <Toolbar/>
     <v-content class="content">
-      <router-view></router-view>
+      <router-view />
     </v-content>
   </v-app>
 </template>
 
 <script>
+import Toolbar from "./components/general/Toolbar";
+
 export default {
-  name: 'App',
-  components: {},
-  data() {
-    return {
-      //
-    };
+  name: "App",
+  components: {
+    Toolbar
   }
 };
 </script>

diff --git a/src/assets/loaders/bars.svg b/src/assets/loaders/bars.svg
diff --git a/src/components/auth/Login.vue b/src/components/auth/Login.vue
@@ -1,36 +1,37 @@
 <template>
-  <div>
-    <div>
-      <v-layout justify-center>
-        <i class="fab fa-github-square i-github"></i>
-      </v-layout>
-    </div>
-    <v-btn class="btn-login" v-if="!isLoading" outline @click="login">Login with GitHub</v-btn>
-    <v-btn class="btn-login" v-if="isLoading" outline>
-      <img src="@/assets/loaders/bars.svg" alt="loading...">
+  <v-layout align-center justify-center>
+    <v-btn dark class="btn-login" v-if="!isLoading" @click="login">
+      <v-icon dark left>fab fa-github</v-icon>Login with GitHub
     </v-btn>
-  </div>
+    <v-btn dark class="btn-login" v-if="isLoading">
+      <img src="@/assets/loaders/bars.svg" alt="loading..." />
+    </v-btn>
+  </v-layout>
 </template>
 
 <script>
-import axios from 'axios';
-import AxiosHelper from '../../config/AxiosHelper';
+import axios from "axios";
+import AxiosHelper from "../../config/AxiosHelper";
+import AuthService from "../../services/authService";
+
+const authService = new AuthService();
 
 export default {
-  name: 'Login',
+  name: "Login",
   data() {
     return {
       isLoading: false
     };
   },
   methods: {
     login() {
-      window.location = `${AxiosHelper.authUrl}?client_id=${
-        process.env.VUE_APP_CLIENT_ID
-      }&scope=user%20repo%20read:org`;
+      window.location = `${AxiosHelper.authUrl}?client_id=${process.env.VUE_APP_CLIENT_ID}&scope=user%20repo%20read:org`;
     }
   },
   created: function() {
+    if (authService.isLoggedIn()) {
+      window.location = AxiosHelper.homeUrl;
+    }
     const code = window.location.href.match(/\?code=(.*)/);
     if (code) {
       this.isLoading = true;
@@ -42,12 +43,12 @@ export default {
         }&client_secret=${
           process.env.VUE_APP_CLIENT_SECRET
         }&code=${code[1].slice(0, 20)}`
-      }).then(res => {
-          this.isLoading = false;
-          var token = res.data.match(/access_token=(.*)/)[1].slice(0,40);
-          console.log("access_token:" + token);
-          localStorage.setItem('token', token);
+      })
+        .then(res => {
+          var token = res.data.match(/access_token=(.*)/)[1].slice(0, 40);
+          localStorage.setItem("token", token);
           window.location = AxiosHelper.homeUrl;
+          this.isLoading = false;
         })
         .catch(err => {
           this.isLoading = false;
@@ -60,10 +61,11 @@ export default {
 
 <style lang="scss" scoped>
 .i-github {
-  font-size: 64px;
+  font-size: 80px;
 }
 
 .btn-login {
-  width: 170px;
+  width: 200px;
+  height: 40px;
 }
 </style>
diff --git a/src/components/general/Toolbar.vue b/src/components/general/Toolbar.vue
@@ -0,0 +1,45 @@
+<template>
+  <v-toolbar color="white" app>
+    <v-toolbar-title style="font-size: 30px; font-family: Raleway; padding-right: 20px">
+      <span>Codebadge</span>
+    </v-toolbar-title>
+    <v-spacer />
+    <div class="toolbar-contents">
+      <v-btn flat class="toolbar-button">About Us</v-btn>
+      <v-btn flat class="toolbar-button">Join Us</v-btn>
+      <v-btn color="primary" @click="logout" v-if="isLogged" round>Logout</v-btn>
+    </div>
+  </v-toolbar>
+</template>
+
+<script>
+import AxiosHelper from "../../config/AxiosHelper";
+import AuthService from "../../services/authService";
+
+const authService = new AuthService();
+
+export default {
+  name: "Toolbar",
+  data() {
+    return {
+      isLogged: false
+    };
+  },
+  created: function() {
+    this.isLogged = authService.isLoggedIn();
+  },
+  methods: {
+    logout() {
+      localStorage.removeItem("token");
+      this.isLogged = authService.isLoggedIn();
+      window.location = AxiosHelper.homeAuthUrl;
+    }
+  }
+};
+</script>
+
+<style lang="scss" >
+.toolbar-button {
+  padding-top: 5px;
+}
+</style>
diff --git a/src/config/AxiosHelper.js b/src/config/AxiosHelper.js
@@ -2,5 +2,6 @@ module.exports = {
   baseUrl: 'https://api.github.com',
   authUrl: 'https://github.com/login/oauth/authorize',
   gatekeeperUrl: 'https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token',
-  homeUrl: 'http://localhost:8080/#/home'
+  homeUrl: 'http://localhost:8080/#/home',
+  homeAuthUrl: 'http://localhost:8080/#/auth'
 };
diff --git a/src/views/AuthView.vue b/src/views/AuthView.vue
@@ -1,21 +1,52 @@
 <template>
   <div>
-    <v-layout class="ma-5" justify-center>
-      <Login/>
-    </v-layout>
+    <div class="login-menu">
+      <v-container style="widh=200px;">
+        <v-layout class="header1" justify-center>Welcome to CodeBadge!</v-layout>
+        <v-layout class="header2" justify-center>TRACK ALL YOUR PROJECTS AT ONE PLACE</v-layout>
+        <v-layout class="text1" justify-center>
+          Having a hard time tracking all your project contributors?
+        </v-layout>
+        <v-layout class="text1" style="padding-top:0px;" justify-center>CodeBadge does it for you!
+        </v-layout>
+        <v-layout class="ma-3" align-center justify-center>
+          <Login />
+        </v-layout>
+      </v-container>
+    </div>
   </div>
 </template>
 
 <script>
-import Login from '../components/auth/Login';
+import Login from "../components/auth/Login";
 
 export default {
-  name: 'AuthView',
+  name: "AuthView",
   components: {
     Login
   }
 };
 </script>
 
 <style lang="scss" scoped>
+.login-menu {
+  padding-top: 100px;
+}
+
+.header1 {
+  font-family: 'Playfair Display';
+  font-size: 70px;
+  padding-top: 50px;
+}
+
+.header2 {
+  font-family: 'Roboto';
+  font-size: 33px;
+}
+
+.text1 {
+  padding-top: 25px;
+  font-family: 'Roboto Condensed';
+  font-size: 20px;
+}
 </style>