refactor(auth.client.service): refactor to Typescript (opengovsg#2132)

* feat(AuthService): add verifyLoginOtp fn

* ref: use AdminAuthService.verifyLoginOtp

* ref: rename Admin to User

better fit API prefix

* ref(AuthService): move User related fns to UserService

* test(AuthService): add unit tests for verifyLoginOtp

* chore: add jest-localstorage-mock package

for mocking localstorage in the frontend jest tests

* test(UserService): add unit tests for saveUserToLocalStorage

* chore: move date-fns from devDeps to deps

* feat: add base typings for Agency and User

in preparation for extending from to close opengovsg#2066

* feat: remove unused verifyOtp function

* chore: set VSCode default TS version to follow node_modules

* ref: move saveUserToLocalStorage responsibility to calling controller

* feat(UserService): add fetchUser function

* ref(avatar-dropdown.client): use UserService.fetchUser()

* test(UserService): add unit tests for fetchUser

* feat: remove unused refreshUser function

* feat(UserService): add clearUserFromLocalStorage function (and tests)

* feat: move responsibility of clearing user from localStorage to ctl

* fix: correctly set truser when fetching user from server

* ref: use UserService.saveUserToLocalStorage

* feat(AuthService): add and use logout function

* feat: remove unused Auth.signOut and setUser functions

* test(AuthService): add unit test for logout

test(UserService): add tests for clearUserFromLocalStorage

* feat(UserService): add getUserFromLocalStorage function

* ref: replace all instances of Auth.getUser with UserService equivalent

* feat: delete unused auth.client.service.js

* test(UserService): add unit tests for getUserFromLocalStorage

* chore: run npm run lint

i didn't even touch this part of the code...

.vscode/settings.json

@@ -16,5 +16,6 @@
       "source.fixAll.eslint": false
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

package.json

@@ -98,6 +98,7 @@
     "cookie-parser": "~1.4.0",
     "css-toggle-switch": "^4.1.0",
     "csv-string": "^4.0.1",
+    "date-fns": "^2.22.1",
     "dedent-js": "~1.0.1",
     "ejs": "^3.1.6",
     "express": "^4.16.4",
@@ -202,7 +203,6 @@
     "coveralls": "^3.1.0",
     "css-loader": "^2.1.1",
     "csv-parse": "^4.16.0",
-    "date-fns": "^2.22.1",
     "env-cmd": "^10.1.0",
     "eslint": "^7.28.0",
     "eslint-config-prettier": "^8.3.0",
@@ -219,6 +219,7 @@
     "husky": "^6.0.0",
     "jest": "^26.6.3",
     "jest-extended": "^0.11.5",
+    "jest-localstorage-mock": "^2.4.14",
     "jest-mock-axios": "^4.4.0",
     "lint-staged": "^11.0.0",
     "maildev": "^1.1.0",

src/public/main.js

@@ -272,9 +272,6 @@ require('./modules/forms/services/mailto.client.factory.js')
 require('./modules/users/config/users.client.config.js')
 require('./modules/users/config/users.client.routes.js')
 
-// User services
-require('./modules/users/services/auth.client.service.js')
-
 // User controllers
 require('./modules/users/controllers/authentication.client.controller.js')
 require('./modules/users/controllers/billing.client.controller.js')

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

@@ -64,7 +64,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,32 +1,35 @@
 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',
     '$window',
-    'Auth',
     'Toastr',
     avatarDropdownController,
   ],
   controllerAs: 'vm',
 })
 
 function avatarDropdownController(
+  $q,
   $scope,
   $state,
   $uibModal,
   $window,
-  Auth,
   Toastr,
 ) {
   const vm = this
 
   // Preload user with current details, redirect to signin if unable to get user
-  vm.user = Auth.getUser() || $state.go('signin')
+  vm.user = UserService.getUserFromLocalStorage() || $state.go('signin')
   vm.avatarText = generateAvatarText()
 
   vm.isDropdownHover = false
@@ -37,7 +40,16 @@ function avatarDropdownController(
 
   async function retrieveUser() {
     try {
-      const trueUser = await Auth.refreshUser()
+      const trueUser = await UserService.fetchUser()
+        .then((user) => {
+          UserService.saveUserToLocalStorage(user)
+          return user
+        })
+        .catch(() => {
+          UserService.clearUserFromLocalStorage()
+          return null
+        })
+
       if (!trueUser) {
         $state.go('signin')
         return
@@ -74,7 +86,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
@@ -91,7 +116,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/core/controllers/edit-contact-number-modal.client.controller.js

@@ -1,3 +1,5 @@
+const UserService = require('../../../services/UserService')
+
 angular
   .module('core')
   .controller('EditContactNumberModalController', [
@@ -8,7 +10,6 @@ angular
     '$scope',
     '$uibModalInstance',
     '$window',
-    'Auth',
     'Toastr',
     EditContactNumberModalController,
   ])
@@ -21,7 +22,6 @@ function EditContactNumberModalController(
   $scope,
   $uibModalInstance,
   $window,
-  Auth,
   Toastr,
 ) {
   const vm = this
@@ -47,7 +47,7 @@ function EditContactNumberModalController(
   vm.VERIFY_STATE = VERIFY_STATE
 
   // Redirect to signin if unable to get user
-  vm.user = Auth.getUser() || $state.go('signin')
+  vm.user = UserService.getUserFromLocalStorage() || $state.go('signin')
 
   vm.vfnState = vm.user.contact ? VERIFY_STATE.SUCCESS : VERIFY_STATE.IDLE
 

src/public/modules/core/services/gtag.client.service.js

@@ -1,12 +1,14 @@
-angular.module('core').factory('GTag', ['Auth', '$rootScope', '$window', GTag])
+const UserService = require('../../../services/UserService')
 
-function GTag(Auth, $rootScope, $window) {
+angular.module('core').factory('GTag', ['$rootScope', '$window', GTag])
+
+function GTag($rootScope, $window) {
   // Google Analytics tracking ID provided on signup.
   const GATrackingID = $window.GATrackingID
   let gtagService = {}
 
   const getUserEmail = () => {
-    const user = Auth.getUser()
+    const user = UserService.getUserFromLocalStorage()
     return user && user.email
   }
 

src/public/modules/forms/admin/components/share-form.client.component.js

@@ -1,5 +1,7 @@
 'use strict'
-let dedent = require('dedent-js')
+const dedent = require('dedent-js')
+
+const UserService = require('../../../../services/UserService')
 
 angular.module('forms').component('shareFormComponent', {
   templateUrl: 'modules/forms/admin/componentViews/share-form.client.view.html',
@@ -9,11 +11,11 @@ angular.module('forms').component('shareFormComponent', {
     status: '<',
     userCanEdit: '<',
   },
-  controller: ['$state', '$translate', 'Auth', shareFormController],
+  controller: ['$state', '$translate', shareFormController],
   controllerAs: 'vm',
 })
 
-function shareFormController($state, $translate, Auth) {
+function shareFormController($state, $translate) {
   const vm = this
 
   vm.$onInit = () => {
@@ -54,6 +56,6 @@ function shareFormController($state, $translate, Auth) {
   }
 
   // Show different pro tip for user depending on their email
-  const { email } = Auth.getUser()
-  vm.isGovOfficer = String(email).endsWith('.gov.sg')
+  const user = UserService.getUserFromLocalStorage()
+  vm.isGovOfficer = user && String(user.email).endsWith('.gov.sg')
 }

src/public/modules/forms/admin/controllers/admin-form.client.controller.js

@@ -4,6 +4,7 @@ const { StatusCodes } = require('http-status-codes')
 const get = require('lodash/get')
 const { LogicType } = require('../../../../../types')
 const UpdateFormService = require('../../../../services/UpdateFormService')
+const UserService = require('../../../../services/UserService')
 const FieldFactory = require('../../helpers/field-factory')
 const { UPDATE_FORM_TYPES } = require('../constants/update-form-types')
 
@@ -42,7 +43,6 @@ angular
     '$uibModal',
     'FormData',
     'FormFields',
-    'Auth',
     'moment',
     'Toastr',
     '$state',
@@ -58,7 +58,6 @@ function AdminFormController(
   $uibModal,
   FormData,
   FormFields,
-  Auth,
   moment,
   Toastr,
   $state,
@@ -71,7 +70,7 @@ function AdminFormController(
 
   // Redirect to signin if unable to get user
   $scope.user =
-    Auth.getUser() ||
+    UserService.getUserFromLocalStorage() ||
     $state.go(
       'signin',
       {

src/public/modules/forms/admin/controllers/edit-fields-modal.client.controller.js

@@ -4,6 +4,8 @@ const axios = require('axios').default
 const values = require('lodash/values')
 const cloneDeep = require('lodash/cloneDeep')
 
+const UserService = require('../../../../services/UserService')
+
 const {
   VALID_UPLOAD_FILE_TYPES,
   MAX_UPLOAD_FILE_SIZE,
@@ -28,7 +30,6 @@ angular
     'Attachment',
     'FormFields',
     '$q',
-    'Auth',
     '$state',
     'Toastr',
     EditFieldsModalController,
@@ -42,7 +43,6 @@ function EditFieldsModalController(
   Attachment,
   FormFields,
   $q,
-  Auth,
   $state,
   Toastr,
 ) {
@@ -66,7 +66,7 @@ function EditFieldsModalController(
   }
 
   // Serialize allowed email domains
-  vm.user = Auth.getUser() || $state.go('signin')
+  vm.user = UserService.getUserFromLocalStorage() || $state.go('signin')
   if (vm.field.fieldType === 'email') {
     const userEmailDomain = '@' + vm.user.email.split('@').pop()
 

src/public/modules/forms/admin/controllers/list-forms.client.controller.js

@@ -3,14 +3,15 @@
 const get = require('lodash/get')
 const BetaService = require('../../../../services/BetaService')
 
+const UserService = require('../../../../services/UserService')
+
 // Forms controller
 angular
   .module('forms')
   .controller('ListFormsController', [
     '$scope',
     'FormApi',
     '$uibModal',
-    'Auth',
     'moment',
     '$state',
     '$timeout',
@@ -24,7 +25,6 @@ function ListFormsController(
   $scope,
   FormApi,
   $uibModal,
-  Auth,
   moment,
   $state,
   $timeout,
@@ -41,7 +41,7 @@ function ListFormsController(
   // Duplicated form outline on newly dup forms
   vm.duplicatedForms = []
   // Redirect to signin if unable to get user
-  vm.user = Auth.getUser() || $state.go('signin')
+  vm.user = UserService.getUserFromLocalStorage() || $state.go('signin')
 
   // Brings user to edit form page
   vm.editForm = function (form) {

src/public/modules/forms/admin/directives/settings-form.client.directive.js

@@ -3,6 +3,8 @@ const dedent = require('dedent-js')
 const { get, set, isEqual } = require('lodash')
 const AdminSubmissionsService = require('../../../../services/AdminSubmissionsService')
 
+const UserService = require('../../../../services/UserService')
+
 const SETTINGS_PATH = [
   'title',
   'emails',
@@ -35,8 +37,6 @@ angular
     '$timeout',
     'responseModeEnum',
     '$uibModal',
-    'Auth',
-    'Submissions',
     settingsFormDirective,
   ])
 
@@ -46,7 +46,6 @@ function settingsFormDirective(
   $timeout,
   responseModeEnum,
   $uibModal,
-  Auth,
 ) {
   return {
     templateUrl:
@@ -59,7 +58,7 @@ function settingsFormDirective(
     controller: [
       '$scope',
       function ($scope) {
-        $scope.user = Auth.getUser()
+        $scope.user = UserService.getUserFromLocalStorage()
 
         $scope.responseModeEnum = responseModeEnum
         $scope.tempForm = createTempSettings($scope.myform)