Web: Studio: SSO: Redesign

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/Certificates.js

@@ -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>
   );
 };

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/FieldMapping.js

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

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/IdpSettings.js

@@ -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

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/ProviderMetadata.js

@@ -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>
+    </>
   );
 };
 

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/index.js

@@ -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>
   );
 };

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/styled-containers/StyledSsoPageContainer.js

@@ -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;

web/ASC.Web.Client/src/store/SsoFormStore.js

@@ -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;
+  ServiceProviderSettings = false;
-  ShowAdditionalParametersIdp = true;
+  idp_showAdditionalParameters = true;
-  ShowAdditionalParametersSp = true;
+  sp_showAdditionalParameters = true;
-  SPMetadata = true;
+  SPMetadata = false;
   idp_isModalVisible = false;
   sp_isModalVisible = false;