feat: add max length reached warning (#64)

* feat: add max length reached warning

Signed-off-by: romanetar <roman_ag@hotmail.com>

* fix: extract input length limit to a constant

Signed-off-by: romanetar <roman_ag@hotmail.com>

---------

Signed-off-by: romanetar <roman_ag@hotmail.com>

Author: romanetar

resources/js/oauth2/profile/edit_client/components/form_controls.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from "react";
 import {makeStyles, withStyles} from '@material-ui/core/styles';
 import {
     Checkbox,
@@ -44,28 +44,43 @@ const TooltipLabel = ({id, title, tooltip}) => (
     </FormLabel>
 );
 
-export const SimpleTextFormControl = ({id, title, tooltip, type, value, touched, errors, maxLength, onChange}) => (
-    <FormControl variant="outlined" className={styles.form_control}>
+export const SimpleTextFormControl = ({id, title, tooltip, type, value, touched, errors, maxLength, onChange}) => {
+    const SIMPLE_INPUT_MAX_LENGTH = (maxLength ?? 100) + 1;
+    const [text, setText] = useState('');
+
+    const handleChange = (e) => {
+        setText(e.target.value);
+        if (onChange) onChange(e);
+    };
+
+    const isLimitExceeded = text.length > maxLength;
+
+    return <FormControl variant="outlined" className={styles.form_control}>
         <TooltipLabel id={id} title={title} tooltip={tooltip}/>
         <TextField
             id={id}
             name={id}
             variant="outlined"
             fullWidth
             size="small"
-            inputProps={{maxLength: maxLength ?? 100}}
+            inputProps={{maxLength: SIMPLE_INPUT_MAX_LENGTH}}
             autoFocus={true}
             value={value}
-            onChange={onChange}
+            onChange={handleChange}
             type={type}
             error={
                 touched &&
                 Boolean(errors)
             }
             helperText={touched && errors}
         />
+        {isLimitExceeded &&
+            <div className={styles.error_label}>
+                {`Cannot exceed max length (${maxLength} chars)`}
+            </div>
+        }
     </FormControl>
-);
+};
 
 export const SelectFormControl = ({id, title, tooltip, value, touched, errors, onChange, options}) => (
     <FormControl variant="outlined" className={styles.form_control}>

resources/js/oauth2/profile/edit_client/components/oauth_panel.js

@@ -38,6 +38,8 @@ const OauthPanel = ({
                         onRefreshTokenChange,
                         onSavePromise
                     }) => {
+    const SIMPLE_INPUT_MAX_LENGTH = 255;
+
     const {application_type, client_type, is_own} = entity;
     const {can_request_refresh_tokens} = initialValues;
 
@@ -85,6 +87,10 @@ const OauthPanel = ({
             app_description: string("The app description field is required.").required(
                 "The app description field is required."
             ),
+            website: string().max(SIMPLE_INPUT_MAX_LENGTH, ''),
+            logo_uri: string().max(SIMPLE_INPUT_MAX_LENGTH, ''),
+            tos_uri: string().max(SIMPLE_INPUT_MAX_LENGTH, ''),
+            policy_uri: string().max(SIMPLE_INPUT_MAX_LENGTH, ''),
         });
     }
 
@@ -282,7 +288,7 @@ const OauthPanel = ({
                         title="Application Web Site Url (optional)"
                         tooltip="Client home page URL."
                         type="url"
-                        maxLength={255}
+                        maxLength={SIMPLE_INPUT_MAX_LENGTH}
                         value={formik.values.website ?? ''}
                         touched={formik.touched.website}
                         errors={formik.errors.website}
@@ -293,7 +299,7 @@ const OauthPanel = ({
                         title="Application Logo Url (optional)"
                         tooltip="URL that references a logo for the Client application."
                         type="url"
-                        maxLength={255}
+                        maxLength={SIMPLE_INPUT_MAX_LENGTH}
                         value={formik.values.logo_uri ?? ''}
                         touched={formik.touched.logo_uri}
                         errors={formik.errors.logo_uri}
@@ -304,7 +310,7 @@ const OauthPanel = ({
                         title="Application Term of Service Url (optional)"
                         tooltip="URL that the Relying Party Client provides to the End-User to read about the Relying Party's terms of service."
                         type="url"
-                        maxLength={255}
+                        maxLength={SIMPLE_INPUT_MAX_LENGTH}
                         value={formik.values.tos_uri ?? ''}
                         touched={formik.touched.tos_uri}
                         errors={formik.errors.tos_uri}
@@ -315,7 +321,7 @@ const OauthPanel = ({
                         title="Application Policy Url (optional)"
                         tooltip="URL that the Relying Party Client provides to the End-User to read about the how the profile data will be used."
                         type="url"
-                        maxLength={255}
+                        maxLength={SIMPLE_INPUT_MAX_LENGTH}
                         value={formik.values.policy_uri ?? ''}
                         touched={formik.touched.policy_uri}
                         errors={formik.errors.policy_uri}