feat(app-general): add maxLength field to inputs

eficode · Feb 26, 2021 · cf0b3ba · cf0b3ba
1 parent f74c56f
commit cf0b3ba
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 0 deletions.
diff --git a/packages/game-app/src/_shared/components/Input/Input.tsx b/packages/game-app/src/_shared/components/Input/Input.tsx
@@ -22,6 +22,7 @@ const Input: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>(
           className={className}
           withIcon={!!iconLeft}
           variant={variant}
+          maxLength={100}
           {...rest}
         />
         {iconLeft ? <LeftInputIcon>{iconLeft}</LeftInputIcon> : null}

diff --git a/packages/game-app/src/_shared/components/PasswordInput/PasswordInput.tsx b/packages/game-app/src/_shared/components/PasswordInput/PasswordInput.tsx
@@ -10,6 +10,7 @@ import Box from '../Box';
 import Link from '../Link';
 import PopoverDetails from '../PopoverDetails';
 import StyledIcon from '../Icon';
+import { TextInput } from '@pipeline/components';
 
 type Props = {
   name: string;
@@ -23,6 +24,7 @@ type Props = {
   forgotPasswordLabel?: string;
   autoComplete?: React.ComponentProps<typeof Input>['autocomplete'];
   tabIndex?: React.ComponentProps<typeof Input>['tabIndex'];
+  maxLength?: React.ComponentProps<typeof TextInput>['maxLength'];
 };
 
 const PasswordInput = React.forwardRef<HTMLInputElement, Props>(
@@ -39,6 +41,7 @@ const PasswordInput = React.forwardRef<HTMLInputElement, Props>(
       onForgotPassword,
       tabIndex,
       autoComplete,
+      maxLength,
     },
     ref,
   ) => {
@@ -77,6 +80,7 @@ const PasswordInput = React.forwardRef<HTMLInputElement, Props>(
           id={name}
           onChange={onChange}
           tabIndex={tabIndex}
+          maxLength={maxLength}
         />
         {errorMessage ? <ErrorMessage message={errorMessage} /> : null}
       </InputContainer>

diff --git a/packages/game-app/src/_shared/components/TextInput/TextInput.tsx b/packages/game-app/src/_shared/components/TextInput/TextInput.tsx
@@ -18,6 +18,7 @@ type Props = {
   disabled?: boolean;
   tabIndex?: React.ComponentProps<typeof Input>['tabIndex'];
   autoComplete?: React.ComponentProps<typeof Input>['autocomplete'];
+  maxLength?: React.ComponentProps<typeof Input>['maxLength'];
 };
 
 const TextInput = React.forwardRef<HTMLInputElement, Props>(
@@ -34,6 +35,7 @@ const TextInput = React.forwardRef<HTMLInputElement, Props>(
       disabled,
       tabIndex,
       autoComplete,
+      maxLength,
     },
     ref,
   ) => {
@@ -59,6 +61,7 @@ const TextInput = React.forwardRef<HTMLInputElement, Props>(
           onChange={onChange}
           tabIndex={tabIndex}
           autoComplete={autoComplete}
+          maxLength={maxLength}
         />
         {errorMessage ? <ErrorMessage message={errorMessage} /> : null}
       </InputContainer>

diff --git a/packages/game-app/src/_shared/form/FormTextField/FormTextField.tsx b/packages/game-app/src/_shared/form/FormTextField/FormTextField.tsx
@@ -27,6 +27,7 @@ type Props = {
   disabled?: boolean;
   tabIndex?: React.ComponentProps<typeof TextInput>['tabIndex'];
   autoComplete?: React.ComponentProps<typeof TextInput>['autoComplete'];
+  maxLength?: React.ComponentProps<typeof TextInput>['maxLength'];
 };
 
 /**

diff --git a/packages/game-app/src/login/components/Login/Login.tsx b/packages/game-app/src/login/components/Login/Login.tsx
@@ -58,6 +58,7 @@ const Login: React.FC<Props> = () => {
                   label={t('login.form.email.label')}
                   placeholder={t('login.form.email.placeholder')}
                   autoComplete="email"
+                  maxLength={200}
                 />
                 <Box mt={3}>
                   <FormTextField
@@ -66,6 +67,7 @@ const Login: React.FC<Props> = () => {
                     label={t('login.form.password.label')}
                     placeholder={t('login.form.password.placeholder')}
                     autoComplete="current-password"
+                    maxLength={300}
                     {...passwordProps}
                   />
                 </Box>

diff --git a/packages/game-app/src/signup/components/Signup/Signup.tsx b/packages/game-app/src/signup/components/Signup/Signup.tsx
@@ -77,6 +77,7 @@ const Signup: React.FC<Props> = () => {
                         label={t('signup.form.firstName.label')}
                         placeholder={t('signup.form.firstName.placeholder')}
                         autoComplete="given-name"
+                        maxLength={100}
                       />
                     </Box>
                     <Box flex={1} ml={3}>
@@ -85,6 +86,7 @@ const Signup: React.FC<Props> = () => {
                         label={t('signup.form.lastName.label')}
                         placeholder={t('signup.form.lastName.placeholder')}
                         autoComplete="family-name"
+                        maxLength={100}
                       />
                     </Box>
                   </Box>
@@ -95,6 +97,7 @@ const Signup: React.FC<Props> = () => {
                       label={t('signup.form.email.label')}
                       placeholder={t('signup.form.email.placeholder')}
                       autoComplete="email"
+                      maxLength={200}
                     />
                   </Box>
                   <Box mt={3} display="flex" flexDirection="row">
@@ -106,6 +109,7 @@ const Signup: React.FC<Props> = () => {
                         labelDetails={t('auth.errors.passwordRequirements')}
                         placeholder={t('signup.form.password.placeholder')}
                         autoComplete="new-password"
+                        maxLength={300}
                       />
                     </Box>
                     <Box flex={1} ml={3}>
@@ -115,6 +119,7 @@ const Signup: React.FC<Props> = () => {
                         label={t('signup.form.repeatPassword.label')}
                         placeholder={t('signup.form.repeatPassword.placeholder')}
                         autoComplete="new-password"
+                        maxLength={300}
                       />
                     </Box>
                   </Box>