Replace confirm and prompt with custom dialogs (#500)

src/app/organisms/profile-editor/ProfileEditor.jsx

@@ -12,6 +12,7 @@ import ImageUpload from '../../molecules/image-upload/ImageUpload';
 import Input from '../../atoms/input/Input';
 
 import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
+import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
 
 import './ProfileEditor.scss';
 
@@ -38,9 +39,15 @@ function ProfileEditor({ userId }) {
     };
   }, [userId]);
 
-  const handleAvatarUpload = (url) => {
+  const handleAvatarUpload = async (url) => {
     if (url === null) {
-      if (confirm('Are you sure that you want to remove avatar?')) {
+      const isConfirmed = await confirmDialog(
+        'Remove avatar',
+        'Are you sure that you want to remove avatar?',
+        'Remove',
+        'caution',
+      );
+      if (isConfirmed) {
         mx.setAvatarUrl('');
         setAvatarSrc(null);
       }

src/app/organisms/profile-viewer/ProfileViewer.jsx

@@ -32,6 +32,7 @@ import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.s
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
 import { useForceUpdate } from '../../hooks/useForceUpdate';
+import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
 
 function ModerationTools({
   roomId, userId,
@@ -362,7 +363,7 @@ function ProfileViewer() {
       && (powerLevel < myPowerLevel || userId === mx.getUserId())
     );
 
-    const handleChangePowerLevel = (newPowerLevel) => {
+    const handleChangePowerLevel = async (newPowerLevel) => {
       if (newPowerLevel === powerLevel) return;
       const SHARED_POWER_MSG = 'You will not be able to undo this change as you are promoting the user to have the same power level as yourself. Are you sure?';
       const DEMOTING_MYSELF_MSG = 'You will not be able to undo this change as you are demoting yourself. Are you sure?';
@@ -370,9 +371,14 @@ function ProfileViewer() {
       const isSharedPower = newPowerLevel === myPowerLevel;
       const isDemotingMyself = userId === mx.getUserId();
       if (isSharedPower || isDemotingMyself) {
-        if (confirm(isSharedPower ? SHARED_POWER_MSG : DEMOTING_MYSELF_MSG)) {
-          roomActions.setPowerLevel(roomId, userId, newPowerLevel);
-        }
+        const isConfirmed = await confirmDialog(
+          'Change power level',
+          isSharedPower ? SHARED_POWER_MSG : DEMOTING_MYSELF_MSG,
+          'Change',
+          'caution',
+        );
+        if (!isConfirmed) return;
+        roomActions.setPowerLevel(roomId, userId, newPowerLevel);
       } else {
         roomActions.setPowerLevel(roomId, userId, newPowerLevel);
       }

src/app/organisms/room/RoomSettings.jsx

@@ -36,6 +36,7 @@ import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
 import ChevronTopIC from '../../../../public/res/ic/outlined/chevron-top.svg';
 
 import { useForceUpdate } from '../../hooks/useForceUpdate';
+import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
 
 const tabText = {
   GENERAL: 'General',
@@ -85,10 +86,15 @@ function GeneralSettings({ roomId }) {
         </MenuItem>
         <MenuItem
           variant="danger"
-          onClick={() => {
-            if (confirm('Are you sure that you want to leave this room?')) {
-              roomActions.leave(roomId);
-            }
+          onClick={async () => {
+            const isConfirmed = await confirmDialog(
+              'Leave room',
+              `Are you sure that you want to leave "${room.name}" room?`,
+              'Leave',
+              'danger',
+            );
+            if (!isConfirmed) return;
+            roomActions.leave(roomId);
           }}
           iconSrc={LeaveArrowIC}
         >

src/app/organisms/settings/DeviceManage.jsx

@@ -4,10 +4,12 @@ import dateFormat from 'dateformat';
 
 import initMatrix from '../../../client/initMatrix';
 import { isCrossVerified } from '../../../util/matrixUtil';
+import { openReusableDialog } from '../../../client/action/navigation';
 
 import Text from '../../atoms/text/Text';
 import Button from '../../atoms/button/Button';
 import IconButton from '../../atoms/button/IconButton';
+import Input from '../../atoms/input/Input';
 import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
 import InfoCard from '../../atoms/card/InfoCard';
 import Spinner from '../../atoms/spinner/Spinner';
@@ -18,11 +20,46 @@ import BinIC from '../../../../public/res/ic/outlined/bin.svg';
 import InfoIC from '../../../../public/res/ic/outlined/info.svg';
 
 import { authRequest } from './AuthRequest';
+import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
 
 import { useStore } from '../../hooks/useStore';
 import { useDeviceList } from '../../hooks/useDeviceList';
 import { useCrossSigningStatus } from '../../hooks/useCrossSigningStatus';
 
+const promptDeviceName = async (deviceName) => new Promise((resolve) => {
+  let isCompleted = false;
+
+  const renderContent = (onComplete) => {
+    const handleSubmit = (e) => {
+      e.preventDefault();
+      const name = e.target.session.value;
+      if (typeof name !== 'string') onComplete(null);
+      onComplete(name);
+    };
+    return (
+      <form className="device-manage__rename" onSubmit={handleSubmit}>
+        <Input value={deviceName} label="Session name" name="session" />
+        <div className="device-manage__rename-btn">
+          <Button variant="primary" type="submit">Save</Button>
+          <Button onClick={() => onComplete(null)}>Cancel</Button>
+        </div>
+      </form>
+    );
+  };
+
+  openReusableDialog(
+    <Text variant="s1" weight="medium">Edit session name</Text>,
+    (requestClose) => renderContent((name) => {
+      isCompleted = true;
+      resolve(name);
+      requestClose();
+    }),
+    () => {
+      if (!isCompleted) resolve(null);
+    },
+  );
+});
+
 function DeviceManage() {
   const TRUNCATED_COUNT = 4;
   const mx = initMatrix.matrixClient;
@@ -59,7 +96,7 @@ function DeviceManage() {
   }
 
   const handleRename = async (device) => {
-    const newName = window.prompt('Edit session name', device.display_name);
+    const newName = await promptDeviceName(device.display_name);
     if (newName === null || newName.trim() === '') return;
     if (newName.trim() === device.display_name) return;
     addToProcessing(device);
@@ -74,15 +111,20 @@ function DeviceManage() {
   };
 
   const handleRemove = async (device) => {
-    if (window.confirm(`You are about to logout "${device.display_name}" session.`)) {
-      addToProcessing(device);
-      await authRequest(`Logout "${device.display_name}"`, async (auth) => {
-        await mx.deleteDevice(device.device_id, auth);
-      });
+    const isConfirmed = await confirmDialog(
+      `Logout ${device.display_name}`,
+      `You are about to logout "${device.display_name}" session.`,
+      'Logout',
+      'danger',
+    );
+    if (!isConfirmed) return;
+    addToProcessing(device);
+    await authRequest(`Logout "${device.display_name}"`, async (auth) => {
+      await mx.deleteDevice(device.device_id, auth);
+    });
 
-      if (!mountStore.getItem()) return;
-      removeFromProcessing(device);
-    }
+    if (!mountStore.getItem()) return;
+    removeFromProcessing(device);
   };
 
   const renderDevice = (device, isVerified) => {

src/app/organisms/settings/DeviceManage.scss

@@ -15,4 +15,15 @@
   & .setting-tile:last-of-type {
      border-bottom: none;
   }
+
+  &__rename {
+    padding: var(--sp-normal);
+    & > *:not(:last-child) {
+      margin-bottom: var(--sp-normal);
+    }
+    &-btn {
+      display: flex;
+      gap: var(--sp-normal);
+    }
+  }
 }

src/app/organisms/settings/Settings.jsx

@@ -38,6 +38,7 @@ import PowerIC from '../../../../public/res/ic/outlined/power.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
 import CinnySVG from '../../../../public/res/svg/cinny.svg';
+import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
 
 function AppearanceSection() {
   const [, updateState] = useState({});
@@ -297,8 +298,10 @@ function Settings() {
   const [isOpen, requestClose] = useWindowToggle(setSelectedTab);
 
   const handleTabChange = (tabItem) => setSelectedTab(tabItem);
-  const handleLogout = () => {
-    if (confirm('Confirm logout')) logout();
+  const handleLogout = async () => {
+    if (await confirmDialog('Logout', 'Are you sure that you want to logout your session?', 'Logout', 'danger')) {
+      logout();
+    }
   };
 
   return (

src/app/organisms/space-settings/SpaceSettings.jsx

@@ -36,6 +36,7 @@ import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
 import CategoryIC from '../../../../public/res/ic/outlined/category.svg';
 import CategoryFilledIC from '../../../../public/res/ic/filled/category.svg';
 
+import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
 import { useForceUpdate } from '../../hooks/useForceUpdate';
 
 const tabText = {
@@ -61,6 +62,7 @@ const tabItems = [{
 function GeneralSettings({ roomId }) {
   const isPinned = initMatrix.accountData.spaceShortcut.has(roomId);
   const isCategorized = initMatrix.accountData.categorizedSpaces.has(roomId);
+  const roomName = initMatrix.matrixClient.getRoom(roomId)?.name;
   const [, forceUpdate] = useForceUpdate();
 
   return (
@@ -89,10 +91,14 @@ function GeneralSettings({ roomId }) {
         </MenuItem>
         <MenuItem
           variant="danger"
-          onClick={() => {
-            if (confirm('Are you sure that you want to leave this space?')) {
-              leave(roomId);
-            }
+          onClick={async () => {
+            const isConfirmed = await confirmDialog(
+              'Leave space',
+              `Are you sure that you want to leave "${roomName}" space?`,
+              'Leave',
+              'danger',
+            );
+            if (isConfirmed) leave(roomId);
           }}
           iconSrc={LeaveArrowIC}
         >