Web: Client: Settings: tfa refactoring, redesign
This commit is contained in:
parent
6500c666d0
commit
26d96e3404
@ -4,7 +4,7 @@ import { withTranslation } from "react-i18next";
|
||||
import Text from "@appserver/components/text";
|
||||
import { setDocumentTitle } from "../../../../../../helpers/utils";
|
||||
import { MainContainer } from "../StyledSecurity";
|
||||
import TfaSection from "../sub-components/tfa";
|
||||
import TfaSection from "./tfa";
|
||||
import MobileView from "./mobileView";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import CategoryWrapper from "../sub-components/category-wrapper";
|
||||
|
||||
@ -0,0 +1,176 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
import { withRouter } from "react-router";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import RadioButtonGroup from "@appserver/components/radio-button-group";
|
||||
import Button from "@appserver/components/button";
|
||||
import Text from "@appserver/components/text";
|
||||
import toastr from "@appserver/components/toast/toastr";
|
||||
import SectionLoader from "../sub-components/section-loader";
|
||||
|
||||
const MainContainer = styled.div`
|
||||
width: 100%;
|
||||
|
||||
.box {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
const ButtonsWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 375px) {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
width: calc(100vw - 32px);
|
||||
|
||||
.button {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reminder {
|
||||
position: absolute;
|
||||
bottom: 48px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const TwoFactorAuth = (props) => {
|
||||
const { t } = props;
|
||||
const [type, setType] = useState("none");
|
||||
const [currentState, setCurrentState] = useState("");
|
||||
const [smsDisabled, setSmsDisabled] = useState(false);
|
||||
const [appDisabled, setAppDisabled] = useState(false);
|
||||
const [showReminder, setShowReminder] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const getSettings = async () => {
|
||||
const { getTfaType, getTfaSettings } = props;
|
||||
const type = await getTfaType();
|
||||
setType(type);
|
||||
|
||||
const settings = await getTfaSettings();
|
||||
setSmsDisabled(settings[0].avaliable);
|
||||
setAppDisabled(settings[1].avaliable);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getSettings();
|
||||
setCurrentState(type);
|
||||
setIsLoading(true);
|
||||
}, []);
|
||||
|
||||
const onSelectTfaType = (e) => {
|
||||
if (type !== e.target.value) {
|
||||
setType(e.target.value);
|
||||
setShowReminder(true);
|
||||
}
|
||||
if (e.target.value === currentState) {
|
||||
setShowReminder(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onSaveClick = () => {
|
||||
const { t, setTfaSettings, getTfaConfirmLink, history } = props;
|
||||
|
||||
setTfaSettings(type).then((res) => {
|
||||
toastr.success(t("SuccessfullySaveSettingsMessage"));
|
||||
if (type !== "none") {
|
||||
getTfaConfirmLink(res).then((link) =>
|
||||
history.push(link.replace(window.location.origin, ""))
|
||||
);
|
||||
}
|
||||
setType(type);
|
||||
setShowReminder(false);
|
||||
});
|
||||
};
|
||||
|
||||
const onCancelClick = () => {
|
||||
setShowReminder(false);
|
||||
setType(currentState);
|
||||
};
|
||||
|
||||
if (!isLoading) return <SectionLoader />;
|
||||
return (
|
||||
<MainContainer>
|
||||
<RadioButtonGroup
|
||||
className="box"
|
||||
fontSize="13px"
|
||||
fontWeight="400"
|
||||
name="group"
|
||||
orientation="vertical"
|
||||
options={[
|
||||
{
|
||||
label: t("Disabled"),
|
||||
value: "none",
|
||||
},
|
||||
{
|
||||
label: t("BySms"),
|
||||
value: "sms",
|
||||
disabled: !smsDisabled,
|
||||
},
|
||||
{
|
||||
label: t("ByApp"),
|
||||
value: "app",
|
||||
disabled: !appDisabled,
|
||||
},
|
||||
]}
|
||||
selected={type}
|
||||
onClick={onSelectTfaType}
|
||||
/>
|
||||
|
||||
<ButtonsWrapper>
|
||||
<Button
|
||||
label={t("Common:SaveButton")}
|
||||
size="small"
|
||||
primary={true}
|
||||
className="button"
|
||||
onClick={onSaveClick}
|
||||
isDisabled={!showReminder}
|
||||
/>
|
||||
<Button
|
||||
label={t("Common:CancelButton")}
|
||||
size="small"
|
||||
className="button"
|
||||
onClick={onCancelClick}
|
||||
isDisabled={!showReminder}
|
||||
/>
|
||||
{showReminder && (
|
||||
<Text
|
||||
color="#A3A9AE"
|
||||
fontSize="12px"
|
||||
fontWeight="600"
|
||||
className="reminder"
|
||||
>
|
||||
{t("YouHaveUnsavedChanges")}
|
||||
</Text>
|
||||
)}
|
||||
</ButtonsWrapper>
|
||||
</MainContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth }) => {
|
||||
const { organizationName } = auth.settingsStore;
|
||||
const {
|
||||
getTfaType,
|
||||
getTfaSettings,
|
||||
setTfaSettings,
|
||||
getTfaConfirmLink,
|
||||
} = auth.tfaStore;
|
||||
|
||||
return {
|
||||
organizationName,
|
||||
getTfaType,
|
||||
getTfaSettings,
|
||||
setTfaSettings,
|
||||
getTfaConfirmLink,
|
||||
};
|
||||
})(
|
||||
withTranslation(["Settings", "Common"])(withRouter(observer(TwoFactorAuth)))
|
||||
);
|
||||
@ -0,0 +1,26 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import Loaders from "@appserver/common/components/Loaders";
|
||||
|
||||
const StyledLoader = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 300px;
|
||||
|
||||
@media (max-width: 375px) {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const SectionLoader = () => {
|
||||
return (
|
||||
<StyledLoader>
|
||||
<Loaders.Rectangle />
|
||||
<Loaders.Rectangle />
|
||||
<Loaders.Rectangle />
|
||||
</StyledLoader>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionLoader;
|
||||
@ -1,138 +0,0 @@
|
||||
import React, { Component } from "react";
|
||||
import { withRouter } from "react-router";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import styled from "styled-components";
|
||||
import Text from "@appserver/components/text";
|
||||
import RadioButtonGroup from "@appserver/components/radio-button-group";
|
||||
import Button from "@appserver/components/button";
|
||||
import toastr from "@appserver/components/toast/toastr";
|
||||
import Loader from "@appserver/components/loader";
|
||||
import { showLoader, hideLoader } from "@appserver/common/utils";
|
||||
|
||||
import { setDocumentTitle } from "../../../../../../helpers/utils";
|
||||
import { inject } from "mobx-react";
|
||||
|
||||
const MainContainer = styled.div`
|
||||
width: 100%;
|
||||
|
||||
.save-button {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.page_loader {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
}
|
||||
`;
|
||||
|
||||
const HeaderContainer = styled.div`
|
||||
margin: 0 0 16px 0;
|
||||
`;
|
||||
|
||||
class TfaPage extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const { t } = props;
|
||||
this.state = {
|
||||
isLoaded: false,
|
||||
type: "none",
|
||||
showButton: false,
|
||||
smsDisabled: false,
|
||||
appDisabled: false,
|
||||
};
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
const { getTfaType, getTfaSettings } = this.props;
|
||||
showLoader();
|
||||
|
||||
const type = await getTfaType();
|
||||
this.setState({ type: type, isLoaded: true });
|
||||
|
||||
const r = await getTfaSettings();
|
||||
this.setState({ smsDisabled: r[0].avaliable, appDisabled: r[1].avaliable });
|
||||
|
||||
hideLoader();
|
||||
}
|
||||
|
||||
onSelectTfaType = async (e) => {
|
||||
const { getTfaType } = this.props;
|
||||
|
||||
const type = await getTfaType();
|
||||
|
||||
if (type !== e.target.value) {
|
||||
this.setState({ type: e.target.value, showButton: true });
|
||||
} else {
|
||||
this.setState({ type: e.target.value, showButton: false });
|
||||
}
|
||||
};
|
||||
|
||||
saveSettings = () => {
|
||||
const { type } = this.state;
|
||||
const { t, setTfaSettings, getTfaConfirmLink, history } = this.props;
|
||||
|
||||
setTfaSettings(type).then((res) => {
|
||||
toastr.success(t("SuccessfullySaveSettingsMessage"));
|
||||
if (type !== "none") {
|
||||
getTfaConfirmLink(res).then((link) =>
|
||||
history.push(link.replace(window.location.origin, ""))
|
||||
);
|
||||
}
|
||||
this.setState({ type: type, showButton: false });
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { isLoaded, type, showButton, smsDisabled, appDisabled } = this.state;
|
||||
const { t } = this.props;
|
||||
|
||||
return !isLoaded ? (
|
||||
<Loader className="pageLoader" type="rombs" size="40px" />
|
||||
) : (
|
||||
<MainContainer>
|
||||
<RadioButtonGroup
|
||||
fontSize="13px"
|
||||
fontWeight="400"
|
||||
name="group"
|
||||
orientation="vertical"
|
||||
options={[
|
||||
{
|
||||
label: t("Disabled"),
|
||||
value: "none",
|
||||
},
|
||||
{
|
||||
label: t("BySms"),
|
||||
value: "sms",
|
||||
disabled: !smsDisabled,
|
||||
},
|
||||
{
|
||||
label: t("ByApp"),
|
||||
value: "app",
|
||||
disabled: !appDisabled,
|
||||
},
|
||||
]}
|
||||
selected={type}
|
||||
onClick={this.onSelectTfaType}
|
||||
/>
|
||||
{showButton && (
|
||||
<Button
|
||||
label={t("Common:SaveButton")}
|
||||
size="small"
|
||||
primary={true}
|
||||
className="save-button"
|
||||
onClick={this.saveSettings}
|
||||
/>
|
||||
)}
|
||||
</MainContainer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default inject(({ auth }) => ({
|
||||
organizationName: auth.settingsStore.organizationName,
|
||||
getTfaType: auth.tfaStore.getTfaType,
|
||||
getTfaSettings: auth.tfaStore.getTfaSettings,
|
||||
setTfaSettings: auth.tfaStore.setTfaSettings,
|
||||
getTfaConfirmLink: auth.tfaStore.getTfaConfirmLink,
|
||||
}))(withTranslation(["Settings", "Common"])(withRouter(TfaPage)));
|
||||
@ -4,12 +4,13 @@ import { withRouter } from "react-router";
|
||||
import Layout from "./Layout";
|
||||
import { combineUrl } from "@appserver/common/utils";
|
||||
import AppServerConfig from "@appserver/common/constants/AppServerConfig";
|
||||
import { isMobile } from "react-device-detect";
|
||||
|
||||
const SecuritySettings = lazy(() => import("./categories/security/index.js"));
|
||||
const Admins = lazy(() =>
|
||||
import("./categories/security/sub-components/admins")
|
||||
);
|
||||
const TfaPage = lazy(() => import("./categories/security/sub-components/tfa"));
|
||||
const TfaPage = lazy(() => import("./categories/security/access-portal/tfa"));
|
||||
|
||||
const CustomizationSettings = lazy(() =>
|
||||
import("./categories/common/customization")
|
||||
@ -95,7 +96,11 @@ const Settings = () => {
|
||||
/> */}
|
||||
<Route exact path={SECURITY_URLS} component={SecuritySettings} />
|
||||
<Route path={ADMINS_URL} component={Admins} />
|
||||
<Route exact path={TFA_PAGE_URL} component={TfaPage} />
|
||||
<Route
|
||||
exact
|
||||
path={TFA_PAGE_URL}
|
||||
component={isMobile ? TfaPage : SecuritySettings}
|
||||
/>
|
||||
|
||||
<Route exact path={THIRD_PARTY_URL} component={ThirdPartyServices} />
|
||||
<Route
|
||||
|
||||
Loading…
Reference in New Issue
Block a user