Web: Client: Confirm: add deactivation portal page

web/ASC.Web.Client/public/locales/en/Confirm.json

@@ -20,6 +20,7 @@
   "PassworResetTitle": "Now you can create a new password.",
   "PhoneSubtitle": "The two-factor authentication is enabled to provide additional portal security. Enter your mobile phone number to continue work on the portal. Mobile phone number must be entered using an international format with country code.",
   "PortalRemoveTitle": "Please confirm that you want to delete your portal",
+  "PortalDeactivateTitle": "Please confirm that you want to deactivate your portal",
   "SetAppButton": "Connect app",
   "SetAppDescription": "Two-factor authentication is enabled. Configure your authenticator app to continue work on the portal. You can use Google Authenticator for <1>Android</1> and <4>iOS</4> or Authenticator for <8>Windows Phone</8>.",
   "SetAppInstallDescription": "To connect the app, scan the QR code or manually enter your secret key <1>{{ secretKey }}</1>, and then enter a 6-digit code from your app in the field below.",

web/ASC.Web.Client/src/components/pages/Confirm/index.js

@@ -15,6 +15,9 @@ const ChangeOwnerForm = lazy(() => import("./sub-components/changeOwner"));
 const TfaAuthForm = lazy(() => import("./sub-components/tfaAuth"));
 const TfaActivationForm = lazy(() => import("./sub-components/tfaActivation"));
 const RemovePortal = lazy(() => import("./sub-components/removePortal"));
+const DeactivatePortal = lazy(() =>
+  import("./sub-components/deactivatePortal")
+);
 
 const Confirm = ({ match }) => {
   //console.log("Confirm render");
@@ -72,6 +75,11 @@ const Confirm = ({ match }) => {
         path={`${path}/PortalRemove`}
         component={RemovePortal}
       />
+      <ConfirmRoute
+        exact
+        path={`${path}/PortalSuspend`}
+        component={DeactivatePortal}
+      />
 
       {/* <Route component={Error404} /> */}
     </Switch>

web/ASC.Web.Client/src/components/pages/Confirm/sub-components/deactivatePortal.js

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { withRouter } from "react-router";
+import { withTranslation } from "react-i18next";
+import { inject, observer } from "mobx-react";
+import Section from "@appserver/common/components/Section";
+import Text from "@appserver/components/text";
+import Button from "@appserver/components/button";
+import toastr from "@appserver/components/toast/toastr";
+import { suspendPortal } from "@appserver/common/api/portal";
+import { StyledPage, StyledBody, StyledHeader } from "./StyledConfirm";
+
+import withLoader from "../withLoader";
+
+const DeactivatePortal = (props) => {
+  const { t, greetingTitle, linkData } = props;
+
+  const onDeleteClick = async () => {
+    try {
+      await suspendPortal(linkData.confirmHeader);
+    } catch (e) {
+      toastr.error(e);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <StyledBody>
+        <StyledHeader>
+          <Text fontSize="23px" fontWeight="700" className="title">
+            {greetingTitle}
+          </Text>
+        </StyledHeader>
+
+        <Text>{t("PortalDeactivateTitle")}</Text>
+        <Button
+          className="confirm-button"
+          primary
+          size="medium"
+          label={t("Settings:Deactivate")}
+          tabIndex={1}
+          onClick={onDeleteClick}
+        />
+      </StyledBody>
+    </StyledPage>
+  );
+};
+
+const DeactivatePortalWrapper = (props) => {
+  return (
+    <Section>
+      <Section.SectionBody>
+        <DeactivatePortal {...props} />
+      </Section.SectionBody>
+    </Section>
+  );
+};
+
+export default inject(({ auth }) => ({
+  greetingTitle: auth.settingsStore.greetingSettings,
+  theme: auth.settingsStore.theme,
+}))(
+  withRouter(
+    withTranslation(["Confirm", "Settings"])(
+      withLoader(observer(DeactivatePortalWrapper))
+    )
+  )
+);