@oussemasahbeni/keycloakify-login-shadcn 250004.0.8 → 250004.0.10

package/keycloak-theme/login/pages/login/Form.tsx

@@ -49,8 +49,8 @@ export function Form() {
                                         {!kcContext.realm.loginWithEmailAllowed
                                             ? msg("email")
                                             : !kcContext.realm.registrationEmailAsUsername
-                                              ? msg("usernameOrEmail")
-                                              : msg("username")}
+                                                ? msg("usernameOrEmail")
+                                                : msg("username")}
                                     </FieldLabel>
                                     <Input
                                         tabIndex={2}
@@ -69,21 +69,21 @@ export function Form() {
                                         "username",
                                         "password"
                                     ) && (
-                                        <FieldError>
-                                            <span
-                                                id="input-error"
-                                                aria-live="polite"
-                                                dangerouslySetInnerHTML={{
-                                                    __html: kcSanitize(
-                                                        kcContext.messagesPerField.getFirstError(
-                                                            "username",
-                                                            "password"
+                                            <FieldError>
+                                                <span
+                                                    id="input-error"
+                                                    aria-live="polite"
+                                                    dangerouslySetInnerHTML={{
+                                                        __html: kcSanitize(
+                                                            kcContext.messagesPerField.getFirstError(
+                                                                "username",
+                                                                "password"
+                                                            )
                                                         )
-                                                    )
-                                                }}
-                                            />
-                                        </FieldError>
-                                    )}
+                                                    }}
+                                                />
+                                            </FieldError>
+                                        )}
                                 </Field>
                             )}
 
@@ -108,46 +108,44 @@ export function Form() {
                                     "username",
                                     "password"
                                 ) && (
-                                    <FieldError>
-                                        <span
-                                            id="input-error"
-                                            aria-live="polite"
-                                            dangerouslySetInnerHTML={{
-                                                __html: kcSanitize(
-                                                    kcContext.messagesPerField.getFirstError(
-                                                        "username",
-                                                        "password"
+                                        <FieldError>
+                                            <span
+                                                id="input-error"
+                                                aria-live="polite"
+                                                dangerouslySetInnerHTML={{
+                                                    __html: kcSanitize(
+                                                        kcContext.messagesPerField.getFirstError(
+                                                            "username",
+                                                            "password"
+                                                        )
                                                     )
-                                                )
-                                            }}
-                                        />
-                                    </FieldError>
-                                )}
+                                                }}
+                                            />
+                                        </FieldError>
+                                    )}
                             </Field>
 
                             <div className=" space-y-1 my-3 flex justify-between text-xs  ">
-                                <div>
-                                    {kcContext.realm.rememberMe &&
-                                        !kcContext.usernameHidden && (
-                                            <div className="flex items-center space-x-2 ">
-                                                <Checkbox
-                                                    tabIndex={5}
-                                                    id="rememberMe"
-                                                    name="rememberMe"
-                                                    defaultChecked={
-                                                        !!kcContext.login.rememberMe
-                                                    }
-                                                />
+                                {kcContext.realm.rememberMe &&
+                                    !kcContext.usernameHidden && (
+                                        <div className="flex items-center space-x-2 ">
+                                            <Checkbox
+                                                tabIndex={5}
+                                                id="rememberMe"
+                                                name="rememberMe"
+                                                defaultChecked={
+                                                    !!kcContext.login.rememberMe
+                                                }
+                                            />
 
-                                                <Label
-                                                    htmlFor="rememberMe"
-                                                    className="text-sm font-medium cursor-pointer"
-                                                >
-                                                    {msg("rememberMe")}
-                                                </Label>
-                                            </div>
-                                        )}
-                                </div>
+                                            <Label
+                                                htmlFor="rememberMe"
+                                                className="text-sm font-medium cursor-pointer"
+                                            >
+                                                {msg("rememberMe")}
+                                            </Label>
+                                        </div>
+                                    )}
                                 <div className="link-style ">
                                     {kcContext.realm.resetPasswordAllowed && (
                                         <span className=" underline-offset-4 hover:underline">

package/keycloak-theme/login/pages/login/SocialProviders.tsx

@@ -1,3 +1,4 @@
+import { cn } from '@/components/lib/utils';
 import { Button } from "@/components/ui/button";
 import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
 import { clsx } from "@keycloakify/login-ui/tools/clsx";
@@ -39,7 +40,7 @@ export function SocialProviders() {
                 <div className="mt-px flex-auto border-t"></div>
             </div>
             <ul
-                className={`mt-4! grid gap-2 sm:grid-cols-1 ${(kcContext.social?.providers?.length ?? 0) > 3 ? "sm:grid-cols-2" : ""}`}
+                className={`mt-4! grid gap-3 sm:grid-cols-1 ${(kcContext.social?.providers?.length ?? 0) > 3 ? "sm:grid-cols-2" : ""}`}
             >
                 {kcContext.social.providers.map((...[p, , providers]) => (
                     <li key={p.alias}>
@@ -49,9 +50,9 @@ export function SocialProviders() {
                                 className={clsx(
                                     kcClsx(
                                         providers.length > 3 &&
-                                            "kcFormSocialAccountGridItem"
+                                        "kcFormSocialAccountGridItem"
                                     ),
-                                    "flex items-center justify-center gap-2 "
+                                    "flex items-center justify-center gap-3 "
                                 )}
                                 type="button"
                                 href={p.loginUrl}
@@ -61,7 +62,11 @@ export function SocialProviders() {
                                         <img
                                             src={providerLogos[p.alias]}
                                             alt={`${p.displayName} logo`}
-                                            className={"h-full w-auto"}
+                                            className={cn(
+                                                "h-full w-auto",
+                                                // Invert specific icons in dark mode
+                                                (p.alias === "github" || p.alias === "x" || p.alias === "twitter") && "dark:invert"
+                                            )}
                                         />
                                     ) : (
                                         // Fallback to the original iconClasses if the logo is not defined

package/keycloak-theme/login/pages/login/providers/github.svg

@@ -1,4 +1,5 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <title>GitHub</title>
-  <path d="M11.8452 0C5.13387 0 0 5.09516 0 11.8065C0 17.1726 3.37742 21.7645 8.20161 23.3806C8.82097 23.4919 9.03871 23.1097 9.03871 22.7952C9.03871 22.4952 9.02419 20.8403 9.02419 19.8242C9.02419 19.8242 5.6371 20.55 4.92581 18.3823C4.92581 18.3823 4.37419 16.9742 3.58065 16.6113C3.58065 16.6113 2.47258 15.8516 3.65806 15.8661C3.65806 15.8661 4.8629 15.9629 5.52581 17.1145C6.58548 18.9823 8.36129 18.4452 9.05323 18.1258C9.16452 17.3516 9.47903 16.8145 9.82742 16.4952C7.12258 16.1952 4.39355 15.8032 4.39355 11.1484C4.39355 9.81774 4.76129 9.15 5.53548 8.29839C5.40968 7.98387 4.99839 6.6871 5.66129 5.0129C6.67258 4.69839 9 6.31936 9 6.31936C9.96774 6.04839 11.0081 5.90806 12.0387 5.90806C13.0694 5.90806 14.1097 6.04839 15.0774 6.31936C15.0774 6.31936 17.4048 4.69355 18.4161 5.0129C19.079 6.69194 18.6677 7.98387 18.5419 8.29839C19.3161 9.15484 19.7903 9.82258 19.7903 11.1484C19.7903 15.8177 16.9403 16.1903 14.2355 16.4952C14.6806 16.8774 15.0581 17.6032 15.0581 18.7403C15.0581 20.371 15.0435 22.3887 15.0435 22.7855C15.0435 23.1 15.2661 23.4823 15.8806 23.371C20.7194 21.7645 24 17.1726 24 11.8065C24 5.09516 18.5565 0 11.8452 0Z" fill="#181717" />
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+    fill="currentColor" />
 </svg>

package/keycloak-theme/login/pages/login/providers/x.svg

@@ -1,4 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="300" height="271" xmlns="http://www.w3.org/2000/svg">
-    <path d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" role="img"
+    aria-hidden="true">
+    <path
+        d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
 </svg>

package/keycloak-theme/login/pages/login/useProviderLogos.tsx

@@ -24,11 +24,10 @@ const useProviderLogos: () => Record<string, string> = () => ({
     gitlab: gitlabLogo,
     google: googleLogo,
     instagram: instagramLogo,
-    "linkedin-openid-connect": linkedinLogo,
+    linkedin: linkedinLogo,
     microsoft: microsoftLogo,
     oidc: oidcLogo,
-    "openshift-v3": openshiftLogo,
-    "openshift-v4": openshiftLogo,
+    openshift: openshiftLogo,
     paypal: paypalLogo,
     slack: slackLogo,
     stackoverflow: stackoverflowLogo,

package/keycloak-theme/login/styleLevelCustomization.tsx

@@ -1,6 +1,7 @@
 import { ThemeProvider } from "@/components/theme-provider";
 import type { ClassKey } from "@keycloakify/login-ui/useKcClsx";
 import type { ReactNode } from "react";
+import "./index.css";
 import { useKcContext } from "./KcContext";
 import { getTheme } from "./shared/getColorScheme";
 

package/keycloak-theme/public/keycloak-theme/login/js/authChecker.js

@@ -0,0 +1,95 @@
+/**
+ * This file has been claimed for ownership from @keycloakify/login-ui version 250004.6.5.
+ * To relinquish ownership and restore this file to its original content, run the following command:
+ * 
+ * $ npx keycloakify own --path "login/js/authChecker.js" --public --revert
+ */
+
+
+
+const SESSION_POLLING_INTERVAL = 2000;
+const AUTH_SESSION_TIMEOUT_MILLISECS = 1000;
+const initialSession = getSession();
+const forms = Array.from(document.forms);
+let timeout;
+
+// Stop polling for a session when a form is submitted to prevent unexpected redirects.
+// This is required as Safari does not support the 'beforeunload' event properly.
+// See: https://bugs.webkit.org/show_bug.cgi?id=219102
+forms.forEach((form) =>
+  form.addEventListener("submit", () => stopSessionPolling()),
+);
+
+// Stop polling for a session when the page is unloaded to prevent unexpected redirects.
+globalThis.addEventListener("beforeunload", () => stopSessionPolling());
+
+/**
+ * Starts polling to check if a new session was started in another context (e.g. a tab or window), and redirects to the specified URL if a session is detected.
+ * @param {string} redirectUrl - The URL to redirect to if a new session is detected.
+ */
+export function startSessionPolling(redirectUrl) {
+  if (initialSession) {
+    // We started with a session, so there is nothing to do, exit.
+    return;
+  }
+
+  const session = getSession();
+
+  if (!session) {
+    // No new session detected, check again later.
+    timeout = setTimeout(
+      () => startSessionPolling(redirectUrl),
+      SESSION_POLLING_INTERVAL,
+    );
+  } else {
+    // A new session was detected, redirect to the specified URL and stop polling.
+    location.href = redirectUrl;
+    stopSessionPolling();
+  }
+}
+
+/**
+ * Stops polling the session.
+ */
+function stopSessionPolling() {
+  if (timeout) {
+    clearTimeout(timeout);
+    timeout = undefined;
+  }
+}
+
+export function checkAuthSession(pageAuthSessionHash) {
+  setTimeout(() => {
+    const cookieAuthSessionHash = getKcAuthSessionHash();
+    if (
+      cookieAuthSessionHash &&
+      cookieAuthSessionHash !== pageAuthSessionHash
+    ) {
+      location.reload();
+    }
+  }, AUTH_SESSION_TIMEOUT_MILLISECS);
+}
+
+function getKcAuthSessionHash() {
+  return getCookieByName("KC_AUTH_SESSION_HASH");
+}
+
+function getSession() {
+  return getCookieByName("KEYCLOAK_SESSION");
+}
+
+function getCookieByName(name) {
+  for (const cookie of document.cookie.split(";")) {
+    const [key, value] = cookie.split("=").map((value) => value.trim());
+    if (key === name) {
+      return value.startsWith('"') && value.endsWith('"')
+        ? value.slice(1, -1)
+        : value;
+    }
+  }
+  return null;
+}
+
+
+    
+    

package/keycloak-theme/public/keycloak-theme/login/js/passkeysConditionalAuth.js

@@ -0,0 +1,86 @@
+/**
+ * This file has been claimed for ownership from @keycloakify/login-ui version 250004.6.5.
+ * To relinquish ownership and restore this file to its original content, run the following command:
+ * 
+ * $ npx keycloakify own --path "login/js/passkeysConditionalAuth.js" --public --revert
+ */
+
+import { base64url } from "./rfc4648.js";
+import { returnSuccess, returnFailure } from "./webauthnAuthenticate.js";
+
+export function initAuthenticate(input) {
+    // Check if WebAuthn is supported by this browser
+    if (!window.PublicKeyCredential) {
+        returnFailure(input.errmsg);
+        return;
+    }
+    if (input.isUserIdentified || typeof PublicKeyCredential.isConditionalMediationAvailable === "undefined") {
+        document.getElementById("kc-form-passkey-button").style.display = 'block';
+    } else {
+        tryAutoFillUI(input);
+    }
+}
+
+function doAuthenticate(input) {
+    // Check if WebAuthn is supported by this browser
+    if (!window.PublicKeyCredential) {
+        returnFailure(input.errmsg);
+        return;
+    }
+
+    const publicKey = {
+        rpId : input.rpId,
+        challenge: base64url.parse(input.challenge, { loose: true })
+    };
+
+    publicKey.allowCredentials = !input.isUserIdentified ? [] : getAllowCredentials();
+
+    if (input.createTimeout !== 0) {
+        publicKey.timeout = input.createTimeout * 1000;
+    }
+
+    if (input.userVerification !== 'not specified') {
+        publicKey.userVerification = input.userVerification;
+    }
+
+    return navigator.credentials.get({
+        publicKey: publicKey,
+        ...input.additionalOptions
+    });
+}
+
+async function tryAutoFillUI(input) {
+    const isConditionalMediationAvailable = await PublicKeyCredential.isConditionalMediationAvailable();
+    if (isConditionalMediationAvailable) {
+        document.getElementById("kc-form-login").style.display = "block";
+        input.additionalOptions = { mediation: 'conditional'};
+        try {
+            const result = await doAuthenticate(input);
+            returnSuccess(result);
+        } catch (error) {
+            returnFailure(error);
+        }
+    } else {
+        document.getElementById("kc-form-passkey-button").style.display = 'block';
+    }
+}
+
+function getAllowCredentials() {
+    const allowCredentials = [];
+    const authnUse = document.forms['authn_select'].authn_use_chk;
+    if (authnUse !== undefined) {
+        if (authnUse.length === undefined) {
+            allowCredentials.push({
+                id: base64url.parse(authnUse.value, {loose: true}),
+                type: 'public-key',
+            });
+        } else {
+            authnUse.forEach((entry) =>
+                allowCredentials.push({
+                    id: base64url.parse(entry.value, {loose: true}),
+                    type: 'public-key',
+                }));
+        }
+    }
+    return allowCredentials;
+}

package/keycloak-theme/public/keycloak-theme/login/js/rfc4648.js

@@ -0,0 +1,185 @@
+/**
+ * This file has been claimed for ownership from @keycloakify/login-ui version 250004.6.5.
+ * To relinquish ownership and restore this file to its original content, run the following command:
+ * 
+ * $ npx keycloakify own --path "login/js/rfc4648.js" --public --revert
+ */
+
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+function parse(string, encoding, opts) {
+  var _opts$out;
+
+  if (opts === void 0) {
+    opts = {};
+  }
+
+  // Build the character lookup table:
+  if (!encoding.codes) {
+    encoding.codes = {};
+
+    for (var i = 0; i < encoding.chars.length; ++i) {
+      encoding.codes[encoding.chars[i]] = i;
+    }
+  } // The string must have a whole number of bytes:
+
+
+  if (!opts.loose && string.length * encoding.bits & 7) {
+    throw new SyntaxError('Invalid padding');
+  } // Count the padding bytes:
+
+
+  var end = string.length;
+
+  while (string[end - 1] === '=') {
+    --end; // If we get a whole number of bytes, there is too much padding:
+
+    if (!opts.loose && !((string.length - end) * encoding.bits & 7)) {
+      throw new SyntaxError('Invalid padding');
+    }
+  } // Allocate the output:
+
+
+  var out = new ((_opts$out = opts.out) != null ? _opts$out : Uint8Array)(end * encoding.bits / 8 | 0); // Parse the data:
+
+  var bits = 0; // Number of bits currently in the buffer
+
+  var buffer = 0; // Bits waiting to be written out, MSB first
+
+  var written = 0; // Next byte to write
+
+  for (var _i = 0; _i < end; ++_i) {
+    // Read one character from the string:
+    var value = encoding.codes[string[_i]];
+
+    if (value === undefined) {
+      throw new SyntaxError('Invalid character ' + string[_i]);
+    } // Append the bits to the buffer:
+
+
+    buffer = buffer << encoding.bits | value;
+    bits += encoding.bits; // Write out some bits if the buffer has a byte's worth:
+
+    if (bits >= 8) {
+      bits -= 8;
+      out[written++] = 0xff & buffer >> bits;
+    }
+  } // Verify that we have received just enough bits:
+
+
+  if (bits >= encoding.bits || 0xff & buffer << 8 - bits) {
+    throw new SyntaxError('Unexpected end of data');
+  }
+
+  return out;
+}
+function stringify(data, encoding, opts) {
+  if (opts === void 0) {
+    opts = {};
+  }
+
+  var _opts = opts,
+      _opts$pad = _opts.pad,
+      pad = _opts$pad === void 0 ? true : _opts$pad;
+  var mask = (1 << encoding.bits) - 1;
+  var out = '';
+  var bits = 0; // Number of bits currently in the buffer
+
+  var buffer = 0; // Bits waiting to be written out, MSB first
+
+  for (var i = 0; i < data.length; ++i) {
+    // Slurp data into the buffer:
+    buffer = buffer << 8 | 0xff & data[i];
+    bits += 8; // Write out as much as we can:
+
+    while (bits > encoding.bits) {
+      bits -= encoding.bits;
+      out += encoding.chars[mask & buffer >> bits];
+    }
+  } // Partial character:
+
+
+  if (bits) {
+    out += encoding.chars[mask & buffer << encoding.bits - bits];
+  } // Add padding characters until we hit a byte boundary:
+
+
+  if (pad) {
+    while (out.length * encoding.bits & 7) {
+      out += '=';
+    }
+  }
+
+  return out;
+}
+
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+var base16Encoding = {
+  chars: '0123456789ABCDEF',
+  bits: 4
+};
+var base32Encoding = {
+  chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567',
+  bits: 5
+};
+var base32HexEncoding = {
+  chars: '0123456789ABCDEFGHIJKLMNOPQRSTUV',
+  bits: 5
+};
+var base64Encoding = {
+  chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
+  bits: 6
+};
+var base64UrlEncoding = {
+  chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_',
+  bits: 6
+};
+var base16 = {
+  parse: function parse$1(string, opts) {
+    return parse(string.toUpperCase(), base16Encoding, opts);
+  },
+  stringify: function stringify$1(data, opts) {
+    return stringify(data, base16Encoding, opts);
+  }
+};
+var base32 = {
+  parse: function parse$1(string, opts) {
+    if (opts === void 0) {
+      opts = {};
+    }
+
+    return parse(opts.loose ? string.toUpperCase().replace(/0/g, 'O').replace(/1/g, 'L').replace(/8/g, 'B') : string, base32Encoding, opts);
+  },
+  stringify: function stringify$1(data, opts) {
+    return stringify(data, base32Encoding, opts);
+  }
+};
+var base32hex = {
+  parse: function parse$1(string, opts) {
+    return parse(string, base32HexEncoding, opts);
+  },
+  stringify: function stringify$1(data, opts) {
+    return stringify(data, base32HexEncoding, opts);
+  }
+};
+var base64 = {
+  parse: function parse$1(string, opts) {
+    return parse(string, base64Encoding, opts);
+  },
+  stringify: function stringify$1(data, opts) {
+    return stringify(data, base64Encoding, opts);
+  }
+};
+var base64url = {
+  parse: function parse$1(string, opts) {
+    return parse(string, base64UrlEncoding, opts);
+  },
+  stringify: function stringify$1(data, opts) {
+    return stringify(data, base64UrlEncoding, opts);
+  }
+};
+var codec = {
+  parse: parse,
+  stringify: stringify
+};
+
+export { base16, base32, base32hex, base64, base64url, codec };