Merge pull request #1023 from cultuurnet/PPF-418-improve-copy-client-…

…credentials Improve copy client credentials switch
cultuurnet · Apr 19, 2024 · 51959dc · 51959dc
2 parents e82be72 + 80e454c
commit 51959dc
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/resources/translations/en.json b/resources/translations/en.json
@@ -219,8 +219,8 @@
       "test": "Test",
       "live": "Live",
       "status_alert": "Approval from publiq is necessary for the live integration of this project. All information to smoothly go live can be found",
-      "link": "here",
-      "uitid_alert": "Client credentials have not yet been requested for this integration.",
+      "uitid_alert": "You can switch to authentication with client credentials. Check <0>here</0> whether this method of authentication is suitable for your application. Once you have requested client credentials, your API key remains valid for another 6 months.",
+      "uitid_alert_link": "https://docs.publiq.be/docs/authentication/methods/overview",
       "action_status": "Request activation",
       "action_uitid": "Request client credentials",
       "info": "These credentials remain valid for another {{amount}} and will be permanently deleted on {{date}}"

diff --git a/resources/translations/nl.json b/resources/translations/nl.json
@@ -219,8 +219,8 @@
       "test": "Test",
       "live": "Live",
       "in_progress": "Je aanvraag tot activatie is in behandeling.",
-      "link": "here",
-      "uitid_alert": "Voor deze integratie zijn nog geen Client credentials aangevraagd.",
+      "uitid_alert": "Je kan de overstap maken naar authenticatie met client credentials. Bekijk <0>hier</0> of deze manier van authenticatie geschikt is voor jouw applicatie. Eens je client credentials aangevraagd hebt, blijft je API key nog 6 maanden geldig.",
+      "uitid_alert_link": "https://docs.publiq.be/docs/authentication/methods/overview",
       "action_uitid": "Client credentials aanvragen",
       "client_id": "Client id",
       "client_secret": "Client secret",

diff --git a/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx b/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Heading } from "../../Heading";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { StatusLight } from "../../StatusLight";
 import { ButtonPrimary } from "../../ButtonPrimary";
 import { CopyText } from "../../CopyText";
@@ -10,6 +10,7 @@ import type { Credentials } from "./Credentials";
 import type { Integration } from "../../../types/Integration";
 import { KeyVisibility } from "../../../types/KeyVisibility";
 import { router } from "@inertiajs/react";
+import { Link } from "../../Link";
 
 type Props = Pick<
   Integration,
@@ -63,7 +64,18 @@ export const CredentialsAuthClients = ({
       </Heading>
       {keyVisibility === KeyVisibility.v1 ? (
         <div className="flex flex-col flex-1 gap-4">
-          <p>{t("details.credentials.uitid_alert")}</p>
+          <div>
+            <Trans
+              i18nKey="details.credentials.uitid_alert"
+              components={[
+                <Link
+                  key={t("details.credentials.uitid_alert")}
+                  href={t("details.credentials.uitid_alert_link")}
+                  className="text-publiq-blue-dark hover:underline mb-3"
+                />,
+              ]}
+            />
+          </div>
           <ButtonPrimary
             className="self-start"
             onClick={handleKeyVisibilityUpgrade}

diff --git a/resources/ts/Components/Link.tsx b/resources/ts/Components/Link.tsx
@@ -25,15 +25,15 @@ export const Link = ({
     <>
       {isExternal ? (
         <a
-          className={classNames("inline-flex gap-2 items-center", className)}
+          className={className}
           href={href}
           target="_blank"
           rel="noreferrer"
           {...props}
         >
           <span className="hover:underline">{children}</span>
           {hasExternalIcon && (
-            <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
+            <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="mx-1" />
           )}
         </a>
       ) : (