minor refactoring and fixes

Real-Dev-Squad · rohan09-raj · Dec 18, 2022 · Nov 29, 2022 · Nov 29, 2022 · Nov 30, 2022
commit de2342a9938ae72895b8e2d90a39b1adb43a6d13
diff --git a/app/adapters/application.js b/app/adapters/application.js
@@ -1,9 +1,5 @@
 import JSONAPIAdapter from '@ember-data/adapter/json-api';
-
 import ENV from 'website-www/config/environment';
-
-console.log(ENV.BASE_API_URL);
-
 export default class ApplicationAdapter extends JSONAPIAdapter {
   host = ENV.BASE_API_URL;
 

diff --git a/app/components/navbar.hbs b/app/components/navbar.hbs
@@ -20,29 +20,29 @@
   </ul>
 
   <div class='nav__login'>
-    {{#if (not @firstName) }}
-    <a class='login' id='user-login' href=''>
-      <button class='login__btn'>
+    {{#if @isLoggedIn }}
+    <div class='nav__user' role="button" class="user" {{on "click" this.toggleMenu}} {{on-click-outside
+      this.outsideClickMenu}}>
+      <div class='user__msg'>Hello, {{@firstName}}</div>
+      <img class='user__pic' src={{@profilePicture}} />
+      <Fa-Icon @icon='chevron-down' />
+    </div>
+    {{else}}
+    <a class='login' href={{this.AUTH_URL}}>
+      <button class='login__btn' type="button">
         <span class='login__text1'>Sign In</span>
         <span class='login__text2'>with GitHub</span>
         <img class='login__logo' src='assets/icons/github-logo.png' alt='GitHub_Icon' height='20px' width='20px' />
       </button>
     </a>
     {{/if}}
-
-    <div class='nav__user' role="button" class="user" {{on "click" this.toggleMenu}} {{on-click-outside
-      this.outsideClickMenu}}>
-      <div class='user__msg'>Hello, {{@firstName}}</div>
-      <img class='user__pic' src={{@profilePicture}} />
-      <i class="fa-solid fa-chevron-down"></i>
-    </div>
   </div>
 
   <section class="menu {{if this.isMenuOpen " active-menu" "" }}">
     <a href="https://my.realdevsquad.com/" class="menu__link">
       My Profile
     </a>
     <hr />
-    <a href="#" class="menu__link">Sign Out</a>
+    <div role="button" class="menu__link" {{on "click" (fn @signOut)}}>Sign Out</div>
   </section>
 </nav>
diff --git a/app/components/navbar.js b/app/components/navbar.js
@@ -1,33 +1,35 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { APPS, AUTH } from '../constants/urls';
 
 export default class NavbarComponent extends Component {
   @tracked isNavOpen = false;
   @tracked isMenuOpen = false;
 
-  HOME_PAGE_URL = 'http://realdevsquad.com/';
+  AUTH_URL = AUTH.SIGN_IN;
+  HOME_PAGE_URL = APPS.HOME;
 
   RDS_APPS_MAPPING = [
     {
       siteName: 'Welcome',
-      url: 'https://welcome.realdevsquad.com/',
+      url: APPS.WELCOME,
     },
     {
       siteName: 'Events',
-      url: 'http://realdevsquad.com/events.html',
+      url: APPS.EVENTS,
     },
     {
       siteName: 'Members',
-      url: 'https://members.realdevsquad.com/',
+      url: APPS.MEMBERS,
     },
     {
       siteName: 'Crypto',
-      url: 'https://crypto.realdevsquad.com/',
+      url: APPS.CRYPTO,
     },
     {
       siteName: 'Status',
-      url: 'https://status.realdevsquad.com/',
+      url: APPS.STATUS,
     },
   ];
 

diff --git a/app/constants/urls.js b/app/constants/urls.js
@@ -0,0 +1,13 @@
+export const APPS = {
+  HOME: 'http://realdevsquad.com/',
+  WELCOME: 'https://welcome.realdevsquad.com/',
+  EVENTS: 'http://realdevsquad.com/events.html',
+  MEMBERS: 'https://members.realdevsquad.com/',
+  CRYPTO: 'https://crypto.realdevsquad.com/',
+  STATUS: 'https://status.realdevsquad.com/',
+};
+
+export const AUTH = {
+  SIGN_IN:
+    'https://github.com/login/oauth/authorize?client_id=23c78f66ab7964e5ef97',
+};
diff --git a/app/controllers/.gitkeep b/app/controllers/.gitkeep
diff --git a/app/controllers/application.js b/app/controllers/application.js
@@ -0,0 +1,21 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import ENV from 'website-www/config/environment';
+
+export default class ApplicationController extends Controller {
+  @tracked isLoggedIn = false;
+
+  @action async signOut() {
+    try {
+      fetch(`${ENV.BASE_API_URL}/auth/signout`, {
+        method: 'GET',
+        credentials: 'include',
+      }).then(() => {
+        location.reload();
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
diff --git a/app/index.html b/app/index.html
@@ -2,40 +2,27 @@
 
 <html>
 
-  <head>
-
-    <meta charset="utf-8" />
-
-    <title>Real Dev Squad</title>
-
-    <meta name="description" content="" />
-
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-    <link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
-     {{content-for "head"}}
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
-
-    <link
-      integrity=""
-      rel="stylesheet"
-      href="{{rootURL}}assets/website-www.css"
-    />
-
-    <link
-      href="https://fonts.googleapis.com/css2?family=Raleway:wght@400..900&display=swap"
-      rel="stylesheet"
-    />
-     {{content-for "head-footer"}}
-  </head>
-
-  <body>
-     {{content-for "body"}}
-    <script src="{{rootURL}}assets/vendor.js"></script>
-
-    <script src="{{rootURL}}assets/website-www.js"></script>
-     {{content-for "body-footer"}}
-  </body>
-
-</html>
-
+<head>
+  <meta charset="utf-8" />
+  <title>Real Dev Squad</title>
+
+  <meta name="description" content="" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
+  {{content-for "head"}}
+  <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
+  <link integrity="" rel="stylesheet" href="{{rootURL}}assets/website-www.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400..900&display=swap" rel="stylesheet" />
+  {{content-for "head-footer"}}
+</head>
+
+<body>
+  {{content-for "body"}}
+  <script src="{{rootURL}}assets/vendor.js"></script>
+
+  <script src="{{rootURL}}assets/website-www.js"></script>
+  {{content-for "body-footer"}}
+</body>
+
+</html>
diff --git a/app/models/user.js b/app/models/user.js
@@ -7,7 +7,7 @@ export default class UserModel extends Model {
   @attr('string', { defaultValue: 'active' }) status;
   @attr roles;
   @attr yoe;
-  @attr('json', { defaultValue: 'dummyProfilePicture.png' }) picture;
+  @attr picture;
   @attr company;
   @attr incompleteUserDetails;
   @attr github_display_name;

diff --git a/app/routes/application.js b/app/routes/application.js
@@ -5,6 +5,7 @@ import { action } from '@ember/object';
 
 export default class IndexRoute extends Route {
   @service store;
+  @service router;
 
   async model() {
     return this.store.findRecord('user', 'self');
@@ -13,12 +14,8 @@ export default class IndexRoute extends Route {
   @action
   error(error) {
     if (error instanceof UnauthorizedError) {
-      alert('You are not logged in. Please login to continue.');
-      window.open(
-        'https://github.com/login/oauth/authorize?client_id=23c78f66ab7964e5ef97',
-        '_self'
-      );
-      return;
+      // TODO: Handle the unauthorized error
+      console.log(error.message);
     }
   }
 }
diff --git a/app/serializers/application.js b/app/serializers/application.js
@@ -1,10 +1,3 @@
 import JSONSerializer from '@ember-data/serializer/json';
-import { EmbeddedRecordsMixin } from '@ember-data/serializer/rest';
 
-export default class ApplicationSerializer extends JSONSerializer.extend(
-  EmbeddedRecordsMixin
-) {
-  attrs = {
-    picture: { embedded: 'always' },
-  };
-}
+export default class ApplicationSerializer extends JSONSerializer {}
diff --git a/app/styles/navbar.module.css b/app/styles/navbar.module.css
@@ -31,17 +31,17 @@ nav li {
   margin: 15px;
 }
 
-.nav__home__link {
-  display: none;
-}
-
 .nav__element {
   display: block;
   text-decoration: none;
   color: var(--color-white);
   margin: 55px 40px;
 }
 
+.nav__home__link {
+  display: none;
+}
+
 .nav__element.active {
   color: var(--color-green);
   text-decoration: underline;
@@ -89,12 +89,12 @@ nav li {
 .user__msg {
   display: inline;
   vertical-align: middle;
-  margin-right: 10px;
+  margin-right: 5px;
 }
 
 .user__pic {
-  width: 32px;
-  height: 32px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
   display: inline;
   vertical-align: middle;
@@ -169,12 +169,12 @@ nav li {
   }
 
   .nav__login {
-    margin: 20px 20px;
+    margin: 18px 20px;
   }
 
   .menu {
     top: 70px;
-    right: 30px;
+    right: 20px;
   }
 }
 

diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -1,4 +1,9 @@
 <body>
-  <Navbar @firstName={{@model.first_name}} @profilePicture={{@model.picture.url}} />
+  <Navbar 
+    @firstName={{@model.first_name}} 
+    @profilePicture={{@model.picture.url}} 
+    @isLoggedIn={{this.isLoggedIn}}
+    @signOut={{this.signOut}} 
+  />
   {{outlet}}
 </body>
diff --git a/config/environment.js b/config/environment.js
@@ -19,7 +19,7 @@ module.exports = function (environment) {
     },
   };
 
-  ENV.BASE_API_URL = 'http://localhost:3000';
+  ENV.BASE_API_URL = 'https://api.realdevsquad.com';
 
   if (environment === 'development') {
     // ENV.APP.LOG_RESOLVER = true;

diff --git a/tests/unit/controllers/application-test.js b/tests/unit/controllers/application-test.js
@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'website-www/tests/helpers';
+
+module('Unit | Controller | application', function (hooks) {
+  setupTest(hooks);
+
+  // TODO: Replace this with your real tests.
+  test('it exists', function (assert) {
+    let controller = this.owner.lookup('controller:application');
+    assert.ok(controller);
+  });
+});