Skip to content

Commit

Permalink
Improve endpoint authentication type state handling
Browse files Browse the repository at this point in the history
  • Loading branch information
@Shenali-SJ
Shenali-SJ committed Jan 16, 2025
1 parent 0741050 commit 9a1c599
Showing 1 changed file with 16 additions and 30 deletions.
46 changes: 16 additions & 30 deletions features/admin.connections.v1/components/create/custom-authentication-create-wizard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import Backdrop from "@mui/material/Backdrop";
import Box from "@oxygen-ui/react/Box";
import Divider from "@oxygen-ui/react/Divider";
import InputAdornment from "@oxygen-ui/react/InputAdornment";
import { AppState, EventPublisher } from "@wso2is/admin.core.v1";
import { EventPublisher } from "@wso2is/admin.core.v1";
import { ModalWithSidePanel } from "@wso2is/admin.core.v1/components";
import { IdentityAppsError } from "@wso2is/core/errors";
import { AlertLevels, IdentifiableComponentInterface } from "@wso2is/core/models";
Expand All @@ -33,7 +33,6 @@ import {
} from "@wso2is/form";
import {
ContentLoader,
DocumentationLink,
EmphasizedSegment,
GenericIcon,
Heading,
Expand All @@ -42,7 +41,6 @@ import {
PrimaryButton,
SelectionCard,
Steps,
useDocumentation,
useWizardAlert
} from "@wso2is/react-components";
import { FormValidation } from "@wso2is/validation";
Expand All @@ -63,22 +61,20 @@ import React, {
useState
} from "react";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { Dispatch } from "redux";
import { Icon, Grid as SemanticGrid } from "semantic-ui-react";
import { DropdownProps, Icon, Grid as SemanticGrid } from "semantic-ui-react";
import { createConnection, useGetConnectionTemplate } from "../../api/connections";
import { getConnectionWizardStepIcons } from "../../configs/ui";
import { ConnectionUIConstants } from "../../constants/connection-ui-constants";
import { LocalAuthenticatorConstants } from "../../constants/local-authenticator-constants";
import {
AuthenticationPropertiesInterface,
AuthenticationType,
AuthenticationTypeDropdownOption,
ConnectionInterface,
CustomAuthenticationCreateWizardGeneralFormValuesInterface,
EndpointConfigFormPropertyInterface,
EndpointInterface,
GenericConnectionCreateWizardPropsInterface,
GenericConnectionCreateWizardPropsInterface
} from "../../models/connection";
import "./custom-authentication-create-wizard.scss";
import { ConnectionsManagementUtils } from "../../utils/connection-utils";
Expand Down Expand Up @@ -113,7 +109,6 @@ interface WizardStepInterface {
}

type AvailableCustomAuthentications = "external" | "internal" | "two-factor";
type MinMax = { min: number; max: number };
type FormErrors = { [ key: string ]: string };

export const CustomAuthenticationCreateWizard: FC<CustomAuthenticationCreateWizardProps> = (
Expand All @@ -139,19 +134,14 @@ export const CustomAuthenticationCreateWizard: FC<CustomAuthenticationCreateWiza
const [ isSubmitting, setIsSubmitting ] = useState<boolean>(false);
const [ isShowSecret1, setIsShowSecret1 ] = useState(false);
const [ isShowSecret2, setIsShowSecret2 ] = useState(false);
const [ isAuthenticationCreateState, setIsAuthenticationCreateState ] = useState<boolean>(true);
const [ isAuthenticationUpdateState, setIsAuthenticationUpdateState ] = useState<boolean>(false);
// const [ isLoading, setIsLoading ] = useState<boolean>(false);
const [ authenticationType, setAuthenticationType ] = useState<AuthenticationType>(null);
const [ selectedAuthenticationType, setSelectedAuthenticationType ] = useState<string>();
// const [ selectedEndpointAuthType, setSelectedEndpointAuthType ] = useState<string>();

// Dynamic UI state
const [ nextShouldBeDisabled, setNextShouldBeDisabled ] = useState<boolean>(true);

const dispatch: Dispatch = useDispatch();
const { t } = useTranslation();
const { getLink } = useDocumentation();

const eventPublisher: EventPublisher = EventPublisher.getInstance();

Expand All @@ -178,7 +168,7 @@ export const CustomAuthenticationCreateWizard: FC<CustomAuthenticationCreateWiza
setSelectedTemplateId(templateId);
}, [ selectedAuthenticator ]);

const initialValues: { NameIDType: string, RequestMethod: string,
const initialValues: { NameIDType: string, RequestMethod: string,
identifier: string, displayName: string } = useMemo(() => ({
NameIDType: "urn:oasis:names:tc:SAML:1.1:nameid-format:unspecified",
RequestMethod: "post",
Expand Down Expand Up @@ -341,15 +331,15 @@ export const CustomAuthenticationCreateWizard: FC<CustomAuthenticationCreateWiza

/**
* This method handles endpoint authentication type dropdown changes.
* @param event event associated with the dropdown change.
* @param data data changed by the event
* @param event - event associated with the dropdown change.
* @param data - data changed by the event
*/
const handleDropdownChange = (event, data) => { // TODO: Make type safe
setSelectedAuthenticationType(data.value);
const handleDropdownChange = (event: React.MouseEvent<HTMLAnchorElement>, data: DropdownProps) => {
setAuthenticationType(data.value as AuthenticationType);
};

const renderEndpointAuthPropertyFields = (): ReactElement => {
switch (selectedAuthenticationType) {
switch (authenticationType) {
case AuthenticationType.NONE:
break;
case AuthenticationType.BASIC:
Expand Down Expand Up @@ -481,16 +471,15 @@ export const CustomAuthenticationCreateWizard: FC<CustomAuthenticationCreateWiza
error.endpointUri = "Please enter a valid URL.";
}

if (!selectedAuthenticationType) {
if (!authenticationType) {
error.authenticationType = "Endpoint is a required field.";
}

const apiKeyHeaderRegex: RegExp = /^[a-zA-Z0-9][a-zA-Z0-9-.]+$/;

switch (authenticationType) {
case AuthenticationType.BASIC:
if (isAuthenticationCreateState || isAuthenticationUpdateState ||
values?.usernameAuthProperty || values?.passwordAuthProperty) {
if (values?.usernameAuthProperty || values?.passwordAuthProperty) {
if (!values?.usernameAuthProperty) {
error.usernameAuthProperty = "Username is a required field.";
}
Expand All @@ -501,16 +490,13 @@ export const CustomAuthenticationCreateWizard: FC<CustomAuthenticationCreateWiza

break;
case AuthenticationType.BEARER:
if (isAuthenticationCreateState || isAuthenticationUpdateState) {
if (!values?.accessTokenAuthProperty) {
error.accessTokenAuthProperty = "Access Token is a required field.";
}
if (!values?.accessTokenAuthProperty) {
error.accessTokenAuthProperty = "Access Token is a required field.";
}

break;
case AuthenticationType.API_KEY:
if (isAuthenticationCreateState || isAuthenticationUpdateState||
values?.headerAuthProperty || values?.valueAuthProperty) {
if (values?.headerAuthProperty || values?.valueAuthProperty) {
if (!values?.headerAuthProperty) {
error.headerAuthProperty = "Header is a required field.";
}
Expand Down Expand Up @@ -723,7 +709,7 @@ export const CustomAuthenticationCreateWizard: FC<CustomAuthenticationCreateWiza
placeholder = { "Select Authentication Type" }
hint="Once added, these secrets will not be displayed. You will only be able to reset them."
required={ true }
value={ selectedAuthenticationType }
value={ authenticationType }
options={
[ ...LocalAuthenticatorConstants.AUTH_TYPES.map(
(option: AuthenticationTypeDropdownOption) => ({
Expand Down

0 comments on commit 9a1c599

Please sign in to comment.