feat(frontend): write FieldVerificationService in TypeScript

src/app/modules/verification/verification.controller.ts

@@ -5,7 +5,7 @@ import { createLoggerWithLabel } from '../../../config/logger'
 import { VfnErrors } from '../../../shared/util/verification'
 
 import * as VerificationService from './verification.service'
-import { ITransaction } from './verification.types'
+import { Transaction } from './verification.types'
 
 const logger = createLoggerWithLabel(module)
 /**
@@ -18,15 +18,15 @@ const logger = createLoggerWithLabel(module)
  */
 export const createTransaction: RequestHandler<
   Record<string, string>,
-  ITransaction,
+  Transaction,
   { formId: string }
 > = async (req, res) => {
   try {
     const { formId } = req.body
     const transaction = await VerificationService.createTransaction(formId)
     return transaction
       ? res.status(StatusCodes.CREATED).json(transaction)
-      : res.sendStatus(StatusCodes.OK)
+      : res.status(StatusCodes.OK).json({})
   } catch (error) {
     logger.error({
       message: 'Error creating transaction',

src/app/modules/verification/verification.service.ts

@@ -18,7 +18,7 @@ import MailService from '../../services/mail/mail.service'
 import { SmsFactory } from '../../services/sms/sms.factory'
 import { generateOtp } from '../../utils/otp'
 
-import { ITransaction } from './verification.types'
+import { Transaction } from './verification.types'
 
 const Form = getFormModel(mongoose)
 const Verification = getVerificationModel(mongoose)
@@ -38,7 +38,7 @@ const {
  */
 export const createTransaction = async (
   formId: string,
-): Promise<ITransaction | null> => {
+): Promise<Transaction | null> => {
   const form = await Form.findById(formId)
 
   if (!form) {

src/app/modules/verification/verification.types.ts

@@ -1,6 +1,8 @@
 import { IVerificationSchema } from '../../../types'
 
-export interface ITransaction {
-  transactionId: IVerificationSchema['_id']
-  expireAt: IVerificationSchema['expireAt']
-}
+export type Transaction =
+  | {
+      transactionId: IVerificationSchema['_id']
+      expireAt: IVerificationSchema['expireAt']
+    }
+  | Record<string, never>

src/public/main.js

@@ -272,7 +272,6 @@ require('./modules/forms/services/color-themes.client.service.js')
 require('./modules/forms/services/form-logic.client.service.js')
 require('./modules/forms/services/rating.client.service.js')
 require('./modules/forms/services/betas.client.factory.js')
-require('./modules/forms/services/verification.client.factory.js')
 require('./modules/forms/services/captcha.client.service.js')
 require('./modules/forms/services/mailto.client.factory.js')
 

src/public/modules/forms/base/components/verifiable-field.client.component.js

@@ -1,5 +1,6 @@
 'use strict'
-const { isEmpty, merge, keys } = require('lodash')
+const { isEmpty, merge, keys, get } = require('lodash')
+const FieldVerificationService = require('../../../../services/FieldVerificationService')
 angular.module('forms').component('verifiableFieldComponent', {
   transclude: true,
   templateUrl: 'modules/forms/base/componentViews/verifiable-field.html',
@@ -8,16 +9,11 @@ angular.module('forms').component('verifiableFieldComponent', {
     field: '<', // The model that the input field is based on
     input: '<',
   },
-  controller: [
-    'Verification',
-    '$timeout',
-    '$interval',
-    verifiableFieldController,
-  ],
+  controller: ['$q', '$timeout', '$interval', verifiableFieldController],
   controllerAs: 'vm',
 })
 
-function verifiableFieldController(Verification, $timeout, $interval) {
+function verifiableFieldController($q, $timeout, $interval) {
   const vm = this
   vm.$onInit = () => {
     vm.otp = {
@@ -50,10 +46,11 @@ function verifiableFieldController(Verification, $timeout, $interval) {
         throw new Error('No transaction id')
       }
 
-      await Verification.getNewOtp(
-        { transactionId: vm.transactionId },
-        { fieldId: vm.field._id, answer: lastRequested.value },
-      )
+      await FieldVerificationService.triggerSendOtp({
+        transactionId: vm.transactionId,
+        fieldId: vm.field._id,
+        answer: lastRequested.value,
+      })
       disableResendButton(DISABLED_SECONDS)
       updateView(STATES.VFN_WAITING_FOR_INPUT)
     } catch (err) {
@@ -81,9 +78,12 @@ function verifiableFieldController(Verification, $timeout, $interval) {
         return onVerificationFailure()
       }
 
-      await Verification.verifyOtp(
-        { transactionId: vm.transactionId },
-        { fieldId: vm.field._id, otp: otp },
+      $q.resolve(
+        FieldVerificationService.verifyOtp({
+          transactionId: vm.transactionId,
+          fieldId: vm.field._id,
+          otp,
+        }),
       )
         .then(onVerificationSuccess)
         .catch(onVerificationFailure)
@@ -110,10 +110,10 @@ function verifiableFieldController(Verification, $timeout, $interval) {
         if (getView() !== STATES.VFN_DEFAULT) {
           // We don't await on reset because we don't care if it fails
           // The signature will be wrong anyway if it fails, and submission will be prevented
-          Verification.resetFieldInTransaction(
-            { transactionId: vm.transactionId },
-            { fieldId: vm.field._id },
-          )
+          FieldVerificationService.resetVerifiedField({
+            transactionId: vm.transactionId,
+            fieldId: vm.field._id,
+          })
         }
         resetDefault()
       }
@@ -244,8 +244,11 @@ function verifiableFieldController(Verification, $timeout, $interval) {
   }
 
   const getErrorMessage = (err) => {
+    // So that switch case works for both axios error objects and string objects.
+    const error = get(err, 'response.data', err)
+
     let errMessage = ''
-    switch (err) {
+    switch (error) {
       case 'SEND_OTP_FAILED':
       case 'RESEND_OTP':
         errMessage = 'Error - try resending the OTP.'

src/public/modules/forms/base/directives/submit-form.directive.js

@@ -1,5 +1,7 @@
 'use strict'
 const { cloneDeep } = require('lodash')
+
+const FieldVerificationService = require('../../../../services/FieldVerificationService')
 const MyInfoService = require('../../../../services/MyInfoService')
 const {
   getVisibleFieldIds,
@@ -23,8 +25,8 @@ const FORM_STATES = {
 angular
   .module('forms')
   .directive('submitFormDirective', [
-    '$window',
     '$q',
+    '$window',
     'GTag',
     'SpcpRedirect',
     'SpcpSession',
@@ -34,13 +36,12 @@ angular
     'Submissions',
     '$uibModal',
     '$timeout',
-    'Verification',
     submitFormDirective,
   ])
 
 function submitFormDirective(
-  $window,
   $q,
+  $window,
   GTag,
   SpcpRedirect,
   SpcpSession,
@@ -50,7 +51,6 @@ function submitFormDirective(
   Submissions,
   $uibModal,
   $timeout,
-  Verification,
 ) {
   return {
     restrict: 'E',
@@ -421,11 +421,13 @@ function submitFormDirective(
 
       // Create a transaction if there are fields to be verified and the form is intended for submission
       if (!scope.disableSubmitButton) {
-        Verification.createTransaction({ formId: scope.form._id }).then(
-          ({ transactionId }) => {
-            if (transactionId) scope.transactionId = transactionId
-          },
-        )
+        $q.resolve(
+          FieldVerificationService.createTransactionForForm(scope.form._id),
+        ).then((res) => {
+          if (res.transactionId) {
+            scope.transactionId = res.transactionId
+          }
+        })
       }
     },
   }

src/public/services/FieldVerificationService.ts

@@ -0,0 +1,100 @@
+import axios from 'axios'
+import { Opaque } from 'type-fest'
+
+export type JsonDate = Opaque<string, 'JsonDate'>
+
+/**
+ * Response when retrieving new transaction. Can be an empty object if the
+ * current form does not have any verifiable fields.
+ */
+export type FetchNewTransactionResponse =
+  | { expireAt: JsonDate; transactionId: string }
+  | Record<string, never>
+
+type VerifiedFieldSignature = Opaque<string, 'VerifiedFieldSignature'>
+
+/** Exported for testing */
+export const TRANSACTION_ENDPOINT = '/transaction'
+
+/**
+ * Create a transaction for given form.
+ * @param formId The id of the form to create a transaction for
+ * @returns transaction metadata on success. Can be empty if no transactions are found in the form.
+ */
+export const createTransactionForForm = async (
+  formId: string,
+): Promise<FetchNewTransactionResponse> => {
+  return axios
+    .post<FetchNewTransactionResponse>(TRANSACTION_ENDPOINT, {
+      formId,
+    })
+    .then(({ data }) => data)
+}
+
+/**
+ * Sends an OTP to given answer.
+ * @param transactionId The generated transaction id for the form
+ * @param fieldId The id of the verification field
+ * @param answer The value of the verification field to verify. Usually an email or phone number
+ * @returns 201 Created status if successfully sent
+ */
+export const triggerSendOtp = async ({
+  transactionId,
+  fieldId,
+  answer,
+}: {
+  transactionId: string
+  fieldId: string
+  answer: string
+}): Promise<void> => {
+  return axios.post(`${TRANSACTION_ENDPOINT}/${transactionId}/otp`, {
+    fieldId,
+    answer,
+  })
+}
+
+/**
+ * Verifies given OTP for given fieldId
+ * @param transactionId The generated transaction id for the form
+ * @param fieldId The id of the verification field
+ * @param otp The user-entered OTP value to verify against
+ * @returns The verified signature on success
+ */
+export const verifyOtp = async ({
+  transactionId,
+  fieldId,
+  otp,
+}: {
+  transactionId: string
+  fieldId: string
+  otp: string
+}): Promise<VerifiedFieldSignature> => {
+  return axios
+    .post<VerifiedFieldSignature>(
+      `${TRANSACTION_ENDPOINT}/${transactionId}/otp/verify`,
+      {
+        fieldId,
+        otp,
+      },
+    )
+    .then(({ data }) => data)
+}
+
+/**
+ * Reset the field in the transaction, removing the previously saved signature.
+ *
+ * @param transactionId The generated transaction id for the form
+ * @param fieldId The id of the verification field to reset
+ * @returns 200 OK status if successfully reset
+ */
+export const resetVerifiedField = async ({
+  transactionId,
+  fieldId,
+}: {
+  transactionId: string
+  fieldId: string
+}): Promise<void> => {
+  return axios.post(`${TRANSACTION_ENDPOINT}/${transactionId}/reset`, {
+    fieldId,
+  })
+}