From 2c582c4fdeee47744ccd9c68868e524aa0dd083d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Pfeuffer?= <rene.pfeuffer@cloudogu.com>
Date: Fri, 2 Oct 2020 10:09:07 +0200
Subject: [PATCH] Show dialog after adding new key

---
 scm-ui/ui-webapp/public/locales/de/users.json |  8 ++++-
 scm-ui/ui-webapp/public/locales/en/users.json |  8 ++++-
 .../users/components/apiKeys/AddApiKey.tsx    | 33 +++++++++++++++++--
 3 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/scm-ui/ui-webapp/public/locales/de/users.json b/scm-ui/ui-webapp/public/locales/de/users.json
index 101ea3371d..a71757f29e 100644
--- a/scm-ui/ui-webapp/public/locales/de/users.json
+++ b/scm-ui/ui-webapp/public/locales/de/users.json
@@ -82,6 +82,12 @@
     "created": "Eingetragen an",
     "addKey": "Schlüssel hinzufügen",
     "delete": "Löschen",
-    "download": "Herunterladen"
+    "download": "Herunterladen",
+    "modal": {
+      "title": "Schlüssel erzeugt",
+      "text1": "Hier ist der neue Schlüssel. Er kann als \"Bearer Token\" für REST Zugriffe oder als Passwort für SCM Clients genutzt werden. Sie erhalten Ihre Zugriffsrechte, eingeschränkt auf Repositories und die gewählte Rolle.",
+      "text2": "Dieses ist der einzige Zeitpunkt, an dem der Schlüssel angezeigt wird. Er kann im Nachhinein nicht mehr hergestellt werden. Bewahren Sie ihn an einem sicheren Ort auf.",
+      "close": "Schließen"
+    }
   }
 }
diff --git a/scm-ui/ui-webapp/public/locales/en/users.json b/scm-ui/ui-webapp/public/locales/en/users.json
index f3756ab46f..7a93c324f3 100644
--- a/scm-ui/ui-webapp/public/locales/en/users.json
+++ b/scm-ui/ui-webapp/public/locales/en/users.json
@@ -82,6 +82,12 @@
     "created": "Created on",
     "addKey": "Add key",
     "delete": "Delete",
-    "download": "Download"
+    "download": "Download",
+    "modal": {
+      "title": "Key created",
+      "text1": "Here is your new key. You can use it as a bearer token for rest calls or as a password for scm clients. Doing so you will have your permissions limited to repositories and the selected role.",
+      "text2": "This is the only time it will be shown, it cannot be recovered afterwards. Keep it in a safe place.",
+      "close": "Close"
+    }
   }
 }
diff --git a/scm-ui/ui-webapp/src/users/components/apiKeys/AddApiKey.tsx b/scm-ui/ui-webapp/src/users/components/apiKeys/AddApiKey.tsx
index 8b69a8daf6..8ac9f31039 100644
--- a/scm-ui/ui-webapp/src/users/components/apiKeys/AddApiKey.tsx
+++ b/scm-ui/ui-webapp/src/users/components/apiKeys/AddApiKey.tsx
@@ -34,6 +34,7 @@ import {
 import { RepositoryRole } from "@scm-manager/ui-types";
 import { getRepositoryRolesLink, getRepositoryVerbsLink } from "../../../modules/indexResource";
 import RoleSelector from "../../../repos/permissions/components/RoleSelector";
+import { Button, Modal } from "@scm-manager/ui-components";
 
 type Props = {
   createLink: string;
@@ -57,6 +58,7 @@ const AddApiKey: FC<Props> = ({
   const [error, setError] = useState<undefined | Error>();
   const [displayName, setDisplayName] = useState("");
   const [permissionRole, setPermissionRole] = useState("");
+  const [addedPassphrase, setAddedPassphrase] = useState("");
 
   useEffect(() => {
     if (!availableRepositoryRoles) {
@@ -77,8 +79,8 @@ const AddApiKey: FC<Props> = ({
     setLoading(true);
     apiClient
       .post(createLink, { displayName: displayName, permissionRole: permissionRole }, CONTENT_TYPE_API_KEY)
-      .then(resetForm)
-      .then(refresh)
+      .then(response => response.text())
+      .then(setAddedPassphrase)
       .then(() => setLoading(false))
       .catch(setError);
   };
@@ -91,10 +93,35 @@ const AddApiKey: FC<Props> = ({
     return <Loading />;
   }
 
-  const availableRoleNames = availableRepositoryRoles? availableRepositoryRoles.map(r => r.name): [];
+  const availableRoleNames = availableRepositoryRoles ? availableRepositoryRoles.map(r => r.name) : [];
+
+  const closeModal = () => {
+    resetForm();
+    refresh();
+    setAddedPassphrase("");
+  };
+
+  const newPassphraseModalContent = (
+    <div className={"media-content"}>
+      <p>{t("apiKey.modal.text1")}</p>
+      <p><b>{t("apiKey.modal.text2")}</b></p>
+      <pre>{addedPassphrase}</pre>
+    </div>
+  );
+
+  const newPassphraseModal = addedPassphrase && (
+    <Modal
+      body={newPassphraseModalContent}
+      closeFunction={closeModal}
+      title={t("apiKey.modal.title")}
+      footer={<Button label={t("apiKey.modal.close")} action={closeModal} />}
+      active={true}
+    />
+  );
 
   return (
     <>
+      {newPassphraseModal}
       <InputField label={t("apiKey.displayName")} value={displayName} onChange={setDisplayName} />
       <RoleSelector
         loading={!availableRoleNames}