Web: Client: Settings: move buttons to component
This commit is contained in:
parent
ea495d2b13
commit
0c4bcb2399
@ -84,6 +84,7 @@ export const ButtonsWrapper = styled.div`
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-top: 24px;
|
||||
|
||||
@media (max-width: 375px) {
|
||||
position: absolute;
|
||||
|
@ -4,7 +4,6 @@ import { withRouter } from "react-router";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import Box from "@appserver/components/box";
|
||||
import Button from "@appserver/components/button";
|
||||
import Text from "@appserver/components/text";
|
||||
import Link from "@appserver/components/link";
|
||||
import Slider from "@appserver/components/slider";
|
||||
@ -12,9 +11,9 @@ import Checkbox from "@appserver/components/checkbox";
|
||||
import SectionLoader from "../sub-components/section-loader";
|
||||
import { getLanguage } from "@appserver/common/utils";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import { ButtonsWrapper } from "../StyledSecurity";
|
||||
import { getPortalPasswordSettings } from "@appserver/common/api/settings";
|
||||
import toastr from "@appserver/components/toast/toastr";
|
||||
import Buttons from "../sub-components/buttons";
|
||||
|
||||
const MainContainer = styled.div`
|
||||
width: 100%;
|
||||
@ -34,7 +33,6 @@ const MainContainer = styled.div`
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
@ -202,33 +200,12 @@ const PasswordStrength = (props) => {
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<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>
|
||||
<Buttons
|
||||
t={t}
|
||||
showReminder={showReminder}
|
||||
onSaveClick={onSaveClick}
|
||||
onCancelClick={onCancelClick}
|
||||
/>
|
||||
</MainContainer>
|
||||
);
|
||||
};
|
||||
|
@ -4,14 +4,13 @@ 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 Link from "@appserver/components/link";
|
||||
import toastr from "@appserver/components/toast/toastr";
|
||||
import SectionLoader from "../sub-components/section-loader";
|
||||
import { getLanguage } from "@appserver/common/utils";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import { ButtonsWrapper } from "../StyledSecurity";
|
||||
import Buttons from "../sub-components/buttons";
|
||||
|
||||
const MainContainer = styled.div`
|
||||
width: 100%;
|
||||
@ -22,7 +21,6 @@ const MainContainer = styled.div`
|
||||
|
||||
.box {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -134,33 +132,12 @@ const TwoFactorAuth = (props) => {
|
||||
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>
|
||||
<Buttons
|
||||
t={t}
|
||||
showReminder={showReminder}
|
||||
onSaveClick={onSaveClick}
|
||||
onCancelClick={onCancelClick}
|
||||
/>
|
||||
</MainContainer>
|
||||
);
|
||||
};
|
||||
|
@ -11,6 +11,7 @@ import { isMobile } from "react-device-detect";
|
||||
import { getLanguage } from "@appserver/common/utils";
|
||||
import { ButtonsWrapper } from "../StyledSecurity";
|
||||
import UserFields from "../sub-components/user-fields";
|
||||
import Buttons from "../sub-components/buttons";
|
||||
|
||||
const MainContainer = styled.div`
|
||||
width: 100%;
|
||||
@ -44,6 +45,9 @@ const TrustedMail = (props) => {
|
||||
}
|
||||
};
|
||||
|
||||
const onSaveClick = () => {};
|
||||
const onCancelClick = () => {};
|
||||
|
||||
const lng = getLanguage(localStorage.getItem("language") || "en");
|
||||
return (
|
||||
<MainContainer>
|
||||
@ -97,33 +101,12 @@ const TrustedMail = (props) => {
|
||||
</Text>
|
||||
<Text>{t("TrustedMailWarningHelper")}</Text>
|
||||
|
||||
<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>
|
||||
<Buttons
|
||||
t={t}
|
||||
showReminder={showReminder}
|
||||
onSaveClick={onSaveClick}
|
||||
onCancelClick={onCancelClick}
|
||||
/>
|
||||
</MainContainer>
|
||||
);
|
||||
};
|
||||
|
@ -0,0 +1,40 @@
|
||||
import React from "react";
|
||||
import Button from "@appserver/components/button";
|
||||
import Text from "@appserver/components/text";
|
||||
import { ButtonsWrapper } from "../StyledSecurity";
|
||||
|
||||
const Buttons = (props) => {
|
||||
const { t, showReminder, onSaveClick, onCancelClick } = props;
|
||||
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default Buttons;
|
Loading…
Reference in New Issue
Block a user