Show confirmation modal before deleting keys (#2028)

Show confirmation modal before deleting public keys and api keys.

gradle/changelog/confirm_key_deletion.yaml

@@ -0,0 +1,2 @@
+- type: fixed
+  description: Show confirmation modal before deleting key ([#2028](https://github.com/scm-manager/scm-manager/pull/2028))

scm-ui/ui-webapp/public/locales/de/users.json

@@ -89,7 +89,13 @@
     "download": "Herunterladen",
     "delete": "Löschen",
     "addSubtitle": "Neuen Schlüssel hinzufügen",
-    "addKey": "Schlüssel hinzufügen"
+    "addKey": "Schlüssel hinzufügen",
+    "deleteConfirmAlert": {
+      "title": "Öffentlicher Schlüssel",
+      "message": "Soll der öffentliche Schlüssel wirklich gelöscht werden?",
+      "submit": "Ja",
+      "cancel": "Nein"
+    }
   },
   "apiKey": {
     "subtitle": "API Schlüssel",
@@ -114,6 +120,12 @@
       "alt": "Api Key",
       "clipboard": "In die Zwischenablage kopieren",
       "close": "Schließen"
+    },
+    "deleteConfirmAlert": {
+      "title": "API Schlüssel",
+      "message": "Soll der API Schlüssel wirklich gelöscht werden?",
+      "submit": "Ja",
+      "cancel": "Nein"
     }
   }
 }

scm-ui/ui-webapp/public/locales/en/users.json

@@ -89,7 +89,13 @@
     "download": "Download",
     "delete": "Delete",
     "addSubtitle": "Add New Key",
-    "addKey": "Add Key"
+    "addKey": "Add Key",
+    "deleteConfirmAlert": {
+      "title": "Public Key",
+      "message": "Do you really want to delete this public key?",
+      "submit": "Yes",
+      "cancel": "No"
+    }
   },
   "apiKey": {
     "subtitle": "API Keys",
@@ -114,6 +120,12 @@
       "alt": "Api Key",
       "clipboard": "Copy to clipboard",
       "close": "Close"
+    },
+    "deleteConfirmAlert": {
+      "title": "API Key",
+      "message": "Do you really want to delete this API key?",
+      "submit": "Yes",
+      "cancel": "No"
     }
   }
 }

scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyEntry.tsx

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import React, { FC } from "react";
-import { Button, DateFromNow } from "@scm-manager/ui-components";
+import React, { FC, useState } from "react";
+import { ConfirmAlert, Button, DateFromNow } from "@scm-manager/ui-components";
 import { ApiKey } from "@scm-manager/ui-types";
 import { useTranslation } from "react-i18next";
 import { DeleteFunction } from "@scm-manager/ui-api";
@@ -35,10 +35,11 @@ type Props = {
 
 export const ApiKeyEntry: FC<Props> = ({ apiKey, onDelete }) => {
   const [t] = useTranslation("users");
+  const [showModal, setShowModal] = useState(false);
   let deleteButton;
   if (apiKey?._links?.delete) {
     deleteButton = (
-      <Button color="text" icon="trash" action={() => onDelete(apiKey)} title={t("apiKey.delete")} className="px-2" />
+      <Button color="text" icon="trash" action={() => setShowModal(true)} title={t("apiKey.delete")} className="px-2" />
     );
   }
 
@@ -52,6 +53,28 @@ export const ApiKeyEntry: FC<Props> = ({ apiKey, onDelete }) => {
         </td>
         <td className="is-vertical-align-middle has-text-centered">{deleteButton}</td>
       </tr>
+      {showModal ? (
+        <ConfirmAlert
+          title={t("apiKey.deleteConfirmAlert.title")}
+          message={t("apiKey.deleteConfirmAlert.message")}
+          buttons={[
+            {
+              className: "is-outlined",
+              label: t("apiKey.deleteConfirmAlert.submit"),
+              onClick: () => {
+                onDelete(apiKey);
+                setShowModal(false);
+              },
+            },
+            {
+              label: t("apiKey.deleteConfirmAlert.cancel"),
+              onClick: () => setShowModal(false),
+              autofocus: true,
+            },
+          ]}
+          close={() => setShowModal(false)}
+        />
+      ) : null}
     </>
   );
 };

scm-ui/ui-webapp/src/users/components/publicKeys/PublicKeyEntry.tsx

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import React, { FC } from "react";
-import { Button, DateFromNow } from "@scm-manager/ui-components";
+import { Button, ConfirmAlert, DateFromNow } from "@scm-manager/ui-components";
+import React, { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, PublicKey } from "@scm-manager/ui-types";
 import { DeleteFunction } from "@scm-manager/ui-api";
@@ -35,6 +35,7 @@ type Props = {
 
 export const PublicKeyEntry: FC<Props> = ({ publicKey, onDelete }) => {
   const [t] = useTranslation("users");
+  const [showModal, setShowModal] = useState(false);
 
   let deleteButton;
   if (publicKey?._links?.delete) {
@@ -42,7 +43,7 @@ export const PublicKeyEntry: FC<Props> = ({ publicKey, onDelete }) => {
       <Button
         color="text"
         icon="trash"
-        action={() => onDelete(publicKey)}
+        action={() => setShowModal(true)}
         title={t("publicKey.delete")}
         className="px-2"
       />
@@ -67,6 +68,28 @@ export const PublicKeyEntry: FC<Props> = ({ publicKey, onDelete }) => {
         </td>
         <td className="is-vertical-align-middle has-text-centered">{deleteButton}</td>
       </tr>
+      {showModal ? (
+        <ConfirmAlert
+          title={t("publicKey.deleteConfirmAlert.title")}
+          message={t("publicKey.deleteConfirmAlert.message")}
+          buttons={[
+            {
+              className: "is-outlined",
+              label: t("publicKey.deleteConfirmAlert.submit"),
+              onClick: () => {
+                onDelete(publicKey);
+                setShowModal(false);
+              },
+            },
+            {
+              label: t("publicKey.deleteConfirmAlert.cancel"),
+              onClick: () => setShowModal(false),
+              autofocus: true,
+            },
+          ]}
+          close={() => setShowModal(false)}
+        />
+      ) : null}
     </>
   );
 };