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

View File

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

View File

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

View File

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

View File

@ -3,7 +3,7 @@ import { observer } from "mobx-react";
import FieldContainer from "@appserver/components/field-container"; import FieldContainer from "@appserver/components/field-container";
import SimpleTextInput from "./SimpleTextInput"; import SsoTextInput from "./SsoTextInput";
const MetadataUrlField = ({ labelText, name, placeholder, tooltipContent }) => { const MetadataUrlField = ({ labelText, name, placeholder, tooltipContent }) => {
return ( return (
@ -14,7 +14,7 @@ const MetadataUrlField = ({ labelText, name, placeholder, tooltipContent }) => {
place="top" place="top"
tooltipContent={tooltipContent} tooltipContent={tooltipContent}
> >
<SimpleTextInput isDisabled name={name} placeholder={placeholder} /> <SsoTextInput isDisabled name={name} placeholder={placeholder} />
</FieldContainer> </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"; import StyledInputWrapper from "../styled-containers/StyledInputWrapper";
const SimpleComboBox = (props) => { const SsoComboBox = (props) => {
const { const {
labelText, labelText,
name, name,
@ -51,4 +51,4 @@ export default inject(({ ssoStore }) => {
enableSso, enableSso,
isLoadingXml, isLoadingXml,
}; };
})(observer(SimpleComboBox)); })(observer(SsoComboBox));

View File

@ -4,9 +4,9 @@ import { useTranslation } from "react-i18next";
import FieldContainer from "@appserver/components/field-container"; import FieldContainer from "@appserver/components/field-container";
import SimpleTextInput from "./SimpleTextInput"; import SsoTextInput from "./SsoTextInput";
const SimpleFormField = ({ const SsoFormField = ({
children, children,
labelText, labelText,
name, name,
@ -29,7 +29,7 @@ const SimpleFormField = ({
tooltipContent={tooltipContent} tooltipContent={tooltipContent}
> >
{children} {children}
<SimpleTextInput <SsoTextInput
hasError={errorMessage !== null} hasError={errorMessage !== null}
name={name} name={name}
placeholder={placeholder} 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"; import StyledInputWrapper from "../styled-containers/StyledInputWrapper";
const SimpleTextInput = (props) => { const SsoTextInput = (props) => {
const { const {
hasError, hasError,
isDisabled, isDisabled,
@ -61,4 +61,4 @@ export default inject(({ ssoStore }) => {
setError, setError,
hideError, 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 FieldContainer from "@appserver/components/field-container";
import Text from "@appserver/components/text"; import Text from "@appserver/components/text";
import SimpleTextInput from "./SimpleTextInput"; import SsoTextInput from "./SsoTextInput";
import FileInput from "@appserver/components/file-input"; import FileInput from "@appserver/components/file-input";
import UploadIcon from "../../../../../../../../public/images/actions.upload.react.svg"; import UploadIcon from "../../../../../../../../public/images/actions.upload.react.svg";
import { Base } from "@appserver/components/themes"; import { Base } from "@appserver/components/themes";
@ -42,7 +42,7 @@ const UploadXML = (props) => {
labelText={t("UploadXML")} labelText={t("UploadXML")}
> >
<Box alignItems="center" displayProp="flex" flexDirection="row"> <Box alignItems="center" displayProp="flex" flexDirection="row">
<SimpleTextInput <SsoTextInput
maxWidth="300px" maxWidth="300px"
name="uploadXmlUrl" name="uploadXmlUrl"
placeholder={t("UploadXMLPlaceholder")} placeholder={t("UploadXMLPlaceholder")}