Web: Studio: SSO: Redesign

This commit is contained in:
Dmitry Kulak 2022-02-22 12:57:01 +03:00
parent 8a29efc401
commit 75071501cd
7 changed files with 104 additions and 65 deletions

View File

@ -27,6 +27,7 @@ const Certificates = ({ FormStore, t, provider }) => {
break;
case "ServiceProvider":
prefix = "sp";
break;
}
return (
@ -78,13 +79,20 @@ const Certificates = ({ FormStore, t, provider }) => {
<HideButton
FormStore={FormStore}
label="ShowAdditionalParameters"
label={`${prefix}_showAdditionalParameters`}
isAdditionalParameters
t={t}
/>
</Box>
<CheckboxSet FormStore={FormStore} id={prefix} prefix={prefix} t={t} />
{FormStore[`${prefix}_showAdditionalParameters`] && (
<>
<CheckboxSet
FormStore={FormStore}
id={prefix}
prefix={prefix}
t={t}
/>
{provider === "IdentityProvider" && (
<>
@ -117,6 +125,8 @@ const Certificates = ({ FormStore, t, provider }) => {
/>
</>
)}
</>
)}
</Box>
);
};

View File

@ -12,8 +12,14 @@ import SimpleFormField from "./sub-components/SimpleFormField";
const FieldMapping = ({ FormStore, t }) => {
return (
<Box>
<Box alignItems="center" displayProp="flex" flexDirection="row">
<Text as="h2" fontWeight={600}>
<Box
alignItems="center"
displayProp="flex"
flexDirection="row"
fontSize="14px"
marginProp="22px 0 14px 0"
>
<Text as="h2" fontSize="14px" fontWeight={600}>
{t("AttributeMatching")}
</Text>

View File

@ -4,7 +4,6 @@ import { observer } from "mobx-react";
import Box from "@appserver/components/box";
import RadioButtonGroup from "@appserver/components/radio-button-group";
import HideButton from "./sub-components/HideButton";
import SimpleComboBox from "./sub-components/SimpleComboBox";
import SimpleFormField from "./sub-components/SimpleFormField";
import Text from "@appserver/components/text";
@ -14,8 +13,6 @@ import { bindingOptions, nameIdOptions } from "./sub-components/constants";
const IdpSettings = ({ FormStore, t }) => {
return (
<Box>
<HideButton FormStore={FormStore} label="ServiceProviderSettings" t={t} />
<UploadXML FormStore={FormStore} t={t} />
<SimpleFormField

View File

@ -4,14 +4,11 @@ import { observer } from "mobx-react";
import Box from "@appserver/components/box";
import Button from "@appserver/components/button";
import HideButton from "./sub-components/HideButton";
import SimpleFormField from "./sub-components/SimpleFormField";
const ProviderMetadata = ({ FormStore, t }) => {
return (
<Box>
<HideButton FormStore={FormStore} label="SPMetadata" t={t} />
<>
<SimpleFormField
FormStore={FormStore}
labelText={t("SPEntityId")}
@ -51,7 +48,7 @@ const ProviderMetadata = ({ FormStore, t }) => {
tabIndex={28}
/>
</Box>
</Box>
</>
);
};

View File

@ -6,8 +6,9 @@ import Box from "@appserver/components/box";
import Button from "@appserver/components/button";
import FormStore from "@appserver/studio/src/store/SsoFormStore";
import FieldMapping from "./FieldMapping";
import Certificates from "./Certificates";
import FieldMapping from "./FieldMapping";
import HideButton from "./sub-components/HideButton";
import IdpSettings from "./IdpSettings";
import ProviderMetadata from "./ProviderMetadata";
import StyledSsoPage from "./styled-containers/StyledSsoPageContainer";
@ -17,9 +18,15 @@ const SingleSignOn = () => {
const { t } = useTranslation(["SingleSignOn", "Common"]);
return (
<StyledSsoPage>
<StyledSsoPage
hideSettings={FormStore.ServiceProviderSettings}
hideMetadata={FormStore.SPMetadata}
>
<ToggleSSO FormStore={FormStore} t={t} />
<HideButton FormStore={FormStore} label="ServiceProviderSettings" t={t} />
<Box className="service-provider-settings">
<IdpSettings FormStore={FormStore} t={t} />
<Certificates FormStore={FormStore} t={t} provider="IdentityProvider" />
@ -44,8 +51,15 @@ const SingleSignOn = () => {
tabIndex={24}
/>
</Box>
</Box>
<hr className="separator" />
<HideButton FormStore={FormStore} label="SPMetadata" t={t} />
<Box className="sp-metadata">
<ProviderMetadata FormStore={FormStore} t={t} />
</Box>
</StyledSsoPage>
);
};

View File

@ -95,6 +95,21 @@ const StyledSsoPage = styled.div`
position: static;
}
}
.separator {
margin: 24px 0;
height: 1px;
border: none;
background-color: #eceef1;
}
.service-provider-settings {
display: ${(props) => (!props.hideSettings ? "none" : "block")};
}
.sp-metadata {
display: ${(props) => (!props.hideMetadata ? "none" : "block")};
}
`;
export default StyledSsoPage;

View File

@ -21,7 +21,7 @@ const regExps = {
class SsoFormStore {
uploadXmlUrl = "";
enableSso = true;
enableSso = false;
spLoginLabel = "";
@ -79,10 +79,10 @@ class SsoFormStore {
sp_singleLogoutUrl = "";
// hide parts of form
ServiceProviderSettings = true;
ShowAdditionalParametersIdp = true;
ShowAdditionalParametersSp = true;
SPMetadata = true;
ServiceProviderSettings = false;
idp_showAdditionalParameters = true;
sp_showAdditionalParameters = true;
SPMetadata = false;
idp_isModalVisible = false;
sp_isModalVisible = false;