Show dialog after adding new key

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"
+    }
   }
 }

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"
+    }
   }
 }

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}