Merge pull request #2090 from opengovsg/feat/authservice-logout-ts

refactor(auth.client): (4) extract admin logout service function to Typescript

src/public/modules/core/componentViews/avatar-dropdown.html

@@ -68,7 +68,7 @@
       <!-- Logout block -->
       <li
         class="navbar__dropdown--clickable navbar__dropdown__logout"
-        ng-click="vm.signOut()"
+        ng-click="vm.logout()"
       >
         <span class="navbar__dropdown__logout--text">Logout</span>
         <i class="bx bx-log-out bx-md"></i>

src/public/modules/core/components/avatar-dropdown.client.component.js

@@ -1,11 +1,13 @@
 const get = require('lodash/get')
 
+const AuthService = require('../../../services/AuthService')
 const UserService = require('../../../services/UserService')
 
 angular.module('core').component('avatarDropdownComponent', {
   templateUrl: 'modules/core/componentViews/avatar-dropdown.html',
   bindings: {},
   controller: [
+    '$q',
     '$scope',
     '$state',
     '$uibModal',
@@ -19,6 +21,7 @@ angular.module('core').component('avatarDropdownComponent', {
 })
 
 function avatarDropdownController(
+  $q,
   $scope,
   $state,
   $uibModal,
@@ -92,7 +95,20 @@ function avatarDropdownController(
     },
   )
 
-  vm.signOut = () => Auth.signOut()
+  vm.logout = () => {
+    return $q
+      .when(AuthService.logout())
+      .then(() => {
+        // Clear user and contact banner on logout
+        UserService.clearUserFromLocalStorage()
+        $window.localStorage.removeItem('contactBannerDismissed')
+        // Redirect to landing page
+        $state.go('landing')
+      })
+      .catch((error) => {
+        console.error('sign out failed:', error)
+      })
+  }
 
   vm.openContactNumberModal = () => {
     $uibModal
@@ -109,7 +125,7 @@ function avatarDropdownController(
         // Update success, update user.
         if (returnVal) {
           vm.user = returnVal
-          Auth.setUser(returnVal)
+          UserService.saveUserToLocalStorage(returnVal)
           vm.showExclamation = !returnVal.contact
         }
       })

src/public/modules/users/services/auth.client.service.js

@@ -22,19 +22,9 @@ function Auth($q, $http, $state, $window) {
 
   let authService = {
     getUser,
-    setUser,
-    signOut,
   }
   return authService
 
-  /**
-   * User setter function
-   * @param {User} user
-   */
-  function setUser(user) {
-    $window.localStorage.setItem('user', JSON.stringify(user))
-  }
-
   /**
    * User getter function
    * @returns {User} user
@@ -49,17 +39,4 @@ function Auth($q, $http, $state, $window) {
       return null
     }
   }
-  function signOut() {
-    $http.get('/api/v3/auth/logout').then(
-      function () {
-        $window.localStorage.removeItem('user')
-        // Clear contact banner on logout
-        $window.localStorage.removeItem('contactBannerDismissed')
-        $state.go('landing')
-      },
-      function (error) {
-        console.error('sign out failed:', error)
-      },
-    )
-  }
 }

src/public/services/AuthService.ts

@@ -49,3 +49,7 @@ export const verifyLoginOtp = async (params: {
     .post<User>(`${AUTH_ENDPOINT}/otp/verify`, params)
     .then(({ data }) => data)
 }
+
+export const logout = async (): Promise<void> => {
+  return axios.get(`${AUTH_ENDPOINT}/logout`)
+}

src/public/services/UserService.ts

@@ -28,7 +28,8 @@ export const clearUserFromLocalStorage = (): void => {
 /**
  * Fetches the user from the server using the current session cookie.
  *
- * Side effect: Saves the retrieved user to localStorage
+ * Side effect: On success, save the retrieved user to localStorage.
+ * Side effect: On error, clear the user (if any) from localStorage.
  * @returns the logged in user if session is valid, `null` otherwise
  */
 export const fetchUser = async (): Promise<User | null> => {

src/public/services/__tests__/AuthService.test.ts

@@ -5,6 +5,7 @@ import { Opaque } from 'type-fest'
 import {
   AUTH_ENDPOINT,
   checkIsEmailAllowed,
+  logout,
   sendLoginOtp,
   verifyLoginOtp,
 } from '../AuthService'
@@ -83,4 +84,20 @@ describe('AuthService', () => {
       )
     })
   })
+
+  describe('logout', () => {
+    const EXPECTED_ENDPOINT = `${AUTH_ENDPOINT}/logout`
+    it('should call endpoint successfully', async () => {
+      // Arrange
+      const mockReturn = { status: 200 }
+      MockAxios.get.mockResolvedValueOnce(mockReturn)
+
+      // Act
+      const actual = await logout()
+
+      // Assert
+      expect(actual).toEqual(mockReturn)
+      expect(MockAxios.get).toHaveBeenLastCalledWith(EXPECTED_ENDPOINT)
+    })
+  })
 })