bg(oauth 2): modified logOut test and added auth buttons

- modify logOut test
- add auth buttons to auth pages
- resolve hound/eslint issues

[Finishes #159069548]

.env.sample

@@ -3,4 +3,11 @@ MONGODB_URI=<Development database url>
 SECRET_KEY=<Secret key for JWT>
 GMAIL_PASSWORD=<password is pinned at slack channel>
 FB_CLIENT_ID=<pinned to slack et-team channel>
-FB_CLIENT_SECRET=<pinned to slack et-team channel>
+FB_CLIENT_SECRET=<pinned to slack et-team channel>
+FB_CALLBACK_URL=<pinned to slack et-team channel>
+GOOGLE_CLIENT_ID=<pinned to slack et-team channel>
+GOOGLE_CLIENT_SECRET=<pinned to slack et-team channel>
+GOOGLE_CALLBACK_URL=<pinned to slack et-team channel>
+TWITTER_CUSTOMER_KEY=<pinned to slack et-team channel>
+TWITTER_CUSTOMER_SECRET=<pinned to slack et-team channel>
+TWITTER_CALLBACK_URL=<pinned to slack et-team channel>

app/controllers/users.js

@@ -36,13 +36,18 @@ const authCallback = (req, res) => {
  * @param {req} req carries request payload
  * @param {res} res handles response status code and messages
  * @returns {res} a status code and data
+ * @description this function is called with an Oauth 2 authentication is complete
+ * the authentication returns a user which info is sent to the client through the url.
  */
 const signin = (req, res) => {
   if (!req.user) {
     res.redirect('/#!/signin');
   } else {
     const { user } = req;
+    // Create a token using the user data
     const token = Tokenizer(user);
+
+    // the token and the user info to the client through the url
     const url = `/#!/auth?${token}----${user.name}---${user._id}`;
     res.redirect(url);
   }

config/passport.js

@@ -1,13 +1,11 @@
 
 import mongoose from 'mongoose';
 import { Strategy as LocalStrategy } from 'passport-local';
-// import { Strategy as TwitterStrategy } from 'passport-twitter';
+import { Strategy as TwitterStrategy } from 'passport-twitter';
 import { Strategy as FacebookStrategy } from 'passport-facebook';
 import { OAuth2Strategy as GoogleStrategy } from 'passport-google-oauth';
 import config from './config';
 
-const TwitterStrategy = require('passport-twitter').Strategy;
-
 const User = mongoose.model('User');
 
 export default (passport) => {

config/routes.js

@@ -21,10 +21,6 @@ export default (router, passport, app) => {
     .get('/profile', ensureUser, users.fetchProfile)
     .get('/signout', users.signout);
 
-  // Setting up the game api
-  api
-    .post('/game/:id/start', auth, game);
-
   router.get('/signin', users.signin);
   router.get('/signup', users.signup);
   router.get('/chooseavatars', users.checkAvatar);
@@ -100,7 +96,7 @@ export default (router, passport, app) => {
 
 
   app.use((err, req, res, next) => {
-    console.log(err);
+    // console.log(err);
     // error from the '/api' namespaced routes
     if (err.status) return res.status(err.status).json({ message: err.message });
     // Treat as 404

frontend-test/angular/auth-controller.test.js

@@ -5,6 +5,7 @@ describe('AuthController', function () {
   mockApireq = function () {
     return {
       execute(a, b, callback) {
+        if (typeof b === 'function') return b();
         return callback({ token: 'Thisisatesttoken' });
       }
     };

public/js/controllers/auth.js

@@ -6,13 +6,15 @@ angular.module('mean.system')
       $scope.newUser = {};
       $scope.user = {};
       $scope.authError = '';
-      let url = window.location.href;
-      url = url.split('auth?')[1];
 
-      const storeAndRefresh = function (token, id, name) {
+      let url = window.location.href.split('auth?')[1];
+
+      // Store token to local storage
+      const storeAndRedirect = function (token, id, name) {
         localStorage.setItem('#cfhetusertoken', token);
         localStorage.setItem('#cfhetUserId', id);
         localStorage.setItem('username', name);
+        $location.path('/');
       };
 
       const Login = $resource('/api/auth/login', {}, {
@@ -55,8 +57,7 @@ angular.module('mean.system')
 
       $scope.SignInUser = function () {
         Login.execute({}, $scope.user, function (response) {
-          storeAndRefresh(response.token, response._id, response.name);
-          $location.path('/');
+          storeAndRedirect(response.token, response._id, response.name);
         }, () => {
           $scope.authError = 'Please check your username/password and try again';
         });
@@ -74,12 +75,6 @@ angular.module('mean.system')
         return cloudUrl;
       };
 
-      $scope.logOut = function () {
-        localStorage.removeItem('#cfhetusertoken');
-        localStorage.removeItem('username');
-        localStorage.removeItem('#cfhetUserId');
-      };
-
       $scope.username = localStorage.getItem('username');
 
       $scope.checkToken = function () {
@@ -112,16 +107,14 @@ angular.module('mean.system')
           $scope.uploadImage(profilePic).then(function (res) {
             $scope.newUser.avatar = res.data.url;
             SignUp.execute({}, $scope.newUser, function (response) {
-              storeAndRefresh(response.token, response._id, response.name);
-              $location.path('/');
+              storeAndRedirect(response.token, response._id, response.name);
             }, (error) => {
               $scope.authError = error.data.message;
             });
           });
         } else {
           SignUp.execute({}, $scope.newUser, function (response) {
-            storeAndRefresh(response.token, response._id, response.name);
-            $location.path('/');
+            storeAndRedirect(response.token, response._id, response.name);
           }, (error) => {
             $scope.authError = error.data.message;
           });
@@ -133,7 +126,7 @@ angular.module('mean.system')
           url = url.replace(/%20/g, ' ').split('#!')[0].split('---');
           const [token, name, id] = url;
 
-          storeAndRefresh(token, id, name);
+          storeAndRedirect(token, id, name);
           window.location.replace('/');
         }
       };

public/js/controllers/game.js

@@ -1,6 +1,4 @@
-/* eslint prefer-arrow-callback: 0, func-names: 0, no-undef: 0, no-var: 0, object-shorthand: 0 */
-/* eslint vars-on-top: 0 */
-/* eslint no-var: 0 */
+/* eslint prefer-arrow-callback: 0, func-names: 0 */
 angular.module('mean.system')
   .controller('GameController', ['$scope', '$http', '$q', 'game', '$timeout', '$location', 'MakeAWishFactsService', '$dialog', '$rootScope', function ($scope, $http, $q, game, $timeout, $location, MakeAWishFactsService) {
     $scope.hasPickedCards = false;
@@ -118,23 +116,23 @@ angular.module('mean.system')
     };
 
     $scope.fewPlayersModal = function () {
-      var refusableModel = $('#reuse-modal');
+      const reuseableModal = $('#reuse-modal');
       $('.modal-header').empty();
-      refusableModel.find('.modal-header').append('<h4 class="modal-title center-align" style="color: #23522d;">3 PLAYERS REQUIRED</h4>');
-      refusableModel.find('.modal-body').text('This game requires a minimum of 3 players. Please invite more friends to play');
-      var okayBtn = '<button type="button" class="btn waves-effect waves-green modal-close"  id="play-chioce-btn">OKAY</button>';
+      reuseableModal.find('.modal-header').append('<h4 class="modal-title center-align" style="color: #23522d;">3 PLAYERS REQUIRED</h4>');
+      reuseableModal.find('.modal-body').text('This game requires a minimum of 3 players. Please invite more friends to play');
+      const okayBtn = '<button type="button" class="btn waves-effect waves-green modal-close"  id="play-chioce-btn">OKAY</button>';
       $('.modal-footer').empty();
       $('.modal-footer').append(okayBtn);
       $('#reuse-modal').modal('open');
     };
 
     $scope.morePlayersModal = function () {
-      var refusableModel = $('#reuse-modal');
+      const reuseableModal = $('#reuse-modal');
       $('.modal-header').empty();
-      refusableModel.find('.modal-header').append('<h4 class="modal-title center-align" style="color: #23522d;">MAX NUMBER OF PLAYERS</h4>');
+      reuseableModal.find('.modal-header').append('<h4 class="modal-title center-align" style="color: #23522d;">MAX NUMBER OF PLAYERS</h4>');
       $('.modal-body').empty();
-      refusableModel.find('.modal-body').append('<p>The game cannot take more than 12 players.</p> <p>Game has started already. You have been added to a new game</p>');
-      var okayBtn = '<button type="button" class="btn waves-effect waves-green modal-close"  id="play-chioce-btn">OKAY</button>';
+      reuseableModal.find('.modal-body').append('<p>The game cannot take more than 12 players.</p> <p>Game has started already. You have been added to a new game</p>');
+      const okayBtn = '<button type="button" class="btn waves-effect waves-green modal-close"  id="play-chioce-btn">OKAY</button>';
       $('.modal-footer').empty();
       $('.modal-footer').append(okayBtn);
       $('#reuse-modal').modal('open');
@@ -159,12 +157,12 @@ angular.module('mean.system')
     });
 
     $scope.$watch('game.userExist', function () {
-      var reUsableModal = $('#reuse-modal');
+      const reUsableModal = $('#reuse-modal');
       $('.modal-header').empty();
       reUsableModal.find('.modal-header').append('<h4 class="modal-title center-align" style="color: #23522d;">You Cannot Join A Game Twice</h4>');
       $('.modal-body').empty();
       reUsableModal.find('.modal-body').append('<p>You have already joined this game</p>');
-      var okayBtn = '<a href="/" class="btn" style="background-color: #23522d;">OKAY</a>';
+      const okayBtn = '<a href="/" class="btn" style="background-color: #23522d;">OKAY</a>';
       $('.modal-footer').empty();
       $('.modal-footer').append(okayBtn);
       $('#reuse-modal').modal('open');

public/views/signin.html

@@ -7,6 +7,10 @@
             <img src="https://res.cloudinary.com/dqsmurjpg/image/upload/v1530718726/Navbar_Logo.png"
               id="cfh-logo" alt="cfg-logo">
           </a>
+
+          <ul id="nav-mobile" class="right">
+            <li><a class="waves-effect waves-light green darken-4 btn white-text" id="index-signup-btn" href="signup">Signup</a></li>
+          </ul>
         </div>
       </nav>
     </header>

public/views/signup.html

@@ -7,6 +7,12 @@
             <img src="https://res.cloudinary.com/dqsmurjpg/image/upload/v1530718726/Navbar_Logo.png"
               id="cfh-logo" alt="cfg-logo">
           </a>
+
+          <ul id="nav-mobile" class="right">
+            <li>
+              <a class="waves-effect waves-light green darken-4 btn white-text" id="index-signup-btn" href="signin">Login</a>
+            </li>
+          </ul>
         </div>
       </nav>
     </header>