From b400592d03a000d5d3b0c030141e5ad33a64a530 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Fri, 8 Mar 2024 13:49:02 -0800
Subject: [PATCH] confirm contact disconnect or delete

---
 net/web/src/constants/Strings.js        | 36 ++++++++++++++++++--
 net/web/src/session/contact/Contact.jsx | 44 +++++++++++++++++++++----
 2 files changed, 70 insertions(+), 10 deletions(-)

diff --git a/net/web/src/constants/Strings.js b/net/web/src/constants/Strings.js
index 83657b97..36a0c025 100644
--- a/net/web/src/constants/Strings.js
+++ b/net/web/src/constants/Strings.js
@@ -179,6 +179,11 @@ export const en = {
   camera: 'Camera',
 
   notes: 'Notes',
+
+  disconnecting: 'Disconnecting Contact',
+  confirmDisconnect: 'Are you sure you want to disconnect the contact?',
+  removing: 'Deleting Contact',
+  confirmRemove: 'Are you sure you want to delete the contact?',
 };
 
 export const fr = {
@@ -362,6 +367,11 @@ export const fr = {
   camera: 'Caméra',
 
   notes: 'Notes',
+
+  disconnecting: 'Déconnexion du contact',
+  confirmDisconnect: 'Êtes-vous sûr de vouloir déconnecter le contact?',
+  removing: 'Suppression du contact',
+  confirmRemove: 'Êtes-vous sûr de vouloir supprimer le contact?',
 };
 
 export const sp = {
@@ -545,6 +555,11 @@ export const sp = {
   camera: 'Cámara',
 
   notes: 'Notas',
+
+  disconnecting: 'Desconexión de contacto',
+  confirmDisconnect: '¿Estás seguro de que quieres desconectar el contacto?',
+  removing: 'Eliminando contacto',
+  confirmRemove: '¿Estás seguro de que quieres eliminar el contacto?',
 }
 
 export const pt = {
@@ -727,7 +742,12 @@ export const pt = {
   microphone: 'Microfone',
   camera: 'Câmera',
 
-  notes: 'Notas'
+  notes: 'Notas',
+
+  disconnecting: 'Desconectando Contato',
+  confirmDisconnect: 'Tem certeza de que deseja desconectar o contato?',
+  removing: 'Removendo Contato',
+  confirmRemove: 'Tem certeza de que deseja remover o contato?',
 }
 
 export const de = {
@@ -910,7 +930,12 @@ export const de = {
   microphone: 'Mikrofon',
   camera: 'Kamera',
 
-  notes: 'Notizen'
+  notes: 'Notizen',
+
+  disconnecting: 'Kontakt wird getrennt',
+  confirmDisconnect: 'Sind Sie sicher, dass Sie den Kontakt trennen möchten?',
+  removing: 'Kontakt wird gelöscht',
+  confirmRemove: 'Sind Sie sicher, dass Sie den Kontakt löschen möchten?',
 }
 
 export const ru = {
@@ -1093,5 +1118,10 @@ export const ru = {
   microphone: 'Микрофон',
   camera: 'Камера',
 
-  notes: 'Заметки'
+  notes: 'Заметки',
+
+  disconnecting: 'Отключение контакта',
+  confirmDisconnect: 'Вы уверены, что хотите отключить контакт?',
+  removing: 'Удаление контакта',
+  confirmRemove: 'Вы уверены, что хотите удалить контакт?',
 }
diff --git a/net/web/src/session/contact/Contact.jsx b/net/web/src/session/contact/Contact.jsx
index 7621c8e6..74ccf717 100644
--- a/net/web/src/session/contact/Contact.jsx
+++ b/net/web/src/session/contact/Contact.jsx
@@ -23,6 +23,36 @@ export function Contact({ close, guid, listing }) {
     }
   }
 
+  const disconnect = (action) => {
+    modal.confirm({
+      title: <span style={state.menuStyle}>{state.strings.disconnecting}</span>,
+      icon: <UserDeleteOutlined />,
+      content: <span style={state.menuStyle}>{state.strings.confirmDisconnect}</span>,
+      bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
+      okText: state.strings.disconnect,
+      onOk() {
+        updateContact(action);
+      },
+      cancelText: state.strings.cancel,
+      onCancel() {},
+    });
+  }
+
+  const remove = (action) => {
+    modal.confirm({
+      title: <span style={state.menuStyle}>{state.strings.removing}</span>,
+      icon: <UserDeleteOutlined />,
+      content: <span style={state.menuStyle}>{state.strings.confirmRemove}</span>,
+      bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
+      okText: state.strings.remove,
+      onOk() {
+        updateContact(action);
+      },
+      cancelText: state.strings.cancel,
+      onCancel() {},
+    });
+  }
+
   return (
     <ContactWrapper>
       { modalContext }
@@ -86,12 +116,12 @@ export function Contact({ close, guid, listing }) {
           <div className="controls">
             { state.status === 'connected' && (
               <Tooltip placement="top" title={state.strings.disconnectContact}>
-                <Button className="button" type="primary" loading={state.busy} icon={<UserDeleteOutlined />} size="medium"  onClick={() => updateContact(actions.disconnect)}>{ state.strings.disconnect }</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<UserDeleteOutlined />} size="medium"  onClick={() => disconnect(actions.disconnect)}>{ state.strings.disconnect }</Button>
               </Tooltip>
             )}
             { state.status === 'connected' && (
               <Tooltip placement="top" title={state.strings.deleteContact}>
-                <Button className="button" type="primary" loading={state.busy} icon={<DeleteOutlined />} size="medium"  onClick={() => updateContact(actions.disconnectRemove)}>{ state.strings.remove }</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<DeleteOutlined />} size="medium"  onClick={() => remove(actions.disconnectRemove)}>{ state.strings.remove }</Button>
               </Tooltip>
             )}
             { state.status === 'pending' && (
@@ -106,7 +136,7 @@ export function Contact({ close, guid, listing }) {
             )}
             { state.status === 'pending' && (
               <Tooltip placement="top" title={state.strings.ignoreRequest}>
-                <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => updateContact(actions.remove)}>{ state.strings.cancel }</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => remove(actions.remove)}>{ state.strings.cancel }</Button>
               </Tooltip>
             )}
             { state.status === 'requested' && (
@@ -116,17 +146,17 @@ export function Contact({ close, guid, listing }) {
             )}
             { state.status === 'requested' && (
               <Tooltip placement="top" title={state.strings.ignoreRequest}>
-                <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => updateContact(actions.disconnect)}>{ state.strings.cancel }</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => disconnect(actions.disconnect)}>{ state.strings.cancel }</Button>
               </Tooltip>
             )}
             { state.status === 'connecting' && (
               <Tooltip placement="top" title={state.strings.cancelRequest}>
-                <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => updateContact(actions.disconnect)}>{ state.strings.cancel }</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => disconnect(actions.disconnect)}>{ state.strings.cancel }</Button>
               </Tooltip>
             )}
             { state.status === 'connecting' && (
               <Tooltip placement="top" title={state.strings.deleteContact}>
-                <Button className="button" type="primary" loading={state.busy} icon={<DeleteOutlined />} size="medium"  onClick={() => updateContact(actions.disconnectRemove)}>{ state.strings.remove }</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<DeleteOutlined />} size="medium"  onClick={() => remove(actions.disconnectRemove)}>{ state.strings.remove }</Button>
               </Tooltip>
             )}
             { state.status === 'confirmed' && (
@@ -136,7 +166,7 @@ export function Contact({ close, guid, listing }) {
             )}
             { state.status === 'confirmed' && (
               <Tooltip placement="top" title={state.strings.deleteContact}>
-                <Button className="button" type="primary" loading={state.busy} icon={<DeleteOutlined />} size="medium"  onClick={() => updateContact(actions.remove)}>{ state.strings.remove }</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<DeleteOutlined />} size="medium"  onClick={() => remove(actions.remove)}>{ state.strings.remove }</Button>
               </Tooltip>
             )}
             { state.status === 'unsaved' && (