IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Client:PortalSettings:OAuth2: add delete client dialog

Browse Source
This commit is contained in:
Timofey Boyko 2023-12-08 16:18:43 +03:00
parent edc3636ba0
commit 82e0c8e3e9
8 changed files with 131 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/public/locales/en/OAuth.json
View File

@ -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",
"DeleteHeader": "Delete application",
"DeleteDescription": "If you delete this application, all active consents and authorization will be revoked. If the user tries to open the consent screen for this app, an error will be thrown in the document space and the user will be redirected to the specified redirect URL.",
"DisableApplication": "Disable application",
"DisableApplicationDescription": "If you disable this application, all active consents and authorization will be disabled. If necessary, you can later enable the disabled application.",
"EditApp": "Edit application",

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

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

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

@ -18,6 +18,7 @@ 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";
import DeleteDialog from "./sub-components/DeleteDialog";
const MIN_LOADER_TIME = 500;
@ -34,6 +35,7 @@ const OAuth = ({
isInit,
setIsInit,
disableDialogVisible,
deleteDialogVisible,
}: OAuthProps) => {
const { t } = useTranslation(["OAuth"]);
@ -101,6 +103,7 @@ const OAuth = ({
{infoDialogVisible && <InfoDialog visible={infoDialogVisible} />}
{disableDialogVisible && <DisableDialog />}
{previewDialogVisible && <PreviewDialog visible={previewDialogVisible} />}
{deleteDialogVisible && <DeleteDialog />}
</OAuthContainer>
);
};
@ -120,6 +123,7 @@ export default inject(
isInit,
setIsInit,
disableDialogVisible,
deleteDialogVisible,
} = oauthStore;
return {
viewAs,
@ -134,6 +138,7 @@ export default inject(
isInit,
setIsInit,
disableDialogVisible,
deleteDialogVisible,
};
}
)(observer(OAuth));

3
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx
View File

@ -9,6 +9,8 @@ import {
} from "@docspace/common/utils/oauth/interfaces";
import { AuthenticationMethod } from "@docspace/common/utils/oauth/enums";
import ResetDialog from "../ResetDialog";
import BasicBlock from "./components/BasicBlock";
import ClientBlock from "./components/ClientBlock";
import SupportBlock from "./components/SupportBlock";
@ -20,7 +22,6 @@ import { StyledContainer } from "./ClientForm.styled";
import { ClientFormProps, ClientStore } from "./ClientForm.types";
import ClientFormLoader from "./Loader";
import ResetDialog from "../ResetDialog";
export function isValidUrl(url: string) {
try {

100
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/DeleteDialog.tsx Normal file
View File

@ -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 DeleteClientDialogProps {
isVisible?: boolean;
onClose?: () => void;
onDisable?: () => Promise<void>;
}
const DeleteClientDialog = (props: DeleteClientDialogProps) => {
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("DeleteHeader")}</ModalDialog.Header>
<ModalDialog.Body>
<Trans t={t} i18nKey="DeleteDescription" 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,
setDeleteDialogVisible,
setActiveClient,
setSelection,
deleteClient,
deleteDialogVisible,
} = oauthStore;
const onClose = () => {
setDeleteDialogVisible(false);
};
const onDisable = async () => {
setActiveClient(bufferSelection.clientId);
await deleteClient([bufferSelection.clientId]);
setActiveClient("");
setSelection("");
};
return { isVisible: deleteDialogVisible, onClose, onDisable };
})(observer(DeleteClientDialog));

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

@ -12,13 +12,13 @@ import toastr from "@docspace/components/toast/toastr";
// @ts-ignore
import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore";
interface DisableClientDialog {
interface DisableClientDialogProps {
isVisible?: boolean;
onClose?: () => void;
onDisable?: () => Promise<void>;
}
const DisableClientDialog = (props: DisableClientDialog) => {
const DisableClientDialog = (props: DisableClientDialogProps) => {
const { t, ready } = useTranslation(["OAuth", "Common"]);
const { isVisible, onClose, onDisable } = props;

6
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ResetDialog.tsx
View File

@ -13,13 +13,13 @@ import toastr from "@docspace/components/toast/toastr";
// @ts-ignore
import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore";
interface DisableClientDialog {
interface ResetDialogProps {
isVisible?: boolean;
onClose?: () => void;
onReset?: (id: string) => Promise<void>;
}
const DisableClientDialog = (props: DisableClientDialog) => {
const ResetDialog = (props: ResetDialogProps) => {
const { id } = useParams();
const { t, ready } = useTranslation(["OAuth", "Common"]);
@ -91,4 +91,4 @@ export default inject(({ oauthStore }: { oauthStore: OAuthStoreProps }) => {
};
return { isVisible: resetDialogVisible, onClose, onReset };
})(observer(DisableClientDialog));
})(observer(ResetDialog));

25
packages/client/src/store/OAuthStore.ts
View File

@ -484,6 +484,7 @@ class OAuthStore implements OAuthStoreProps {
this.setPreviewDialogVisible(false);
this.setInfoDialogVisible(true);
this.setDisableDialogVisible(false);
this.setDeleteDialogVisible(false);
};
const onRevoke = () => {
@ -492,6 +493,7 @@ class OAuthStore implements OAuthStoreProps {
this.setInfoDialogVisible(false);
this.setRevokeDialogVisible(true);
this.setDisableDialogVisible(false);
this.setDeleteDialogVisible(false);
};
const onDisable = () => {
@ -500,6 +502,7 @@ class OAuthStore implements OAuthStoreProps {
this.setInfoDialogVisible(false);
this.setRevokeDialogVisible(false);
this.setDisableDialogVisible(true);
this.setDeleteDialogVisible(false);
};
const openOption = {
@ -548,25 +551,29 @@ class OAuthStore implements OAuthStoreProps {
}
const onDelete = () => {
this.setInfoDialogVisible(false);
this.setBufferSelection(clientId);
this.setPreviewDialogVisible(false);
if (!isGroupContext) {
this.deleteClient([clientId]);
} else {
this.deleteClient(this.selection);
}
this.setInfoDialogVisible(false);
this.setRevokeDialogVisible(false);
this.setDisableDialogVisible(false);
this.setDeleteDialogVisible(true);
};
const onShowPreview = () => {
this.setBufferSelection(clientId);
this.setInfoDialogVisible(false);
this.setPreviewDialogVisible(true);
this.setInfoDialogVisible(false);
this.setRevokeDialogVisible(false);
this.setDisableDialogVisible(false);
this.setDeleteDialogVisible(false);
};
const onEnable = async (status: boolean) => {
this.setInfoDialogVisible(false);
this.setPreviewDialogVisible(false);
this.setInfoDialogVisible(false);
this.setRevokeDialogVisible(false);
this.setDisableDialogVisible(false);
this.setDeleteDialogVisible(false);
if (isGroupContext) {
try {