From 75071501cdbebe79c25538094d9a06bcd6e7cdf5 Mon Sep 17 00:00:00 2001
From: Dmitry Kulak <dmitry.kulak11@gmail.com>
Date: Tue, 22 Feb 2022 12:57:01 +0300
Subject: [PATCH] Web: Studio: SSO: Redesign

---
 .../integration/SingleSignOn/Certificates.js  | 66 +++++++++++--------
 .../integration/SingleSignOn/FieldMapping.js  | 10 ++-
 .../integration/SingleSignOn/IdpSettings.js   |  3 -
 .../SingleSignOn/ProviderMetadata.js          |  7 +-
 .../integration/SingleSignOn/index.js         | 58 +++++++++-------
 .../StyledSsoPageContainer.js                 | 15 +++++
 web/ASC.Web.Client/src/store/SsoFormStore.js  | 10 +--
 7 files changed, 104 insertions(+), 65 deletions(-)

diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/Certificates.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/Certificates.js
index 85381beb99..855b0474fc 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/Certificates.js
+++ b/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,43 +79,52 @@ 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} />
-
-      {provider === "IdentityProvider" && (
+      {FormStore[`${prefix}_showAdditionalParameters`] && (
         <>
-          <SimpleComboBox
+          <CheckboxSet
             FormStore={FormStore}
-            labelText={t(`${prefix}SigningAlgorithm`)}
-            name={"idp_verifyAlgorithm"}
-            options={verifyAlgorithmsOptions}
-            tabIndex={14}
-          />
-        </>
-      )}
-
-      {provider === "ServiceProvider" && (
-        <>
-          <SimpleComboBox
-            FormStore={FormStore}
-            labelText={t(`${prefix}SigningAlgorithm`)}
-            name={"sp_signingAlgorithm"}
-            options={verifyAlgorithmsOptions}
-            tabIndex={14}
+            id={prefix}
+            prefix={prefix}
+            t={t}
           />
 
-          <SimpleComboBox
-            FormStore={FormStore}
-            labelText={t("StandardDecryptionAlgorithm")}
-            name={"sp_encryptAlgorithm"}
-            options={decryptAlgorithmsOptions}
-            tabIndex={15}
-          />
+          {provider === "IdentityProvider" && (
+            <>
+              <SimpleComboBox
+                FormStore={FormStore}
+                labelText={t(`${prefix}SigningAlgorithm`)}
+                name={"idp_verifyAlgorithm"}
+                options={verifyAlgorithmsOptions}
+                tabIndex={14}
+              />
+            </>
+          )}
+
+          {provider === "ServiceProvider" && (
+            <>
+              <SimpleComboBox
+                FormStore={FormStore}
+                labelText={t(`${prefix}SigningAlgorithm`)}
+                name={"sp_signingAlgorithm"}
+                options={verifyAlgorithmsOptions}
+                tabIndex={14}
+              />
+
+              <SimpleComboBox
+                FormStore={FormStore}
+                labelText={t("StandardDecryptionAlgorithm")}
+                name={"sp_encryptAlgorithm"}
+                options={decryptAlgorithmsOptions}
+                tabIndex={15}
+              />
+            </>
+          )}
         </>
       )}
     </Box>
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/FieldMapping.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/FieldMapping.js
index ef904282d2..b753363d0f 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/FieldMapping.js
+++ b/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">
-        <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>
 
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/IdpSettings.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/IdpSettings.js
index 9522a683cc..42012adaba 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/IdpSettings.js
+++ b/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
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/ProviderMetadata.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/ProviderMetadata.js
index 7039ef9456..bf6ecd2ac0 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/ProviderMetadata.js
+++ b/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>
+    </>
   );
 };
 
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/index.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/index.js
index c5a3cc9310..6810be31d4 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/index.js
+++ b/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,35 +18,48 @@ const SingleSignOn = () => {
   const { t } = useTranslation(["SingleSignOn", "Common"]);
 
   return (
-    <StyledSsoPage>
+    <StyledSsoPage
+      hideSettings={FormStore.ServiceProviderSettings}
+      hideMetadata={FormStore.SPMetadata}
+    >
       <ToggleSSO FormStore={FormStore} t={t} />
 
-      <IdpSettings FormStore={FormStore} t={t} />
+      <HideButton FormStore={FormStore} label="ServiceProviderSettings" t={t} />
 
-      <Certificates FormStore={FormStore} t={t} provider="IdentityProvider" />
+      <Box className="service-provider-settings">
+        <IdpSettings FormStore={FormStore} t={t} />
 
-      <Certificates FormStore={FormStore} t={t} provider="ServiceProvider" />
+        <Certificates FormStore={FormStore} t={t} provider="IdentityProvider" />
 
-      <FieldMapping FormStore={FormStore} t={t} />
+        <Certificates FormStore={FormStore} t={t} provider="ServiceProvider" />
 
-      <Box alignItems="center" displayProp="flex" flexDirection="row">
-        <Button
-          className="save-button"
-          label={t("Common:SaveButton")}
-          onClick={FormStore.onSubmit}
-          primary
-          size="medium"
-          tabIndex={23}
-        />
-        <Button
-          label={t("ResetSettings")}
-          onClick={FormStore.resetForm}
-          size="medium"
-          tabIndex={24}
-        />
+        <FieldMapping FormStore={FormStore} t={t} />
+
+        <Box alignItems="center" displayProp="flex" flexDirection="row">
+          <Button
+            className="save-button"
+            label={t("Common:SaveButton")}
+            onClick={FormStore.onSubmit}
+            primary
+            size="medium"
+            tabIndex={23}
+          />
+          <Button
+            label={t("ResetSettings")}
+            onClick={FormStore.resetForm}
+            size="medium"
+            tabIndex={24}
+          />
+        </Box>
       </Box>
 
-      <ProviderMetadata FormStore={FormStore} t={t} />
+      <hr className="separator" />
+
+      <HideButton FormStore={FormStore} label="SPMetadata" t={t} />
+
+      <Box className="sp-metadata">
+        <ProviderMetadata FormStore={FormStore} t={t} />
+      </Box>
     </StyledSsoPage>
   );
 };
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/styled-containers/StyledSsoPageContainer.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/styled-containers/StyledSsoPageContainer.js
index 9147cb5487..9f4c0e552e 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/styled-containers/StyledSsoPageContainer.js
+++ b/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;
diff --git a/web/ASC.Web.Client/src/store/SsoFormStore.js b/web/ASC.Web.Client/src/store/SsoFormStore.js
index 7da9bda3ea..3ab4c605f7 100644
--- a/web/ASC.Web.Client/src/store/SsoFormStore.js
+++ b/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;
-  ShowAdditionalParametersIdp = true;
-  ShowAdditionalParametersSp = true;
-  SPMetadata = true;
+  ServiceProviderSettings = false;
+  idp_showAdditionalParameters = true;
+  sp_showAdditionalParameters = true;
+  SPMetadata = false;
   idp_isModalVisible = false;
   sp_isModalVisible = false;