♻️ front: introduce confirm modal (#50)

This commit is contained in:
Eric Doughty-Papassideris
2024-04-21 22:10:42 +02:00
committed by ericlinagora
parent 7bc6e36207
commit ce1180d25d
7 changed files with 150 additions and 67 deletions
@@ -12,7 +12,7 @@ import { Input } from 'app/atoms/input/input-text';
import { CheckboxSlider } from 'app/atoms/input/input-checkbox-slider';
import { Button } from 'app/atoms/button/button';
import { ShieldExclamationIcon, CalendarIcon, PencilAltIcon } from '@heroicons/react/outline';
import { Modal, ModalContent } from 'app/atoms/modal';
import { ConfirmModal } from 'app/atoms/modal/confirm';
import Styles from './styles';
@@ -153,37 +153,18 @@ export const ExpiryEditorRow = (props: {
/>
}
/>
<Modal open={isConfirmingExpiryRemoval} onClose={() => setIsConfirmingExpiryRemoval(false)}>
<ModalContent
title={Languages.t("components.public-link-security_expiration_removal_title")}
text={props.isLinkPasswordProtected
? Languages.t("components.public-link-security_expiration_removal_but_password")
: Languages.t("components.public-link-security_expiration_removal_no_password")
}
theme="danger"
icon={ShieldExclamationIcon}
buttons={
<>
<Button
className="ml-2"
theme='default'
onClick={() => setIsConfirmingExpiryRemoval(false)}
>
{Languages.t("general.cancel")}
</Button>
<Button
theme="danger"
onClick={() => {
setIsConfirmingExpiryRemoval(false)
saveValue(0);
}}
>
{Languages.t("components.public-link-security_expiration_removal_confirm")}
</Button>
</>
}
<ConfirmModal
open={isConfirmingExpiryRemoval}
onClose={() => setIsConfirmingExpiryRemoval(false)}
onOk={() => saveValue(0)}
title={Languages.t("components.public-link-security_expiration_removal_title")}
text={props.isLinkPasswordProtected
? Languages.t("components.public-link-security_expiration_removal_but_password")
: Languages.t("components.public-link-security_expiration_removal_no_password")
}
icon={ShieldExclamationIcon}
buttonOkLabel="components.public-link-security_expiration_removal_confirm"
buttonOkTheme='danger'
/>
</Modal>
</>;
}
@@ -9,7 +9,7 @@ import { Input } from 'app/atoms/input/input-text';
import { CheckboxSlider } from 'app/atoms/input/input-checkbox-slider';
import { Button } from 'app/atoms/button/button';
import { ShieldCheckIcon, PencilAltIcon, ShieldExclamationIcon } from '@heroicons/react/outline';
import { Modal, ModalContent } from 'app/atoms/modal';
import { ConfirmModal } from 'app/atoms/modal/confirm';
import Styles from './styles';
@@ -136,33 +136,17 @@ export const PasswordEditorRow = (props: {
}
/>
<Modal open={isConfirmingPasswordRemoval} onClose={() => setIsConfirmingPasswordRemoval(false)}>
<ModalContent
title={Languages.t("components.public-link-security_password_removal_title")}
text={Languages.t("components.public-link-security_password_removal_body")}
theme="danger"
icon={ShieldExclamationIcon}
buttons={
<>
<Button
className="ml-2"
theme='default'
onClick={() => setIsConfirmingPasswordRemoval(false)}
>
{Languages.t("general.cancel")}
</Button>
<Button
theme="danger"
onClick={() => {
setIsConfirmingPasswordRemoval(false)
savePassword("");
}}
>
{Languages.t("components.public-link-security_password_removal_confirm")}
</Button>
</>
}
<ConfirmModal
open={isConfirmingPasswordRemoval}
title={Languages.t("components.public-link-security_password_removal_title")}
text={Languages.t("components.public-link-security_password_removal_body")}
theme="danger"
icon={ShieldExclamationIcon}
buttonOkTheme='danger'
buttonOkLabel='components.public-link-security_password_removal_confirm'
onClose={() => setIsConfirmingPasswordRemoval(false)}
onOk={() => savePassword("")}
/>
</Modal>
</>;
}
@@ -31,10 +31,7 @@ export const AccessModal = () => {
open={state.open}
onClose={() => setState({ ...state, open: false })}
>
{!!state.id &&
<AccessModalContent
id={state.id}
/>}
{!!state.id && <AccessModalContent id={state.id} />}
</Modal>
);
};