From 7b4da6909a0be3073c42a75328eb2c44232af34f Mon Sep 17 00:00:00 2001
From: agagancarczyk <agagancarczyk@gmail.com>
Date: Wed, 31 Aug 2022 11:48:46 +0100
Subject: [PATCH] Added an inline Alert for Signed Jwt authenticator in
 Credentials #1850 (#3240)

* alert-wip

* fixed css by introducing a custom style

* fixed css by introducing a custom style

* fixed css by introducing a custom style

Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>
---
 apps/admin-ui/public/resources/en/clients.json        |  6 +++---
 apps/admin-ui/src/clients/ClientDetails.tsx           |  5 +----
 apps/admin-ui/src/clients/credentials/Credentials.tsx | 10 ++++++++++
 apps/admin-ui/src/clients/credentials/credentials.css |  9 +++++++++
 4 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100644 apps/admin-ui/src/clients/credentials/credentials.css

diff --git a/apps/admin-ui/public/resources/en/clients.json b/apps/admin-ui/public/resources/en/clients.json
index 3282f51b79..d3cb7e4846 100644
--- a/apps/admin-ui/public/resources/en/clients.json
+++ b/apps/admin-ui/public/resources/en/clients.json
@@ -362,9 +362,9 @@
   "loginTheme": "Login theme",
   "consentRequired": "Consent required",
   "clientAuthenticator": "Client Authenticator",
-  "changeAuthenticatorConfirmTitle": "Change to {{clientAuthenticatorType}}",
-  "changeAuthenticatorConfirm": "If you change authenticator to {{clientAuthenticatorType}}, the keycloak database will be updated and you may need to download a new adapter configuration for this client",
-  "signedJWTConfirm": "You should configure JWKS URL or keys in the \"Keys\" tab to change the parameters of Signed JWT authenticator.",
+  "changeAuthenticatorConfirmTitle": "Change to {{clientAuthenticatorType}}?",
+  "changeAuthenticatorConfirm": "If you change authenticator to {{clientAuthenticatorType}}, the Keycloak database will be updated and you may need to download a new adapter configuration for this client.",
+  "signedJWTConfirm": "Generate a private key and certificate for the client from the Keys tab.",
   "anyAlgorithm": "Any algorithm",
   "clientSecret": "Client secret",
   "regenerate": "Regenerate",
diff --git a/apps/admin-ui/src/clients/ClientDetails.tsx b/apps/admin-ui/src/clients/ClientDetails.tsx
index 04dc19d177..e853cc16fc 100644
--- a/apps/admin-ui/src/clients/ClientDetails.tsx
+++ b/apps/admin-ui/src/clients/ClientDetails.tsx
@@ -1,5 +1,4 @@
 import {
-  Alert,
   AlertVariant,
   ButtonVariant,
   Divider,
@@ -372,6 +371,7 @@ export default function ClientDetails() {
     <>
       <ConfirmDialogModal
         continueButtonLabel="common:yes"
+        cancelButtonLabel="common:no"
         titleKey={t("changeAuthenticatorConfirmTitle", {
           clientAuthenticatorType: clientAuthenticatorType,
         })}
@@ -383,9 +383,6 @@ export default function ClientDetails() {
           {t("changeAuthenticatorConfirm", {
             clientAuthenticatorType: clientAuthenticatorType,
           })}
-          {clientAuthenticatorType === "client-jwt" && (
-            <Alert variant="info" isInline title={t("signedJWTConfirm")} />
-          )}
         </>
       </ConfirmDialogModal>
       <DeleteConfirm />
diff --git a/apps/admin-ui/src/clients/credentials/Credentials.tsx b/apps/admin-ui/src/clients/credentials/Credentials.tsx
index 0d90ecd33f..82695dcad2 100644
--- a/apps/admin-ui/src/clients/credentials/Credentials.tsx
+++ b/apps/admin-ui/src/clients/credentials/Credentials.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import {
+  Alert,
   ActionGroup,
   AlertVariant,
   Button,
@@ -30,6 +31,7 @@ import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { ClientSecret } from "./ClientSecret";
 import { SignedJWT } from "./SignedJWT";
 import { X509 } from "./X509";
+import "./credentials.css";
 
 type AccessToken = {
   registrationAccessToken: string;
@@ -185,6 +187,14 @@ export const Credentials = ({ client, save, refresh }: CredentialsProps) => {
             </FormGroup>
             {(clientAuthenticatorType === "client-jwt" ||
               clientAuthenticatorType === "client-secret-jwt") && <SignedJWT />}
+            {clientAuthenticatorType === "client-jwt" && (
+              <Alert
+                variant="info"
+                isInline
+                className="kc-signedJWTAlert"
+                title={t("signedJWTConfirm")}
+              />
+            )}
             {clientAuthenticatorType === "client-x509" && <X509 />}
             <ActionGroup>
               <Button variant="primary" type="submit" isDisabled={!isDirty}>
diff --git a/apps/admin-ui/src/clients/credentials/credentials.css b/apps/admin-ui/src/clients/credentials/credentials.css
new file mode 100644
index 0000000000..9ad90a2954
--- /dev/null
+++ b/apps/admin-ui/src/clients/credentials/credentials.css
@@ -0,0 +1,9 @@
+.kc-signedJWTAlert {
+  margin: 0.1rem 0 0 10.4rem;
+}
+
+@media (max-width: 768px) {
+  .kc-signedJWTAlert {
+    margin: 0.5rem 0 0 0;
+  }
+}