feat: don't autocomplete youth/employee's personally identifiable fields

Shared frontend code: - TextInput component - add autoComplete as input property and use it - SocialSecurityNumberInput component - force autoComplete="off" for this input as social security numbers should not be auto-completed for security reasons Kesäseteli frontend code: - turn off autocomplete for the following fields: - employer UI > employment accordion: - employee_name - summer_voucher_serial_number - employee_ssn (i.e. employee's social security number) - employee_postcode - employee_phone_number - employment_description - youth UI > application form: - first_name - last_name - social_security_number - postcode - phone_number - email - youth UI > additional info form: - additional_info_description refs YJDH-689
City-of-Helsinki · Jan 26, 2024 · 22a581d · 22a581d
1 parent 6465b86
commit 22a581d
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 1 deletion.
diff --git a/frontend/kesaseteli/employer/src/components/application/form/TextInput.tsx b/frontend/kesaseteli/employer/src/components/application/form/TextInput.tsx
@@ -16,6 +16,7 @@ export type TextInputProps = {
   placeholder?: string;
   helperFormat?: string;
   onChange?: (value: string) => void;
+  autoComplete?: string;
 } & GridCellProps;
 
 const TextInput: React.FC<TextInputProps> = ({
@@ -25,6 +26,7 @@ const TextInput: React.FC<TextInputProps> = ({
   helperFormat,
   placeholder,
   onChange,
+  autoComplete,
   ...$gridCellProps
 }) => {
   const { t } = useTranslation();
@@ -57,6 +59,7 @@ const TextInput: React.FC<TextInputProps> = ({
       errorText={errorText()}
       label={t(`common:application.form.inputs.${fieldName}`)}
       onChange={onChange}
+      autoComplete={autoComplete}
       {...$gridCellProps}
     />
   );

diff --git a/...seteli/employer/src/components/application/steps/step2/accordions/EmploymentAccordion.tsx b/...seteli/employer/src/components/application/steps/step2/accordions/EmploymentAccordion.tsx
@@ -117,18 +117,21 @@ const EmploymentAccordion: React.FC<Props> = ({ index }: Props) => {
           id={getId('employee_name')}
           validation={{ required: true, maxLength: 256 }}
           onChange={enableFetchEmployeeDataButton}
+          autoComplete="off"
         />
         <TextInput
           id={getId('summer_voucher_serial_number')}
           validation={{ required: true, maxLength: 64 }}
           onChange={enableFetchEmployeeDataButton}
+          autoComplete="off"
         />
         <TextInput
           id={getId('employee_ssn')}
           validation={{
             required: true,
             maxLength: 32,
           }}
+          autoComplete="off"
         />
         <SelectionGroup
           id={getId('target_group')}
@@ -151,10 +154,12 @@ const EmploymentAccordion: React.FC<Props> = ({ index }: Props) => {
             pattern: POSTAL_CODE_REGEX,
             maxLength: 256,
           }}
+          autoComplete="off"
         />
         <TextInput
           id={getId('employee_phone_number')}
           validation={{ required: true, maxLength: 64 }}
+          autoComplete="off"
         />
         <TextInput
           id={getId('employment_postcode')}
@@ -213,6 +218,7 @@ const EmploymentAccordion: React.FC<Props> = ({ index }: Props) => {
           placeholder={t(
             'common:application.step2.employment_description_placeholder'
           )}
+          autoComplete="off"
         />
         <TextInput
           id={getId('employment_salary_paid')}

diff --git a/frontend/kesaseteli/youth/src/components/additional-info-form/AdditionalInfoForm.tsx b/frontend/kesaseteli/youth/src/components/additional-info-form/AdditionalInfoForm.tsx
@@ -63,6 +63,7 @@ const AdditionalInfoForm: React.FC<Props> = ({ applicationId }) => {
               required: true,
               maxLength: 4096,
             })}
+            autoComplete="off"
           />
           <$GridCell>
             <SaveFormButton

diff --git a/frontend/kesaseteli/youth/src/components/youth-form/YouthForm.tsx b/frontend/kesaseteli/youth/src/components/youth-form/YouthForm.tsx
@@ -21,7 +21,7 @@ const YouthForm: React.FC = () => {
   return (
     <>
       <Heading header={t('common:youthApplication.form.title')} />
-      <form data-testid="youth-form">
+      <form data-testid="youth-form" autoComplete="off">
         <FormSection columns={2}>
           <$GridCell $colSpan={2}>
             {submitError ? (

diff --git a/frontend/kesaseteli/youth/src/components/youth-form/YouthFormFields.tsx b/frontend/kesaseteli/youth/src/components/youth-form/YouthFormFields.tsx
@@ -27,18 +27,21 @@ const YouthFormFields: React.FC = () => {
           pattern: NAMES_REGEX,
           maxLength: 128,
         })}
+        autoComplete="off"
       />
       <TextInput<YouthFormData>
         {...register('last_name', {
           required: true,
           pattern: NAMES_REGEX,
           maxLength: 128,
         })}
+        autoComplete="off"
       />
       <SocialSecurityNumberInput<YouthFormData>
         {...register('social_security_number', {
           required: true,
         })}
+        autoComplete="off"
       />
       <TextInput<YouthFormData>
         {...register('postcode', {
@@ -47,6 +50,7 @@ const YouthFormFields: React.FC = () => {
           minLength: 5,
           maxLength: 5,
         })}
+        autoComplete="off"
       />
       <SchoolSelection />
       <TextInput<YouthFormData>
@@ -55,13 +59,15 @@ const YouthFormFields: React.FC = () => {
           maxLength: 64,
           pattern: PHONE_NUMBER_REGEX,
         })}
+        autoComplete="off"
       />
       <TextInput<YouthFormData>
         {...register('email', {
           required: true,
           maxLength: 254,
           pattern: EMAIL_REGEX,
         })}
+        autoComplete="off"
       />
       <$GridCell $colSpan={2}>
         <Checkbox<YouthFormData>

diff --git a/frontend/shared/src/components/forms/inputs/SocialSecurityNumberInput.tsx b/frontend/shared/src/components/forms/inputs/SocialSecurityNumberInput.tsx
@@ -79,6 +79,7 @@ const SocialSecurityNumberInput = <T,>({
         invalid={Boolean(errorText)}
         {...(process.env.NODE_ENV !== 'test' && { onChange: handleChange })}
         aria-invalid={Boolean(errorText)}
+        autoComplete="off"
       />
     </$GridCell>
   );

diff --git a/frontend/shared/src/components/forms/inputs/TextInput.tsx b/frontend/shared/src/components/forms/inputs/TextInput.tsx
@@ -44,6 +44,7 @@ const TextInput = <T,>({
   errorText,
   registerOptions = {},
   onChange,
+  autoComplete,
   ...rest
 }: TextInputProps<T>): React.ReactElement<T> => {
   const { $colSpan, $rowSpan, $colStart, alignSelf, justifySelf } = rest;
@@ -100,6 +101,7 @@ const TextInput = <T,>({
         label={label}
         invalid={Boolean(errorText)}
         aria-invalid={Boolean(errorText)}
+        autoComplete={autoComplete}
       />
     </$GridCell>
   );

diff --git a/frontend/shared/src/types/input-props.d.ts b/frontend/shared/src/types/input-props.d.ts
@@ -10,6 +10,7 @@ type InputProps<T, V = string> = {
   errorText?: string;
   placeholder?: string;
   disabled?: boolean;
+  autoComplete?: string;
 };
 
 export default InputProps;