From 70c21fa08ca0a270e4fa49de29733a6ebec03f01 Mon Sep 17 00:00:00 2001 From: romanetar Date: Tue, 29 Oct 2024 19:44:59 +0100 Subject: [PATCH 1/2] feat: add max length reached warning Signed-off-by: romanetar --- .../edit_client/components/form_controls.js | 26 ++++++++++++++----- .../edit_client/components/oauth_panel.js | 14 +++++++--- 2 files changed, 30 insertions(+), 10 deletions(-) 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..600db1cf 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,17 @@ 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 [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} From 61c6e0c2d2543777659ee793932a77b00105b3e0 Mon Sep 17 00:00:00 2001 From: romanetar Date: Tue, 19 Nov 2024 11:02:07 +0100 Subject: [PATCH 2/2] fix: extract input length limit to a constant Signed-off-by: romanetar --- .../js/oauth2/profile/edit_client/components/form_controls.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 600db1cf..46de4a96 100644 --- a/resources/js/oauth2/profile/edit_client/components/form_controls.js +++ b/resources/js/oauth2/profile/edit_client/components/form_controls.js @@ -45,6 +45,7 @@ const TooltipLabel = ({id, title, tooltip}) => ( ); 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) => { @@ -62,7 +63,7 @@ export const SimpleTextFormControl = ({id, title, tooltip, type, value, touched, variant="outlined" fullWidth size="small" - inputProps={{maxLength: (maxLength ?? 100) + 1}} + inputProps={{maxLength: SIMPLE_INPUT_MAX_LENGTH}} autoFocus={true} value={value} onChange={handleChange}