Add link to permission roles

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

@@ -83,7 +83,8 @@
     "addKey": "Schlüssel hinzufügen",
     "delete": "Löschen",
     "download": "Herunterladen",
-    "text1": "Erstelle und verwalte Personal Access Token um auf die REST API zuzugreifen oder diese als Passwort für SCM-Clients zu nutzen. Die Rechte der Token sind auf Repositories und die gewählte Rolle beschränkt. Sie können die Rollenberechtigungen in der Administration unter „Berechtigungsrollen“ einsehen und neue Rollen anlegen.",
+    "text1": "Erstelle und verwalte Personal Access Token um auf die REST API zuzugreifen oder diese als Passwort für SCM-Clients zu nutzen. Die Rechte der Token sind auf Repositories und die gewählte Rolle beschränkt.",
+    "manageRoles": "Sie können die Rollenberechtigungen in der Administration unter „Berechtigungsrollen“ einsehen und neue Rollen anlegen.",
     "text2": "Um den Token in REST-Abfragen zu nutzen, übergeben Sie diesen als Cookie mit dem Namen „X-Bearer-Token“. Sie können den Token auch anstelle Ihres Passworts nutzen, um sich mit SCM-Clients anzumelden.",
     "modal": {
       "title": "Schlüssel erzeugt",

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

@@ -83,7 +83,8 @@
     "addKey": "Add key",
     "delete": "Delete",
     "download": "Download",
-    "text1": "Create and manage personal access tokens to access the REST API or use as a password for SCM clients. The privileges of these tokens are limited to repositories and the selected role. You may view and create roles in the administration view “Permission Roles”.",
+    "text1": "Create and manage personal access tokens to access the REST API or use as a password for SCM clients. The privileges of these tokens are limited to repositories and the selected role.",
+    "manageRoles": "You may view and create roles in the administration view “Permission Roles”.",
     "text2": "To use the token in a REST request, pass it as a cookie named “X-Bearer-Token”. You may use the token as your password for SCM clients, too.",
     "modal": {
       "title": "Key created",

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

@@ -22,12 +22,14 @@
  * SOFTWARE.
  */
 
-import { Collection, Link, Links, User, Me } from "@scm-manager/ui-types";
+import { Collection, Links, User, Me } from "@scm-manager/ui-types";
 import React, { FC, useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import { apiClient, ErrorNotification, Loading } from "@scm-manager/ui-components";
 import ApiKeyTable from "./ApiKeyTable";
 import AddApiKey from "./AddApiKey";
 import { useTranslation } from "react-i18next";
+import styled from "styled-components";
 
 export type ApiKeysCollection = Collection & {
   _embedded: {
@@ -49,6 +51,10 @@ type Props = {
   user: User | Me;
 };
 
+const Subtitle = styled.div`
+  margin-bottom: 1rem;
+`;
+
 const SetApiKeys: FC<Props> = ({ user }) => {
   const [t] = useTranslation("users");
   const [error, setError] = useState<undefined | Error>();
@@ -89,11 +95,13 @@ const SetApiKeys: FC<Props> = ({ user }) => {
   return (
     <>
       <div className={"media-content"}>
-        <p>{t("apiKey.text1")}</p>
+        <p>{t("apiKey.text1")} <Link to={"/admin/roles/"}>{t("apiKey.manageRoles")}</Link></p>
         <p>{t("apiKey.text2")}</p>
       </div>
       <hr />
       <ApiKeyTable apiKeys={apiKeys} onDelete={onDelete} />
+      <hr />
+      <Subtitle className={"media-content"}><h2 className={"title is-4"}>Create new key</h2></Subtitle>
       {createLink && <AddApiKey createLink={createLink} refresh={fetchApiKeys} />}
     </>
   );