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

@@ -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",

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 />

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

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