Web: Client: SSO: refactoring

This commit is contained in:
Viktor Fomin 2022-08-01 00:29:17 +03:00
parent e09089b71c
commit 18173e397e
10 changed files with 72 additions and 77 deletions

View File

@ -13,7 +13,7 @@ import CertificatesTable from "./sub-components/CertificatesTable";
import CheckboxSet from "./sub-components/CheckboxSet";
import HideButton from "./sub-components/HideButton";
import PropTypes from "prop-types";
import SimpleComboBox from "./sub-components/SimpleComboBox";
import SsoComboBox from "./sub-components/SsoComboBox";
import {
decryptAlgorithmsOptions,
verifyAlgorithmsOptions,
@ -121,7 +121,7 @@ const Certificates = (props) => {
{provider === "IdentityProvider" && (
<>
<SimpleComboBox
<SsoComboBox
labelText={t("idpSigningAlgorithm")}
name="idpVerifyAlgorithm"
options={verifyAlgorithmsOptions}
@ -133,7 +133,7 @@ const Certificates = (props) => {
{provider === "ServiceProvider" && (
<>
<SimpleComboBox
<SsoComboBox
labelText={t("spSigningAlgorithm")}
name="spSigningAlgorithm"
options={verifyAlgorithmsOptions}
@ -141,7 +141,7 @@ const Certificates = (props) => {
value={spEncryptAlgorithm}
/>
<SimpleComboBox
<SsoComboBox
labelText={t("StandardDecryptionAlgorithm")}
name={"spEncryptAlgorithm"}
options={decryptAlgorithmsOptions}

View File

@ -7,8 +7,8 @@ import FieldContainer from "@appserver/components/field-container";
import HelpButton from "@appserver/components/help-button";
import Text from "@appserver/components/text";
import SimpleCheckbox from "./sub-components/SimpleCheckbox";
import SimpleFormField from "./sub-components/SimpleFormField";
import Checkbox from "@appserver/components/checkbox";
import SsoFormField from "./sub-components/SsoFormField";
const FieldMapping = (props) => {
const { t } = useTranslation(["SingleSignOn", "Common"]);
@ -26,6 +26,9 @@ const FieldMapping = (props) => {
locationErrorMessage,
titleErrorMessage,
phoneErrorMessage,
enableSso,
setCheckbox,
isLoadingXml,
} = props;
return (
@ -47,7 +50,7 @@ const FieldMapping = (props) => {
/>
</Box>
<SimpleFormField
<SsoFormField
labelText={t("FirstName")}
name="firstName"
placeholder="givenName"
@ -56,7 +59,7 @@ const FieldMapping = (props) => {
errorMessage={firstNameErrorMessage}
/>
<SimpleFormField
<SsoFormField
labelText={t("LastName")}
name="lastName"
placeholder="sn"
@ -65,7 +68,7 @@ const FieldMapping = (props) => {
errorMessage={lastNameErrorMessage}
/>
<SimpleFormField
<SsoFormField
labelText={t("Common:Email")}
name="email"
placeholder="sn"
@ -74,7 +77,7 @@ const FieldMapping = (props) => {
errorMessage={emailErrorMessage}
/>
<SimpleFormField
<SsoFormField
labelText={t("Location")}
name="location"
placeholder="sn"
@ -83,7 +86,7 @@ const FieldMapping = (props) => {
errorMessage={locationErrorMessage}
/>
<SimpleFormField
<SsoFormField
labelText={t("Title")}
name="title"
placeholder="sn"
@ -92,7 +95,7 @@ const FieldMapping = (props) => {
errorMessage={titleErrorMessage}
/>
<SimpleFormField
<SsoFormField
labelText={t("Common:Phone")}
name="phone"
placeholder="sn"
@ -108,11 +111,14 @@ const FieldMapping = (props) => {
place="top"
tooltipContent={t("AdvancedSettingsTooltip")}
>
<SimpleCheckbox
<Checkbox
className="checkbox-input"
label={t("HideAuthPage")}
name="hideAuthPage"
tabIndex={22}
isChecked={hideAuthPage}
isDisabled={!enableSso || isLoadingXml}
onChange={setCheckbox}
/>
</FieldContainer>
</Box>
@ -134,6 +140,9 @@ export default inject(({ ssoStore }) => {
locationErrorMessage,
titleErrorMessage,
phoneErrorMessage,
enableSso,
setCheckbox,
isLoadingXml,
} = ssoStore;
return {
@ -150,5 +159,8 @@ export default inject(({ ssoStore }) => {
locationErrorMessage,
titleErrorMessage,
phoneErrorMessage,
enableSso,
setCheckbox,
isLoadingXml,
};
})(observer(FieldMapping));

View File

@ -6,8 +6,8 @@ import Box from "@appserver/components/box";
import RadioButtonGroup from "@appserver/components/radio-button-group";
import Text from "@appserver/components/text";
import SimpleComboBox from "./sub-components/SimpleComboBox";
import SimpleFormField from "./sub-components/SimpleFormField";
import SsoComboBox from "./sub-components/SsoComboBox";
import SsoFormField from "./sub-components/SsoFormField";
import UploadXML from "./sub-components/UploadXML";
import { bindingOptions, nameIdOptions } from "./sub-components/constants";
@ -37,7 +37,7 @@ const IdpSettings = (props) => {
<Box>
<UploadXML />
<SimpleFormField
<SsoFormField
labelText={t("CustomEntryButton")}
name="spLoginLabel"
placeholder="Single Sign-on"
@ -47,7 +47,7 @@ const IdpSettings = (props) => {
errorMessage={spLoginLabelErrorMessage}
/>
<SimpleFormField
<SsoFormField
labelText={t("ProviderURL")}
name="entityId"
placeholder="https://www.test.com"
@ -57,7 +57,7 @@ const IdpSettings = (props) => {
errorMessage={entityIdErrorMessage}
/>
<SimpleFormField
<SsoFormField
labelText={t("SignOnEndpointUrl")}
name={ssoBinding.includes("POST") ? "ssoUrlPost" : "ssoUrlRedirect"}
placeholder="https://www.test.com/saml/login"
@ -84,9 +84,9 @@ const IdpSettings = (props) => {
tabIndex={6}
/>
</Box>
</SimpleFormField>
</SsoFormField>
<SimpleFormField
<SsoFormField
labelText={t("LogoutEndpointUrl")}
name={sloBinding.includes("POST") ? "sloUrlPost" : "sloUrlRedirect"}
placeholder="https://www.test.com/saml/logout"
@ -113,9 +113,9 @@ const IdpSettings = (props) => {
tabIndex={8}
/>
</Box>
</SimpleFormField>
</SsoFormField>
<SimpleComboBox
<SsoComboBox
labelText={t("NameIDFormat")}
value={nameIdFormat}
name="nameIdFormat"

View File

@ -3,7 +3,7 @@ import { inject, observer } from "mobx-react";
import { useTranslation } from "react-i18next";
import Box from "@appserver/components/box";
import SimpleCheckbox from "./SimpleCheckbox";
import Checkbox from "@appserver/components/checkbox";
const checkboxesNames = {
idp: [
@ -30,11 +30,17 @@ const CheckboxSet = (props) => {
spSignLogoutRequests,
spSignLogoutResponses,
spEncryptAssertions,
enableSso,
setCheckbox,
isLoadingXml,
} = props;
return (
<Box marginProp="12px 0">
<SimpleCheckbox
<Checkbox
className="checkbox-input"
isDisabled={!enableSso || isLoadingXml}
onChange={setCheckbox}
label={prefix === "idp" ? t("idpAuthRequest") : t("spAuthRequest")}
name={checkboxesNames[prefix][0]}
tabIndex={10}
@ -42,7 +48,10 @@ const CheckboxSet = (props) => {
prefix === "idp" ? idpVerifyAuthResponsesSign : spSignAuthRequests
}
/>
<SimpleCheckbox
<Checkbox
className="checkbox-input"
isDisabled={!enableSso || isLoadingXml}
onChange={setCheckbox}
label={
prefix === "idp" ? t("idpSignExitRequest") : t("spSignExitRequest")
}
@ -52,7 +61,10 @@ const CheckboxSet = (props) => {
prefix === "idp" ? idpVerifyLogoutRequestsSign : spSignLogoutRequests
}
/>
<SimpleCheckbox
<Checkbox
className="checkbox-input"
isDisabled={!enableSso || isLoadingXml}
onChange={setCheckbox}
label={
prefix === "idp"
? t("idpSignResponseRequest")
@ -68,7 +80,10 @@ const CheckboxSet = (props) => {
/>
{prefix === "sp" && (
<SimpleCheckbox
<Checkbox
className="checkbox-input"
isDisabled={!enableSso || isLoadingXml}
onChange={setCheckbox}
label={t("spDecryptStatements")}
name={checkboxesNames[prefix][3]}
tabIndex={13}
@ -88,6 +103,9 @@ export default inject(({ ssoStore }) => {
spSignLogoutRequests,
spSignLogoutResponses,
spEncryptAssertions,
enableSso,
setCheckbox,
isLoadingXml,
} = ssoStore;
return {
@ -98,5 +116,8 @@ export default inject(({ ssoStore }) => {
spSignLogoutRequests,
spSignLogoutResponses,
spEncryptAssertions,
enableSso,
setCheckbox,
isLoadingXml,
};
})(observer(CheckboxSet));

View File

@ -3,7 +3,7 @@ import { observer } from "mobx-react";
import FieldContainer from "@appserver/components/field-container";
import SimpleTextInput from "./SimpleTextInput";
import SsoTextInput from "./SsoTextInput";
const MetadataUrlField = ({ labelText, name, placeholder, tooltipContent }) => {
return (
@ -14,7 +14,7 @@ const MetadataUrlField = ({ labelText, name, placeholder, tooltipContent }) => {
place="top"
tooltipContent={tooltipContent}
>
<SimpleTextInput isDisabled name={name} placeholder={placeholder} />
<SsoTextInput isDisabled name={name} placeholder={placeholder} />
</FieldContainer>
);
};

View File

@ -1,38 +0,0 @@
import React from "react";
import { inject, observer } from "mobx-react";
import Checkbox from "@appserver/components/checkbox";
const SimpleCheckbox = (props) => {
const {
label,
name,
tabIndex,
isChecked,
enableSso,
setCheckbox,
isLoadingXml,
} = props;
return (
<Checkbox
className="checkbox-input"
isDisabled={!enableSso || isLoadingXml}
isChecked={isChecked}
label={label}
name={name}
onChange={setCheckbox}
tabIndex={tabIndex}
/>
);
};
export default inject(({ ssoStore }) => {
const { enableSso, setCheckbox, isLoadingXml } = ssoStore;
return {
enableSso,
setCheckbox,
isLoadingXml,
};
})(observer(SimpleCheckbox));

View File

@ -6,7 +6,7 @@ import FieldContainer from "@appserver/components/field-container";
import StyledInputWrapper from "../styled-containers/StyledInputWrapper";
const SimpleComboBox = (props) => {
const SsoComboBox = (props) => {
const {
labelText,
name,
@ -51,4 +51,4 @@ export default inject(({ ssoStore }) => {
enableSso,
isLoadingXml,
};
})(observer(SimpleComboBox));
})(observer(SsoComboBox));

View File

@ -4,9 +4,9 @@ import { useTranslation } from "react-i18next";
import FieldContainer from "@appserver/components/field-container";
import SimpleTextInput from "./SimpleTextInput";
import SsoTextInput from "./SsoTextInput";
const SimpleFormField = ({
const SsoFormField = ({
children,
labelText,
name,
@ -29,7 +29,7 @@ const SimpleFormField = ({
tooltipContent={tooltipContent}
>
{children}
<SimpleTextInput
<SsoTextInput
hasError={errorMessage !== null}
name={name}
placeholder={placeholder}
@ -40,4 +40,4 @@ const SimpleFormField = ({
);
};
export default observer(SimpleFormField);
export default observer(SsoFormField);

View File

@ -5,7 +5,7 @@ import TextInput from "@appserver/components/text-input";
import StyledInputWrapper from "../styled-containers/StyledInputWrapper";
const SimpleTextInput = (props) => {
const SsoTextInput = (props) => {
const {
hasError,
isDisabled,
@ -61,4 +61,4 @@ export default inject(({ ssoStore }) => {
setError,
hideError,
};
})(observer(SimpleTextInput));
})(observer(SsoTextInput));

View File

@ -8,7 +8,7 @@ import Button from "@appserver/components/button";
import FieldContainer from "@appserver/components/field-container";
import Text from "@appserver/components/text";
import SimpleTextInput from "./SimpleTextInput";
import SsoTextInput from "./SsoTextInput";
import FileInput from "@appserver/components/file-input";
import UploadIcon from "../../../../../../../../public/images/actions.upload.react.svg";
import { Base } from "@appserver/components/themes";
@ -42,7 +42,7 @@ const UploadXML = (props) => {
labelText={t("UploadXML")}
>
<Box alignItems="center" displayProp="flex" flexDirection="row">
<SimpleTextInput
<SsoTextInput
maxWidth="300px"
name="uploadXmlUrl"
placeholder={t("UploadXMLPlaceholder")}