keycloakify 6.3.6 → 6.4.0

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 (78) hide show
  1. package/README.md +6 -0
  2. package/lib/components/Error.d.ts +2 -1
  3. package/lib/components/Error.js +2 -2
  4. package/lib/components/Error.js.map +1 -1
  5. package/lib/components/IdpReviewUserProfile.d.ts +2 -1
  6. package/lib/components/IdpReviewUserProfile.js +2 -2
  7. package/lib/components/IdpReviewUserProfile.js.map +1 -1
  8. package/lib/components/Info.d.ts +2 -1
  9. package/lib/components/Info.js +2 -2
  10. package/lib/components/Info.js.map +1 -1
  11. package/lib/components/KcApp.d.ts +1 -0
  12. package/lib/components/KcApp.js.map +1 -1
  13. package/lib/components/Login.d.ts +2 -1
  14. package/lib/components/Login.js +2 -2
  15. package/lib/components/Login.js.map +1 -1
  16. package/lib/components/LoginConfigTotp.d.ts +2 -1
  17. package/lib/components/LoginConfigTotp.js +2 -2
  18. package/lib/components/LoginConfigTotp.js.map +1 -1
  19. package/lib/components/LoginIdpLinkConfirm.d.ts +2 -1
  20. package/lib/components/LoginIdpLinkConfirm.js +2 -2
  21. package/lib/components/LoginIdpLinkConfirm.js.map +1 -1
  22. package/lib/components/LoginIdpLinkEmail.d.ts +2 -1
  23. package/lib/components/LoginIdpLinkEmail.js +2 -2
  24. package/lib/components/LoginIdpLinkEmail.js.map +1 -1
  25. package/lib/components/LoginOtp.d.ts +2 -1
  26. package/lib/components/LoginOtp.js +2 -2
  27. package/lib/components/LoginOtp.js.map +1 -1
  28. package/lib/components/LoginPageExpired.d.ts +2 -1
  29. package/lib/components/LoginPageExpired.js +2 -2
  30. package/lib/components/LoginPageExpired.js.map +1 -1
  31. package/lib/components/LoginResetPassword.d.ts +2 -1
  32. package/lib/components/LoginResetPassword.js +2 -2
  33. package/lib/components/LoginResetPassword.js.map +1 -1
  34. package/lib/components/LoginUpdatePassword.d.ts +2 -1
  35. package/lib/components/LoginUpdatePassword.js +2 -2
  36. package/lib/components/LoginUpdatePassword.js.map +1 -1
  37. package/lib/components/LoginUpdateProfile.d.ts +2 -1
  38. package/lib/components/LoginUpdateProfile.js +2 -2
  39. package/lib/components/LoginUpdateProfile.js.map +1 -1
  40. package/lib/components/LoginVerifyEmail.d.ts +2 -1
  41. package/lib/components/LoginVerifyEmail.js +2 -2
  42. package/lib/components/LoginVerifyEmail.js.map +1 -1
  43. package/lib/components/LogoutConfirm.d.ts +2 -1
  44. package/lib/components/LogoutConfirm.js +2 -2
  45. package/lib/components/LogoutConfirm.js.map +1 -1
  46. package/lib/components/Register.d.ts +2 -1
  47. package/lib/components/Register.js +2 -2
  48. package/lib/components/Register.js.map +1 -1
  49. package/lib/components/RegisterUserProfile.d.ts +2 -1
  50. package/lib/components/RegisterUserProfile.js +2 -2
  51. package/lib/components/RegisterUserProfile.js.map +1 -1
  52. package/lib/components/Terms.d.ts +2 -1
  53. package/lib/components/Terms.js +2 -2
  54. package/lib/components/Terms.js.map +1 -1
  55. package/lib/components/UpdateUserProfile.d.ts +2 -1
  56. package/lib/components/UpdateUserProfile.js +2 -2
  57. package/lib/components/UpdateUserProfile.js.map +1 -1
  58. package/lib/tsconfig.tsbuildinfo +1 -1
  59. package/package.json +1 -1
  60. package/src/lib/components/Error.tsx +30 -24
  61. package/src/lib/components/IdpReviewUserProfile.tsx +41 -30
  62. package/src/lib/components/Info.tsx +41 -35
  63. package/src/lib/components/KcApp.tsx +64 -58
  64. package/src/lib/components/Login.tsx +174 -166
  65. package/src/lib/components/LoginConfigTotp.tsx +158 -152
  66. package/src/lib/components/LoginIdpLinkConfirm.tsx +42 -36
  67. package/src/lib/components/LoginIdpLinkEmail.tsx +30 -24
  68. package/src/lib/components/LoginOtp.tsx +75 -64
  69. package/src/lib/components/LoginPageExpired.tsx +34 -28
  70. package/src/lib/components/LoginResetPassword.tsx +63 -52
  71. package/src/lib/components/LoginUpdatePassword.tsx +101 -95
  72. package/src/lib/components/LoginUpdateProfile.tsx +103 -91
  73. package/src/lib/components/LoginVerifyEmail.tsx +30 -24
  74. package/src/lib/components/LogoutConfirm.tsx +53 -47
  75. package/src/lib/components/Register.tsx +126 -115
  76. package/src/lib/components/RegisterUserProfile.tsx +59 -48
  77. package/src/lib/components/Terms.tsx +51 -45
  78. package/src/lib/components/UpdateUserProfile.tsx +57 -51
package/src/lib/components/LoginUpdateProfile.tsx CHANGED
@@ -5,118 +5,130 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
5
5
  import { useCssAndCx } from "../tools/useCssAndCx";
6
6
  import type { I18n } from "../i18n";
7
7
 
8
- const LoginUpdateProfile = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginUpdateProfile; i18n: I18n } & KcProps) => {
9
- const { cx } = useCssAndCx();
8
+ const LoginUpdateProfile = memo(
9
+ ({
10
+ kcContext,
11
+ i18n,
12
+ doFetchDefaultThemeResources = true,
13
+ ...props
14
+ }: { kcContext: KcContextBase.LoginUpdateProfile; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
15
+ const { cx } = useCssAndCx();
10
16
 
11
- const { msg, msgStr } = i18n;
17
+ const { msg, msgStr } = i18n;
12
18
 
13
- const { url, user, messagesPerField, isAppInitiatedAction } = kcContext;
19
+ const { url, user, messagesPerField, isAppInitiatedAction } = kcContext;
14
20
 
15
- return (
16
- <Template
17
- {...{ kcContext, i18n, ...props }}
18
- doFetchDefaultThemeResources={true}
19
- headerNode={msg("loginProfileTitle")}
20
- formNode={
21
- <form id="kc-update-profile-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
22
- {user.editUsernameAllowed && (
23
- <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("username", props.kcFormGroupErrorClass))}>
21
+ return (
22
+ <Template
23
+ {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
24
+ headerNode={msg("loginProfileTitle")}
25
+ formNode={
26
+ <form id="kc-update-profile-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
27
+ {user.editUsernameAllowed && (
28
+ <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("username", props.kcFormGroupErrorClass))}>
29
+ <div className={cx(props.kcLabelWrapperClass)}>
30
+ <label htmlFor="username" className={cx(props.kcLabelClass)}>
31
+ {msg("username")}
32
+ </label>
33
+ </div>
34
+ <div className={cx(props.kcInputWrapperClass)}>
35
+ <input
36
+ type="text"
37
+ id="username"
38
+ name="username"
39
+ defaultValue={user.username ?? ""}
40
+ className={cx(props.kcInputClass)}
41
+ />
42
+ </div>
43
+ </div>
44
+ )}
45
+
46
+ <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("email", props.kcFormGroupErrorClass))}>
24
47
  <div className={cx(props.kcLabelWrapperClass)}>
25
- <label htmlFor="username" className={cx(props.kcLabelClass)}>
26
- {msg("username")}
48
+ <label htmlFor="email" className={cx(props.kcLabelClass)}>
49
+ {msg("email")}
50
+ </label>
51
+ </div>
52
+ <div className={cx(props.kcInputWrapperClass)}>
53
+ <input type="text" id="email" name="email" defaultValue={user.email ?? ""} className={cx(props.kcInputClass)} />
54
+ </div>
55
+ </div>
56
+
57
+ <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("firstName", props.kcFormGroupErrorClass))}>
58
+ <div className={cx(props.kcLabelWrapperClass)}>
59
+ <label htmlFor="firstName" className={cx(props.kcLabelClass)}>
60
+ {msg("firstName")}
27
61
  </label>
28
62
  </div>
29
63
  <div className={cx(props.kcInputWrapperClass)}>
30
64
  <input
31
65
  type="text"
32
- id="username"
33
- name="username"
34
- defaultValue={user.username ?? ""}
66
+ id="firstName"
67
+ name="firstName"
68
+ defaultValue={user.firstName ?? ""}
35
69
  className={cx(props.kcInputClass)}
36
70
  />
37
71
  </div>
38
72
  </div>
39
- )}
40
-
41
- <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("email", props.kcFormGroupErrorClass))}>
42
- <div className={cx(props.kcLabelWrapperClass)}>
43
- <label htmlFor="email" className={cx(props.kcLabelClass)}>
44
- {msg("email")}
45
- </label>
46
- </div>
47
- <div className={cx(props.kcInputWrapperClass)}>
48
- <input type="text" id="email" name="email" defaultValue={user.email ?? ""} className={cx(props.kcInputClass)} />
49
- </div>
50
- </div>
51
-
52
- <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("firstName", props.kcFormGroupErrorClass))}>
53
- <div className={cx(props.kcLabelWrapperClass)}>
54
- <label htmlFor="firstName" className={cx(props.kcLabelClass)}>
55
- {msg("firstName")}
56
- </label>
57
- </div>
58
- <div className={cx(props.kcInputWrapperClass)}>
59
- <input
60
- type="text"
61
- id="firstName"
62
- name="firstName"
63
- defaultValue={user.firstName ?? ""}
64
- className={cx(props.kcInputClass)}
65
- />
66
- </div>
67
- </div>
68
73
 
69
- <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("lastName", props.kcFormGroupErrorClass))}>
70
- <div className={cx(props.kcLabelWrapperClass)}>
71
- <label htmlFor="lastName" className={cx(props.kcLabelClass)}>
72
- {msg("lastName")}
73
- </label>
74
- </div>
75
- <div className={cx(props.kcInputWrapperClass)}>
76
- <input type="text" id="lastName" name="lastName" defaultValue={user.lastName ?? ""} className={cx(props.kcInputClass)} />
74
+ <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("lastName", props.kcFormGroupErrorClass))}>
75
+ <div className={cx(props.kcLabelWrapperClass)}>
76
+ <label htmlFor="lastName" className={cx(props.kcLabelClass)}>
77
+ {msg("lastName")}
78
+ </label>
79
+ </div>
80
+ <div className={cx(props.kcInputWrapperClass)}>
81
+ <input
82
+ type="text"
83
+ id="lastName"
84
+ name="lastName"
85
+ defaultValue={user.lastName ?? ""}
86
+ className={cx(props.kcInputClass)}
87
+ />
88
+ </div>
77
89
  </div>
78
- </div>
79
90
 
80
- <div className={cx(props.kcFormGroupClass)}>
81
- <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
82
- <div className={cx(props.kcFormOptionsWrapperClass)} />
83
- </div>
91
+ <div className={cx(props.kcFormGroupClass)}>
92
+ <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
93
+ <div className={cx(props.kcFormOptionsWrapperClass)} />
94
+ </div>
84
95
 
85
- <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
86
- {isAppInitiatedAction ? (
87
- <>
96
+ <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
97
+ {isAppInitiatedAction ? (
98
+ <>
99
+ <input
100
+ className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
101
+ type="submit"
102
+ defaultValue={msgStr("doSubmit")}
103
+ />
104
+ <button
105
+ className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonLargeClass)}
106
+ type="submit"
107
+ name="cancel-aia"
108
+ value="true"
109
+ >
110
+ {msg("doCancel")}
111
+ </button>
112
+ </>
113
+ ) : (
88
114
  <input
89
- className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
115
+ className={cx(
116
+ props.kcButtonClass,
117
+ props.kcButtonPrimaryClass,
118
+ props.kcButtonBlockClass,
119
+ props.kcButtonLargeClass
120
+ )}
90
121
  type="submit"
91
122
  defaultValue={msgStr("doSubmit")}
92
123
  />
93
- <button
94
- className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonLargeClass)}
95
- type="submit"
96
- name="cancel-aia"
97
- value="true"
98
- >
99
- {msg("doCancel")}
100
- </button>
101
- </>
102
- ) : (
103
- <input
104
- className={cx(
105
- props.kcButtonClass,
106
- props.kcButtonPrimaryClass,
107
- props.kcButtonBlockClass,
108
- props.kcButtonLargeClass
109
- )}
110
- type="submit"
111
- defaultValue={msgStr("doSubmit")}
112
- />
113
- )}
124
+ )}
125
+ </div>
114
126
  </div>
115
- </div>
116
- </form>
117
- }
118
- />
119
- );
120
- });
127
+ </form>
128
+ }
129
+ />
130
+ );
131
+ }
132
+ );
121
133
 
122
134
  export default LoginUpdateProfile;
package/src/lib/components/LoginVerifyEmail.tsx CHANGED
@@ -4,31 +4,37 @@ import type { KcProps } from "./KcProps";
4
4
  import type { KcContextBase } from "../getKcContext/KcContextBase";
5
5
  import type { I18n } from "../i18n";
6
6
 
7
- const LoginVerifyEmail = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginVerifyEmail; i18n: I18n } & KcProps) => {
8
- const { msg } = i18n;
7
+ const LoginVerifyEmail = memo(
8
+ ({
9
+ kcContext,
10
+ i18n,
11
+ doFetchDefaultThemeResources = true,
12
+ ...props
13
+ }: { kcContext: KcContextBase.LoginVerifyEmail; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
14
+ const { msg } = i18n;
9
15
 
10
- const { url, user } = kcContext;
16
+ const { url, user } = kcContext;
11
17
 
12
- return (
13
- <Template
14
- {...{ kcContext, i18n, ...props }}
15
- doFetchDefaultThemeResources={true}
16
- displayMessage={false}
17
- headerNode={msg("emailVerifyTitle")}
18
- formNode={
19
- <>
20
- <p className="instruction">{msg("emailVerifyInstruction1", user?.email)}</p>
21
- <p className="instruction">
22
- {msg("emailVerifyInstruction2")}
23
- <br />
24
- <a href={url.loginAction}>{msg("doClickHere")}</a>
25
- &nbsp;
26
- {msg("emailVerifyInstruction3")}
27
- </p>
28
- </>
29
- }
30
- />
31
- );
32
- });
18
+ return (
19
+ <Template
20
+ {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
21
+ displayMessage={false}
22
+ headerNode={msg("emailVerifyTitle")}
23
+ formNode={
24
+ <>
25
+ <p className="instruction">{msg("emailVerifyInstruction1", user?.email)}</p>
26
+ <p className="instruction">
27
+ {msg("emailVerifyInstruction2")}
28
+ <br />
29
+ <a href={url.loginAction}>{msg("doClickHere")}</a>
30
+ &nbsp;
31
+ {msg("emailVerifyInstruction3")}
32
+ </p>
33
+ </>
34
+ }
35
+ />
36
+ );
37
+ }
38
+ );
33
39
 
34
40
  export default LoginVerifyEmail;
package/src/lib/components/LogoutConfirm.tsx CHANGED
@@ -5,58 +5,64 @@ import type { KcProps } from "./KcProps";
5
5
  import type { KcContextBase } from "../getKcContext/KcContextBase";
6
6
  import type { I18n } from "../i18n";
7
7
 
8
- const LogoutConfirm = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LogoutConfirm; i18n: I18n } & KcProps) => {
9
- const { url, client, logoutConfirm } = kcContext;
8
+ const LogoutConfirm = memo(
9
+ ({
10
+ kcContext,
11
+ i18n,
12
+ doFetchDefaultThemeResources = true,
13
+ ...props
14
+ }: { kcContext: KcContextBase.LogoutConfirm; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
15
+ const { url, client, logoutConfirm } = kcContext;
10
16
 
11
- const { cx } = useCssAndCx();
17
+ const { cx } = useCssAndCx();
12
18
 
13
- const { msg, msgStr } = i18n;
19
+ const { msg, msgStr } = i18n;
14
20
 
15
- return (
16
- <Template
17
- {...{ kcContext, i18n, ...props }}
18
- doFetchDefaultThemeResources={true}
19
- displayMessage={false}
20
- headerNode={msg("logoutConfirmTitle")}
21
- formNode={
22
- <>
23
- <div id="kc-logout-confirm" className="content-area">
24
- <p className="instruction">{msg("logoutConfirmHeader")}</p>
25
- <form className="form-actions" action={url.logoutConfirmAction} method="POST">
26
- <input type="hidden" name="session_code" value={logoutConfirm.code} />
27
- <div className={cx(props.kcFormGroupClass)}>
28
- <div id="kc-form-options">
29
- <div className={cx(props.kcFormOptionsWrapperClass)}></div>
30
- </div>
31
- <div id="kc-form-buttons" className={cx(props.kcFormGroupClass)}>
32
- <input
33
- tabIndex={4}
34
- className={cx(
35
- props.kcButtonClass,
36
- props.kcButtonPrimaryClass,
37
- props.kcButtonBlockClass,
38
- props.kcButtonLargeClass
39
- )}
40
- name="confirmLogout"
41
- id="kc-logout"
42
- type="submit"
43
- value={msgStr("doLogout")}
44
- />
21
+ return (
22
+ <Template
23
+ {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
24
+ displayMessage={false}
25
+ headerNode={msg("logoutConfirmTitle")}
26
+ formNode={
27
+ <>
28
+ <div id="kc-logout-confirm" className="content-area">
29
+ <p className="instruction">{msg("logoutConfirmHeader")}</p>
30
+ <form className="form-actions" action={url.logoutConfirmAction} method="POST">
31
+ <input type="hidden" name="session_code" value={logoutConfirm.code} />
32
+ <div className={cx(props.kcFormGroupClass)}>
33
+ <div id="kc-form-options">
34
+ <div className={cx(props.kcFormOptionsWrapperClass)}></div>
35
+ </div>
36
+ <div id="kc-form-buttons" className={cx(props.kcFormGroupClass)}>
37
+ <input
38
+ tabIndex={4}
39
+ className={cx(
40
+ props.kcButtonClass,
41
+ props.kcButtonPrimaryClass,
42
+ props.kcButtonBlockClass,
43
+ props.kcButtonLargeClass
44
+ )}
45
+ name="confirmLogout"
46
+ id="kc-logout"
47
+ type="submit"
48
+ value={msgStr("doLogout")}
49
+ />
50
+ </div>
45
51
  </div>
52
+ </form>
53
+ <div id="kc-info-message">
54
+ {!logoutConfirm.skipLink && client.baseUrl && (
55
+ <p>
56
+ <a href={client.baseUrl} dangerouslySetInnerHTML={{ __html: msgStr("backToApplication") }} />
57
+ </p>
58
+ )}
46
59
  </div>
47
- </form>
48
- <div id="kc-info-message">
49
- {!logoutConfirm.skipLink && client.baseUrl && (
50
- <p>
51
- <a href={client.baseUrl} dangerouslySetInnerHTML={{ __html: msgStr("backToApplication") }} />
52
- </p>
53
- )}
54
60
  </div>
55
- </div>
56
- </>
57
- }
58
- />
59
- );
60
- });
61
+ </>
62
+ }
63
+ />
64
+ );
65
+ }
66
+ );
61
67
 
62
68
  export default LogoutConfirm;