Test/sign out functional

src/components/auth/auth.service.js

@@ -13,4 +13,13 @@ export default class AuthService {
   checkEmail(email) {
     return this.$fetch.post('/v1/auth/checkEmail', { email });
   }
+
+  /**
+   * Invalidated the API token.
+   *
+   * @return {promise}
+   */
+  signOut() {
+    return this.$fetch.post('/v1/auth/logout');
+  }
 }

src/components/auth/signOut.functional.spec.js

@@ -0,0 +1,138 @@
+import layoutModule from '../layout/layout';
+import topNavbarCtrl from '../layout/top-navbar/top-navbar.controller';
+import app from './../../index.js';
+
+describe('User log out', function() {
+  let $rootScope;
+  let makeController;
+  let makeDeferred;
+  let $httpBackend;
+  let AuthService;
+  let $translate;
+  let $mdDialog;
+  let $toast;
+  let $state;
+  let $auth;
+
+  beforeEach(angular.mock.module('app'));
+
+  beforeEach(inject(($q, _$rootScope_, _$toast_, _$state_, _$auth_, _AuthService_, _$mdDialog_, _$httpBackend_, _$translate_) => {
+    $rootScope = _$rootScope_;
+
+    $toast = _$toast_;
+
+    $state = _$state_;
+
+    $auth = _$auth_;
+
+    $auth.isAuthenticated = () => true;
+
+    $auth.setToken('thisIsToken');
+
+    AuthService = _AuthService_;
+
+    $mdDialog = _$mdDialog_;
+
+    $translate = _$translate_;
+
+    $httpBackend = _$httpBackend_;
+
+    makeDeferred = () => {
+      return $q.defer();
+    }
+
+    makeController = () => {
+      return new topNavbarCtrl($translate, $auth, $state, $toast, $mdDialog, AuthService);
+    };
+  }));
+  describe('when logout success', function() {
+    it('should invoke $auth.logout', function() {
+      const controller = makeController();
+      const signOutMock = sinon.mock(controller.$mdDialog);
+      const signOutDeferred = makeDeferred();
+      signOutMock.expects('show').returns(signOutDeferred.promise);
+      signOutDeferred.resolve();
+      $httpBackend.expectPOST('http://163.17.136.83:8080/api/v1/auth/logout').respond(200);
+
+      const auth = sinon.spy($auth, 'logout');
+      controller.signOut();
+      $httpBackend.flush();
+      $rootScope.$digest();
+      expect(auth.called).to.eq(true);
+    });
+    it('should invoke $state.go and called with auth.signin', function() {
+      const controller = makeController();
+      const signOutMock = sinon.mock(controller.$mdDialog);
+      const signOutDeferred = makeDeferred();
+      signOutMock.expects('show').returns(signOutDeferred.promise);
+      signOutDeferred.resolve();
+      $httpBackend.expectPOST('http://163.17.136.83:8080/api/v1/auth/logout').respond(200);
+
+      const state = sinon.spy($state, 'go');
+      controller.signOut();
+      $httpBackend.flush();
+      $rootScope.$digest();
+      expect(state).to.have.been.calledWith('auth.signin');
+    });
+    it('should invoke $toast.show and called with Sign Out Success!', function() {
+      const controller = makeController();
+      const signOutMock = sinon.mock(controller.$mdDialog);
+      const signOutDeferred = makeDeferred();
+      signOutMock.expects('show').returns(signOutDeferred.promise);
+      signOutDeferred.resolve();
+      $httpBackend.expectPOST('http://163.17.136.83:8080/api/v1/auth/logout').respond(200);
+
+      const toast = sinon.spy($toast, 'show');
+      controller.signOut();
+      $httpBackend.flush();
+      $rootScope.$digest();
+      expect(toast).to.have.been.calledWith('Sign Out Success!');
+    });
+    it('should clear token', function() {
+      const controller = makeController();
+      const signOutMock = sinon.mock(controller.$mdDialog);
+      const signOutDeferred = makeDeferred();
+      expect($auth.getToken()).to.eq('thisIsToken');
+      signOutMock.expects('show').returns(signOutDeferred.promise);
+      signOutDeferred.resolve();
+      $httpBackend.expectPOST('http://163.17.136.83:8080/api/v1/auth/logout').respond(200);
+
+      controller.signOut();
+      $httpBackend.flush();
+      $rootScope.$digest();
+      expect($auth.getToken()).to.eq(null);
+    });
+  });
+  describe('when confirm logout and logout fail', function() {
+    it('should invoke $toast.show and called with Sign Out Failure!', function() {
+      const controller = makeController();
+      const signOutMock = sinon.mock(controller.$mdDialog);
+      const signOutDeferred = makeDeferred();
+      signOutMock.expects('show').returns(signOutDeferred.promise);
+      signOutDeferred.resolve();
+      $httpBackend.expectPOST('http://163.17.136.83:8080/api/v1/auth/logout').respond(401);
+
+      const toast = sinon.spy($toast, 'show');
+      controller.signOut();
+      $httpBackend.flush();
+      $rootScope.$digest();
+      expect(toast).to.have.been.calledWith('Sign Out Failure!');
+    });
+    it('should not clear token', function() {
+      const controller = makeController();
+      const signOutMock = sinon.mock(controller.$mdDialog);
+      const signOutDeferred = makeDeferred();
+      signOutMock.expects('show').returns(signOutDeferred.promise);
+      signOutDeferred.resolve();
+      $httpBackend.expectPOST('http://163.17.136.83:8080/api/v1/auth/logout').respond(401);
+
+      controller.signOut();
+      $httpBackend.flush();
+      $rootScope.$digest();
+      expect($auth.getToken()).to.eq('thisIsToken');
+    })
+  });
+});
+
+
+

src/components/layout/top-navbar/top-navbar.controller.js

@@ -1,27 +1,69 @@
 export default class TopNavbarController {
   /** @ngInject */
-  constructor($translate, $auth, $state, $toast) {
-    const languages = [
+  constructor($translate, $auth, $state, $toast, $mdDialog, AuthService) {
+    Object.assign(this, {
+      $translate, $auth, $state, $toast, $mdDialog, AuthService,
+    });
+
+    this.languages = [
       { key: 'EN', name: 'English' },
       { key: 'TW', name: '繁體中文' },
       { key: 'CN', name: '简体中文' },
     ];
 
-    const currentLanguage = $translate.use();
-
-    Object.assign(this, {
-      $translate, $auth, $state, $toast, languages, currentLanguage,
-    });
+    this.currentLanguage = $translate.use();
   }
 
+  /**
+   * Change the language of UI.
+   *
+   * @param  {string} key
+   * @return {void}
+   */
   changeLanguage(key) {
     this.$translate.use(key);
     this.currentLanguage = key;
   }
 
-  signout() {
-    this.$auth.logout();
-    this.$state.go('auth.signin');
-    this.$toast.show('Sign Out Success!');
+  /**
+   * Do the sign out flow when user click the sign out button.
+   *
+   * @param  {Object} $event
+   * @return {void}
+   */
+  signOut($event) {
+    this.showConfirmMessage($event).then(this.executedSignOut);
   }
+
+  /**
+   * Show a confirm message for sign out.
+   *
+   * @param  {Object} $event
+   * @return {Promise}
+   */
+  showConfirmMessage($event) {
+    const confirm = this.$mdDialog.confirm()
+      .title('Would you like to sign out without your upload?')
+      .textContent(`You have in progress opreations
+or uploads and leaving now will cancel them.Still leaving?`)
+      .ariaLabel('Sign out')
+      .targetEvent($event)
+      .ok('Leave')
+      .cancel('Stay');
+
+    return this.$mdDialog.show(confirm);
+  }
+
+  /**
+   * Executed sign out when user confirm the message.
+   *
+   * @return {Promise} [description]
+   */
+  executedSignOut = () => this.AuthService.signOut()
+    .then(() => {
+      this.$auth.logout();
+      this.$state.go('auth.signin');
+      this.$toast.show('Sign Out Success!');
+    })
+    .catch(() => this.$toast.show('Sign Out Failure!'));
 }

src/components/layout/top-navbar/top-navbar.html

@@ -36,7 +36,7 @@ <h2>
         <md-menu-divider></md-menu-divider>
 
         <md-menu-item>
-          <md-button aria-label="Sign Out" ng-click="nav.signout()">
+          <md-button aria-label="Sign Out" ng-click="nav.signOut($event)">
             <span>{{ 'SETTINGS.SIGN_OUT' | translate }}</span>
           </md-button>
         </md-menu-item>

src/styles/dialog.css

@@ -3,8 +3,8 @@
  * @author Jamie [email protected]
  */
 
-.md-confirm-dialog-warn-theme md-dialog-actions button:last-child {
-  color: #FF6D00;
+.md-default-theme md-dialog-actions button:last-child {
+  color: #FF6D00 !important;
 }
 
 md-dialog-content md-input-container.md-icon-right md-progress-circular {