fix: multiline input for apple private key

src/api/tenants/list.ts

@@ -39,7 +39,14 @@ export const useListTenants = (): TenantsListService => {
 			url: getApiUrl("/api/tenants"),
 		});
 
-		return response.ok ? await response.json() : undefined;
+		const result = response.ok ? await response.json() : undefined;
+
+		// Ensure the public tenant is the first result, followed by all other tenants in alphabetical order
+		result.tenants.sort((a: Tenant, b: Tenant) =>
+			(a.tenantId === "public" ? "" : a.tenantId).localeCompare(b.tenantId === "public" ? "" : b.tenantId)
+		);
+
+		return result;
 	};
 
 	return {

src/api/tenants/types.ts

@@ -93,7 +93,7 @@ export type ProviderCustomField = {
 	label: string;
 	id: string;
 	tooltip: string;
-	type: "text" | "password";
+	type: "text" | "password" | "multiline";
 	required: boolean;
 };
 

src/ui/components/auth/SignInContent.tsx

@@ -115,11 +115,15 @@ const SignInContent: React.FC<SignInContentProps> = ({
 		setIsLoading(false);
 	};
 
-	const handleEmailFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+	const handleEmailFieldChange = (
+		e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>
+	) => {
 		setEmail(e.target.value);
 	};
 
-	const handlePasswordFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+	const handlePasswordFieldChange = (
+		e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>
+	) => {
 		setPassword(e.target.value);
 	};
 

src/ui/components/auth/SignInWithApiKeyContent.tsx

@@ -52,7 +52,9 @@ const SignInWithApiKeyContent = (props: SignInWithApiKeyContentProps) => {
 		}
 	};
 
-	const handleApiKeyFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+	const handleApiKeyFieldChange = (
+		e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>
+	) => {
 		setApiKey(e.target.value);
 	};
 

src/ui/components/inputField/InputField.css

@@ -68,6 +68,11 @@
 	background-color: white;
 }
 
+textarea.input-field {
+	resize: vertical;
+	min-height: 8em;
+}
+
 .input-field-small {
 	padding: 8px;
 	font-size: 13px !important;

src/ui/components/inputField/InputField.tsx

@@ -19,7 +19,7 @@ import TooltipContainer from "../tooltip/tooltip";
 import "./InputField.css";
 
 export type InputFieldPropTypes = {
-	type: "text" | "email" | "password";
+	type: "text" | "email" | "password" | "multiline";
 	name: string;
 	size?: "small" | "medium";
 	label?: string;
@@ -32,7 +32,7 @@ export type InputFieldPropTypes = {
 	disabled?: boolean;
 	prefix?: string;
 	autofocus?: boolean;
-	handleChange: React.ChangeEventHandler<HTMLInputElement>;
+	handleChange: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
 	/** @default "bottom" */
 	errorPlacement?: "bottom" | "prefix-tooltip";
 };
@@ -45,7 +45,7 @@ const InputField: React.FC<InputFieldPropTypes> = (props) => {
 	const [isTouched, setIsTouched] = useState(false);
 
 	const onChange = useCallback(
-		(event: React.ChangeEvent<HTMLInputElement>) => {
+		(event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => {
 			setIsTouched(true);
 			handleChange(event);
 		},
@@ -77,22 +77,41 @@ const InputField: React.FC<InputFieldPropTypes> = (props) => {
 						{props.prefix}
 					</div>
 				)}
-				<input
-					type={props.type === "password" && showPassword ? "text" : props.type}
-					name={props.name}
-					id={props.name}
-					onChange={onChange}
-					onKeyUp={onChange}
-					value={props.value}
-					autoFocus={props.autofocus}
-					onFocus={() => setIsFocused(true)}
-					onBlur={() => setIsFocused(false)}
-					disabled={props.disabled}
-					className={`text-small text-black input-field ${showError ? "input-field-error-state" : ""} ${
-						props.size === "small" ? "input-field-small" : ""
-					}`}
-					placeholder={props.placeholder}
-				/>
+				{props.type === "multiline" ? (
+					<textarea
+						name={props.name}
+						id={props.name}
+						onChange={onChange}
+						onKeyUp={onChange}
+						value={props.value}
+						autoFocus={props.autofocus}
+						onFocus={() => setIsFocused(true)}
+						onBlur={() => setIsFocused(false)}
+						disabled={props.disabled}
+						className={`text-small text-black input-field ${showError ? "input-field-error-state" : ""} ${
+							props.size === "small" ? "input-field-small" : ""
+						}`}
+						placeholder={props.placeholder}
+					/>
+				) : (
+					<input
+						type={props.type === "password" && showPassword ? "text" : props.type}
+						name={props.name}
+						id={props.name}
+						onChange={onChange}
+						onKeyUp={onChange}
+						value={props.value}
+						autoFocus={props.autofocus}
+						onFocus={() => setIsFocused(true)}
+						onBlur={() => setIsFocused(false)}
+						disabled={props.disabled}
+						className={`text-small text-black input-field ${showError ? "input-field-error-state" : ""} ${
+							props.size === "small" ? "input-field-small" : ""
+						}`}
+						placeholder={props.placeholder}
+					/>
+				)}
+
 				<div className="input-field-suffix">
 					{props.type === "password" && props.value !== undefined && props.value.length > 0 && (
 						<img

src/ui/components/tenants/tenantDetail/ThirdPartySection.tsx

@@ -65,9 +65,10 @@ export const ThirdPartySection = ({
 					})}
 				</div>
 			) : (
-				<div className="tenant-detail__no-providers-added-container">
-					<div className="tenant-detail__no-providers-added-container__text">No providers added</div>
-				</div>
+				<>
+					No providers are configured for this tenant. Add at least one provider to be able to use third-party
+					login.
+				</>
 			)}
 
 			<hr className="tenant-detail__third-party-divider" />

src/ui/components/tenants/tenantDetail/thirdPartyPage/ThirdPartyPage.tsx

@@ -354,7 +354,7 @@ const OktaForm = ({ handleContinue, handleGoBack }: AdditionalConfigFormProps) =
 				/>
 			</div>
 
-			<p className="additional-config-container__note">For example: https://dev-123456.okta.com</p>
+			<p className="additional-config-container__note">For example: https://dev-8636097.okta.com</p>
 
 			<hr className="provider-config-divider" />
 			<div className="additional-config-footer">

src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/ClientConfig.tsx

@@ -48,13 +48,19 @@ export const ClientConfig = ({
 }) => {
 	const isAppleProvider = providerId.startsWith("apple");
 	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-	const handleClientFieldChange = (name: string, e: ChangeEvent<HTMLInputElement>) => {
+	const handleClientFieldChange = (
+		name: string,
+		e: ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>
+	) => {
 		if (e.type === "change") {
 			setClient({ ...client, [name]: e.target.value });
 		}
 	};
 
-	const handleAdditionalConfigChange = (key: string, e: ChangeEvent<HTMLInputElement>) => {
+	const handleAdditionalConfigChange = (
+		key: string,
+		e: ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>
+	) => {
 		const newAdditionalConfig: Array<[string, string | null]> = client.additionalConfig.map(([k, v]) => {
 			if (k === key) {
 				return [k, e.target.value];

src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/ProviderInfoForm.tsx

@@ -26,9 +26,9 @@ import { PopupContentContext } from "../../../../contexts/PopupContentContext";
 import Button from "../../../button";
 import { Toggle } from "../../../toggle/Toggle";
 import TooltipContainer from "../../../tooltip/tooltip";
+import { useTenantDetailContext } from "../TenantDetailContext";
 import { DeleteThirdPartyProviderDialog } from "../deleteThirdPartyProvider/DeleteThirdPartyProvider";
 import { KeyValueInput } from "../keyValueInput/KeyValueInput";
-import { useTenantDetailContext } from "../TenantDetailContext";
 import { PanelHeader, PanelHeaderTitleWithTooltip, PanelRoot } from "../tenantDetailPanel/TenantDetailPanel";
 import { ThirdPartyProviderButton } from "../thirdPartyProviderButton/ThirdPartyProviderButton";
 import {
@@ -110,7 +110,7 @@ export const ProviderInfoForm = ({
 		});
 	};
 
-	const handleFieldChange = (e: ChangeEvent<HTMLInputElement>) => {
+	const handleFieldChange = (e: ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => {
 		if (e.type === "change") {
 			setProviderConfigState({ ...providerConfigState, [e.target.name]: e.target.value });
 		}
@@ -146,7 +146,9 @@ export const ProviderInfoForm = ({
 		}
 	};
 
-	const handleThirdPartyIdSuffixChange = (e: ChangeEvent<HTMLInputElement>) => {
+	const handleThirdPartyIdSuffixChange = (
+		e: ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>
+	) => {
 		if (e.type !== "change") {
 			return;
 		}
@@ -1016,7 +1018,7 @@ const IN_BUILT_PROVIDERS_CUSTOM_FIELDS: BuiltInProvidersCustomFields = {
 			label: "Private Key",
 			id: "privateKey",
 			tooltip: "The private key for Apple.",
-			type: "text",
+			type: "multiline",
 			required: true,
 		},
 	],

src/ui/components/toggle/toggle.scss

@@ -29,6 +29,7 @@ input[type="checkbox"] {
 		opacity: 0;
 		position: absolute;
 		& + label {
+			cursor: pointer;
 			position: relative;
 			display: inline-block;
 			user-select: none;

src/ui/components/userDetail/components/nameField/nameField.tsx

@@ -21,7 +21,7 @@ type Props = {
 	fieldName: "first_name" | "last_name";
 	label: string;
 	isEditing: boolean;
-	onChange: React.ChangeEventHandler<HTMLInputElement>;
+	onChange: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
 };
 
 export const UserDetailNameField: React.FC<Props> = ({ value, fieldName, label, isEditing, onChange }: Props) => {