Client:PortalSettings:OAuth2: add disable application dialog

packages/client/public/locales/en/OAuth.json

@@ -17,6 +17,8 @@
   "Creator": "Creator",
   "ClientHelpButton": "Credentials for using OAth 2.0 as your Authentication type.<br/> <strong>Note</strong>: Any enterprise admin who knows the app's client ID will be able to retrieve information about the app including app name, authentication type, app scopes and redirect URI.",
   "CodeVerifier": "Code verifier",
+  "DisableApplication": "Disable application",
+  "DisableApplicationDescription": "If you disable this application, all active consents will be revoked. If necessary, you can later enable the disabled application.<br/> <strong>Note</strong> that all users will again be required to complete the consent screen.",
   "EditApp": "Edit application",
   "EnterDescription": "Enter description",
   "ErrorName": "Minimal name length:",
@@ -40,6 +42,8 @@
   "RedirectsURLSHelpButton": "After a user successfully authorizes an application, the authorization server will redirect the user back to the application with sensitive information.",
   "RegisterNewApp": "Register a new application",
   "Reset": "Reset",
+  "ResetHeader": "Reset client secret",
+  "ResetDescription": "If you reset client secret, all active consents will be revoked. For apply next consent need use new client secret.<br/> <strong>Note</strong> that all users will again be required to complete the consent screen.",
   "Revoke": "Revoke",
   "RevokeConsent": "Revoke consent",
   "RevokeConsentDescription": "Once you revoke the consent to use the ONLYOFFICE DocSpace auth data in the service {{name}}, ONLYOFFICE DocSpace will automatically stop logging into {{name}}. Your account in {{name}} will not be deleted.",

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuth.types.ts

@@ -18,6 +18,7 @@ export interface OAuthProps {
 
   infoDialogVisible?: boolean;
   previewDialogVisible?: boolean;
+  disableDialogVisible?: boolean;
   isInit: boolean;
   setIsInit: (value: boolean) => void;
 }

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/index.tsx

@@ -17,6 +17,7 @@ import { OAuthProps } from "./OAuth.types";
 import InfoDialog from "./sub-components/InfoDialog";
 import PreviewDialog from "./sub-components/PreviewDialog";
 import OAuthLoader from "./sub-components/List/Loader";
+import DisableDialog from "./sub-components/DisableDialog";
 
 const MIN_LOADER_TIME = 500;
 
@@ -32,6 +33,7 @@ const OAuth = ({
   previewDialogVisible,
   isInit,
   setIsInit,
+  disableDialogVisible,
 }: OAuthProps) => {
   const { t } = useTranslation(["OAuth"]);
 
@@ -97,6 +99,7 @@ const OAuth = ({
         )}
       </>
       {infoDialogVisible && <InfoDialog visible={infoDialogVisible} />}
+      {disableDialogVisible && <DisableDialog />}
       {previewDialogVisible && <PreviewDialog visible={previewDialogVisible} />}
     </OAuthContainer>
   );
@@ -116,6 +119,7 @@ export default inject(
       previewDialogVisible,
       isInit,
       setIsInit,
+      disableDialogVisible,
     } = oauthStore;
     return {
       viewAs,
@@ -129,6 +133,7 @@ export default inject(
       fetchScopes,
       isInit,
       setIsInit,
+      disableDialogVisible,
     };
   }
 )(observer(OAuth));

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/DisableDialog.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { inject, observer } from "mobx-react";
+import { useTranslation, Trans } from "react-i18next";
+
+// @ts-ignore
+import ModalDialog from "@docspace/components/modal-dialog";
+// @ts-ignore
+import Button from "@docspace/components/button";
+// @ts-ignore
+import toastr from "@docspace/components/toast/toastr";
+
+// @ts-ignore
+import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore";
+
+interface DisableClientDialog {
+  isVisible?: boolean;
+  onClose?: () => void;
+  onDisable?: () => Promise<void>;
+}
+
+const DisableClientDialog = (props: DisableClientDialog) => {
+  const { t, ready } = useTranslation(["OAuth", "Common"]);
+  const { isVisible, onClose, onDisable } = props;
+
+  const [isRequestRunning, setIsRequestRunning] = React.useState(false);
+
+  const onDisableClick = async () => {
+    try {
+      setIsRequestRunning(true);
+      await onDisable?.();
+
+      setIsRequestRunning(true);
+      onClose?.();
+    } catch (error) {
+      toastr.error(error);
+      onClose?.();
+    }
+  };
+
+  return (
+    <ModalDialog
+      isLoading={!ready}
+      visible={isVisible}
+      onClose={onClose}
+      displayType="modal"
+    >
+      <ModalDialog.Header>{t("DisableApplication")}</ModalDialog.Header>
+      <ModalDialog.Body>
+        <Trans t={t} i18nKey="DisableApplicationDescription" ns="OAuth" />
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <Button
+          // @ts-ignore
+          className="delete-button"
+          key="DeletePortalBtn"
+          label={t("Common:OkButton")}
+          size="normal"
+          scale
+          primary={true}
+          isLoading={isRequestRunning}
+          onClick={onDisableClick}
+        />
+        <Button
+          // @ts-ignore
+          className="cancel-button"
+          key="CancelDeleteBtn"
+          label={t("Common:CancelButton")}
+          size="normal"
+          scale
+          isDisabled={isRequestRunning}
+          onClick={onClose}
+        />
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+export default inject(({ oauthStore }: { oauthStore: OAuthStoreProps }) => {
+  const {
+    bufferSelection,
+    setDisableDialogVisible,
+    setActiveClient,
+    setSelection,
+    changeClientStatus,
+    disableDialogVisible,
+  } = oauthStore;
+
+  const onClose = () => {
+    setDisableDialogVisible(false);
+  };
+
+  const onDisable = async () => {
+    setActiveClient(bufferSelection.clientId);
+    await changeClientStatus(bufferSelection.clientId, false);
+    setActiveClient("");
+    setSelection("");
+  };
+
+  return { isVisible: disableDialogVisible, onClose, onDisable };
+})(observer(DisableClientDialog));

packages/client/src/store/OAuthStore.ts

@@ -54,6 +54,12 @@ export interface OAuthStoreProps {
   previewDialogVisible: boolean;
   setPreviewDialogVisible: (value: boolean) => void;
 
+  disableDialogVisible: boolean;
+  setDisableDialogVisible: (value: boolean) => void;
+
+  resetDialogVisible: boolean;
+  setResetDialogVisible: (value: boolean) => void;
+
   clientsIsLoading: boolean;
   setClientsIsLoading: (value: boolean) => void;
 
@@ -126,6 +132,7 @@ class OAuthStore implements OAuthStoreProps {
 
   infoDialogVisible: boolean = false;
   previewDialogVisible: boolean = false;
+  disableDialogVisible: boolean = false;
 
   selection: string[] = [];
 
@@ -170,6 +177,10 @@ class OAuthStore implements OAuthStoreProps {
     this.previewDialogVisible = value;
   };
 
+  setDisableDialogVisible = (value: boolean) => {
+    this.disableDialogVisible = value;
+  };
+
   setSelection = (clientId: string) => {
     if (!clientId) {
       this.selection = [];
@@ -448,6 +459,7 @@ class OAuthStore implements OAuthStoreProps {
       this.setBufferSelection(clientId);
       this.setPreviewDialogVisible(false);
       this.setInfoDialogVisible(true);
+      this.setDisableDialogVisible(false);
     };
 
     const onRevoke = () => {
@@ -455,6 +467,15 @@ class OAuthStore implements OAuthStoreProps {
       this.setPreviewDialogVisible(false);
       this.setInfoDialogVisible(false);
       this.setRevokeDialogVisible(true);
+      this.setDisableDialogVisible(false);
+    };
+
+    const onDisable = () => {
+      this.setBufferSelection(clientId);
+      this.setPreviewDialogVisible(false);
+      this.setInfoDialogVisible(false);
+      this.setRevokeDialogVisible(false);
+      this.setDisableDialogVisible(true);
     };
 
     const openOption = {
@@ -576,7 +597,7 @@ class OAuthStore implements OAuthStoreProps {
       key: "disable",
       icon: RemoveReactSvgUrl,
       label: t("Common:Disable"),
-      onClick: () => onEnable(false),
+      onClick: onDisable,
     };
 
     const contextOptions = [