packages/components/containers/vpn/gateways/GatewayNameField.tsx

   1 import { c } from 'ttag';
   2
   3 import InputFieldTwo from '@proton/components/components/v2/field/InputField';
   4 import { maxLengthValidator, minLengthValidator, requiredValidator } from '@proton/shared/lib/helpers/formValidators';
   5
   6 import type { GatewayDto } from './GatewayDto';
   7
   8 type GatewayName = Pick<GatewayDto, 'name'>;
   9
  10 interface Props {
  11     model: GatewayName;
  12     changeModel: (diff: Partial<GatewayDto>) => void;
  13     validator: (validations: string[]) => string;
  14 }
  15
  16 export const GatewayNameField = ({ model, changeModel, validator }: Props) => {
  17     const noSpaceMessage = c('Info').t`Must not contain spaces.`;
  18     const formatMessage = c('Info').t`Must contain only letters, digits, and dashes (-).`;
  19     const startWithLetterMessage = c('Info').t`Must start with a letter.`;
  20
  21     const gatewayNameNoSpaceValidator = (value: string) => (/\s/.test(value) ? noSpaceMessage : '');
  22     const gatewayNameStartWithLetterValidator = (value: string) => (/^[A-Z]/.test(value) ? '' : startWithLetterMessage);
  23     const gatewayNameValidator = (value: string) => (/^[A-Z][A-Z0-9-]+$/.test(value) ? '' : formatMessage);
  24
  25     const name = model.name || '';
  26
  27     return (
  28         <>
  29             <InputFieldTwo
  30                 autoFocus
  31                 label={c('Label').t`Gateway name`}
  32                 placeholder="MY-COMPANY-OFFICE"
  33                 value={name}
  34                 onValue={(value: string) => {
  35                     changeModel({ name: value.toUpperCase() });
  36                 }}
  37                 error={validator([
  38                     requiredValidator(name),
  39                     minLengthValidator(name, 3),
  40                     maxLengthValidator(name, 20),
  41                     gatewayNameStartWithLetterValidator(name),
  42                     gatewayNameNoSpaceValidator(name),
  43                     gatewayNameValidator(name),
  44                 ])}
  45             />
  46             <div>
  47                 <ul className="pl-4 mt-2 color-weak">
  48                     <li>{c('Info').t`Must be between 3 and 20 characters long.`}</li>
  49                     <li>{startWithLetterMessage}</li>
  50                     <li>{formatMessage}</li>
  51                     <li>{noSpaceMessage}</li>
  52                 </ul>
  53             </div>
  54         </>
  55     );
  56 };
  57
  58 export default GatewayNameField;