Add new input preferred_client_id to ClientCreateContainer

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Release Candidate
 
+### Refactoring
+
+- Add new input `preferred_client_id` to ClientCreateContainer (INDIGO Sprint 221209, [!7](https://github.com/TeskaLabs/seacat-admin-webui/pull/7))
+
 ## v22.48
 
 ### Compatibility

public/locales/cs/translation.json

@@ -97,6 +97,7 @@
 		"Create new client": "Vytvořit nového klienta",
 		"Template": "Šablona",
 		"Client name": "Název klienta",
+		"Preferred client ID": "Preferované ID klienta",
 		"Client URI": "URI klienta",
 		"Response types": "Typy odpovědí",
 		"Grant types": "Typy grantů",
@@ -133,6 +134,7 @@
 	"ClientFormField": {
 		"Add new input": "Přidat pole",
 		"Remove input": "Odstranit pole",
+		"Invalid format, input should have minimum of 8 characters": "Nesprávný formát, pole musí mít minimálně 8 znaků",
 		"URI can't be empty": "URI nemůže být prázdný",
 		"URI have to start with https": "URI musí začínat https",
 		"URL hash have to be empty": "URL hash musí být prázdný",

public/locales/en/translation.json

@@ -97,6 +97,7 @@
 		"Create new client": "Create new client",
 		"Template": "Template",
 		"Client name": "Client name",
+		"Preferred client ID": "Preferred client ID",
 		"Client URI": "Client URI",
 		"Response types": "Response types",
 		"Grant types": "Grant types",
@@ -133,6 +134,7 @@
 	"ClientFormField": {
 		"Add new input": "Add new input",
 		"Remove input": "Remove input",
+		"Invalid format, input should have minimum of 8 characters": "Invalid format, input should have minimum of 8 characters",
 		"URI can't be empty": "URI can't be empty",
 		"URI have to start with https": "URI have to start with https",
 		"URL hash have to be empty": "URL hash have to be empty",

src/modules/auth/clients/ClientCreateContainer.js

@@ -108,6 +108,10 @@ const ClientCreateContainer = (props) => {
 			body.client_name = "";
 		}
 
+		if (body.preferred_client_id == "" || body.preferred_client_id == undefined) {
+			delete body.preferred_client_id;
+		}
+
 		try {
 			let response = await SeaCatAuthAPI.post(`/client`, body);
 			if (response.statusText != 'OK') {
@@ -143,6 +147,7 @@ const ClientCreateContainer = (props) => {
 	const changeTemplate = (value) => {
 		resetField("client_name");
 		resetField("client_uri");
+		resetField("preferred_client_id");
 		resetField("application_type");
 		resetField("grant_types");
 		resetField("response_types");
@@ -185,6 +190,7 @@ const ClientCreateContainer = (props) => {
 										case 'redirect_uris': return(<URiInput key={key} name={key} control={control} errors={errors} append={append} remove={remove} fields={fields} labelName={t("ClientCreateContainer|Redirect URIs")}/>)
 										case 'client_name': return(<TextInput key={key} name={key} register={register} labelName={t('ClientCreateContainer|Client name')}/>)
 										case 'client_uri': return(<TextInput key={key} name={key} register={register} labelName={t('ClientCreateContainer|Client URI')}/>)
+										case 'preferred_client_id': return(<TextInput key={key} name={key} register={register} errors={errors} labelName={t('ClientCreateContainer|Preferred client ID')}/>)
 										case 'response_types': return(selectedTemplate === "Custom" && <MultiCheckbox key={key} name={key} value={value["items"]["enum"]} setValue={setValue} labelName={t('ClientCreateContainer|Response types')}/>)
 										case 'grant_types': return(selectedTemplate === "Custom" && <MultiCheckbox key={key} name={key} value={value["items"]["enum"]} setValue={setValue} labelName={t('ClientCreateContainer|Grant types')}/>)
 										case 'application_type': return(selectedTemplate === "Custom" && <SelectInput key={key} name={key} register={register} value={value["enum"]} labelName={t('ClientCreateContainer|Application type')}/>)

src/modules/auth/clients/FormFields.js

@@ -7,9 +7,16 @@ import { useTranslation } from 'react-i18next';
 import { Controller } from "react-hook-form";
 
 // The usual text input
-export function TextInput ({ name, register, labelName, disabled }) {
+export function TextInput ({ name, register, errors, labelName, disabled }) {
 	const { t } = useTranslation();
-	const reg = register(name);
+	const reg = register(
+		name,
+		(name == "preferred_client_id") && {
+			validate: {
+				validation: value => (/^[-_a-zA-Z0-9]{8,64}$|^$/).test(value) || t("ClientFormField|Invalid format, input should have minimum of 8 characters"),
+			}
+		}
+	);
 	return (
 		<FormGroup key={name}>
 			{labelName && <Label for={name}>{labelName}</Label>}
@@ -18,11 +25,13 @@ export function TextInput ({ name, register, labelName, disabled }) {
 				name={name}
 				type="text"
 				disabled={disabled}
+				required={name == "client_name" ? true : false}
 				onChange={reg.onChange}
 				onBlur={reg.onBlur}
 				innerRef={reg.ref}
-
+				invalid={errors?.preferred_client_id && errors.preferred_client_id}
 			/>
+			{errors?.preferred_client_id && <FormFeedback>{errors.preferred_client_id.message}</FormFeedback>}
 		</FormGroup>
 	)
 }
@@ -65,7 +74,7 @@ export function URiInput ({ name, control, errors, append, remove, fields, label
 					return (
 						<InputGroup key={item.id} className="mb-1">
 							<Controller
-								render={({field}) => <Input {...field} invalid={errors.redirect_uris?.[idx]?.text} disabled={disabled}/>}
+								render={({field}) => <Input {...field} required={true} invalid={errors.redirect_uris?.[idx]?.text} disabled={disabled}/>}
 								name={`redirect_uris[${idx}].text`}
 								control={control}
 								rules={{