opengovsg · KenLSM · Jun 6, 2024 · Jun 5, 2024 · Jun 5, 2024 · Jun 5, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,14 +4,22 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [v6.123.0](https://github.com/opengovsg/FormSG/compare/v6.123.0...v6.123.0)
+#### [v6.124.0](https://github.com/opengovsg/FormSG/compare/v6.123.0...v6.124.0)
 
-- revert: "feat: allow wildcard domains for domain-restricted email fields" [`#7363`](https://github.com/opengovsg/FormSG/pull/7363)
+- fix(submission): capture split error [`#7360`](https://github.com/opengovsg/FormSG/pull/7360)
+- chore: remove unused deps [`#7336`](https://github.com/opengovsg/FormSG/pull/7336)
+- fix(deps): bump libphonenumber-js from 1.11.2 to 1.11.3 in /shared [`#7367`](https://github.com/opengovsg/FormSG/pull/7367)
+- chore(deps-dev): bump prettier from 3.3.0 to 3.3.1 in /shared [`#7366`](https://github.com/opengovsg/FormSG/pull/7366)
+- feat(i18n): replace hardcoded text in login features [`#7344`](https://github.com/opengovsg/FormSG/pull/7344)
+- feat(mockpass): enable admin login using mockpass locally [`#7359`](https://github.com/opengovsg/FormSG/pull/7359)
+- build: merge release back to develop [`#7364`](https://github.com/opengovsg/FormSG/pull/7364)
+- build: release v6.123.0 [`#7362`](https://github.com/opengovsg/FormSG/pull/7362)
 
 #### [v6.123.0](https://github.com/opengovsg/FormSG/compare/v6.122.0...v6.123.0)
 
 > 5 June 2024
 
+- revert: "feat: allow wildcard domains for domain-restricted email fields" [`#7363`](https://github.com/opengovsg/FormSG/pull/7363)
 - fix(deps): bump type-fest from 4.18.3 to 4.19.0 in /shared [`#7361`](https://github.com/opengovsg/FormSG/pull/7361)
 - chore(payments): remove payment flags checks from payment controller [`#7354`](https://github.com/opengovsg/FormSG/pull/7354)
 - chore(deps-dev): bump prettier from 3.2.5 to 3.3.0 in /shared [`#7357`](https://github.com/opengovsg/FormSG/pull/7357)
@@ -20,7 +28,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - feat: replace secrets-check with git-secrets [`#7353`](https://github.com/opengovsg/FormSG/pull/7353)
 - build: merge release v6.122.0 into develop [`#7352`](https://github.com/opengovsg/FormSG/pull/7352)
 - build: release v6.122.0 [`#7351`](https://github.com/opengovsg/FormSG/pull/7351)
-- chore: bump version to v6.123.0 [`314a4af`](https://github.com/opengovsg/FormSG/commit/314a4af772730e4d0196c1a53422c44f3d1421af)
+- chore: bump version to v6.123.0 [`d436640`](https://github.com/opengovsg/FormSG/commit/d436640bee5d64fe7ac6c5174dce8d34a611b5fd)
 
 #### [v6.122.0](https://github.com/opengovsg/FormSG/compare/v6.121.0...v6.122.0)
 

diff --git a/README.md b/README.md
@@ -19,6 +19,7 @@
   - [Running Locally](#running-locally)
   - [Adding dependencies](#adding-dependencies)
   - [Accessing email locally](#accessing-email-locally)
+  - [Login using mockpass locally](#login-using-mockpass-locally)
   - [Environment variables](#environment-variables)
   - [Trouble-shooting](#trouble-shooting)
 - [Testing](#testing)
@@ -130,6 +131,15 @@ As frontend project is currently not using Docker, no other steps are required.
 
 We use [MailDev](https://github.com/maildev/maildev) to access emails in the development environment. The MailDev UI can be accessed at [localhost:1080](localhost:1080) when the Docker container runs.
 
+### Login using mockpass locally
+
+1. Click on the `Login with Singpass` button on the login page
+2. In the dropdown menu, select `S9812379B [MyInfo]`
+3. Choose the profile with the email `[email protected]`
+4. You should now be successfully logged in
+
+**Note**: Remember to renew your formsg_mongodb_data volume
+
 ### Environment variables
 
 Docker-compose looks at various places for environment variables to inject into the containers.

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -89,7 +89,7 @@ services:
       - SGID_CLIENT_ID=sgidclientid
       - SGID_CLIENT_SECRET=sgidclientsecret
       - SGID_JWT_SECRET=sgidjwtsecret
-      - SGID_ADMIN_LOGIN_REDIRECT_URI=http://localhost:5001/api/v3/auth/sgid/login
+      - SGID_ADMIN_LOGIN_REDIRECT_URI=http://localhost:5001/api/v3/auth/sgid/login/callback
       - SGID_FORM_LOGIN_REDIRECT_URI=http://localhost:5001/sgid/login
       - SGID_PRIVATE_KEY=./node_modules/@opengovsg/mockpass/static/certs/key.pem
       - SGID_PUBLIC_KEY=./node_modules/@opengovsg/mockpass/static/certs/server.crt
@@ -136,7 +136,7 @@ services:
 
 
   mockpass:
-    build: https://github.com/opengovsg/mockpass.git#v4.0.4
+    build: https://github.com/opengovsg/mockpass.git#v4.3.1
     depends_on:
       - backend
     environment:

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "form-frontend",
-  "version": "6.123.0",
+  "version": "6.124.0",
   "homepage": ".",
   "private": true,
   "dependencies": {
@@ -37,7 +37,6 @@
     "i18next": "^21.6.16",
     "i18next-browser-languagedetector": "^6.1.4",
     "i18next-icu": "^2.0.3",
-    "immer": "^9.0.6",
     "inter-ui": "^3.19.3",
     "intl-messageformat": "^9.13.0",
     "jszip": "^3.10.0",

diff --git a/frontend/src/features/login/LoginPage.tsx b/frontend/src/features/login/LoginPage.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useSearchParams } from 'react-router-dom'
 import { Stack } from '@chakra-ui/react'
 import { StatusCodes } from 'http-status-codes'
@@ -25,6 +26,7 @@ export type LoginOtpData = {
 }
 
 export const LoginPage = (): JSX.Element => {
+  const { t } = useTranslation()
   const { data: isIntranetIp } = useIsIntranetCheck()
 
   const [, setIsAuthenticated] = useLocalStorage<boolean>(LOGGED_IN_KEY)
@@ -41,9 +43,9 @@ export const LoginPage = (): JSX.Element => {
       case StatusCodes.OK.toString():
         return
       case StatusCodes.UNAUTHORIZED.toString():
-        return 'Your sgID login session has expired. Please login again.'
+        return t('features.login.LoginPage.expiredSgIdSession')
       default:
-        return 'Something went wrong. Please try again later.'
+        return t('features.common.errors.generic')
     }
   }, [statusCode])
 

diff --git a/frontend/src/features/login/LoginPageTemplate.tsx b/frontend/src/features/login/LoginPageTemplate.tsx
@@ -118,7 +118,7 @@ export const LoginPageTemplate: FC = ({ children }) => {
       ) : null}
       <FeatureBanner
         bannerColorIntensity={bannerColorIntensity}
-        body="You can now collect payments directly on your form!"
+        body={t('features.login.LoginPage.banner')}
         learnMoreLink={LANDING_PAYMENTS_ROUTE}
       />
       <BaseGridLayout flex={1}>

diff --git a/frontend/src/features/login/SelectProfilePage.tsx b/frontend/src/features/login/SelectProfilePage.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { BiChevronRight } from 'react-icons/bi'
 import { Link as ReactLink } from 'react-router-dom'
 import {
@@ -46,32 +47,6 @@ type ModalErrorMessages = {
   onCtaClick: (disclosureProps: ErrorDisclosureProps) => void
 }
 
-const MODAL_ERRORS: Record<string, ModalErrorMessages> = {
-  NO_WORKEMAIL: {
-    hideCloseButton: true,
-    preventBackdropDismissal: true,
-    header: "Singpass login isn't available to you yet",
-    body: 'It is progressively being made available to agencies. In the meantime, please log in using your email address.',
-    cta: 'Back to login',
-    onCtaClick: () => window.location.assign(LOGIN_ROUTE),
-  },
-  INVALID_WORKEMAIL: {
-    header: "You don't have access to this service",
-    body: () => (
-      <Text>
-        It may be available only to select agencies or authorised individuals.
-        If you believe you should have access to this service, please{' '}
-        <Link isExternal href={SUPPORT_FORM_LINK}>
-          contact us
-        </Link>
-        .
-      </Text>
-    ),
-    cta: 'Choose another account',
-    onCtaClick: (disclosureProps) => disclosureProps.onClose(),
-  },
-}
-
 const ErrorDisclosure = (
   props: {
     errorMessages: ModalErrorMessages | undefined
@@ -118,6 +93,7 @@ const ErrorDisclosure = (
   )
 }
 export const SelectProfilePage = (): JSX.Element => {
+  const { t } = useTranslation()
   const profilesResponse = useSgidProfiles()
   const [, setIsAuthenticated] = useLocalStorage<boolean>(LOGGED_IN_KEY)
   const { user } = useUser()
@@ -128,6 +104,31 @@ export const SelectProfilePage = (): JSX.Element => {
   const errorDisclosure = useDisclosure()
   const toast = useToast({ isClosable: true, status: 'danger' })
 
+  const MODAL_ERRORS: Record<string, ModalErrorMessages> = {
+    NO_WORKEMAIL: {
+      hideCloseButton: true,
+      preventBackdropDismissal: true,
+      header: t('features.login.SelectProfilePage.noWorkEmailHeader'),
+      body: t('features.login.SelectProfilePage.noWorkEmailBody'),
+      cta: t('features.login.SelectProfilePage.noWorkEmailCta'),
+      onCtaClick: () => window.location.assign(LOGIN_ROUTE),
+    },
+    INVALID_WORKEMAIL: {
+      header: t('features.login.SelectProfilePage.invalidWorkEmailHeader'),
+      body: () => (
+        <Text>
+          {`${t('features.login.SelectProfilePage.invalidWorkEmailBodyRestriction')} `}
+          <Link isExternal href={SUPPORT_FORM_LINK}>
+            {t('features.login.SelectProfilePage.invalidWorkEmailBodyContact')}
+          </Link>
+          .
+        </Text>
+      ),
+      cta: t('features.login.SelectProfilePage.invalidWorkEmailCta'),
+      onCtaClick: (disclosureProps) => disclosureProps.onClose(),
+    },
+  }
+
   // If redirected back here but already authed, redirect to dashboard.
   if (user) window.location.replace(DASHBOARD_ROUTE)
   // User doesn't have any profiles, should reattempt to login
@@ -156,7 +157,7 @@ export const SelectProfilePage = (): JSX.Element => {
           setErrorContext(MODAL_ERRORS.INVALID_WORKEMAIL)
           return
         }
-        toast({ description: 'Something went wrong. Please try again later.' })
+        toast({ description: t('features.common.errors.generic') })
       })
   }
 
@@ -173,7 +174,7 @@ export const SelectProfilePage = (): JSX.Element => {
         divider={<Divider />}
       >
         <Text textStyle="h2" marginBottom="0.5rem" color="secondary.700">
-          Choose an account to continue to FormSG
+          {t('features.login.SelectProfilePage.accountSelection')}
         </Text>
 
         {!profilesResponse.data ? (
@@ -194,7 +195,7 @@ export const SelectProfilePage = (): JSX.Element => {
           as={ReactLink}
           to={LOGIN_ROUTE}
         >
-          Or, login manually using email and OTP
+          {t('features.login.SelectProfilePage.manualLogin')}
         </Link>
       </Stack>
       <ErrorDisclosure {...errorDisclosure} errorMessages={errorContext} />

diff --git a/frontend/src/features/login/components/OtpForm.tsx b/frontend/src/features/login/components/OtpForm.tsx
@@ -1,5 +1,6 @@
 import { useCallback } from 'react'
 import { useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import { FormControl, Stack, useBreakpointValue } from '@chakra-ui/react'
 
 import Button from '~components/Button'
@@ -25,13 +26,17 @@ export const OtpForm = ({
   onSubmit,
   onResendOtp,
 }: OtpFormProps): JSX.Element => {
+  const { t } = useTranslation()
+
   const { handleSubmit, register, formState, setError } =
     useForm<OtpFormInputs>()
 
   const isMobile = useBreakpointValue({ base: true, xs: true, lg: false })
 
   const validateOtp = useCallback(
-    (value: string) => value.length === 6 || 'Please enter a 6 digit OTP.',
+    (value: string) =>
+      value.length === 6 ||
+      t('features.login.components.OTPForm.otpLengthCheck'),
     [],
   )
 
@@ -45,7 +50,9 @@ export const OtpForm = ({
     <form onSubmit={handleSubmit(onSubmitForm)}>
       <FormControl isInvalid={!!formState.errors.otp} mb="2.5rem">
         <FormLabel isRequired htmlFor="otp">
-          {`Enter OTP sent to ${email.toLowerCase()}`}
+          {t('features.login.components.OTPForm.otpFromEmail', {
+            email: email.toLowerCase(),
+          })}
         </FormLabel>
         <Input
           type="text"
@@ -54,10 +61,10 @@ export const OtpForm = ({
           autoComplete="one-time-code"
           autoFocus
           {...register('otp', {
-            required: 'OTP is required.',
+            required: t('features.login.components.OTPForm.otpRequired'),
             pattern: {
               value: /^[0-9\b]+$/,
-              message: 'Only numbers are allowed.',
+              message: t('features.login.components.OTPForm.otpTypeCheck'),
             },
             validate: validateOtp,
           })}
@@ -77,7 +84,7 @@ export const OtpForm = ({
           isLoading={formState.isSubmitting}
           type="submit"
         >
-          Sign in
+          {t('features.login.components.OTPForm.signin')}
         </Button>
         <ResendOtpButton onResendOtp={onResendOtp} />
       </Stack>

diff --git a/frontend/src/features/login/components/SgidLoginButton.tsx b/frontend/src/features/login/components/SgidLoginButton.tsx
@@ -1,4 +1,5 @@
 import { useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import { useMutation } from 'react-query'
 import { Flex, Link, Text, VStack } from '@chakra-ui/react'
 
@@ -10,6 +11,7 @@ import Button from '~components/Button'
 
 export const SgidLoginButton = (): JSX.Element => {
   const { formState } = useForm()
+  const { t } = useTranslation()
 
   const handleLoginMutation = useMutation(getSgidAuthUrl, {
     onSuccess: (data) => {
@@ -27,15 +29,19 @@ export const SgidLoginButton = (): JSX.Element => {
         variant="outline"
       >
         <Flex align="center" flexDirection="row">
-          <Text color="primary.500">Log in with </Text>
+          <Text color="primary.500">
+            {`${t('features.login.components.SgidLoginButton.loginText')} `}
+          </Text>
           <SingpassFullLogoSvgr height="1.25rem" />
-          <Text color="primary.500"> app</Text>
+          <Text color="primary.500">
+            {` ${t('features.login.components.SgidLoginButton.appText')}`}
+          </Text>
         </Flex>
       </Button>
       <Text>
-        For{' '}
+        {`${t('features.login.components.SgidLoginButton.forText')} `}
         <Link isExternal href={SGID_VALID_ORG_PAGE}>
-          select agencies
+          {t('features.login.components.SgidLoginButton.selectAgenciesText')}
         </Link>
       </Text>
     </VStack>

diff --git a/frontend/src/i18n/locales/features/common/en-sg.ts b/frontend/src/i18n/locales/features/common/en-sg.ts
@@ -49,6 +49,7 @@ export const enSG: Common = {
       homeNo: 'Please enter a valid landline number',
     },
     pageNotFound: 'This page could not be found.',
+    generic: 'Something went wrong. Please try again later.',
   },
   tooltip: {
     deleteField: 'Delete field',

diff --git a/frontend/src/i18n/locales/features/common/index.ts b/frontend/src/i18n/locales/features/common/index.ts
@@ -49,6 +49,7 @@ export interface Common {
       homeNo: string
     }
     pageNotFound: string
+    generic: string
   }
   tooltip: {
     deleteField: string