feat: MRF encryption scheme

opengovsg · Dec 12, 2023 · f253e6d · f253e6d
1 parent 0bc1b54
commit f253e6d
Show file tree

Hide file tree

Showing 76 changed files with 4,472 additions and 3,479 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,7 +11,7 @@
     "@emotion/styled": "^11.6.0",
     "@floating-ui/react-dom-interactions": "^0.9.3",
     "@growthbook/growthbook-react": "^0.17.0",
-    "@opengovsg/formsg-sdk": "^0.11.0",
+    "@opengovsg/formsg-sdk": "github:opengovsg/formsg-javascript-sdk#feat/mrf-crypto",
     "@stablelib/base64": "^1.0.1",
     "@stripe/react-stripe-js": "^1.15.0",
     "@stripe/stripe-js": "^1.44.1",

diff --git a/frontend/src/components/SecretKeyVerificationInput/SecretKeyVerificationInput.tsx b/frontend/src/components/SecretKeyVerificationInput/SecretKeyVerificationInput.tsx
@@ -61,7 +61,7 @@ export const SecretKeyVerificationInput = ({
       required: "Please enter the form's secret key",
       validate: (secretKey: string) => {
         // Should not see this error message.
-        if (!publicKey) return 'This form is not a storage mode form'
+        if (!publicKey) return 'Unexpected form mode'
 
         const trimmedSecretKey = secretKey.trim()
         const isKeypairValid =

diff --git a/...c/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderFields.tsx b/...c/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderFields.tsx
@@ -16,12 +16,14 @@ import { useDesignColorTheme } from '../utils/useDesignColorTheme'
 import FieldRow from './FieldRow'
 
 interface BuilderFieldsProps {
+  responseMode: AdminFormDto['responseMode']
   fields: AdminFormDto['form_fields']
   visibleFieldIds: FieldIdSet
   isDraggingOver: boolean
 }
 
 export const BuilderFields = ({
+  responseMode,
   fields,
   visibleFieldIds,
   isDraggingOver,
@@ -54,6 +56,7 @@ export const BuilderFields = ({
             : {}
         return (
           <FieldRow
+            responseMode={responseMode}
             index={i}
             key={f._id}
             field={f}

diff --git a/...min-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx b/...min-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx
@@ -14,7 +14,7 @@ import {
 } from '@chakra-ui/react'
 import { isEqual, times } from 'lodash'
 
-import { FormColorTheme } from '~shared/types'
+import { FormColorTheme, FormResponseMode } from '~shared/types'
 import { BasicField, FormFieldDto } from '~shared/types/field'
 
 import { useIsMobile } from '~hooks/useIsMobile'
@@ -82,6 +82,7 @@ import { SectionFieldRow } from './SectionFieldRow'
 import { VerifiableFieldBuilderContainer } from './VerifiableFieldBuilderContainer'
 
 export interface FieldRowContainerProps {
+  responseMode: FormResponseMode
   field: FormFieldDto
   index: number
   isHiddenByLogic: boolean
@@ -95,6 +96,7 @@ export interface FieldRowContainerProps {
 }
 
 const FieldRowContainer = ({
+  responseMode,
   field,
   index,
   isHiddenByLogic,
@@ -293,6 +295,7 @@ const FieldRowContainer = ({
                   <FieldRow
                     field={field}
                     colorTheme={colorTheme}
+                    responseMode={responseMode}
                     showMyInfoBadge={isMyInfoField}
                   />
                 </FormProvider>
@@ -440,6 +443,7 @@ const FieldButtonGroup = ({
 type FieldRowProps = {
   field: FormFieldDto
   colorTheme?: FormColorTheme
+  responseMode: FormResponseMode
   showMyInfoBadge?: boolean
 }
 
@@ -458,7 +462,7 @@ const FieldRow = ({ field, ...rest }: FieldRowProps) => {
     case BasicField.Mobile:
       return field.isVerifiable ? (
         <VerifiableFieldBuilderContainer schema={field} {...rest}>
-          <MobileFieldInput schema={field} />
+          <MobileFieldInput schema={field} responseMode={rest.responseMode} />
         </VerifiableFieldBuilderContainer>
       ) : (
         <MobileField schema={field} {...rest} />
@@ -468,7 +472,7 @@ const FieldRow = ({ field, ...rest }: FieldRowProps) => {
     case BasicField.Email:
       return field.isVerifiable ? (
         <VerifiableFieldBuilderContainer schema={field} {...rest}>
-          <EmailFieldInput schema={field} />
+          <EmailFieldInput schema={field} responseMode={rest.responseMode} />
         </VerifiableFieldBuilderContainer>
       ) : (
         <EmailField schema={field} {...rest} />

diff --git a/...src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx b/...src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx
@@ -4,6 +4,7 @@ import { Box, Flex, FlexProps, Skeleton, Stack } from '@chakra-ui/react'
 
 import Button from '~components/Button'
 
+import { useAdminForm } from '~features/admin-form/common/queries'
 import { getVisibleFieldIds } from '~features/logic/utils'
 import { useBgColor } from '~features/public-form/components/PublicFormWrapper'
 
@@ -14,7 +15,6 @@ import {
   stateSelector as endPageStateSelector,
   useEndPageStore,
 } from '../../end-page/useEndPageStore'
-import { useAdminFormLogic } from '../../logic/hooks/useAdminFormLogic'
 import {
   setToInactiveSelector as setPaymentToInactiveSelector,
   usePaymentStore,
@@ -43,9 +43,9 @@ interface FormBuilderProps extends FlexProps {
 export const FormBuilder = ({
   placeholderProps,
   ...props
-}: FormBuilderProps): JSX.Element => {
+}: FormBuilderProps) => {
   const { builderFields, isLoading } = useBuilderFields()
-  const { formLogics } = useAdminFormLogic()
+  const { data: form } = useAdminForm()
   const { handleBuilderClick, handleEndpageClick } = useCreatePageSidebar()
   const setFieldBuilderToInactive = useFieldBuilderStore(
     setFieldBuilderToInactiveSelector,
@@ -61,9 +61,12 @@ export const FormBuilder = ({
     () =>
       getVisibleFieldIds(
         {}, // Assume form has no inputs yet.
-        { formFields: builderFields ?? [], formLogics: formLogics ?? [] },
+        {
+          formFields: builderFields ?? [],
+          formLogics: form?.form_logics ?? [],
+        },
       ),
-    [builderFields, formLogics],
+    [builderFields, form?.form_logics],
   )
 
   const handlePlaceholderClick = useCallback(
@@ -89,6 +92,8 @@ export const FormBuilder = ({
 
   const bg = useBgColor({ colorTheme: useDesignColorTheme() })
 
+  if (!form) return null
+
   return (
     <Flex
       mb={0}
@@ -136,6 +141,7 @@ export const FormBuilder = ({
                       {...provided.droppableProps}
                     >
                       <BuilderFields
+                        responseMode={form?.responseMode}
                         fields={builderFields}
                         visibleFieldIds={visibleFieldIds}
                         isDraggingOver={snapshot.isDraggingOver}

diff --git a/frontend/src/features/admin-form/responses/AdminSubmissionsService.ts b/frontend/src/features/admin-form/responses/AdminSubmissionsService.ts
@@ -2,9 +2,10 @@ import { DateString } from '~shared/types'
 import {
   FormSubmissionMetadataQueryDto,
   StorageModeChartsDto,
-  StorageModeSubmissionDto,
-  StorageModeSubmissionMetadataList,
   SubmissionCountQueryDto,
+  SubmissionDto,
+  SubmissionMetadataList,
+  SubmissionType,
 } from '~shared/types/submission'
 
 import formsgSdk from '~utils/formSdk'
@@ -13,7 +14,10 @@ import { ApiService } from '~services/ApiService'
 import { ADMIN_FORM_ENDPOINT } from '../common/AdminViewFormService'
 
 import { augmentDecryptedResponses } from './ResponsesPage/storage/utils/augmentDecryptedResponses'
-import { processDecryptedContent } from './ResponsesPage/storage/utils/processDecryptedContent'
+import {
+  processDecryptedContent,
+  processDecryptedContentV3,
+} from './ResponsesPage/storage/utils/processDecryptedContent'
 
 /**
  * Counts the number of submissions for a given form
@@ -44,7 +48,7 @@ export const countFormSubmissions = async ({
 export const getFormSubmissionsMetadata = async (
   formId: string,
   queryParams: FormSubmissionMetadataQueryDto,
-): Promise<StorageModeSubmissionMetadataList> => {
+): Promise<SubmissionMetadataList> => {
   return ApiService.get(
     `${ADMIN_FORM_ENDPOINT}/${formId}/submissions/metadata`,
     {
@@ -65,8 +69,8 @@ const getEncryptedSubmissionById = async ({
 }: {
   formId: string
   submissionId: string
-}): Promise<StorageModeSubmissionDto> => {
-  return ApiService.get<StorageModeSubmissionDto>(
+}): Promise<SubmissionDto> => {
+  return ApiService.get<SubmissionDto>(
     `${ADMIN_FORM_ENDPOINT}/${formId}/submissions/${submissionId}`,
   ).then(({ data }) => data)
 }
@@ -82,24 +86,58 @@ export const getDecryptedSubmissionById = async ({
 }) => {
   if (!secretKey) return
 
-  const { content, version, verified, attachmentMetadata, ...rest } =
-    await getEncryptedSubmissionById({ formId, submissionId })
-
-  const decryptedContent = formsgSdk.crypto.decrypt(secretKey, {
-    encryptedContent: content,
-    verifiedContent: verified,
-    version,
+  const encryptedSubmission = await getEncryptedSubmissionById({
+    formId,
+    submissionId,
   })
-  if (!decryptedContent) throw new Error('Could not decrypt the response')
-  const processedContent = augmentDecryptedResponses(
-    processDecryptedContent(decryptedContent),
-    attachmentMetadata,
+
+  let processedContent, submissionSecretKey
+  switch (encryptedSubmission.submissionType) {
+    case SubmissionType.Encrypt: {
+      const decryptedContent = formsgSdk.crypto.decrypt(secretKey, {
+        encryptedContent: encryptedSubmission.content,
+        verifiedContent: encryptedSubmission.verified,
+        version: encryptedSubmission.version,
+      })
+      if (!decryptedContent) throw new Error('Could not decrypt the response')
+      processedContent = processDecryptedContent(decryptedContent)
+      break
+    }
+    case SubmissionType.Multirespondent: {
+      const decryptedContent = formsgSdk.cryptoV3.decrypt(secretKey, {
+        encryptedContent: encryptedSubmission.encryptedContent,
+        encryptedSubmissionSecretKey:
+          encryptedSubmission.encryptedSubmissionSecretKey,
+        version: encryptedSubmission.version,
+      })
+      if (!decryptedContent) throw new Error('Could not decrypt the response')
+      processedContent = await processDecryptedContentV3(
+        encryptedSubmission.form_fields,
+        decryptedContent,
+      )
+      submissionSecretKey = decryptedContent.submissionSecretKey
+      break
+    }
+  }
+
+  const responses = augmentDecryptedResponses(
+    processedContent,
+    //TODO(MRF): fix this
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    encryptedSubmission.attachmentMetadata ?? {},
   )
 
   // Add metadata for display.
   return {
-    ...rest,
-    responses: processedContent,
+    refNo: encryptedSubmission.refNo,
+    submissionTime: encryptedSubmission.submissionTime,
+    submissionSecretKey,
+    payment:
+      encryptedSubmission.submissionType === SubmissionType.Encrypt
+        ? encryptedSubmission.payment
+        : undefined,
+    responses,
   }
 }