keycloakify 6.8.3 → 6.8.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/README.md +4 -0
  2. package/bin/tsconfig.tsbuildinfo +1 -1
  3. package/lib/components/IdpReviewUserProfile.js +7 -8
  4. package/lib/components/IdpReviewUserProfile.js.map +1 -1
  5. package/lib/components/Login.js +16 -17
  6. package/lib/components/Login.js.map +1 -1
  7. package/lib/components/LoginConfigTotp.js +17 -18
  8. package/lib/components/LoginConfigTotp.js.map +1 -1
  9. package/lib/components/LoginIdpLinkConfirm.js +4 -5
  10. package/lib/components/LoginIdpLinkConfirm.js.map +1 -1
  11. package/lib/components/LoginOtp.js +17 -18
  12. package/lib/components/LoginOtp.js.map +1 -1
  13. package/lib/components/LoginPassword.js +8 -9
  14. package/lib/components/LoginPassword.js.map +1 -1
  15. package/lib/components/LoginResetPassword.js +12 -13
  16. package/lib/components/LoginResetPassword.js.map +1 -1
  17. package/lib/components/LoginUpdatePassword.js +18 -19
  18. package/lib/components/LoginUpdatePassword.js.map +1 -1
  19. package/lib/components/LoginUpdateProfile.js +28 -29
  20. package/lib/components/LoginUpdateProfile.js.map +1 -1
  21. package/lib/components/LoginUsername.js +12 -13
  22. package/lib/components/LoginUsername.js.map +1 -1
  23. package/lib/components/LogoutConfirm.js +5 -6
  24. package/lib/components/LogoutConfirm.js.map +1 -1
  25. package/lib/components/Register.js +38 -39
  26. package/lib/components/Register.js.map +1 -1
  27. package/lib/components/RegisterUserProfile.js +10 -12
  28. package/lib/components/RegisterUserProfile.js.map +1 -1
  29. package/lib/components/Template.js +26 -27
  30. package/lib/components/Template.js.map +1 -1
  31. package/lib/components/Terms.js +3 -4
  32. package/lib/components/Terms.js.map +1 -1
  33. package/lib/components/UpdateUserProfile.js +8 -9
  34. package/lib/components/UpdateUserProfile.js.map +1 -1
  35. package/lib/components/WebauthnAuthenticate.js +16 -17
  36. package/lib/components/WebauthnAuthenticate.js.map +1 -1
  37. package/lib/components/shared/UserProfileCommons.js +19 -15
  38. package/lib/components/shared/UserProfileCommons.js.map +1 -1
  39. package/lib/tools/clsx.d.ts +3 -0
  40. package/lib/tools/clsx.js +6 -0
  41. package/lib/tools/clsx.js.map +1 -0
  42. package/lib/tools/useCssAndCx.d.ts +7 -1
  43. package/lib/tools/useCssAndCx.js +9 -6
  44. package/lib/tools/useCssAndCx.js.map +1 -1
  45. package/lib/tsconfig.tsbuildinfo +1 -1
  46. package/package.json +10 -7
  47. package/src/lib/components/IdpReviewUserProfile.tsx +7 -9
  48. package/src/lib/components/Login.tsx +17 -19
  49. package/src/lib/components/LoginConfigTotp.tsx +17 -19
  50. package/src/lib/components/LoginIdpLinkConfirm.tsx +4 -6
  51. package/src/lib/components/LoginOtp.tsx +18 -20
  52. package/src/lib/components/LoginPassword.tsx +8 -10
  53. package/src/lib/components/LoginResetPassword.tsx +12 -14
  54. package/src/lib/components/LoginUpdatePassword.tsx +21 -21
  55. package/src/lib/components/LoginUpdateProfile.tsx +29 -31
  56. package/src/lib/components/LoginUsername.tsx +13 -15
  57. package/src/lib/components/LogoutConfirm.tsx +5 -7
  58. package/src/lib/components/Register.tsx +40 -40
  59. package/src/lib/components/RegisterUserProfile.tsx +10 -20
  60. package/src/lib/components/Template.tsx +26 -28
  61. package/src/lib/components/Terms.tsx +3 -5
  62. package/src/lib/components/UpdateUserProfile.tsx +9 -11
  63. package/src/lib/components/WebauthnAuthenticate.tsx +16 -18
  64. package/src/lib/components/shared/UserProfileCommons.tsx +30 -27
  65. package/src/lib/tools/clsx.ts +7 -0
  66. package/src/lib/tools/useCssAndCx.ts +9 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "keycloakify",
3
- "version": "6.8.3",
3
+ "version": "6.8.5",
4
4
  "description": "Keycloak theme generator for Reacts app",
5
5
  "repository": {
6
6
  "type": "git",
@@ -324,6 +324,7 @@
324
324
  "src/lib/tools/ReactComponent.ts",
325
325
  "src/lib/tools/allPropertiesValuesToUndefined.ts",
326
326
  "src/lib/tools/assert.ts",
327
+ "src/lib/tools/clsx.ts",
327
328
  "src/lib/tools/deepAssign.ts",
328
329
  "src/lib/tools/deepClone.ts",
329
330
  "src/lib/tools/emailRegExp.ts",
@@ -1232,6 +1233,9 @@
1232
1233
  "lib/tools/assert.d.ts",
1233
1234
  "lib/tools/assert.js",
1234
1235
  "lib/tools/assert.js.map",
1236
+ "lib/tools/clsx.d.ts",
1237
+ "lib/tools/clsx.js",
1238
+ "lib/tools/clsx.js.map",
1235
1239
  "lib/tools/deepAssign.d.ts",
1236
1240
  "lib/tools/deepAssign.js",
1237
1241
  "lib/tools/deepAssign.js.map",
@@ -1267,12 +1271,10 @@
1267
1271
  ],
1268
1272
  "homepage": "https://github.com/garronej/keycloakify",
1269
1273
  "peerDependencies": {
1270
- "@emotion/react": "^11.4.1",
1271
1274
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
1272
1275
  },
1273
1276
  "devDependencies": {
1274
1277
  "@babel/core": "^7.0.0",
1275
- "@emotion/react": "^11.4.1",
1276
1278
  "@types/memoizee": "^0.4.7",
1277
1279
  "@types/minimist": "^1.2.2",
1278
1280
  "@types/node": "^17.0.25",
@@ -1284,23 +1286,24 @@
1284
1286
  "properties-parser": "^0.3.1",
1285
1287
  "react": "18.1.0",
1286
1288
  "rimraf": "^3.0.2",
1289
+ "@emotion/react": "^11.10.4",
1287
1290
  "typescript": "^4.2.3"
1288
1291
  },
1289
1292
  "dependencies": {
1290
1293
  "@octokit/rest": "^18.12.0",
1291
1294
  "cheerio": "^1.0.0-rc.5",
1292
1295
  "cli-select": "^1.1.2",
1293
- "evt": "^2.4.6",
1296
+ "evt": "^2.4.10",
1294
1297
  "memoizee": "^0.4.15",
1295
1298
  "minimal-polyfills": "^2.2.2",
1296
1299
  "minimist": "^1.2.6",
1297
1300
  "path-browserify": "^1.0.1",
1298
- "powerhooks": "^0.20.23",
1301
+ "powerhooks": "^0.20.24",
1299
1302
  "react-markdown": "^5.0.3",
1300
1303
  "rfc4648": "^1.5.2",
1301
1304
  "scripting-tools": "^0.19.13",
1302
- "tsafe": "^1.1.3",
1303
- "tss-react": "^4.3.4",
1305
+ "tsafe": "^1.2.1",
1306
+ "tss-react": "4.4.1-rc.0",
1304
1307
  "zod": "^3.17.10"
1305
1308
  }
1306
1309
  }
package/src/lib/components/IdpReviewUserProfile.tsx CHANGED
@@ -3,7 +3,7 @@ import DefaultTemplate from "./Template";
3
3
  import type { TemplateProps } from "./Template";
4
4
  import type { KcProps } from "./KcProps";
5
5
  import type { KcContextBase } from "../getKcContext/KcContextBase";
6
- import { useCssAndCx } from "../tools/useCssAndCx";
6
+ import { clsx } from "../tools/clsx";
7
7
  import type { I18n } from "../i18n";
8
8
  import { UserProfileFormFields } from "./shared/UserProfileCommons";
9
9
 
@@ -17,8 +17,6 @@ export type IdpReviewUserProfileProps = KcProps & {
17
17
  const IdpReviewUserProfile = memo((props: IdpReviewUserProfileProps) => {
18
18
  const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
19
19
 
20
- const { cx } = useCssAndCx();
21
-
22
20
  const { msg, msgStr } = i18n;
23
21
 
24
22
  const { url } = kcContext;
@@ -30,16 +28,16 @@ const IdpReviewUserProfile = memo((props: IdpReviewUserProfileProps) => {
30
28
  {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
31
29
  headerNode={msg("loginIdpReviewProfileTitle")}
32
30
  formNode={
33
- <form id="kc-idp-review-profile-form" className={cx(kcProps.kcFormClass)} action={url.loginAction} method="post">
31
+ <form id="kc-idp-review-profile-form" className={clsx(kcProps.kcFormClass)} action={url.loginAction} method="post">
34
32
  <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} i18n={i18n} {...kcProps} />
35
33
 
36
- <div className={cx(kcProps.kcFormGroupClass)}>
37
- <div id="kc-form-options" className={cx(kcProps.kcFormOptionsClass)}>
38
- <div className={cx(kcProps.kcFormOptionsWrapperClass)} />
34
+ <div className={clsx(kcProps.kcFormGroupClass)}>
35
+ <div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
36
+ <div className={clsx(kcProps.kcFormOptionsWrapperClass)} />
39
37
  </div>
40
- <div id="kc-form-buttons" className={cx(kcProps.kcFormButtonsClass)}>
38
+ <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
41
39
  <input
42
- className={cx(
40
+ className={clsx(
43
41
  kcProps.kcButtonClass,
44
42
  kcProps.kcButtonPrimaryClass,
45
43
  kcProps.kcButtonBlockClass,
package/src/lib/components/Login.tsx CHANGED
@@ -3,7 +3,7 @@ import DefaultTemplate from "./Template";
3
3
  import type { TemplateProps } from "./Template";
4
4
  import type { KcProps } from "./KcProps";
5
5
  import type { KcContextBase } from "../getKcContext/KcContextBase";
6
- import { useCssAndCx } from "../tools/useCssAndCx";
6
+ import { clsx } from "../tools/clsx";
7
7
  import { useConstCallback } from "powerhooks/useConstCallback";
8
8
  import type { FormEventHandler } from "react";
9
9
  import type { I18n } from "../i18n";
@@ -22,8 +22,6 @@ const Login = memo((props: LoginProps) => {
22
22
 
23
23
  const { msg, msgStr } = i18n;
24
24
 
25
- const { cx } = useCssAndCx();
26
-
27
25
  const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
28
26
 
29
27
  const onSubmit = useConstCallback<FormEventHandler<HTMLFormElement>>(e => {
@@ -47,16 +45,16 @@ const Login = memo((props: LoginProps) => {
47
45
  displayWide={realm.password && social.providers !== undefined}
48
46
  headerNode={msg("doLogIn")}
49
47
  formNode={
50
- <div id="kc-form" className={cx(realm.password && social.providers !== undefined && kcProps.kcContentWrapperClass)}>
48
+ <div id="kc-form" className={clsx(realm.password && social.providers !== undefined && kcProps.kcContentWrapperClass)}>
51
49
  <div
52
50
  id="kc-form-wrapper"
53
- className={cx(
51
+ className={clsx(
54
52
  realm.password && social.providers && [kcProps.kcFormSocialAccountContentClass, kcProps.kcFormSocialAccountClass]
55
53
  )}
56
54
  >
57
55
  {realm.password && (
58
56
  <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
59
- <div className={cx(kcProps.kcFormGroupClass)}>
57
+ <div className={clsx(kcProps.kcFormGroupClass)}>
60
58
  {(() => {
61
59
  const label = !realm.loginWithEmailAllowed
62
60
  ? "username"
@@ -68,13 +66,13 @@ const Login = memo((props: LoginProps) => {
68
66
 
69
67
  return (
70
68
  <>
71
- <label htmlFor={autoCompleteHelper} className={cx(kcProps.kcLabelClass)}>
69
+ <label htmlFor={autoCompleteHelper} className={clsx(kcProps.kcLabelClass)}>
72
70
  {msg(label)}
73
71
  </label>
74
72
  <input
75
73
  tabIndex={1}
76
74
  id={autoCompleteHelper}
77
- className={cx(kcProps.kcInputClass)}
75
+ className={clsx(kcProps.kcInputClass)}
78
76
  //NOTE: This is used by Google Chrome auto fill so we use it to tell
79
77
  //the browser how to pre fill the form but before submit we put it back
80
78
  //to username because it is what keycloak expects.
@@ -92,20 +90,20 @@ const Login = memo((props: LoginProps) => {
92
90
  );
93
91
  })()}
94
92
  </div>
95
- <div className={cx(kcProps.kcFormGroupClass)}>
96
- <label htmlFor="password" className={cx(kcProps.kcLabelClass)}>
93
+ <div className={clsx(kcProps.kcFormGroupClass)}>
94
+ <label htmlFor="password" className={clsx(kcProps.kcLabelClass)}>
97
95
  {msg("password")}
98
96
  </label>
99
97
  <input
100
98
  tabIndex={2}
101
99
  id="password"
102
- className={cx(kcProps.kcInputClass)}
100
+ className={clsx(kcProps.kcInputClass)}
103
101
  name="password"
104
102
  type="password"
105
103
  autoComplete="off"
106
104
  />
107
105
  </div>
108
- <div className={cx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
106
+ <div className={clsx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
109
107
  <div id="kc-form-options">
110
108
  {realm.rememberMe && !usernameEditDisabled && (
111
109
  <div className="checkbox">
@@ -126,7 +124,7 @@ const Login = memo((props: LoginProps) => {
126
124
  </div>
127
125
  )}
128
126
  </div>
129
- <div className={cx(kcProps.kcFormOptionsWrapperClass)}>
127
+ <div className={clsx(kcProps.kcFormOptionsWrapperClass)}>
130
128
  {realm.resetPasswordAllowed && (
131
129
  <span>
132
130
  <a tabIndex={5} href={url.loginResetCredentialsUrl}>
@@ -136,7 +134,7 @@ const Login = memo((props: LoginProps) => {
136
134
  )}
137
135
  </div>
138
136
  </div>
139
- <div id="kc-form-buttons" className={cx(kcProps.kcFormGroupClass)}>
137
+ <div id="kc-form-buttons" className={clsx(kcProps.kcFormGroupClass)}>
140
138
  <input
141
139
  type="hidden"
142
140
  id="id-hidden-input"
@@ -149,7 +147,7 @@ const Login = memo((props: LoginProps) => {
149
147
  />
150
148
  <input
151
149
  tabIndex={4}
152
- className={cx(
150
+ className={clsx(
153
151
  kcProps.kcButtonClass,
154
152
  kcProps.kcButtonPrimaryClass,
155
153
  kcProps.kcButtonBlockClass,
@@ -166,16 +164,16 @@ const Login = memo((props: LoginProps) => {
166
164
  )}
167
165
  </div>
168
166
  {realm.password && social.providers !== undefined && (
169
- <div id="kc-social-providers" className={cx(kcProps.kcFormSocialAccountContentClass, kcProps.kcFormSocialAccountClass)}>
167
+ <div id="kc-social-providers" className={clsx(kcProps.kcFormSocialAccountContentClass, kcProps.kcFormSocialAccountClass)}>
170
168
  <ul
171
- className={cx(
169
+ className={clsx(
172
170
  kcProps.kcFormSocialAccountListClass,
173
171
  social.providers.length > 4 && kcProps.kcFormSocialAccountDoubleListClass
174
172
  )}
175
173
  >
176
174
  {social.providers.map(p => (
177
- <li key={p.providerId} className={cx(kcProps.kcFormSocialAccountListLinkClass)}>
178
- <a href={p.loginUrl} id={`zocial-${p.alias}`} className={cx("zocial", p.providerId)}>
175
+ <li key={p.providerId} className={clsx(kcProps.kcFormSocialAccountListLinkClass)}>
176
+ <a href={p.loginUrl} id={`zocial-${p.alias}`} className={clsx("zocial", p.providerId)}>
179
177
  <span>{p.displayName}</span>
180
178
  </a>
181
179
  </li>
package/src/lib/components/LoginConfigTotp.tsx CHANGED
@@ -3,7 +3,7 @@ import DefaultTemplate from "./Template";
3
3
  import type { TemplateProps } from "./Template";
4
4
  import type { KcProps } from "./KcProps";
5
5
  import type { KcContextBase } from "../getKcContext/KcContextBase";
6
- import { useCssAndCx } from "../tools/useCssAndCx";
6
+ import { clsx } from "../tools/clsx";
7
7
  import type { I18n } from "../i18n";
8
8
 
9
9
  export type LoginConfigTotpProps = KcProps & {
@@ -18,8 +18,6 @@ const LoginConfigTotp = memo((props: LoginConfigTotpProps) => {
18
18
 
19
19
  const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;
20
20
 
21
- const { cx } = useCssAndCx();
22
-
23
21
  const { msg, msgStr } = i18n;
24
22
 
25
23
  const algToKeyUriAlg: Record<KcContextBase.LoginConfigTotp["totp"]["policy"]["algorithm"], string> = {
@@ -102,26 +100,26 @@ const LoginConfigTotp = memo((props: LoginConfigTotpProps) => {
102
100
  </li>
103
101
  </ol>
104
102
 
105
- <form action={url.loginAction} className={cx(kcProps.kcFormClass)} id="kc-totp-settings-form" method="post">
106
- <div className={cx(kcProps.kcFormGroupClass)}>
107
- <div className={cx(kcProps.kcInputWrapperClass)}>
108
- <label htmlFor="totp" className={cx(kcProps.kcLabelClass)}>
103
+ <form action={url.loginAction} className={clsx(kcProps.kcFormClass)} id="kc-totp-settings-form" method="post">
104
+ <div className={clsx(kcProps.kcFormGroupClass)}>
105
+ <div className={clsx(kcProps.kcInputWrapperClass)}>
106
+ <label htmlFor="totp" className={clsx(kcProps.kcLabelClass)}>
109
107
  {msg("authenticatorCode")}
110
108
  </label>{" "}
111
109
  <span className="required">*</span>
112
110
  </div>
113
- <div className={cx(kcProps.kcInputWrapperClass)}>
111
+ <div className={clsx(kcProps.kcInputWrapperClass)}>
114
112
  <input
115
113
  type="text"
116
114
  id="totp"
117
115
  name="totp"
118
116
  autoComplete="off"
119
- className={cx(kcProps.kcInputClass)}
117
+ className={clsx(kcProps.kcInputClass)}
120
118
  aria-invalid={messagesPerField.existsError("totp")}
121
119
  />
122
120
 
123
121
  {messagesPerField.existsError("totp") && (
124
- <span id="input-error-otp-code" className={cx(kcProps.kcInputErrorMessageClass)} aria-live="polite">
122
+ <span id="input-error-otp-code" className={clsx(kcProps.kcInputErrorMessageClass)} aria-live="polite">
125
123
  {messagesPerField.get("totp")}
126
124
  </span>
127
125
  )}
@@ -130,24 +128,24 @@ const LoginConfigTotp = memo((props: LoginConfigTotpProps) => {
130
128
  {mode && <input type="hidden" id="mode" value={mode} />}
131
129
  </div>
132
130
 
133
- <div className={cx(kcProps.kcFormGroupClass)}>
134
- <div className={cx(kcProps.kcInputWrapperClass)}>
135
- <label htmlFor="userLabel" className={cx(kcProps.kcLabelClass)}>
131
+ <div className={clsx(kcProps.kcFormGroupClass)}>
132
+ <div className={clsx(kcProps.kcInputWrapperClass)}>
133
+ <label htmlFor="userLabel" className={clsx(kcProps.kcLabelClass)}>
136
134
  {msg("loginTotpDeviceName")}
137
135
  </label>{" "}
138
136
  {totp.otpCredentials.length >= 1 && <span className="required">*</span>}
139
137
  </div>
140
- <div className={cx(kcProps.kcInputWrapperClass)}>
138
+ <div className={clsx(kcProps.kcInputWrapperClass)}>
141
139
  <input
142
140
  type="text"
143
141
  id="userLabel"
144
142
  name="userLabel"
145
143
  autoComplete="off"
146
- className={cx(kcProps.kcInputClass)}
144
+ className={clsx(kcProps.kcInputClass)}
147
145
  aria-invalid={messagesPerField.existsError("userLabel")}
148
146
  />
149
147
  {messagesPerField.existsError("userLabel") && (
150
- <span id="input-error-otp-label" className={cx(kcProps.kcInputErrorMessageClass)} aria-live="polite">
148
+ <span id="input-error-otp-label" className={clsx(kcProps.kcInputErrorMessageClass)} aria-live="polite">
151
149
  {messagesPerField.get("userLabel")}
152
150
  </span>
153
151
  )}
@@ -158,13 +156,13 @@ const LoginConfigTotp = memo((props: LoginConfigTotpProps) => {
158
156
  <>
159
157
  <input
160
158
  type="submit"
161
- className={cx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
159
+ className={clsx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
162
160
  id="saveTOTPBtn"
163
161
  value={msgStr("doSubmit")}
164
162
  />
165
163
  <button
166
164
  type="submit"
167
- className={cx(
165
+ className={clsx(
168
166
  kcProps.kcButtonClass,
169
167
  kcProps.kcButtonDefaultClass,
170
168
  kcProps.kcButtonLargeClass,
@@ -180,7 +178,7 @@ const LoginConfigTotp = memo((props: LoginConfigTotpProps) => {
180
178
  ) : (
181
179
  <input
182
180
  type="submit"
183
- className={cx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
181
+ className={clsx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
184
182
  id="saveTOTPBtn"
185
183
  value={msgStr("doSubmit")}
186
184
  />
package/src/lib/components/LoginIdpLinkConfirm.tsx CHANGED
@@ -3,7 +3,7 @@ import DefaultTemplate from "./Template";
3
3
  import type { TemplateProps } from "./Template";
4
4
  import type { KcProps } from "./KcProps";
5
5
  import type { KcContextBase } from "../getKcContext/KcContextBase";
6
- import { useCssAndCx } from "../tools/useCssAndCx";
6
+ import { clsx } from "../tools/clsx";
7
7
  import type { I18n } from "../i18n";
8
8
 
9
9
  export type LoginIdpLinkConfirmProps = KcProps & {
@@ -20,18 +20,16 @@ const LoginIdpLinkConfirm = memo((props: LoginIdpLinkConfirmProps) => {
20
20
 
21
21
  const { msg } = i18n;
22
22
 
23
- const { cx } = useCssAndCx();
24
-
25
23
  return (
26
24
  <Template
27
25
  {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
28
26
  headerNode={msg("confirmLinkIdpTitle")}
29
27
  formNode={
30
28
  <form id="kc-register-form" action={url.loginAction} method="post">
31
- <div className={cx(kcProps.kcFormGroupClass)}>
29
+ <div className={clsx(kcProps.kcFormGroupClass)}>
32
30
  <button
33
31
  type="submit"
34
- className={cx(
32
+ className={clsx(
35
33
  kcProps.kcButtonClass,
36
34
  kcProps.kcButtonDefaultClass,
37
35
  kcProps.kcButtonBlockClass,
@@ -45,7 +43,7 @@ const LoginIdpLinkConfirm = memo((props: LoginIdpLinkConfirmProps) => {
45
43
  </button>
46
44
  <button
47
45
  type="submit"
48
- className={cx(
46
+ className={clsx(
49
47
  kcProps.kcButtonClass,
50
48
  kcProps.kcButtonDefaultClass,
51
49
  kcProps.kcButtonBlockClass,
package/src/lib/components/LoginOtp.tsx CHANGED
@@ -5,7 +5,7 @@ import type { KcProps } from "./KcProps";
5
5
  import type { KcContextBase } from "../getKcContext/KcContextBase";
6
6
  import { headInsert } from "../tools/headInsert";
7
7
  import { pathJoin } from "../../bin/tools/pathJoin";
8
- import { useCssAndCx } from "../tools/useCssAndCx";
8
+ import { clsx } from "../tools/clsx";
9
9
  import type { I18n } from "../i18n";
10
10
 
11
11
  export type LoginOtpProps = KcProps & {
@@ -20,8 +20,6 @@ const LoginOtp = memo((props: LoginOtpProps) => {
20
20
 
21
21
  const { otpLogin, url } = kcContext;
22
22
 
23
- const { cx } = useCssAndCx();
24
-
25
23
  const { msg, msgStr } = i18n;
26
24
 
27
25
  useEffect(() => {
@@ -46,42 +44,42 @@ const LoginOtp = memo((props: LoginOtpProps) => {
46
44
  {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
47
45
  headerNode={msg("doLogIn")}
48
46
  formNode={
49
- <form id="kc-otp-login-form" className={cx(kcProps.kcFormClass)} action={url.loginAction} method="post">
47
+ <form id="kc-otp-login-form" className={clsx(kcProps.kcFormClass)} action={url.loginAction} method="post">
50
48
  {otpLogin.userOtpCredentials.length > 1 && (
51
- <div className={cx(kcProps.kcFormGroupClass)}>
52
- <div className={cx(kcProps.kcInputWrapperClass)}>
49
+ <div className={clsx(kcProps.kcFormGroupClass)}>
50
+ <div className={clsx(kcProps.kcInputWrapperClass)}>
53
51
  {otpLogin.userOtpCredentials.map(otpCredential => (
54
- <div key={otpCredential.id} className={cx(kcProps.kcSelectOTPListClass)}>
52
+ <div key={otpCredential.id} className={clsx(kcProps.kcSelectOTPListClass)}>
55
53
  <input type="hidden" value="${otpCredential.id}" />
56
- <div className={cx(kcProps.kcSelectOTPListItemClass)}>
57
- <span className={cx(kcProps.kcAuthenticatorOtpCircleClass)} />
58
- <h2 className={cx(kcProps.kcSelectOTPItemHeadingClass)}>{otpCredential.userLabel}</h2>
54
+ <div className={clsx(kcProps.kcSelectOTPListItemClass)}>
55
+ <span className={clsx(kcProps.kcAuthenticatorOtpCircleClass)} />
56
+ <h2 className={clsx(kcProps.kcSelectOTPItemHeadingClass)}>{otpCredential.userLabel}</h2>
59
57
  </div>
60
58
  </div>
61
59
  ))}
62
60
  </div>
63
61
  </div>
64
62
  )}
65
- <div className={cx(kcProps.kcFormGroupClass)}>
66
- <div className={cx(kcProps.kcLabelWrapperClass)}>
67
- <label htmlFor="otp" className={cx(kcProps.kcLabelClass)}>
63
+ <div className={clsx(kcProps.kcFormGroupClass)}>
64
+ <div className={clsx(kcProps.kcLabelWrapperClass)}>
65
+ <label htmlFor="otp" className={clsx(kcProps.kcLabelClass)}>
68
66
  {msg("loginOtpOneTime")}
69
67
  </label>
70
68
  </div>
71
69
 
72
- <div className={cx(kcProps.kcInputWrapperClass)}>
73
- <input id="otp" name="otp" autoComplete="off" type="text" className={cx(kcProps.kcInputClass)} autoFocus />
70
+ <div className={clsx(kcProps.kcInputWrapperClass)}>
71
+ <input id="otp" name="otp" autoComplete="off" type="text" className={clsx(kcProps.kcInputClass)} autoFocus />
74
72
  </div>
75
73
  </div>
76
74
 
77
- <div className={cx(kcProps.kcFormGroupClass)}>
78
- <div id="kc-form-options" className={cx(kcProps.kcFormOptionsClass)}>
79
- <div className={cx(kcProps.kcFormOptionsWrapperClass)} />
75
+ <div className={clsx(kcProps.kcFormGroupClass)}>
76
+ <div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
77
+ <div className={clsx(kcProps.kcFormOptionsWrapperClass)} />
80
78
  </div>
81
79
 
82
- <div id="kc-form-buttons" className={cx(kcProps.kcFormButtonsClass)}>
80
+ <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
83
81
  <input
84
- className={cx(
82
+ className={clsx(
85
83
  kcProps.kcButtonClass,
86
84
  kcProps.kcButtonPrimaryClass,
87
85
  kcProps.kcButtonBlockClass,
package/src/lib/components/LoginPassword.tsx CHANGED
@@ -3,7 +3,7 @@ import DefaultTemplate from "./Template";
3
3
  import type { TemplateProps } from "./Template";
4
4
  import type { KcProps } from "./KcProps";
5
5
  import type { KcContextBase } from "../getKcContext/KcContextBase";
6
- import { useCssAndCx } from "../tools/useCssAndCx";
6
+ import { clsx } from "../tools/clsx";
7
7
  import { useConstCallback } from "powerhooks/useConstCallback";
8
8
  import type { FormEventHandler } from "react";
9
9
  import type { I18n } from "../i18n";
@@ -22,8 +22,6 @@ const LoginPassword = memo((props: LoginPasswordProps) => {
22
22
 
23
23
  const { msg, msgStr } = i18n;
24
24
 
25
- const { cx } = useCssAndCx();
26
-
27
25
  const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
28
26
 
29
27
  const onSubmit = useConstCallback<FormEventHandler<HTMLFormElement>>(e => {
@@ -44,15 +42,15 @@ const LoginPassword = memo((props: LoginPasswordProps) => {
44
42
  <div id="kc-form">
45
43
  <div id="kc-form-wrapper">
46
44
  <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
47
- <div className={cx(kcProps.kcFormGroupClass)}>
45
+ <div className={clsx(kcProps.kcFormGroupClass)}>
48
46
  <hr />
49
- <label htmlFor="password" className={cx(kcProps.kcLabelClass)}>
47
+ <label htmlFor="password" className={clsx(kcProps.kcLabelClass)}>
50
48
  {msg("password")}
51
49
  </label>
52
50
  <input
53
51
  tabIndex={2}
54
52
  id="password"
55
- className={cx(kcProps.kcInputClass)}
53
+ className={clsx(kcProps.kcInputClass)}
56
54
  name="password"
57
55
  type="password"
58
56
  autoFocus={true}
@@ -60,9 +58,9 @@ const LoginPassword = memo((props: LoginPasswordProps) => {
60
58
  defaultValue={login.password ?? ""}
61
59
  />
62
60
  </div>
63
- <div className={cx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
61
+ <div className={clsx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
64
62
  <div id="kc-form-options" />
65
- <div className={cx(kcProps.kcFormOptionsWrapperClass)}>
63
+ <div className={clsx(kcProps.kcFormOptionsWrapperClass)}>
66
64
  {realm.resetPasswordAllowed && (
67
65
  <span>
68
66
  <a tabIndex={5} href={url.loginResetCredentialsUrl}>
@@ -72,10 +70,10 @@ const LoginPassword = memo((props: LoginPasswordProps) => {
72
70
  )}
73
71
  </div>
74
72
  </div>
75
- <div id="kc-form-buttons" className={cx(kcProps.kcFormGroupClass)}>
73
+ <div id="kc-form-buttons" className={clsx(kcProps.kcFormGroupClass)}>
76
74
  <input
77
75
  tabIndex={4}
78
- className={cx(
76
+ className={clsx(
79
77
  kcProps.kcButtonClass,
80
78
  kcProps.kcButtonPrimaryClass,
81
79
  kcProps.kcButtonBlockClass,
package/src/lib/components/LoginResetPassword.tsx CHANGED
@@ -3,7 +3,7 @@ import DefaultTemplate from "./Template";
3
3
  import type { TemplateProps } from "./Template";
4
4
  import type { KcProps } from "./KcProps";
5
5
  import type { KcContextBase } from "../getKcContext/KcContextBase";
6
- import { useCssAndCx } from "../tools/useCssAndCx";
6
+ import { clsx } from "../tools/clsx";
7
7
  import type { I18n } from "../i18n";
8
8
 
9
9
  export type LoginResetPasswordProps = KcProps & {
@@ -20,18 +20,16 @@ const LoginResetPassword = memo((props: LoginResetPasswordProps) => {
20
20
 
21
21
  const { msg, msgStr } = i18n;
22
22
 
23
- const { cx } = useCssAndCx();
24
-
25
23
  return (
26
24
  <Template
27
25
  {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
28
26
  displayMessage={false}
29
27
  headerNode={msg("emailForgotTitle")}
30
28
  formNode={
31
- <form id="kc-reset-password-form" className={cx(kcProps.kcFormClass)} action={url.loginAction} method="post">
32
- <div className={cx(kcProps.kcFormGroupClass)}>
33
- <div className={cx(kcProps.kcLabelWrapperClass)}>
34
- <label htmlFor="username" className={cx(kcProps.kcLabelClass)}>
29
+ <form id="kc-reset-password-form" className={clsx(kcProps.kcFormClass)} action={url.loginAction} method="post">
30
+ <div className={clsx(kcProps.kcFormGroupClass)}>
31
+ <div className={clsx(kcProps.kcLabelWrapperClass)}>
32
+ <label htmlFor="username" className={clsx(kcProps.kcLabelClass)}>
35
33
  {!realm.loginWithEmailAllowed
36
34
  ? msg("username")
37
35
  : !realm.registrationEmailAsUsername
@@ -39,29 +37,29 @@ const LoginResetPassword = memo((props: LoginResetPasswordProps) => {
39
37
  : msg("email")}
40
38
  </label>
41
39
  </div>
42
- <div className={cx(kcProps.kcInputWrapperClass)}>
40
+ <div className={clsx(kcProps.kcInputWrapperClass)}>
43
41
  <input
44
42
  type="text"
45
43
  id="username"
46
44
  name="username"
47
- className={cx(kcProps.kcInputClass)}
45
+ className={clsx(kcProps.kcInputClass)}
48
46
  autoFocus
49
47
  defaultValue={auth !== undefined && auth.showUsername ? auth.attemptedUsername : undefined}
50
48
  />
51
49
  </div>
52
50
  </div>
53
- <div className={cx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
54
- <div id="kc-form-options" className={cx(kcProps.kcFormOptionsClass)}>
55
- <div className={cx(kcProps.kcFormOptionsWrapperClass)}>
51
+ <div className={clsx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
52
+ <div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
53
+ <div className={clsx(kcProps.kcFormOptionsWrapperClass)}>
56
54
  <span>
57
55
  <a href={url.loginUrl}>{msg("backToLogin")}</a>
58
56
  </span>
59
57
  </div>
60
58
  </div>
61
59
 
62
- <div id="kc-form-buttons" className={cx(kcProps.kcFormButtonsClass)}>
60
+ <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
63
61
  <input
64
- className={cx(
62
+ className={clsx(
65
63
  kcProps.kcButtonClass,
66
64
  kcProps.kcButtonPrimaryClass,
67
65
  kcProps.kcButtonBlockClass,