EP-2362 - Okta

README.md

@@ -174,8 +174,9 @@ Use yarn for faster installs and to update the yarn lock file: https://yarnpkg.c
 ### Install & Run
 
 1. `yarn` or `npm install`
-2. `yarn start` or `npm start`
-3. Browse to [`http://localhost:9000`](http://localhost:9000)
+2. `yarn build` or `npm build` _(During the build we copy the latest assets from Okta sign-in-widget package to ensure the sign up form is styled, and shows icons.)_
+3. `yarn start` or `npm start`
+4. Browse to [`http://localhost:9000`](http://localhost:9000)
 Note: For session cookies to work correctly, add an entry to your hosts file for `localhost.cru.org` pointing to `127.0.0.1` and use [`http://localhost.cru.org:9000`](http://localhost.cru.org:9000) for development
 
 ### Development Tasks
@@ -202,3 +203,18 @@ Travis auto-deploys master builds to a pre-prod s3 bucket.
 http://devtools.aws.cru.org:8080/view/Give%20Site/job/Give%20NG%20prod%20deploy/ copies
 to the live bucket, which backs CloudFront.
 
+## Okta sign-in widget
+On the initial set up, [by their instructions](https://www.npmjs.com/package/@okta/okta-signin-widget#using-the-npm-module), we copied the /css, /images and /label folders to our `/assets/okta-sign-in` folder.
+When you update the `@okta/okta-signin-widget` package, you may also need to update the `/assets/okta-sign-in` folder.
+You can do so by copying the assets from `/node_modules/@okta/okta-signin-widget/dist/`.
+
+Below is a breakdown of the assets you will need to move.
+
+#### `node_modules/@okta/okta-signin-widget/dist/css/`
+Move the file `okta-sign-in.min.css` to the folder `/assets/okta-sign-in/css`. At the time of implementing the Okta sign-in widget, there wasn't a need to add the other css files.
+
+#### `node_modules/@okta/okta-signin-widget/dist/img/`
+_I highly doubt you will need to move over more images. I didn't want to use webpack for these images, as there are a lot of images we do not need._ But if you need to move them, please move them into the folder `/assets/okta-sign-in/img`.
+
+#### `node_modules/@okta/okta-signin-widget/dist/labels/`
+Webpack copies the labels from `@okta/okta-signin-widget` and stores them on our application, so do need to update these.

__mocks__/oktaMock.js

@@ -0,0 +1,82 @@
+export class OktaAuth {
+  constructor () {
+    this.succeed = false
+    this.loginRedirect = false
+    this.authenticated = false
+
+    this.signOut = jest.fn()
+    this.signOut.mockImplementation(() => Promise.resolve())
+
+    this.token = {
+      parseFromUrl: jest.fn(),
+      getWithRedirect: jest.fn()
+    }
+
+    this.token.parseFromUrl.mockImplementation(() => {
+      if (this.succeed) {
+        return Promise.resolve({
+          tokens: { accessToken: 'wee' }
+        })
+      } else {
+        return Promise.reject(new Error('Something went wrong'))
+      }
+    })
+    this.token.getWithRedirect.mockImplementation(() => Promise.resolve())
+
+    this.tokenManager = {
+      setTokens: () => {},
+      getTokens: () => {
+        if (this.authenticated && this.succeed) {
+          return Promise.resolve({
+            accessToken: {
+              accessToken: 'wee'
+            }
+          })
+        } else if (!this.succeed) {
+          return Promise.reject(new Error('Something went wrong'))
+        }
+      }
+    }
+  }
+
+  isLoginRedirect () {
+    return this.loginRedirect
+  }
+
+  isAuthenticated () {
+    return Promise.resolve(this.authenticated)
+  }
+
+  shouldSucceed () {
+    this.succeed = true
+  }
+
+  shouldFail () {
+    this.succeed = false
+  }
+
+  setupForRedirect () {
+    this.loginRedirect = true
+    this.setAuthenticated(true)
+  }
+
+  setAuthenticated (authenticated) {
+    this.authenticated = authenticated
+  }
+
+  setLoginRedirect (loginRedirect) {
+    this.loginRedirect = loginRedirect
+  }
+
+  revokeAccessToken () {
+    return Promise.resolve(true)
+  }
+
+  revokeRefreshToken () {
+    return Promise.resolve(true)
+  }
+
+  closeSession () {
+    return Promise.resolve(true)
+  }
+}

jest.config.js

@@ -11,10 +11,12 @@ module.exports = {
     'angular',
     'angular-mocks',
     'jest-date-mock',
-    '<rootDir>/jest/setup.js'
+    '<rootDir>/jest/setup.js',
+    'jest-canvas-mock'
   ],
   moduleNameMapper: {
-    '^.+\\.(css|scss)$': '<rootDir>/__mocks__/styleMock.js'
+    '^.+\\.(css|scss)$': '<rootDir>/__mocks__/styleMock.js',
+    '^@okta/okta-auth-js$': '<rootDir>/__mocks__/oktaMock.js'
   },
   modulePaths: [
     '<rootDir>/src'

package.json

@@ -6,6 +6,7 @@
     "@babel/runtime-corejs2": "^7.25.9",
     "@cruglobal/cru-payments": "^1.2.4",
     "@datadog/browser-rum": "^5.16.0",
+    "@okta/okta-signin-widget": "^7.25.1",
     "angular": "^1.8.3",
     "angular-cookies": "^1.8.2",
     "angular-environment": "https://github.com/jonshaffer/angular-environment.git#d3082c06fb16804d324faac9b7e753fd64a44e5d",
@@ -59,6 +60,7 @@
     "css-loader": "^3.2.0",
     "html-loader": "^0.5.5",
     "jest": "^29.7.0",
+    "jest-canvas-mock": "^2.5.2",
     "jest-date-mock": "^1.0.7",
     "jest-environment-jsdom": "^29.4.2",
     "mini-css-extract-plugin": "^0.8.0",

src/app/analytics/analytics.factory.spec.js

@@ -129,7 +129,7 @@ describe('analytics factory', () => {
         price: itemConfig.AMOUNT.toString(),
         quantity: '1',
         recurring_date: 'September 13, 2023',
-        testing_transaction: 'false',
+        testing_transaction: "false",
       })
     });
 

src/app/branded/branded-checkout.component.js

@@ -47,7 +47,8 @@ class BrandedCheckoutController {
     this.analyticsFactory.pageLoaded(true)
     this.formatDonorDetails()
 
-    this.sessionService.signOut().subscribe(() => {
+    // We want to use signOutWithoutRedirectToOkta, as signout will redirect the user to okta to flush Okta's session data.
+    this.sessionService.signOutWithoutRedirectToOkta().subscribe(() => {
       this.checkoutStep = 'giftContactPayment'
       this.fireAnalyticsEvents('contact', 'payment')
       // Remove initialLoadComplete session storage. Used on src/common/components/contactInfo/contactInfo.component.js

src/app/branded/branded-checkout.spec.js

@@ -63,11 +63,11 @@ describe('branded checkout', () => {
     })
 
     it('should set initial checkout step and call formatDonorDetails', () => {
-      jest.spyOn($ctrl.sessionService, 'signOut').mockReturnValue(Observable.of(''))
+      jest.spyOn($ctrl.sessionService, 'signOutWithoutRedirectToOkta').mockReturnValue(Observable.of(''))
       jest.spyOn($ctrl, 'formatDonorDetails').mockImplementation(() => {})
       $ctrl.$onInit()
 
-      expect($ctrl.sessionService.signOut).toHaveBeenCalled()
+      expect($ctrl.sessionService.signOutWithoutRedirectToOkta).toHaveBeenCalled()
       expect($ctrl.code).toEqual('1234567')
       expect($ctrl.tsysService.setDevice).toHaveBeenCalledWith('test-env')
       expect($ctrl.checkoutStep).toEqual('giftContactPayment')

src/app/checkout/step-3/step-3.component.js

@@ -2,31 +2,27 @@ import angular from 'angular'
 import isString from 'lodash/isString'
 import { Observable } from 'rxjs/Observable'
 import 'rxjs/add/observable/throw'
-
-import displayAddressComponent from 'common/components/display-address/display-address.component'
-import displayRateTotals from 'common/components/displayRateTotals/displayRateTotals.component'
-
 import commonService from 'common/services/api/common.service'
 import cartService from 'common/services/api/cart.service'
 import orderService from 'common/services/api/order.service'
 import profileService from 'common/services/api/profile.service'
+import sessionService, { SignInEvent } from 'common/services/session/session.service'
 import capitalizeFilter from 'common/filters/capitalize.filter'
 import desigSrcDirective from 'common/directives/desigSrc.directive'
-import { cartUpdatedEvent } from 'common/components/nav/navCart/navCart.component'
-import { SignInEvent } from 'common/services/session/session.service'
 import { startDate } from 'common/services/giftHelpers/giftDates.service'
-import recaptchaComponent from 'common/components/Recaptcha/RecaptchaWrapper'
-
-import template from './step-3.tpl.html'
-
 import analyticsFactory from 'app/analytics/analytics.factory'
+import { cartUpdatedEvent } from 'common/components/nav/navCart/navCart.component'
+import displayAddressComponent from 'common/components/display-address/display-address.component'
+import displayRateTotals from 'common/components/displayRateTotals/displayRateTotals.component'
+import template from './step-3.tpl.html'
+import recaptchaComponent from 'common/components/Recaptcha/RecaptchaWrapper'
 import { recaptchaFailedEvent, submitOrderEvent } from 'app/checkout/cart-summary/cart-summary.component'
 
 const componentName = 'checkoutStep3'
 
 class Step3Controller {
   /* @ngInject */
-  constructor (orderService, $window, $rootScope, $scope, $log, analyticsFactory, cartService, commonService, profileService, envService) {
+  constructor (orderService, $window, $rootScope, $scope, $log, analyticsFactory, cartService, commonService, profileService, sessionService, envService) {
     this.orderService = orderService
     this.$window = $window
     this.$rootScope = $rootScope
@@ -38,6 +34,7 @@ class Step3Controller {
     this.commonService = commonService
     this.startDate = startDate
     this.sessionStorage = $window.sessionStorage
+    this.sessionService = sessionService
     this.selfReference = this
     this.isBranded = envService.read('isBrandedCheckout')
 
@@ -133,6 +130,19 @@ class Step3Controller {
     return enableSubmitBtn
   }
 
+  saveDonorDataForRegistration () {
+    if (this.donorDetails['registration-state'] !== 'COMPLETED') {
+      const storeSessionData = {}
+      storeSessionData.name = { ...this.donorDetails.name }
+      storeSessionData.mailingAddress = { ...this.donorDetails.mailingAddress }
+      storeSessionData['spouse-name'] = { ...this.donorDetails['spouse-name'] }
+      storeSessionData['donor-type'] = this.donorDetails['donor-type']
+      storeSessionData['organization-name'] = this.donorDetails['organization-name']
+      storeSessionData['phone-number'] = this.donorDetails['phone-number']
+      this.sessionService.updateCheckoutSavedData(storeSessionData)
+    }
+  }
+
   submitOrder () {
     this.submitOrderInternal(this)
   }
@@ -162,6 +172,7 @@ class Step3Controller {
       componentInstance.orderService.clearCoverFees()
       componentInstance.onSubmitted()
       componentInstance.$scope.$emit(cartUpdatedEvent)
+      componentInstance.saveDonorDataForRegistration()
       componentInstance.changeStep({ newStep: 'thankYou' })
     },
     error => {
@@ -206,6 +217,7 @@ export default angular
     analyticsFactory.name,
     cartService.name,
     commonService.name,
+    sessionService.name,
     recaptchaComponent.name
   ])
   .component(componentName, {

src/app/checkout/step-3/step-3.component.spec.js

@@ -343,6 +343,7 @@ describe('checkout', () => {
       describe('submit single order', () => {
         beforeEach(() => {
           jest.spyOn(self.controller.$scope, '$emit').mockImplementation(() => {})
+          jest.spyOn(self.controller.sessionService, 'updateCheckoutSavedData')          
         })
 
         afterEach(() => {
@@ -353,13 +354,16 @@ describe('checkout', () => {
 
         it('should submit the order normally if paying with a bank account', () => {
           self.controller.bankAccountPaymentDetails = {}
+          self.controller.donorDetails = {
+            'registration-state': 'NEW'
+          }
           self.controller.submitOrder()
-
           expect(self.controller.orderService.submit).toHaveBeenCalled()
           expect(self.controller.analyticsFactory.purchase).toHaveBeenCalledWith(self.controller.donorDetails, self.controller.cartData, self.coverFeeDecision)
           expect(self.controller.orderService.clearCardSecurityCodes).toHaveBeenCalled()
           expect(self.controller.changeStep).toHaveBeenCalledWith({ newStep: 'thankYou' })
           expect(self.controller.$scope.$emit).toHaveBeenCalledWith(cartUpdatedEvent)
+          expect(self.controller.sessionService.updateCheckoutSavedData).toHaveBeenCalled()
         })
 
         it('should handle an error submitting an order with a bank account', () => {
@@ -379,6 +383,9 @@ describe('checkout', () => {
 
         it('should submit the order with a CVV if paying with a credit card', () => {
           self.controller.creditCardPaymentDetails = {}
+          self.controller.donorDetails = {
+            'registration-state': 'MATCHED'
+          }
           self.storedCvv = '1234'
           self.coverFeeDecision = true
           self.controller.submitOrder()
@@ -388,9 +395,13 @@ describe('checkout', () => {
           expect(self.controller.orderService.clearCardSecurityCodes).toHaveBeenCalled()
           expect(self.controller.changeStep).toHaveBeenCalledWith({ newStep: 'thankYou' })
           expect(self.controller.$scope.$emit).toHaveBeenCalledWith(cartUpdatedEvent)
+          expect(self.controller.sessionService.updateCheckoutSavedData).toHaveBeenCalled()
         })
 
         it('should submit the order without a CVV if paying with an existing credit card or the cvv in session storage is missing', () => {
+          self.controller.donorDetails = {
+            'registration-state': 'COMPLETED'
+          }
           self.controller.creditCardPaymentDetails = {}
           self.storedCvv = undefined
           self.coverFeeDecision = true
@@ -401,6 +412,7 @@ describe('checkout', () => {
           expect(self.controller.orderService.clearCardSecurityCodes).toHaveBeenCalled()
           expect(self.controller.changeStep).toHaveBeenCalledWith({ newStep: 'thankYou' })
           expect(self.controller.$scope.$emit).toHaveBeenCalledWith(cartUpdatedEvent)
+          expect(self.controller.sessionService.updateCheckoutSavedData).not.toHaveBeenCalled()
         })
 
         it('should handle an error submitting an order with a credit card', () => {
@@ -440,6 +452,9 @@ describe('checkout', () => {
         })
 
         it('should clear out cover fee data', () => {
+          self.controller.donorDetails = {
+            'registration-state': 'NEW'
+          }
           self.controller.creditCardPaymentDetails = {}
           self.controller.submitOrder()
 

src/app/designationEditor/designationEditor.component.js

@@ -10,8 +10,9 @@ import sessionEnforcerService, {
   EnforcerCallbacks,
   EnforcerModes
 } from 'common/services/session/sessionEnforcer.service'
+import { Roles } from 'common/services/session/session.service'
+import sessionHandleOktaRedirectService from 'common/services/session/sessionHandleOktaRedirect.service'
 import sessionModalService from 'common/services/session/sessionModal.service'
-import sessionService, { Roles } from 'common/services/session/session.service'
 import designationEditorService from 'common/services/api/designationEditor.service'
 
 import titleModalController from './titleModal/title.modal'
@@ -38,12 +39,11 @@ const componentName = 'designationEditor'
 
 class DesignationEditorController {
   /* @ngInject */
-  constructor ($scope, $log, $q, $uibModal, $location, $window, $timeout, envService, sessionService, sessionEnforcerService, sessionModalService, designationEditorService) {
-    this.$scope = $scope
+  constructor ($log, $q, $uibModal, $location, $window, $rootScope, $timeout, envService, sessionEnforcerService, sessionHandleOktaRedirectService, sessionModalService, designationEditorService) {
     this.$log = $log
     this.$timeout = $timeout
-    this.sessionService = sessionService
     this.sessionEnforcerService = sessionEnforcerService
+    this.sessionHandleOktaRedirectService = sessionHandleOktaRedirectService
     this.sessionModalService = sessionModalService
     this.designationEditorService = designationEditorService
 
@@ -56,6 +56,7 @@ class DesignationEditorController {
     this.$q = $q
     this.$uibModal = $uibModal
     this.$window = $window
+    this.$rootScope = $rootScope
   }
 
   $onInit () {
@@ -67,6 +68,11 @@ class DesignationEditorController {
       this.$window.location = '/'
     }
 
+    this.sessionHandleOktaRedirectService.onHandleOktaRedirect()
+    this.sessionHandleOktaRedirectService.errorMessageSubject.subscribe((errorMessage) => {
+      this.errorMessage = errorMessage
+    })
+
     this.enforcerId = this.sessionEnforcerService([Roles.registered], {
       [EnforcerCallbacks.signIn]: () => {
         this.getDesignationContent()
@@ -271,7 +277,7 @@ class DesignationEditorController {
     // pick up on the changes. Toggling contentLoaded off then back on will cause the ng-if on
     // `.secondaryPhoto` will forcibly recreate the carousel DOM element.
     this.contentLoaded = false
-    this.$scope.$applyAsync(() => {
+    this.$rootScope.$applyAsync(() => {
       this.contentLoaded = true
     })
   }
@@ -402,8 +408,8 @@ export default angular
     'environment',
     'ngSanitize',
     commonModule.name,
-    sessionService.name,
     sessionEnforcerService.name,
+    sessionHandleOktaRedirectService.name,
     sessionModalService.name,
     designationEditorService.name,
     titleModalController.name,