diff --git a/app/assets/locales/en.json b/app/assets/locales/en.json
index 17898ad3b49fefff9f6e57e289a8da221a2fae3d..828668280cb3b42e94a4af5f0dec57376d50882a 100644
--- a/app/assets/locales/en.json
+++ b/app/assets/locales/en.json
@@ -24,6 +24,7 @@
"return_home": "Return Home",
"created_at": "Created at",
"no_result_search_input": "Could not find any results for \"{{ searchInput }}\"",
+ "action_permanent": "This action cannot be undone.",
"homepage": {
"welcome_bbb": "Welcome to BigBlueButton.",
"bigbluebutton_description": "BigBlueButton is an open source web conferencing system for online classes. The platform maximizes time for applied learning by enabling students to collaborate and receive feedback in real-time.",
@@ -153,7 +154,8 @@
"access_code_required": "Please enter the access code",
"wrong_access_code": "Wrong Access Code",
"generate_viewers_access_code": "Generate access code for viewers",
- "generate_mods_access_code": "Generate access code for moderators"
+ "generate_mods_access_code": "Generate access code for moderators",
+ "are_you_sure_delete_room": "Are you sure you want to delete this room?"
}
},
"recording": {
@@ -173,6 +175,7 @@
"copy_recording_urls": "Copy Recording Url(s)",
"recordings_list_empty": "You don't have any recordings yet!",
"recordings_list_empty_description": "Recordings will appear here after you start a meeting and record it.",
+ "delete_recording": "Delete Recording",
"are_you_sure_delete_recording": "Are you sure you want to delete this recording?",
"search_not_found": "No Recordings found"
},
diff --git a/app/javascript/components/admin/roles/forms/DeleteRoleForm.jsx b/app/javascript/components/admin/roles/forms/DeleteRoleForm.jsx
index 83dbd90696ba1112dfe4b5325ac44c98cb5ba136..5a7bc222dea22a8fb9f27966d8dd6907551063d4 100644
--- a/app/javascript/components/admin/roles/forms/DeleteRoleForm.jsx
+++ b/app/javascript/components/admin/roles/forms/DeleteRoleForm.jsx
@@ -5,6 +5,7 @@ import {
} from 'react-bootstrap';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
import Form from '../../../shared_components/forms/Form';
import Spinner from '../../../shared_components/utilities/Spinner';
import useDeleteRole from '../../../../hooks/mutations/admin/roles/useDeleteRole';
@@ -16,7 +17,14 @@ export default function DeleteRoleForm({ role, handleClose }) {
return (
<>
- <p className="text-center">{ t('admin.roles.are_you_sure_delete_role') }</p>
+ <Stack direction="horizontal" className="mb-3">
+ <ExclamationTriangleIcon className="text-danger hi-xl" />
+ <Stack direction="vertical" className="ps-3">
+ <h3> { t('admin.roles.delete_role') } </h3>
+ <p className="mb-0"> { t('admin.roles.are_you_sure_delete_role') } </p>
+ <p className="mt-0"><strong> { t('action_permanent') } </strong></p>
+ </Stack>
+ </Stack>
<Form methods={methods} onSubmit={deleteRoleAPI.mutate}>
<Stack direction="horizontal" gap={1} className="float-end">
<Button variant="neutral" onClick={handleClose}>
diff --git a/app/javascript/components/admin/roles/forms/EditRoleForm.jsx b/app/javascript/components/admin/roles/forms/EditRoleForm.jsx
index 627c2c385426ef98ee190bef590c028cc763895e..914569a526764fd1b8ee9f62e32702ab6a01f1c0 100644
--- a/app/javascript/components/admin/roles/forms/EditRoleForm.jsx
+++ b/app/javascript/components/admin/roles/forms/EditRoleForm.jsx
@@ -41,7 +41,6 @@ export default function EditRoleForm({ role }) {
<div>
<Modal
modalButton={<Button variant="delete" className="float-end my-4"> { t('admin.roles.delete_role') } </Button>}
- title={t('admin.roles.delete_role')}
body={<DeleteRoleForm role={role} />}
/>
</div>
diff --git a/app/javascript/components/admin/server_rooms/ServerRoomRow.jsx b/app/javascript/components/admin/server_rooms/ServerRoomRow.jsx
index b49a637f86001627509059d74e2c77363cf726d6..5ecddf3882c7bf0e23a4acfa9e776e49eea28e7a 100644
--- a/app/javascript/components/admin/server_rooms/ServerRoomRow.jsx
+++ b/app/javascript/components/admin/server_rooms/ServerRoomRow.jsx
@@ -84,7 +84,6 @@ export default function ServerRoomRow({ room }) {
</Dropdown.Item>
<Modal
modalButton={<Dropdown.Item><TrashIcon className="hi-s me-2" />{ t('delete') }</Dropdown.Item>}
- title={t('admin.server_rooms.delete_server_rooms')}
body={<DeleteRoomForm mutation={mutationWrapper} />}
/>
</Dropdown.Menu>
diff --git a/app/javascript/components/recordings/RecordingRow.jsx b/app/javascript/components/recordings/RecordingRow.jsx
index e7a9b552e2a44a201604d29ad6d04589773fee2a..2cfadf4bf492c90eade5c015917bf23a407842a9 100644
--- a/app/javascript/components/recordings/RecordingRow.jsx
+++ b/app/javascript/components/recordings/RecordingRow.jsx
@@ -111,7 +111,6 @@ export default function RecordingRow({
</Dropdown.Item>
<Modal
modalButton={<Dropdown.Item><TrashIcon className="hi-s me-2" />{ t('delete') }</Dropdown.Item>}
- title={t('are_you_sure')}
body={(
<DeleteRecordingForm
mutation={useDeleteAPI}
@@ -133,7 +132,6 @@ export default function RecordingRow({
</Button>
<Modal
modalButton={<Dropdown.Item className="btn btn-icon"><TrashIcon className="hi-s me-2" /></Dropdown.Item>}
- title={t('are_you_sure')}
body={(
<DeleteRecordingForm
mutation={useDeleteAPI}
diff --git a/app/javascript/components/recordings/forms/DeleteRecordingForm.jsx b/app/javascript/components/recordings/forms/DeleteRecordingForm.jsx
index 80e6cdb1ad9a37d8d72852ca252d4c1cfb71571b..0459a135fd9e56f2fc9e66c2eeb932284d3e3461 100644
--- a/app/javascript/components/recordings/forms/DeleteRecordingForm.jsx
+++ b/app/javascript/components/recordings/forms/DeleteRecordingForm.jsx
@@ -5,6 +5,7 @@ import {
} from 'react-bootstrap';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
import Form from '../../shared_components/forms/Form';
import Spinner from '../../shared_components/utilities/Spinner';
@@ -15,7 +16,14 @@ export default function DeleteRecordingForm({ mutation: useDeleteAPI, recordId,
return (
<>
- <p className="text-center"> { t('recording.are_you_sure_delete_recording') }</p>
+ <Stack direction="horizontal" className="mb-3">
+ <ExclamationTriangleIcon className="text-danger hi-xl" />
+ <Stack direction="vertical" className="ps-3">
+ <h3> { t('recording.delete_recording') } </h3>
+ <p className="mb-0"> { t('recording.are_you_sure_delete_recording') }</p>
+ <p className="mt-0"><strong> { t('action_permanent') } </strong></p>
+ </Stack>
+ </Stack>
<Form methods={methods} onSubmit={deleteAPI.mutate}>
<Stack direction="horizontal" gap={1} className="float-end">
<Button variant="neutral" onClick={handleClose}>
diff --git a/app/javascript/components/rooms/room/forms/DeleteRoomForm.jsx b/app/javascript/components/rooms/room/forms/DeleteRoomForm.jsx
index eb2564aa0fbfce20e0f7fb69379a92acbc740fd6..565e5987705761d5d4a82f2bcf78e31749477a59 100644
--- a/app/javascript/components/rooms/room/forms/DeleteRoomForm.jsx
+++ b/app/javascript/components/rooms/room/forms/DeleteRoomForm.jsx
@@ -5,6 +5,7 @@ import {
} from 'react-bootstrap';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
import Form from '../../../shared_components/forms/Form';
import Spinner from '../../../shared_components/utilities/Spinner';
@@ -15,7 +16,14 @@ export default function DeleteRoomForm({ mutation: useDeleteRoomAPI, handleClose
return (
<>
- <p className="text-center"> Are you sure you want to delete this room?</p>
+ <Stack direction="horizontal" className="mb-3">
+ <ExclamationTriangleIcon className="text-danger hi-xl" />
+ <Stack direction="vertical" className="ps-3">
+ <h3> { t('room.delete_room') } </h3>
+ <p className="mb-0"> { t('room.settings.are_you_sure_delete_room') } </p>
+ <p className="mt-0"><strong> { t('action_permanent') } </strong></p>
+ </Stack>
+ </Stack>
<Form methods={methods} onSubmit={deleteRoomAPI.mutate}>
<Stack direction="horizontal" gap={1} className="float-end">
<Button variant="neutral" onClick={handleClose}>
diff --git a/app/javascript/components/rooms/room/presentation/Presentation.jsx b/app/javascript/components/rooms/room/presentation/Presentation.jsx
index 0a52b0ead609089ebeeb5ea0464a9c08492fb6d5..955ddabf6542f423189ac897c9da219f75f0aa6f 100644
--- a/app/javascript/components/rooms/room/presentation/Presentation.jsx
+++ b/app/javascript/components/rooms/room/presentation/Presentation.jsx
@@ -78,7 +78,6 @@ export default function Presentation() {
<Col>
<Modal
modalButton={<TrashIcon className="cursor-pointer hi-s" />}
- title={t('are_you_sure')}
body={<DeletePresentationForm />}
/>
</Col>
diff --git a/app/javascript/components/rooms/room/presentation/forms/DeletePresentationForm.jsx b/app/javascript/components/rooms/room/presentation/forms/DeletePresentationForm.jsx
index 1a8559b244cd278f5ed573007fd29f321ac27ed0..34429688b6a64a2952ce51feede6e7f2250572d8 100644
--- a/app/javascript/components/rooms/room/presentation/forms/DeletePresentationForm.jsx
+++ b/app/javascript/components/rooms/room/presentation/forms/DeletePresentationForm.jsx
@@ -6,6 +6,7 @@ import {
import { useParams } from 'react-router-dom';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
import Form from '../../../../shared_components/forms/Form';
import Spinner from '../../../../shared_components/utilities/Spinner';
import useDeletePresentation from '../../../../../hooks/mutations/rooms/useDeletePresentation';
@@ -17,7 +18,14 @@ export default function DeletePresentationForm({ handleClose }) {
const deletePresentation = useDeletePresentation(friendlyId);
return (
<>
- <p className="text-center"> { t('room.presentation.are_you_sure_delete_presentation') }</p>
+ <Stack direction="horizontal" className="mb-3">
+ <ExclamationTriangleIcon className="text-danger hi-xl" />
+ <Stack direction="vertical" className="ps-3">
+ <h3> { t('recording.delete_recording') } </h3>
+ <p className="mb-0"> { t('room.presentation.are_you_sure_delete_presentation') } </p>
+ <p className="mt-0"><strong> { t('action_permanent') } </strong></p>
+ </Stack>
+ </Stack>
<Form methods={methods} onSubmit={deletePresentation.mutate}>
<Stack direction="horizontal" gap={1} className="float-end">
<Button variant="neutral" onClick={handleClose}>
diff --git a/app/javascript/components/rooms/room/room_settings/RoomSettings.jsx b/app/javascript/components/rooms/room/room_settings/RoomSettings.jsx
index 8d2896ef535bcfe2abd0b16ad30d459e5aed2e43..f4bf1228581bcfbf80f2a9f610de48b23ea91fcf 100644
--- a/app/javascript/components/rooms/room/room_settings/RoomSettings.jsx
+++ b/app/javascript/components/rooms/room/room_settings/RoomSettings.jsx
@@ -103,8 +103,7 @@ export default function RoomSettings() {
className="mt-1 mx-2 float-end"
>{t('room.delete_room')}
</Button>
-)}
- title={t('room.delete_room')}
+ )}
body={<DeleteRoomForm mutation={deleteMutationWrapper} />}
/>
)}
diff --git a/app/javascript/components/shared_components/modals/Modal.jsx b/app/javascript/components/shared_components/modals/Modal.jsx
index 1ff769b9ae0c8fe138e1815a676ee98f1dedce9d..d5f783048bb3919fee9698a5e86e7d682d470c24 100644
--- a/app/javascript/components/shared_components/modals/Modal.jsx
+++ b/app/javascript/components/shared_components/modals/Modal.jsx
@@ -17,7 +17,7 @@ export default function Modal({
<>
{ModalButton}
<BootstrapModal show={show} onHide={handleClose} centered size={size} id={id} contentClassName="border-0 shadow-sm">
- <BootstrapModal.Header className="d-block mx-auto border-0 pb-0">
+ <BootstrapModal.Header className="border-0 pb-0">
<BootstrapModal.Title>{title}</BootstrapModal.Title>
</BootstrapModal.Header>
<BootstrapModal.Body>{Body}</BootstrapModal.Body>
@@ -27,7 +27,7 @@ export default function Modal({
}
Modal.propTypes = {
- title: PropTypes.string.isRequired,
+ title: PropTypes.string,
modalButton: PropTypes.element.isRequired,
body: PropTypes.node.isRequired,
size: PropTypes.string,
@@ -37,4 +37,5 @@ Modal.propTypes = {
Modal.defaultProps = {
id: '',
size: '',
+ title: '',
};
diff --git a/app/javascript/components/users/user/DeleteAccount.jsx b/app/javascript/components/users/user/DeleteAccount.jsx
index 667f6914a963a1dad906ffcec13ffa67dfc6ff60..7190a14d8783edc952e4ab16d4e3deec98ac8ec4 100644
--- a/app/javascript/components/users/user/DeleteAccount.jsx
+++ b/app/javascript/components/users/user/DeleteAccount.jsx
@@ -15,7 +15,6 @@ export default function DeleteAccount() {
</p>
<Modal
modalButton={<Button variant="delete">{ t('user.account.delete_account_confirmation') }</Button>}
- title={t('are_you_sure')}
body={<DeleteUserForm />}
/>
</div>
diff --git a/app/javascript/components/users/user/forms/DeleteUserForm.jsx b/app/javascript/components/users/user/forms/DeleteUserForm.jsx
index 773edbec5e6e979eec27b0fb2015354af17d6eeb..6daa6583921e6666819cbc78d0c6a396ff21b7f4 100644
--- a/app/javascript/components/users/user/forms/DeleteUserForm.jsx
+++ b/app/javascript/components/users/user/forms/DeleteUserForm.jsx
@@ -5,6 +5,7 @@ import {
} from 'react-bootstrap';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
import Form from '../../../shared_components/forms/Form';
import useDeleteUser from '../../../../hooks/mutations/users/useDeleteUser';
import { useAuth } from '../../../../contexts/auth/AuthProvider';
@@ -18,7 +19,14 @@ export default function DeleteUserForm({ handleClose }) {
return (
<>
- <p className="text-center"> { t('user.account.are_you_sure_delete_account') }</p>
+ <Stack direction="horizontal" className="mb-3">
+ <ExclamationTriangleIcon className="text-danger hi-xl" />
+ <Stack direction="vertical" className="ps-3">
+ <h3> { t('user.account.delete_account') } </h3>
+ <p className="mb-0"> { t('user.account.are_you_sure_delete_account') } </p>
+ <p className="mt-0"><strong> { t('action_permanent') } </strong></p>
+ </Stack>
+ </Stack>
<Form methods={methods} onSubmit={deleteUserAPI.mutate}>
<Stack direction="horizontal" gap={1} className="float-end">
<Button variant="neutral" onClick={handleClose}> { t('close') } </Button>