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

Web: Studio: SSO: Added confirmation dialogs for turning off and resetting

Browse Source
This commit is contained in:
Dmitry Kulak 2022-02-24 15:59:10 +03:00
parent 1891633903
commit cd69b2a62a
7 changed files with 185 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/ASC.Web.Client/public/locales/ru/SingleSignOn.json
View File

@ -8,6 +8,7 @@
"CertificateName": "Имя",
"CertificateStatus": "Статус",
"ChooseFile": "Выбрать файл",
"ConfirmationText": "Все введенные данные будут потеряны. Вы уверены, что хотите продолжить?",
"CustomEntryButton": "Пользовательская надпись для кнопки входа:",
"CustomEntryButtonPlaceholder": "Single Sign-on",
"CustomEntryTooltip": "Надпись для кнопки, которая используется для входа на портал с помощью сервиса Single Sign-on",

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

@ -1,4 +1,4 @@
import React from "react";
import React, { useEffect } from "react";
import { isDesktop } from "react-device-detect";
import { observer } from "mobx-react";
import { useTranslation } from "react-i18next";
@ -13,6 +13,7 @@ import ForbiddenPage from "./sub-components/ForbiddenPage";
import HideButton from "./sub-components/HideButton";
import IdpSettings from "./IdpSettings";
import ProviderMetadata from "./ProviderMetadata";
import ResetConfirmationModal from "./sub-components/ResetConfirmationModal";
import StyledSsoPage from "./styled-containers/StyledSsoPageContainer";
import ToggleSSO from "./sub-components/ToggleSSO";
@ -21,6 +22,10 @@ const SingleSignOn = () => {
if (!isDesktop) return <ForbiddenPage t={t} />;
useEffect(() => {
FormStore.onPageLoad();
}, []);
return (
<StyledSsoPage
hideSettings={FormStore.ServiceProviderSettings}
@ -50,11 +55,19 @@ const SingleSignOn = () => {
/>
<Button
label={t("ResetSettings")}
onClick={FormStore.resetForm}
onClick={
FormStore.isSsoEnabled
? FormStore.openResetModal
: FormStore.resetForm
}
size="medium"
tabIndex={24}
/>
</Box>
{FormStore.confirmationResetModal && (
<ResetConfirmationModal FormStore={FormStore} t={t} />
)}
</Box>
<hr className="separator" />

53
web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/sub-components/DisableSsoConfirmationModal.js Normal file
View File

@ -0,0 +1,53 @@
import React from "react";
import { observer } from "mobx-react";
import Box from "@appserver/components/box";
import Button from "@appserver/components/button";
import ModalDialog from "@appserver/components/modal-dialog";
import Text from "@appserver/components/text";
import StyledModalDialog from "../styled-containers/StyledModalDialog";
import { addArguments } from "../../../../utils";
const DisableSsoConfirmationModal = ({ FormStore, t }) => {
const onClose = addArguments(
FormStore.onCloseModal,
"confirmationDisableModal"
);
console.log(FormStore.confirmationDisableModal);
return (
<StyledModalDialog
contentHeight="100%"
displayType="modal"
onClose={onClose}
visible={FormStore.confirmationDisableModal}
>
<ModalDialog.Header>{t("Common:Confirmation")}</ModalDialog.Header>
<ModalDialog.Body>
<Text>{t("ConfirmationText")}</Text>
</ModalDialog.Body>
<ModalDialog.Footer>
<Box displayProp="flex" marginProp="12px 0 4px 0">
<Button
className="ok-button"
label={t("Common:OKButton")}
onClick={FormStore.onConfirmDisable}
primary
size="big"
/>
<Button
label={t("Common:CancelButton")}
onClick={onClose}
size="big"
/>
</Box>
</ModalDialog.Footer>
</StyledModalDialog>
);
};
export default observer(DisableSsoConfirmationModal);

51
web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/sub-components/ResetConfirmationModal.js Normal file
View File

@ -0,0 +1,51 @@
import React from "react";
import { observer } from "mobx-react";
import Box from "@appserver/components/box";
import Button from "@appserver/components/button";
import ModalDialog from "@appserver/components/modal-dialog";
import Text from "@appserver/components/text";
import StyledModalDialog from "../styled-containers/StyledModalDialog";
import { addArguments } from "../../../../utils";
const ResetConfirmationModal = ({ FormStore, t }) => {
const onClose = addArguments(
FormStore.onCloseModal,
"confirmationResetModal"
);
return (
<StyledModalDialog
contentHeight="100%"
displayType="modal"
onClose={onClose}
visible={FormStore.confirmationResetModal}
>
<ModalDialog.Header>{t("Common:Confirmation")}</ModalDialog.Header>
<ModalDialog.Body>
<Text>{t("ConfirmationText")}</Text>
</ModalDialog.Body>
<ModalDialog.Footer>
<Box displayProp="flex" marginProp="12px 0 4px 0">
<Button
className="ok-button"
label={t("Common:OKButton")}
onClick={FormStore.onConfirmReset}
primary
size="big"
/>
<Button
label={t("Common:CancelButton")}
onClick={onClose}
size="big"
/>
</Box>
</ModalDialog.Footer>
</StyledModalDialog>
);
};
export default observer(ResetConfirmationModal);

12
web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/sub-components/ToggleSSO.js
View File

@ -6,6 +6,8 @@ import HelpButton from "@appserver/components/help-button";
import Text from "@appserver/components/text";
import ToggleButton from "@appserver/components/toggle-button";
import DisableSsoConfirmationModal from "./DisableSsoConfirmationModal";
const borderProp = { radius: "4px" };
const displayProp = { display: "inline-flex" };
@ -26,7 +28,11 @@ const ToggleSSO = ({ FormStore, t }) => {
<ToggleButton
className="toggle"
isChecked={FormStore.enableSso}
onChange={FormStore.onSsoToggle}
onChange={
FormStore.isSsoEnabled && FormStore.enableSso
? FormStore.openConfirmationDisableModal
: FormStore.onSsoToggle
}
/>
<Box>
@ -44,6 +50,10 @@ const ToggleSSO = ({ FormStore, t }) => {
<Text lineHeight="16px">{t("TurnOnSSOCaption")}</Text>
</Box>
</Box>
{FormStore.confirmationDisableModal && (
<DisableSsoConfirmationModal FormStore={FormStore} t={t} />
)}
</>
);
};

2
web/ASC.Web.Client/src/components/pages/Settings/categories/integration/SingleSignOn/sub-components/constants.js
View File

@ -61,6 +61,8 @@ export const bindingOptions = [
export const defaultStore = {
spLoginLabel: "",
enableSso: false,
// idpSettings
entityId: "",
ssoUrl: "",

57
web/ASC.Web.Client/src/store/SsoFormStore.js
View File

@ -19,10 +19,16 @@ const regExps = {
};
class SsoFormStore {
uploadXmlUrl = "";
isSsoEnabled = false;
set isSsoEnabled(value) {
this.isSsoEnabled = value;
}
enableSso = false;
uploadXmlUrl = "";
spLoginLabel = "";
// idpSettings
@ -85,6 +91,8 @@ class SsoFormStore {
SPMetadata = false;
idp_isModalVisible = false;
sp_isModalVisible = false;
confirmationDisableModal = false;
confirmationResetModal = false;
// errors
uploadXmlUrlHasError = false;
@ -128,8 +136,21 @@ class SsoFormStore {
makeAutoObservable(this);
}
onPageLoad = () => {
const response = fetch("/somewhere");
if ("something") {
this.isSsoEnabled = true;
}
};
onSsoToggle = () => {
this.enableSso = !this.enableSso;
if (!this.enableSso) {
this.enableSso = true;
this.ServiceProviderSettings = true;
} else {
this.enableSso = false;
}
};
onTextInputChange = (e) => {
@ -175,6 +196,32 @@ class SsoFormStore {
this.setErrors(field, value);
};
disableSso = () => {
this.isSsoEnabled = false;
};
openConfirmationDisableModal = () => {
this.confirmationDisableModal = true;
};
openResetModal = () => {
this.confirmationResetModal = true;
};
onConfirmDisable = () => {
this.disableSso();
this.onSsoToggle();
this.confirmationDisableModal = false;
};
onConfirmReset = () => {
this.resetForm();
this.disableSso();
this.ServiceProviderSettings = false;
this.SPMetadata = false;
this.confirmationResetModal = false;
};
resetForm = async () => {
const params = {
method: "DELETE",
@ -184,14 +231,14 @@ class SsoFormStore {
try {
const response = await fetch("/somewhere", params);
if (response.ok) {
this.resetField();
this.resetFields();
} else throw new Error("error");
} catch (err) {
console.log(err);
}
};
resetField = () => {
resetFields = () => {
for (let key of Object.keys(defaultStore)) {
this[key] = defaultStore[key];
}
@ -422,7 +469,7 @@ class SsoFormStore {
};
try {
const response = await fetch("./somewhere");
const response = await fetch("./somewhere", params);
if (!response.ok) throw new Error("Some error");
console.log("success");
} catch (err) {