From 826f34f821b69886eb5f47996b917047abe78556 Mon Sep 17 00:00:00 2001
From: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Date: Mon, 9 May 2022 09:26:52 +0200
Subject: [PATCH] Show confirmation modal before deleting keys (#2028)

Show confirmation modal before deleting public keys and api keys.
---
 gradle/changelog/confirm_key_deletion.yaml    |  2 ++
 scm-ui/ui-webapp/public/locales/de/users.json | 14 ++++++++-
 scm-ui/ui-webapp/public/locales/en/users.json | 14 ++++++++-
 .../users/components/apiKeys/ApiKeyEntry.tsx  | 29 +++++++++++++++++--
 .../components/publicKeys/PublicKeyEntry.tsx  | 29 +++++++++++++++++--
 5 files changed, 80 insertions(+), 8 deletions(-)
 create mode 100644 gradle/changelog/confirm_key_deletion.yaml

diff --git a/gradle/changelog/confirm_key_deletion.yaml b/gradle/changelog/confirm_key_deletion.yaml
new file mode 100644
index 0000000000..ad76b41000
--- /dev/null
+++ b/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))
diff --git a/scm-ui/ui-webapp/public/locales/de/users.json b/scm-ui/ui-webapp/public/locales/de/users.json
index cb4ef2b035..388e0cd752 100644
--- a/scm-ui/ui-webapp/public/locales/de/users.json
+++ b/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"
     }
   }
 }
diff --git a/scm-ui/ui-webapp/public/locales/en/users.json b/scm-ui/ui-webapp/public/locales/en/users.json
index f285e7117a..903153a0ec 100644
--- a/scm-ui/ui-webapp/public/locales/en/users.json
+++ b/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"
     }
   }
 }
diff --git a/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyEntry.tsx b/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyEntry.tsx
index e51c1ce285..d62ddf7dab 100644
--- a/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyEntry.tsx
+++ b/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}
     </>
   );
 };
diff --git a/scm-ui/ui-webapp/src/users/components/publicKeys/PublicKeyEntry.tsx b/scm-ui/ui-webapp/src/users/components/publicKeys/PublicKeyEntry.tsx
index 89bc337e15..d80be69181 100644
--- a/scm-ui/ui-webapp/src/users/components/publicKeys/PublicKeyEntry.tsx
+++ b/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}
     </>
   );
 };