keycloakify 5.4.4 → 6.0.0-beta.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 (85) hide show
  1. package/kcMessages.d.ts +1 -0
  2. package/kcMessages.js +14 -0
  3. package/kcMessages.js.map +1 -0
  4. package/lib/components/Error.d.ts +3 -1
  5. package/lib/components/Error.js +3 -4
  6. package/lib/components/Error.js.map +1 -1
  7. package/lib/components/Info.d.ts +3 -1
  8. package/lib/components/Info.js +3 -4
  9. package/lib/components/Info.js.map +1 -1
  10. package/lib/components/KcApp.d.ts +3 -1
  11. package/lib/components/KcApp.js +15 -15
  12. package/lib/components/KcApp.js.map +1 -1
  13. package/lib/components/Login.d.ts +3 -1
  14. package/lib/components/Login.js +3 -4
  15. package/lib/components/Login.js.map +1 -1
  16. package/lib/components/LoginIdpLinkConfirm.d.ts +3 -1
  17. package/lib/components/LoginIdpLinkConfirm.js +3 -4
  18. package/lib/components/LoginIdpLinkConfirm.js.map +1 -1
  19. package/lib/components/LoginIdpLinkEmail.d.ts +3 -1
  20. package/lib/components/LoginIdpLinkEmail.js +3 -4
  21. package/lib/components/LoginIdpLinkEmail.js.map +1 -1
  22. package/lib/components/LoginOtp.d.ts +3 -1
  23. package/lib/components/LoginOtp.js +3 -4
  24. package/lib/components/LoginOtp.js.map +1 -1
  25. package/lib/components/LoginPageExpired.d.ts +3 -1
  26. package/lib/components/LoginPageExpired.js +3 -4
  27. package/lib/components/LoginPageExpired.js.map +1 -1
  28. package/lib/components/LoginResetPassword.d.ts +3 -1
  29. package/lib/components/LoginResetPassword.js +3 -4
  30. package/lib/components/LoginResetPassword.js.map +1 -1
  31. package/lib/components/LoginUpdatePassword.d.ts +3 -1
  32. package/lib/components/LoginUpdatePassword.js +3 -4
  33. package/lib/components/LoginUpdatePassword.js.map +1 -1
  34. package/lib/components/LoginUpdateProfile.d.ts +3 -1
  35. package/lib/components/LoginUpdateProfile.js +3 -4
  36. package/lib/components/LoginUpdateProfile.js.map +1 -1
  37. package/lib/components/LoginVerifyEmail.d.ts +3 -1
  38. package/lib/components/LoginVerifyEmail.js +3 -4
  39. package/lib/components/LoginVerifyEmail.js.map +1 -1
  40. package/lib/components/Register.d.ts +3 -1
  41. package/lib/components/Register.js +3 -4
  42. package/lib/components/Register.js.map +1 -1
  43. package/lib/components/RegisterUserProfile.d.ts +3 -1
  44. package/lib/components/RegisterUserProfile.js +6 -6
  45. package/lib/components/RegisterUserProfile.js.map +1 -1
  46. package/lib/components/Template.d.ts +2 -0
  47. package/lib/components/Template.js +2 -2
  48. package/lib/components/Template.js.map +1 -1
  49. package/lib/components/Terms.d.ts +4 -2
  50. package/lib/components/Terms.js +8 -8
  51. package/lib/components/Terms.js.map +1 -1
  52. package/lib/i18n/index.d.ts +17 -5248
  53. package/lib/i18n/index.js +76 -51
  54. package/lib/i18n/index.js.map +1 -1
  55. package/lib/i18n/kcMessages.d.ts +5222 -0
  56. package/lib/i18n/kcMessages.js +19 -0
  57. package/lib/i18n/kcMessages.js.map +1 -0
  58. package/lib/tools/createObjectThatThrowsIfAccessed.d.ts +3 -0
  59. package/lib/tools/createObjectThatThrowsIfAccessed.js +39 -0
  60. package/lib/tools/createObjectThatThrowsIfAccessed.js.map +1 -0
  61. package/lib/useFormValidationSlice.d.ts +3 -0
  62. package/lib/useFormValidationSlice.js +4 -4
  63. package/lib/useFormValidationSlice.js.map +1 -1
  64. package/package.json +13 -2
  65. package/src/kcMessages.ts +1 -0
  66. package/src/lib/components/Error.tsx +4 -4
  67. package/src/lib/components/Info.tsx +5 -5
  68. package/src/lib/components/KcApp.tsx +16 -15
  69. package/src/lib/components/Login.tsx +4 -4
  70. package/src/lib/components/LoginIdpLinkConfirm.tsx +39 -37
  71. package/src/lib/components/LoginIdpLinkEmail.tsx +27 -25
  72. package/src/lib/components/LoginOtp.tsx +4 -4
  73. package/src/lib/components/LoginPageExpired.tsx +31 -29
  74. package/src/lib/components/LoginResetPassword.tsx +60 -53
  75. package/src/lib/components/LoginUpdatePassword.tsx +98 -96
  76. package/src/lib/components/LoginUpdateProfile.tsx +100 -92
  77. package/src/lib/components/LoginVerifyEmail.tsx +25 -23
  78. package/src/lib/components/Register.tsx +4 -4
  79. package/src/lib/components/RegisterUserProfile.tsx +68 -55
  80. package/src/lib/components/Template.tsx +5 -3
  81. package/src/lib/components/Terms.tsx +14 -8
  82. package/src/lib/i18n/index.tsx +76 -49
  83. package/src/lib/i18n/kcMessages.ts +24 -0
  84. package/src/lib/tools/createObjectThatThrowsIfAccessed.ts +18 -0
  85. package/src/lib/useFormValidationSlice.tsx +7 -4
package/src/lib/components/LoginResetPassword.tsx CHANGED
@@ -2,65 +2,72 @@ import { memo } from "react";
2
2
  import { Template } from "./Template";
3
3
  import type { KcProps } from "./KcProps";
4
4
  import type { KcContextBase } from "../getKcContext/KcContextBase";
5
- import { getMsg } from "../i18n";
5
+ import type { I18n } from "../i18n";
6
6
  import { useCssAndCx } from "tss-react";
7
7
 
8
- export const LoginResetPassword = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginResetPassword } & KcProps) => {
9
- const { url, realm, auth } = kcContext;
8
+ export const LoginResetPassword = memo(
9
+ ({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.LoginResetPassword; useI18n: () => I18n } & KcProps) => {
10
+ const { url, realm, auth } = kcContext;
10
11
 
11
- const { msg, msgStr } = getMsg(kcContext);
12
+ const { msg, msgStr } = useI18n();
12
13
 
13
- const { cx } = useCssAndCx();
14
+ const { cx } = useCssAndCx();
14
15
 
15
- return (
16
- <Template
17
- {...{ kcContext, ...props }}
18
- doFetchDefaultThemeResources={true}
19
- displayMessage={false}
20
- headerNode={msg("emailForgotTitle")}
21
- formNode={
22
- <form id="kc-reset-password-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
23
- <div className={cx(props.kcFormGroupClass)}>
24
- <div className={cx(props.kcLabelWrapperClass)}>
25
- <label htmlFor="username" className={cx(props.kcLabelClass)}>
26
- {!realm.loginWithEmailAllowed
27
- ? msg("username")
28
- : !realm.registrationEmailAsUsername
29
- ? msg("usernameOrEmail")
30
- : msg("email")}
31
- </label>
32
- </div>
33
- <div className={cx(props.kcInputWrapperClass)}>
34
- <input
35
- type="text"
36
- id="username"
37
- name="username"
38
- className={cx(props.kcInputClass)}
39
- autoFocus
40
- defaultValue={auth !== undefined && auth.showUsername ? auth.attemptedUsername : undefined}
41
- />
42
- </div>
43
- </div>
44
- <div className={cx(props.kcFormGroupClass, props.kcFormSettingClass)}>
45
- <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
46
- <div className={cx(props.kcFormOptionsWrapperClass)}>
47
- <span>
48
- <a href={url.loginUrl}>{msg("backToLogin")}</a>
49
- </span>
16
+ return (
17
+ <Template
18
+ {...{ kcContext, useI18n, ...props }}
19
+ doFetchDefaultThemeResources={true}
20
+ displayMessage={false}
21
+ headerNode={msg("emailForgotTitle")}
22
+ formNode={
23
+ <form id="kc-reset-password-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
24
+ <div className={cx(props.kcFormGroupClass)}>
25
+ <div className={cx(props.kcLabelWrapperClass)}>
26
+ <label htmlFor="username" className={cx(props.kcLabelClass)}>
27
+ {!realm.loginWithEmailAllowed
28
+ ? msg("username")
29
+ : !realm.registrationEmailAsUsername
30
+ ? msg("usernameOrEmail")
31
+ : msg("email")}
32
+ </label>
33
+ </div>
34
+ <div className={cx(props.kcInputWrapperClass)}>
35
+ <input
36
+ type="text"
37
+ id="username"
38
+ name="username"
39
+ className={cx(props.kcInputClass)}
40
+ autoFocus
41
+ defaultValue={auth !== undefined && auth.showUsername ? auth.attemptedUsername : undefined}
42
+ />
50
43
  </div>
51
44
  </div>
45
+ <div className={cx(props.kcFormGroupClass, props.kcFormSettingClass)}>
46
+ <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
47
+ <div className={cx(props.kcFormOptionsWrapperClass)}>
48
+ <span>
49
+ <a href={url.loginUrl}>{msg("backToLogin")}</a>
50
+ </span>
51
+ </div>
52
+ </div>
52
53
 
53
- <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
54
- <input
55
- className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
56
- type="submit"
57
- value={msgStr("doSubmit")}
58
- />
54
+ <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
55
+ <input
56
+ className={cx(
57
+ props.kcButtonClass,
58
+ props.kcButtonPrimaryClass,
59
+ props.kcButtonBlockClass,
60
+ props.kcButtonLargeClass,
61
+ )}
62
+ type="submit"
63
+ value={msgStr("doSubmit")}
64
+ />
65
+ </div>
59
66
  </div>
60
- </div>
61
- </form>
62
- }
63
- infoNode={msg("emailInstruction")}
64
- />
65
- );
66
- });
67
+ </form>
68
+ }
69
+ infoNode={msg("emailInstruction")}
70
+ />
71
+ );
72
+ },
73
+ );
package/src/lib/components/LoginUpdatePassword.tsx CHANGED
@@ -2,116 +2,118 @@ import { memo } from "react";
2
2
  import { Template } from "./Template";
3
3
  import type { KcProps } from "./KcProps";
4
4
  import type { KcContextBase } from "../getKcContext/KcContextBase";
5
- import { getMsg } from "../i18n";
5
+ import type { I18n } from "../i18n";
6
6
  import { useCssAndCx } from "tss-react";
7
7
 
8
- export const LoginUpdatePassword = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginUpdatePassword } & KcProps) => {
9
- const { cx } = useCssAndCx();
8
+ export const LoginUpdatePassword = memo(
9
+ ({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.LoginUpdatePassword; useI18n: () => I18n } & KcProps) => {
10
+ const { cx } = useCssAndCx();
10
11
 
11
- const { msg, msgStr } = getMsg(kcContext);
12
+ const { msg, msgStr } = useI18n();
12
13
 
13
- const { url, messagesPerField, isAppInitiatedAction, username } = kcContext;
14
+ const { url, messagesPerField, isAppInitiatedAction, username } = kcContext;
14
15
 
15
- return (
16
- <Template
17
- {...{ kcContext, ...props }}
18
- doFetchDefaultThemeResources={true}
19
- headerNode={msg("updatePasswordTitle")}
20
- formNode={
21
- <form id="kc-passwd-update-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
22
- <input
23
- type="text"
24
- id="username"
25
- name="username"
26
- value={username}
27
- readOnly={true}
28
- autoComplete="username"
29
- style={{ display: "none" }}
30
- />
31
- <input type="password" id="password" name="password" autoComplete="current-password" style={{ display: "none" }} />
16
+ return (
17
+ <Template
18
+ {...{ kcContext, useI18n, ...props }}
19
+ doFetchDefaultThemeResources={true}
20
+ headerNode={msg("updatePasswordTitle")}
21
+ formNode={
22
+ <form id="kc-passwd-update-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
23
+ <input
24
+ type="text"
25
+ id="username"
26
+ name="username"
27
+ value={username}
28
+ readOnly={true}
29
+ autoComplete="username"
30
+ style={{ display: "none" }}
31
+ />
32
+ <input type="password" id="password" name="password" autoComplete="current-password" style={{ display: "none" }} />
32
33
 
33
- <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("password", props.kcFormGroupErrorClass))}>
34
- <div className={cx(props.kcLabelWrapperClass)}>
35
- <label htmlFor="password-new" className={cx(props.kcLabelClass)}>
36
- {msg("passwordNew")}
37
- </label>
38
- </div>
39
- <div className={cx(props.kcInputWrapperClass)}>
40
- <input
41
- type="password"
42
- id="password-new"
43
- name="password-new"
44
- autoFocus
45
- autoComplete="new-password"
46
- className={cx(props.kcInputClass)}
47
- />
34
+ <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("password", props.kcFormGroupErrorClass))}>
35
+ <div className={cx(props.kcLabelWrapperClass)}>
36
+ <label htmlFor="password-new" className={cx(props.kcLabelClass)}>
37
+ {msg("passwordNew")}
38
+ </label>
39
+ </div>
40
+ <div className={cx(props.kcInputWrapperClass)}>
41
+ <input
42
+ type="password"
43
+ id="password-new"
44
+ name="password-new"
45
+ autoFocus
46
+ autoComplete="new-password"
47
+ className={cx(props.kcInputClass)}
48
+ />
49
+ </div>
48
50
  </div>
49
- </div>
50
51
 
51
- <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("password-confirm", props.kcFormGroupErrorClass))}>
52
- <div className={cx(props.kcLabelWrapperClass)}>
53
- <label htmlFor="password-confirm" className={cx(props.kcLabelClass)}>
54
- {msg("passwordConfirm")}
55
- </label>
56
- </div>
57
- <div className={cx(props.kcInputWrapperClass)}>
58
- <input
59
- type="password"
60
- id="password-confirm"
61
- name="password-confirm"
62
- autoComplete="new-password"
63
- className={cx(props.kcInputClass)}
64
- />
52
+ <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("password-confirm", props.kcFormGroupErrorClass))}>
53
+ <div className={cx(props.kcLabelWrapperClass)}>
54
+ <label htmlFor="password-confirm" className={cx(props.kcLabelClass)}>
55
+ {msg("passwordConfirm")}
56
+ </label>
57
+ </div>
58
+ <div className={cx(props.kcInputWrapperClass)}>
59
+ <input
60
+ type="password"
61
+ id="password-confirm"
62
+ name="password-confirm"
63
+ autoComplete="new-password"
64
+ className={cx(props.kcInputClass)}
65
+ />
66
+ </div>
65
67
  </div>
66
- </div>
67
68
 
68
- <div className={cx(props.kcFormGroupClass)}>
69
- <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
70
- <div className={cx(props.kcFormOptionsWrapperClass)}>
71
- {isAppInitiatedAction && (
72
- <div className="checkbox">
73
- <label>
74
- <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" checked />
75
- {msgStr("logoutOtherSessions")}
76
- </label>
77
- </div>
78
- )}
69
+ <div className={cx(props.kcFormGroupClass)}>
70
+ <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
71
+ <div className={cx(props.kcFormOptionsWrapperClass)}>
72
+ {isAppInitiatedAction && (
73
+ <div className="checkbox">
74
+ <label>
75
+ <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" checked />
76
+ {msgStr("logoutOtherSessions")}
77
+ </label>
78
+ </div>
79
+ )}
80
+ </div>
79
81
  </div>
80
- </div>
81
82
 
82
- <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
83
- {isAppInitiatedAction ? (
84
- <>
83
+ <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
84
+ {isAppInitiatedAction ? (
85
+ <>
86
+ <input
87
+ className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
88
+ type="submit"
89
+ defaultValue={msgStr("doSubmit")}
90
+ />
91
+ <button
92
+ className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonLargeClass)}
93
+ type="submit"
94
+ name="cancel-aia"
95
+ value="true"
96
+ >
97
+ {msg("doCancel")}
98
+ </button>
99
+ </>
100
+ ) : (
85
101
  <input
86
- className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
102
+ className={cx(
103
+ props.kcButtonClass,
104
+ props.kcButtonPrimaryClass,
105
+ props.kcButtonBlockClass,
106
+ props.kcButtonLargeClass,
107
+ )}
87
108
  type="submit"
88
109
  defaultValue={msgStr("doSubmit")}
89
110
  />
90
- <button
91
- className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonLargeClass)}
92
- type="submit"
93
- name="cancel-aia"
94
- value="true"
95
- >
96
- {msg("doCancel")}
97
- </button>
98
- </>
99
- ) : (
100
- <input
101
- className={cx(
102
- props.kcButtonClass,
103
- props.kcButtonPrimaryClass,
104
- props.kcButtonBlockClass,
105
- props.kcButtonLargeClass,
106
- )}
107
- type="submit"
108
- defaultValue={msgStr("doSubmit")}
109
- />
110
- )}
111
+ )}
112
+ </div>
111
113
  </div>
112
- </div>
113
- </form>
114
- }
115
- />
116
- );
117
- });
114
+ </form>
115
+ }
116
+ />
117
+ );
118
+ },
119
+ );
package/src/lib/components/LoginUpdateProfile.tsx CHANGED
@@ -2,119 +2,127 @@ import { memo } from "react";
2
2
  import { Template } from "./Template";
3
3
  import type { KcProps } from "./KcProps";
4
4
  import type { KcContextBase } from "../getKcContext/KcContextBase";
5
- import { getMsg } from "../i18n";
5
+ import type { I18n } from "../i18n";
6
6
  import { useCssAndCx } from "tss-react";
7
7
 
8
- export const LoginUpdateProfile = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginUpdateProfile } & KcProps) => {
9
- const { cx } = useCssAndCx();
8
+ export const LoginUpdateProfile = memo(
9
+ ({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.LoginUpdateProfile; useI18n: () => I18n } & KcProps) => {
10
+ const { cx } = useCssAndCx();
10
11
 
11
- const { msg, msgStr } = getMsg(kcContext);
12
+ const { msg, msgStr } = useI18n();
12
13
 
13
- const { url, user, messagesPerField, isAppInitiatedAction } = kcContext;
14
+ const { url, user, messagesPerField, isAppInitiatedAction } = kcContext;
14
15
 
15
- return (
16
- <Template
17
- {...{ kcContext, ...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))}>
16
+ return (
17
+ <Template
18
+ {...{ kcContext, useI18n, ...props }}
19
+ doFetchDefaultThemeResources={true}
20
+ headerNode={msg("loginProfileTitle")}
21
+ formNode={
22
+ <form id="kc-update-profile-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
23
+ {user.editUsernameAllowed && (
24
+ <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("username", props.kcFormGroupErrorClass))}>
25
+ <div className={cx(props.kcLabelWrapperClass)}>
26
+ <label htmlFor="username" className={cx(props.kcLabelClass)}>
27
+ {msg("username")}
28
+ </label>
29
+ </div>
30
+ <div className={cx(props.kcInputWrapperClass)}>
31
+ <input
32
+ type="text"
33
+ id="username"
34
+ name="username"
35
+ defaultValue={user.username ?? ""}
36
+ className={cx(props.kcInputClass)}
37
+ />
38
+ </div>
39
+ </div>
40
+ )}
41
+
42
+ <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("email", props.kcFormGroupErrorClass))}>
24
43
  <div className={cx(props.kcLabelWrapperClass)}>
25
- <label htmlFor="username" className={cx(props.kcLabelClass)}>
26
- {msg("username")}
44
+ <label htmlFor="email" className={cx(props.kcLabelClass)}>
45
+ {msg("email")}
46
+ </label>
47
+ </div>
48
+ <div className={cx(props.kcInputWrapperClass)}>
49
+ <input type="text" id="email" name="email" defaultValue={user.email ?? ""} className={cx(props.kcInputClass)} />
50
+ </div>
51
+ </div>
52
+
53
+ <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("firstName", props.kcFormGroupErrorClass))}>
54
+ <div className={cx(props.kcLabelWrapperClass)}>
55
+ <label htmlFor="firstName" className={cx(props.kcLabelClass)}>
56
+ {msg("firstName")}
27
57
  </label>
28
58
  </div>
29
59
  <div className={cx(props.kcInputWrapperClass)}>
30
60
  <input
31
61
  type="text"
32
- id="username"
33
- name="username"
34
- defaultValue={user.username ?? ""}
62
+ id="firstName"
63
+ name="firstName"
64
+ defaultValue={user.firstName ?? ""}
35
65
  className={cx(props.kcInputClass)}
36
66
  />
37
67
  </div>
38
68
  </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
69
 
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)} />
70
+ <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("lastName", props.kcFormGroupErrorClass))}>
71
+ <div className={cx(props.kcLabelWrapperClass)}>
72
+ <label htmlFor="lastName" className={cx(props.kcLabelClass)}>
73
+ {msg("lastName")}
74
+ </label>
75
+ </div>
76
+ <div className={cx(props.kcInputWrapperClass)}>
77
+ <input
78
+ type="text"
79
+ id="lastName"
80
+ name="lastName"
81
+ defaultValue={user.lastName ?? ""}
82
+ className={cx(props.kcInputClass)}
83
+ />
84
+ </div>
77
85
  </div>
78
- </div>
79
86
 
80
- <div className={cx(props.kcFormGroupClass)}>
81
- <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
82
- <div className={cx(props.kcFormOptionsWrapperClass)} />
83
- </div>
87
+ <div className={cx(props.kcFormGroupClass)}>
88
+ <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
89
+ <div className={cx(props.kcFormOptionsWrapperClass)} />
90
+ </div>
84
91
 
85
- <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
86
- {isAppInitiatedAction ? (
87
- <>
92
+ <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
93
+ {isAppInitiatedAction ? (
94
+ <>
95
+ <input
96
+ className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
97
+ type="submit"
98
+ defaultValue={msgStr("doSubmit")}
99
+ />
100
+ <button
101
+ className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonLargeClass)}
102
+ type="submit"
103
+ name="cancel-aia"
104
+ value="true"
105
+ >
106
+ {msg("doCancel")}
107
+ </button>
108
+ </>
109
+ ) : (
88
110
  <input
89
- className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
111
+ className={cx(
112
+ props.kcButtonClass,
113
+ props.kcButtonPrimaryClass,
114
+ props.kcButtonBlockClass,
115
+ props.kcButtonLargeClass,
116
+ )}
90
117
  type="submit"
91
118
  defaultValue={msgStr("doSubmit")}
92
119
  />
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
- )}
120
+ )}
121
+ </div>
114
122
  </div>
115
- </div>
116
- </form>
117
- }
118
- />
119
- );
120
- });
123
+ </form>
124
+ }
125
+ />
126
+ );
127
+ },
128
+ );
package/src/lib/components/LoginVerifyEmail.tsx CHANGED
@@ -2,29 +2,31 @@ import { memo } from "react";
2
2
  import { Template } from "./Template";
3
3
  import type { KcProps } from "./KcProps";
4
4
  import type { KcContextBase } from "../getKcContext/KcContextBase";
5
- import { getMsg } from "../i18n";
5
+ import type { I18n } from "../i18n";
6
6
 
7
- export const LoginVerifyEmail = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginVerifyEmail } & KcProps) => {
8
- const { msg } = getMsg(kcContext);
7
+ export const LoginVerifyEmail = memo(
8
+ ({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.LoginVerifyEmail; useI18n: () => I18n } & KcProps) => {
9
+ const { msg } = useI18n();
9
10
 
10
- const { url } = kcContext;
11
+ const { url } = kcContext;
11
12
 
12
- return (
13
- <Template
14
- {...{ kcContext, ...props }}
15
- doFetchDefaultThemeResources={true}
16
- displayMessage={false}
17
- headerNode={msg("emailVerifyTitle")}
18
- formNode={
19
- <>
20
- <p className="instruction">{msg("emailVerifyInstruction1")}</p>
21
- <p className="instruction">
22
- {msg("emailVerifyInstruction2")}
23
- <a href={url.loginAction}>{msg("doClickHere")}</a>
24
- {msg("emailVerifyInstruction3")}
25
- </p>
26
- </>
27
- }
28
- />
29
- );
30
- });
13
+ return (
14
+ <Template
15
+ {...{ kcContext, useI18n, ...props }}
16
+ doFetchDefaultThemeResources={true}
17
+ displayMessage={false}
18
+ headerNode={msg("emailVerifyTitle")}
19
+ formNode={
20
+ <>
21
+ <p className="instruction">{msg("emailVerifyInstruction1")}</p>
22
+ <p className="instruction">
23
+ {msg("emailVerifyInstruction2")}
24
+ <a href={url.loginAction}>{msg("doClickHere")}</a>
25
+ {msg("emailVerifyInstruction3")}
26
+ </p>
27
+ </>
28
+ }
29
+ />
30
+ );
31
+ },
32
+ );