diff --git a/resources/js/oauth2/profile/edit_client/components/form_controls.js b/resources/js/oauth2/profile/edit_client/components/form_controls.js index c2a051e7..46de4a96 100644 --- a/resources/js/oauth2/profile/edit_client/components/form_controls.js +++ b/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,8 +44,18 @@ const TooltipLabel = ({id, title, tooltip}) => ( ); -export const SimpleTextFormControl = ({id, title, tooltip, type, value, touched, errors, maxLength, onChange}) => ( - +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 + {isLimitExceeded && +
+ {`Cannot exceed max length (${maxLength} chars)`} +
+ }
-); +}; export const SelectFormControl = ({id, title, tooltip, value, touched, errors, onChange, options}) => ( diff --git a/resources/js/oauth2/profile/edit_client/components/oauth_panel.js b/resources/js/oauth2/profile/edit_client/components/oauth_panel.js index 24c032a4..0b87df90 100644 --- a/resources/js/oauth2/profile/edit_client/components/oauth_panel.js +++ b/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}