Web: Client: Settings: use SaveCancelButtons

This commit is contained in:
Viktor Fomin 2022-04-08 16:01:03 +03:00
parent 9aa95c6462
commit b2d162b630
5 changed files with 34 additions and 88 deletions

View File

@ -85,34 +85,6 @@ export const StyledMobileCategoryWrapper = styled.div`
StyledMobileCategoryWrapper.defaultProps = { theme: Base };
export const ButtonsWrapper = styled.div`
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
margin-top: 24px;
@media (max-width: 600px) {
position: absolute;
bottom: 16px;
width: calc(100vw - 84px);
.button {
height: 40px;
width: 100%;
}
.reminder {
position: absolute;
bottom: 48px;
}
}
@media (max-width: 430px) {
width: calc(100vw - 32px);
}
`;
export const LearnMoreWrapper = styled.div`
display: none;

View File

@ -11,10 +11,10 @@ import Checkbox from "@appserver/components/checkbox";
import { getLanguage } from "@appserver/common/utils";
import { LearnMoreWrapper } from "../StyledSecurity";
import toastr from "@appserver/components/toast/toastr";
import Buttons from "../sub-components/buttons";
import { size } from "@appserver/components/utils/device";
import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
import isEqual from "lodash/isEqual";
import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
const MainContainer = styled.div`
width: 100%;
@ -30,6 +30,7 @@ const MainContainer = styled.div`
flex-direction: column;
gap: 8px;
margin-top: 18px;
margin-bottom: 24px;
}
`;
@ -216,11 +217,16 @@ const PasswordStrength = (props) => {
/>
</Box>
<Buttons
t={t}
showReminder={showReminder}
<SaveCancelButtons
className="save-cancel-buttons"
onSaveClick={onSaveClick}
onCancelClick={onCancelClick}
showReminder={showReminder}
reminderTest={t("YouHaveUnsavedChanges")}
saveButtonLabel={t("Common:SaveButton")}
cancelButtonLabel={t("Common:CancelButton")}
displaySettings={true}
hasScroll={false}
/>
</MainContainer>
);

View File

@ -8,13 +8,17 @@ import Text from "@appserver/components/text";
import Link from "@appserver/components/link";
import toastr from "@appserver/components/toast/toastr";
import { getLanguage } from "@appserver/common/utils";
import Buttons from "../sub-components/buttons";
import { LearnMoreWrapper } from "../StyledSecurity";
import { size } from "@appserver/components/utils/device";
import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
const MainContainer = styled.div`
width: 100%;
.box {
margin-bottom: 24px;
}
`;
const TwoFactorAuth = (props) => {
@ -145,11 +149,16 @@ const TwoFactorAuth = (props) => {
onClick={onSelectTfaType}
/>
<Buttons
t={t}
showReminder={showReminder}
<SaveCancelButtons
className="save-cancel-buttons"
onSaveClick={onSaveClick}
onCancelClick={onCancelClick}
showReminder={showReminder}
reminderTest={t("YouHaveUnsavedChanges")}
saveButtonLabel={t("Common:SaveButton")}
cancelButtonLabel={t("Common:CancelButton")}
displaySettings={true}
hasScroll={false}
/>
</MainContainer>
);

View File

@ -10,24 +10,20 @@ import { LearnMoreWrapper } from "../StyledSecurity";
import { getLanguage } from "@appserver/common/utils";
import toastr from "@appserver/components/toast/toastr";
import UserFields from "../sub-components/user-fields";
import Buttons from "../sub-components/buttons";
import { size } from "@appserver/components/utils/device";
import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
import isEqual from "lodash/isEqual";
import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
const MainContainer = styled.div`
width: 100%;
.user-fields {
margin-bottom: 18px;
}
.box {
margin-bottom: 11px;
}
.warning-text {
margin-bottom: 9px;
.save-cancel-buttons {
margin-top: 24px;
}
`;
@ -211,12 +207,16 @@ const TrustedMail = (props) => {
/>
)}
<Buttons
t={t}
showReminder={showReminder}
<SaveCancelButtons
className="save-cancel-buttons"
onSaveClick={onSaveClick}
onCancelClick={onCancelClick}
isLoading={isSaving}
showReminder={showReminder}
reminderTest={t("YouHaveUnsavedChanges")}
saveButtonLabel={t("Common:SaveButton")}
cancelButtonLabel={t("Common:CancelButton")}
displaySettings={true}
hasScroll={false}
/>
</MainContainer>
);

View File

@ -1,41 +0,0 @@
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, isLoading } = props;
return (
<ButtonsWrapper>
<Button
label={t("Common:SaveButton")}
size="small"
primary={true}
className="button"
onClick={onSaveClick}
isDisabled={!showReminder}
isLoading={isLoading}
/>
<Button
label={t("Common:CancelButton")}
size="small"
className="button"
onClick={onCancelClick}
isDisabled={!showReminder || isLoading}
/>
{showReminder && (
<Text
color="#A3A9AE"
fontSize="12px"
fontWeight="600"
className="reminder"
>
{t("YouHaveUnsavedChanges")}
</Text>
)}
</ButtonsWrapper>
);
};
export default Buttons;