diff --git a/apps/frontend/src/features/admin-form/settings/SettingsPage.tsx b/apps/frontend/src/features/admin-form/settings/SettingsPage.tsx index a28d63c6fe..351cea42c2 100644 --- a/apps/frontend/src/features/admin-form/settings/SettingsPage.tsx +++ b/apps/frontend/src/features/admin-form/settings/SettingsPage.tsx @@ -75,7 +75,7 @@ export const SettingsPage = (): JSX.Element => { !isFormSettingLoading && user?.betaFlags?.multiLangTranslation ? { - label: 'Multi-language', + label: t('features.adminForm.settings.tabs.multiLanguage'), icon: LanguageTranslation, component: SettingsMultiLangPage, path: 'language', diff --git a/apps/frontend/src/features/admin-form/settings/components/AuthSettingsSection/SecretKeyDownloadWhitelistFileModal.tsx b/apps/frontend/src/features/admin-form/settings/components/AuthSettingsSection/SecretKeyDownloadWhitelistFileModal.tsx index 88bb649394..4508fb60c2 100644 --- a/apps/frontend/src/features/admin-form/settings/components/AuthSettingsSection/SecretKeyDownloadWhitelistFileModal.tsx +++ b/apps/frontend/src/features/admin-form/settings/components/AuthSettingsSection/SecretKeyDownloadWhitelistFileModal.tsx @@ -1,4 +1,5 @@ import { useCallback, useState } from 'react' +import { useTranslation } from 'react-i18next' import { useQueryClient } from 'react-query' import { UseDisclosureReturn } from '@chakra-ui/react' import Papa from 'papaparse' @@ -30,6 +31,7 @@ export const SecretKeyDownloadWhitelistFileModal = ({ downloadFileName, formId, }: SecretKeyDownloadWhitelistFileModalProps) => { + const { t } = useTranslation() const toast = useToast({ status: 'success', isClosable: true }) const errorToast = useToast({ status: 'danger', isClosable: true }) const [isDecrypting, setIsDecrypting] = useState(false) @@ -137,8 +139,12 @@ export const SecretKeyDownloadWhitelistFileModal = ({ onClose={onClose} isOpen={isOpen} publicKey={publicKey} - modalActionText="Download CSV file of whitelisted NRIC/FIN/UEN(s)" - submitButtonText="Download file" + modalActionText={t( + 'features.adminForm.settings.secretKeyModal.whitelistCsv.modalTitle', + )} + submitButtonText={t( + 'features.adminForm.settings.secretKeyModal.whitelistCsv.submitButton', + )} hasAck={false} /> ) diff --git a/apps/frontend/src/features/admin-form/settings/components/FormDetailsSection.tsx b/apps/frontend/src/features/admin-form/settings/components/FormDetailsSection.tsx index 0935577de5..0f56509a77 100644 --- a/apps/frontend/src/features/admin-form/settings/components/FormDetailsSection.tsx +++ b/apps/frontend/src/features/admin-form/settings/components/FormDetailsSection.tsx @@ -1,5 +1,6 @@ import { KeyboardEventHandler, useCallback } from 'react' import { Controller, RegisterOptions, useForm } from 'react-hook-form' +import { useTranslation } from 'react-i18next' import { FormControl, Skeleton, Stack } from '@chakra-ui/react' import { isEmpty } from 'lodash' @@ -30,6 +31,7 @@ interface FormTitleInputProps { export const FormTitleInput = ({ initialTitle, }: FormTitleInputProps): JSX.Element => { + const { t } = useTranslation() const { control, handleSubmit, @@ -71,7 +73,7 @@ export const FormTitleInput = ({ return ( - Form name + {t('features.common.formName')} control={control} diff --git a/apps/frontend/src/features/admin-form/settings/components/SecretKeyActivationModal.tsx b/apps/frontend/src/features/admin-form/settings/components/SecretKeyActivationModal.tsx index 329623d3d7..944a749dd7 100644 --- a/apps/frontend/src/features/admin-form/settings/components/SecretKeyActivationModal.tsx +++ b/apps/frontend/src/features/admin-form/settings/components/SecretKeyActivationModal.tsx @@ -1,3 +1,4 @@ +import { useTranslation } from 'react-i18next' import { UseDisclosureReturn } from '@chakra-ui/react' import { FormStatus } from 'formsg-shared/types/form/form' @@ -18,6 +19,7 @@ export const SecretKeyActivationModal = ({ isOpen, publicKey, }: SecretKeyActivationModalProps): JSX.Element => { + const { t } = useTranslation() const { mutateFormStatus } = useMutateFormSettings() const onSubmit = () => { @@ -31,8 +33,12 @@ export const SecretKeyActivationModal = ({ onClose={onClose} isOpen={isOpen} publicKey={publicKey} - modalActionText="Activate your form" - submitButtonText="Activate form" + modalActionText={t( + 'features.adminForm.settings.secretKeyModal.activation.modalTitle', + )} + submitButtonText={t( + 'features.adminForm.settings.secretKeyModal.activation.submitButton', + )} onSubmit={onSubmit} hasAck /> diff --git a/apps/frontend/src/features/admin-form/settings/components/SecretKeyFormModal.tsx b/apps/frontend/src/features/admin-form/settings/components/SecretKeyFormModal.tsx index 212c7debeb..5fe5aaa9fb 100644 --- a/apps/frontend/src/features/admin-form/settings/components/SecretKeyFormModal.tsx +++ b/apps/frontend/src/features/admin-form/settings/components/SecretKeyFormModal.tsx @@ -1,3 +1,4 @@ +import { useTranslation } from 'react-i18next' import { BiRightArrowAlt, BiUpload } from 'react-icons/bi' import { Container, @@ -51,6 +52,8 @@ export const SecretKeyFormModal = ({ onSubmit, hasAck = false, }: SecretKeyFormModalProps): JSX.Element => { + const { t } = useTranslation() + const { dragging, errors, @@ -104,22 +107,32 @@ export const SecretKeyFormModal = ({ mb="1rem" isDisabled={isLoading} > - Enter or upload Secret Key + + {t('features.adminForm.settings.secretKeyModal.fieldLabel')} + v.trim(), })} placeholder={ dragging - ? 'Drop your Secret Key here' - : 'Enter or drop your Secret Key to continue' + ? t( + 'features.adminForm.settings.secretKeyModal.placeholder.dragging', + ) + : t( + 'features.adminForm.settings.secretKeyModal.placeholder.default', + ) } onDragEnter={handleDragEnter} onDragLeave={handleDragLeave} @@ -129,7 +142,9 @@ export const SecretKeyFormModal = ({ } onClick={() => secretKeyFileUploadRef.current?.click()} /> @@ -145,8 +160,7 @@ export const SecretKeyFormModal = ({ required: true, })} > - If I lose my key, I will not be able to activate my form and - all my responses will be lost permanently + {t('features.adminForm.settings.secretKeyModal.ackLabel')} ) : null} diff --git a/apps/frontend/src/features/admin-form/settings/components/SettingsTab.tsx b/apps/frontend/src/features/admin-form/settings/components/SettingsTab.tsx index 3f70fd8447..bdec3685a2 100644 --- a/apps/frontend/src/features/admin-form/settings/components/SettingsTab.tsx +++ b/apps/frontend/src/features/admin-form/settings/components/SettingsTab.tsx @@ -1,3 +1,4 @@ +import { useTranslation } from 'react-i18next' import { As, Box, Icon, Tab } from '@chakra-ui/react' import Badge from '~components/Badge' @@ -13,6 +14,8 @@ export const SettingsTab = ({ icon, showNewBadge = false, }: SettingsTabProps): JSX.Element => { + const { t } = useTranslation() + return ( @@ -25,7 +28,7 @@ export const SettingsTab = ({ colorScheme="success" display={{ base: 'none', lg: 'initial' }} > - New + {t('features.adminForm.settings.tabs.newBadge')} ) : null} diff --git a/apps/frontend/src/i18n/locales/features/admin-form/settings/en-sg.ts b/apps/frontend/src/i18n/locales/features/admin-form/settings/en-sg.ts index 907e20238b..cdc6e01240 100644 --- a/apps/frontend/src/i18n/locales/features/admin-form/settings/en-sg.ts +++ b/apps/frontend/src/i18n/locales/features/admin-form/settings/en-sg.ts @@ -8,6 +8,32 @@ export const enSG = { singpass: { title: 'Singpass', }, + tabs: { + newBadge: 'New', + multiLanguage: 'Multi-language', + }, + secretKeyModal: { + fieldLabel: 'Enter or upload Secret Key', + uploadFromFileAriaLabel: 'Pass secret key from file', + validation: { + required: "Please enter the form's secret key", + invalidSecretKey: 'The secret key provided is invalid', + }, + placeholder: { + dragging: 'Drop your Secret Key here', + default: 'Enter or drop your Secret Key to continue', + }, + ackLabel: + 'If I lose my key, I will not be able to activate my form and all my responses will be lost permanently', + activation: { + modalTitle: 'Activate your form', + submitButton: 'Activate form', + }, + whitelistCsv: { + modalTitle: 'Download CSV file of whitelisted NRIC/FIN/UEN(s)', + submitButton: 'Download file', + }, + }, emailNotifications, webhooks, payments, diff --git a/apps/frontend/src/i18n/locales/features/admin-form/settings/index.ts b/apps/frontend/src/i18n/locales/features/admin-form/settings/index.ts index 87d7fa5410..83d75703d9 100644 --- a/apps/frontend/src/i18n/locales/features/admin-form/settings/index.ts +++ b/apps/frontend/src/i18n/locales/features/admin-form/settings/index.ts @@ -9,9 +9,38 @@ export type HasTitle = { title: string } +export interface SettingsTabsStrings { + newBadge: string + multiLanguage: string +} + +export interface SecretKeyModalStrings { + fieldLabel: string + uploadFromFileAriaLabel: string + validation: { + required: string + invalidSecretKey: string + } + placeholder: { + dragging: string + default: string + } + ackLabel: string + activation: { + modalTitle: string + submitButton: string + } + whitelistCsv: { + modalTitle: string + submitButton: string + } +} + export interface Settings { general: General singpass: HasTitle + tabs: SettingsTabsStrings + secretKeyModal: SecretKeyModalStrings emailNotifications: EmailNotifications webhooks: Webhooks payments: Payments