keycloakify 7.0.0-rc.6 → 7.0.0-rc.8

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 (79) hide show
  1. package/bin/eject-keycloak-page.js +1 -1
  2. package/bin/eject-keycloak-page.js.map +1 -1
  3. package/bin/initialize-email-theme.js +6 -2
  4. package/bin/initialize-email-theme.js.map +1 -1
  5. package/lib/usePrepareTemplate.js +2 -2
  6. package/lib/usePrepareTemplate.js.map +1 -1
  7. package/login/Template.js +2 -2
  8. package/login/Template.js.map +1 -1
  9. package/login/TemplateProps.d.ts +1 -1
  10. package/login/TemplateProps.js.map +1 -1
  11. package/login/pages/Error.js +1 -1
  12. package/login/pages/Error.js.map +1 -1
  13. package/login/pages/IdpReviewUserProfile.js +1 -1
  14. package/login/pages/IdpReviewUserProfile.js.map +1 -1
  15. package/login/pages/Info.js +2 -2
  16. package/login/pages/Info.js.map +1 -1
  17. package/login/pages/Login.js +4 -4
  18. package/login/pages/Login.js.map +1 -1
  19. package/login/pages/LoginConfigTotp.js +1 -1
  20. package/login/pages/LoginConfigTotp.js.map +1 -1
  21. package/login/pages/LoginIdpLinkConfirm.js +1 -1
  22. package/login/pages/LoginIdpLinkConfirm.js.map +1 -1
  23. package/login/pages/LoginIdpLinkEmail.js +2 -2
  24. package/login/pages/LoginIdpLinkEmail.js.map +1 -1
  25. package/login/pages/LoginOtp.js +1 -1
  26. package/login/pages/LoginOtp.js.map +1 -1
  27. package/login/pages/LoginPageExpired.js +2 -2
  28. package/login/pages/LoginPageExpired.js.map +1 -1
  29. package/login/pages/LoginPassword.js +1 -1
  30. package/login/pages/LoginPassword.js.map +1 -1
  31. package/login/pages/LoginResetPassword.js +2 -2
  32. package/login/pages/LoginResetPassword.js.map +1 -1
  33. package/login/pages/LoginUpdatePassword.js +1 -1
  34. package/login/pages/LoginUpdatePassword.js.map +1 -1
  35. package/login/pages/LoginUpdateProfile.js +1 -1
  36. package/login/pages/LoginUpdateProfile.js.map +1 -1
  37. package/login/pages/LoginUsername.js +4 -4
  38. package/login/pages/LoginUsername.js.map +1 -1
  39. package/login/pages/LoginVerifyEmail.js +2 -2
  40. package/login/pages/LoginVerifyEmail.js.map +1 -1
  41. package/login/pages/LogoutConfirm.js +2 -2
  42. package/login/pages/LogoutConfirm.js.map +1 -1
  43. package/login/pages/Register.js +1 -1
  44. package/login/pages/Register.js.map +1 -1
  45. package/login/pages/RegisterUserProfile.js +1 -1
  46. package/login/pages/RegisterUserProfile.js.map +1 -1
  47. package/login/pages/Terms.js +2 -2
  48. package/login/pages/Terms.js.map +1 -1
  49. package/login/pages/UpdateUserProfile.js +1 -1
  50. package/login/pages/UpdateUserProfile.js.map +1 -1
  51. package/login/pages/WebauthnAuthenticate.js +1 -1
  52. package/login/pages/WebauthnAuthenticate.js.map +1 -1
  53. package/package.json +1 -1
  54. package/src/bin/eject-keycloak-page.ts +1 -1
  55. package/src/bin/initialize-email-theme.ts +9 -1
  56. package/src/lib/usePrepareTemplate.ts +2 -2
  57. package/src/login/Template.tsx +3 -3
  58. package/src/login/TemplateProps.ts +2 -1
  59. package/src/login/pages/Error.tsx +12 -17
  60. package/src/login/pages/IdpReviewUserProfile.tsx +27 -31
  61. package/src/login/pages/Info.tsx +22 -23
  62. package/src/login/pages/Login.tsx +143 -144
  63. package/src/login/pages/LoginConfigTotp.tsx +135 -143
  64. package/src/login/pages/LoginIdpLinkConfirm.tsx +34 -38
  65. package/src/login/pages/LoginIdpLinkEmail.tsx +11 -17
  66. package/src/login/pages/LoginOtp.tsx +44 -48
  67. package/src/login/pages/LoginPageExpired.tsx +14 -21
  68. package/src/login/pages/LoginPassword.tsx +50 -54
  69. package/src/login/pages/LoginResetPassword.tsx +44 -45
  70. package/src/login/pages/LoginUpdatePassword.tsx +96 -100
  71. package/src/login/pages/LoginUpdateProfile.tsx +100 -107
  72. package/src/login/pages/LoginUsername.tsx +108 -109
  73. package/src/login/pages/LoginVerifyEmail.tsx +10 -17
  74. package/src/login/pages/LogoutConfirm.tsx +33 -40
  75. package/src/login/pages/Register.tsx +120 -127
  76. package/src/login/pages/RegisterUserProfile.tsx +36 -37
  77. package/src/login/pages/Terms.tsx +26 -33
  78. package/src/login/pages/UpdateUserProfile.tsx +46 -50
  79. package/src/login/pages/WebauthnAuthenticate.tsx +87 -96
package/src/login/pages/LoginConfigTotp.tsx CHANGED
@@ -23,159 +23,130 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
23
23
  };
24
24
 
25
25
  return (
26
- <Template
27
- {...{ kcContext, i18n, doUseDefaultCss, classes }}
28
- headerNode={msg("loginTotpTitle")}
29
- formNode={
30
- <>
31
- <ol id="kc-totp-settings">
32
- <li>
33
- <p>{msg("loginTotpStep1")}</p>
26
+ <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginTotpTitle")}>
27
+ <>
28
+ <ol id="kc-totp-settings">
29
+ <li>
30
+ <p>{msg("loginTotpStep1")}</p>
34
31
 
35
- <ul id="kc-totp-supported-apps">
36
- {totp.policy.supportedApplications.map(app => (
37
- <li>{app}</li>
38
- ))}
39
- </ul>
40
- </li>
32
+ <ul id="kc-totp-supported-apps">
33
+ {totp.policy.supportedApplications.map(app => (
34
+ <li>{app}</li>
35
+ ))}
36
+ </ul>
37
+ </li>
41
38
 
42
- {mode && mode == "manual" ? (
43
- <>
44
- <li>
45
- <p>{msg("loginTotpManualStep2")}</p>
46
- <p>
47
- <span id="kc-totp-secret-key">{totp.totpSecretEncoded}</span>
48
- </p>
49
- <p>
50
- <a href={totp.qrUrl} id="mode-barcode">
51
- {msg("loginTotpScanBarcode")}
52
- </a>
53
- </p>
54
- </li>
55
- <li>
56
- <p>{msg("loginTotpManualStep3")}</p>
57
- <p>
58
- <ul>
59
- <li id="kc-totp-type">
60
- {msg("loginTotpType")}: {msg(`loginTotp.${totp.policy.type}`)}
61
- </li>
62
- <li id="kc-totp-algorithm">
63
- {msg("loginTotpAlgorithm")}: {algToKeyUriAlg?.[totp.policy.algorithm] ?? totp.policy.algorithm}
64
- </li>
65
- <li id="kc-totp-digits">
66
- {msg("loginTotpDigits")}: {totp.policy.digits}
67
- </li>
68
- {totp.policy.type === "totp" ? (
69
- <li id="kc-totp-period">
70
- {msg("loginTotpInterval")}: {totp.policy.period}
71
- </li>
72
- ) : (
73
- <li id="kc-totp-counter">
74
- {msg("loginTotpCounter")}: {totp.policy.initialCounter}
75
- </li>
76
- )}
77
- </ul>
78
- </p>
79
- </li>
80
- </>
81
- ) : (
39
+ {mode && mode == "manual" ? (
40
+ <>
82
41
  <li>
83
- <p>{msg("loginTotpStep2")}</p>
84
- <img id="kc-totp-secret-qr-code" src={`data:image/png;base64, ${totp.totpSecretQrCode}`} alt="Figure: Barcode" />
85
- <br />
42
+ <p>{msg("loginTotpManualStep2")}</p>
43
+ <p>
44
+ <span id="kc-totp-secret-key">{totp.totpSecretEncoded}</span>
45
+ </p>
86
46
  <p>
87
- <a href={totp.manualUrl} id="mode-manual">
88
- {msg("loginTotpUnableToScan")}
47
+ <a href={totp.qrUrl} id="mode-barcode">
48
+ {msg("loginTotpScanBarcode")}
89
49
  </a>
90
50
  </p>
91
51
  </li>
92
- )}
52
+ <li>
53
+ <p>{msg("loginTotpManualStep3")}</p>
54
+ <p>
55
+ <ul>
56
+ <li id="kc-totp-type">
57
+ {msg("loginTotpType")}: {msg(`loginTotp.${totp.policy.type}`)}
58
+ </li>
59
+ <li id="kc-totp-algorithm">
60
+ {msg("loginTotpAlgorithm")}: {algToKeyUriAlg?.[totp.policy.algorithm] ?? totp.policy.algorithm}
61
+ </li>
62
+ <li id="kc-totp-digits">
63
+ {msg("loginTotpDigits")}: {totp.policy.digits}
64
+ </li>
65
+ {totp.policy.type === "totp" ? (
66
+ <li id="kc-totp-period">
67
+ {msg("loginTotpInterval")}: {totp.policy.period}
68
+ </li>
69
+ ) : (
70
+ <li id="kc-totp-counter">
71
+ {msg("loginTotpCounter")}: {totp.policy.initialCounter}
72
+ </li>
73
+ )}
74
+ </ul>
75
+ </p>
76
+ </li>
77
+ </>
78
+ ) : (
93
79
  <li>
94
- <p>{msg("loginTotpStep3")}</p>
95
- <p>{msg("loginTotpStep3DeviceName")}</p>
80
+ <p>{msg("loginTotpStep2")}</p>
81
+ <img id="kc-totp-secret-qr-code" src={`data:image/png;base64, ${totp.totpSecretQrCode}`} alt="Figure: Barcode" />
82
+ <br />
83
+ <p>
84
+ <a href={totp.manualUrl} id="mode-manual">
85
+ {msg("loginTotpUnableToScan")}
86
+ </a>
87
+ </p>
96
88
  </li>
97
- </ol>
89
+ )}
90
+ <li>
91
+ <p>{msg("loginTotpStep3")}</p>
92
+ <p>{msg("loginTotpStep3DeviceName")}</p>
93
+ </li>
94
+ </ol>
98
95
 
99
- <form action={url.loginAction} className={getClassName("kcFormClass")} id="kc-totp-settings-form" method="post">
100
- <div className={getClassName("kcFormGroupClass")}>
101
- <div className={getClassName("kcInputWrapperClass")}>
102
- <label htmlFor="totp" className={getClassName("kcLabelClass")}>
103
- {msg("authenticatorCode")}
104
- </label>{" "}
105
- <span className="required">*</span>
106
- </div>
107
- <div className={getClassName("kcInputWrapperClass")}>
108
- <input
109
- type="text"
110
- id="totp"
111
- name="totp"
112
- autoComplete="off"
113
- className={getClassName("kcInputClass")}
114
- aria-invalid={messagesPerField.existsError("totp")}
115
- />
96
+ <form action={url.loginAction} className={getClassName("kcFormClass")} id="kc-totp-settings-form" method="post">
97
+ <div className={getClassName("kcFormGroupClass")}>
98
+ <div className={getClassName("kcInputWrapperClass")}>
99
+ <label htmlFor="totp" className={getClassName("kcLabelClass")}>
100
+ {msg("authenticatorCode")}
101
+ </label>{" "}
102
+ <span className="required">*</span>
103
+ </div>
104
+ <div className={getClassName("kcInputWrapperClass")}>
105
+ <input
106
+ type="text"
107
+ id="totp"
108
+ name="totp"
109
+ autoComplete="off"
110
+ className={getClassName("kcInputClass")}
111
+ aria-invalid={messagesPerField.existsError("totp")}
112
+ />
116
113
 
117
- {messagesPerField.existsError("totp") && (
118
- <span id="input-error-otp-code" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
119
- {messagesPerField.get("totp")}
120
- </span>
121
- )}
122
- </div>
123
- <input type="hidden" id="totpSecret" name="totpSecret" value={totp.totpSecret} />
124
- {mode && <input type="hidden" id="mode" value={mode} />}
114
+ {messagesPerField.existsError("totp") && (
115
+ <span id="input-error-otp-code" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
116
+ {messagesPerField.get("totp")}
117
+ </span>
118
+ )}
125
119
  </div>
120
+ <input type="hidden" id="totpSecret" name="totpSecret" value={totp.totpSecret} />
121
+ {mode && <input type="hidden" id="mode" value={mode} />}
122
+ </div>
126
123
 
127
- <div className={getClassName("kcFormGroupClass")}>
128
- <div className={getClassName("kcInputWrapperClass")}>
129
- <label htmlFor="userLabel" className={getClassName("kcLabelClass")}>
130
- {msg("loginTotpDeviceName")}
131
- </label>{" "}
132
- {totp.otpCredentials.length >= 1 && <span className="required">*</span>}
133
- </div>
134
- <div className={getClassName("kcInputWrapperClass")}>
135
- <input
136
- type="text"
137
- id="userLabel"
138
- name="userLabel"
139
- autoComplete="off"
140
- className={getClassName("kcInputClass")}
141
- aria-invalid={messagesPerField.existsError("userLabel")}
142
- />
143
- {messagesPerField.existsError("userLabel") && (
144
- <span id="input-error-otp-label" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
145
- {messagesPerField.get("userLabel")}
146
- </span>
147
- )}
148
- </div>
124
+ <div className={getClassName("kcFormGroupClass")}>
125
+ <div className={getClassName("kcInputWrapperClass")}>
126
+ <label htmlFor="userLabel" className={getClassName("kcLabelClass")}>
127
+ {msg("loginTotpDeviceName")}
128
+ </label>{" "}
129
+ {totp.otpCredentials.length >= 1 && <span className="required">*</span>}
149
130
  </div>
131
+ <div className={getClassName("kcInputWrapperClass")}>
132
+ <input
133
+ type="text"
134
+ id="userLabel"
135
+ name="userLabel"
136
+ autoComplete="off"
137
+ className={getClassName("kcInputClass")}
138
+ aria-invalid={messagesPerField.existsError("userLabel")}
139
+ />
140
+ {messagesPerField.existsError("userLabel") && (
141
+ <span id="input-error-otp-label" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
142
+ {messagesPerField.get("userLabel")}
143
+ </span>
144
+ )}
145
+ </div>
146
+ </div>
150
147
 
151
- {isAppInitiatedAction ? (
152
- <>
153
- <input
154
- type="submit"
155
- className={clsx(
156
- getClassName("kcButtonClass"),
157
- getClassName("kcButtonPrimaryClass"),
158
- getClassName("kcButtonLargeClass")
159
- )}
160
- id="saveTOTPBtn"
161
- value={msgStr("doSubmit")}
162
- />
163
- <button
164
- type="submit"
165
- className={clsx(
166
- getClassName("kcButtonClass"),
167
- getClassName("kcButtonDefaultClass"),
168
- getClassName("kcButtonLargeClass"),
169
- getClassName("kcButtonLargeClass")
170
- )}
171
- id="cancelTOTPBtn"
172
- name="cancel-aia"
173
- value="true"
174
- >
175
- ${msg("doCancel")}
176
- </button>
177
- </>
178
- ) : (
148
+ {isAppInitiatedAction ? (
149
+ <>
179
150
  <input
180
151
  type="submit"
181
152
  className={clsx(
@@ -186,10 +157,31 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
186
157
  id="saveTOTPBtn"
187
158
  value={msgStr("doSubmit")}
188
159
  />
189
- )}
190
- </form>
191
- </>
192
- }
193
- />
160
+ <button
161
+ type="submit"
162
+ className={clsx(
163
+ getClassName("kcButtonClass"),
164
+ getClassName("kcButtonDefaultClass"),
165
+ getClassName("kcButtonLargeClass"),
166
+ getClassName("kcButtonLargeClass")
167
+ )}
168
+ id="cancelTOTPBtn"
169
+ name="cancel-aia"
170
+ value="true"
171
+ >
172
+ ${msg("doCancel")}
173
+ </button>
174
+ </>
175
+ ) : (
176
+ <input
177
+ type="submit"
178
+ className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonLargeClass"))}
179
+ id="saveTOTPBtn"
180
+ value={msgStr("doSubmit")}
181
+ />
182
+ )}
183
+ </form>
184
+ </>
185
+ </Template>
194
186
  );
195
187
  }
package/src/login/pages/LoginIdpLinkConfirm.tsx CHANGED
@@ -17,43 +17,39 @@ export default function LoginIdpLinkConfirm(props: PageProps<Extract<KcContext,
17
17
  const { msg } = i18n;
18
18
 
19
19
  return (
20
- <Template
21
- {...{ kcContext, i18n, doUseDefaultCss, classes }}
22
- headerNode={msg("confirmLinkIdpTitle")}
23
- formNode={
24
- <form id="kc-register-form" action={url.loginAction} method="post">
25
- <div className={getClassName("kcFormGroupClass")}>
26
- <button
27
- type="submit"
28
- className={clsx(
29
- getClassName("kcButtonClass"),
30
- getClassName("kcButtonDefaultClass"),
31
- getClassName("kcButtonBlockClass"),
32
- getClassName("kcButtonLargeClass")
33
- )}
34
- name="submitAction"
35
- id="updateProfile"
36
- value="updateProfile"
37
- >
38
- {msg("confirmLinkIdpReviewProfile")}
39
- </button>
40
- <button
41
- type="submit"
42
- className={clsx(
43
- getClassName("kcButtonClass"),
44
- getClassName("kcButtonDefaultClass"),
45
- getClassName("kcButtonBlockClass"),
46
- getClassName("kcButtonLargeClass")
47
- )}
48
- name="submitAction"
49
- id="linkAccount"
50
- value="linkAccount"
51
- >
52
- {msg("confirmLinkIdpContinue", idpAlias)}
53
- </button>
54
- </div>
55
- </form>
56
- }
57
- />
20
+ <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("confirmLinkIdpTitle")}>
21
+ <form id="kc-register-form" action={url.loginAction} method="post">
22
+ <div className={getClassName("kcFormGroupClass")}>
23
+ <button
24
+ type="submit"
25
+ className={clsx(
26
+ getClassName("kcButtonClass"),
27
+ getClassName("kcButtonDefaultClass"),
28
+ getClassName("kcButtonBlockClass"),
29
+ getClassName("kcButtonLargeClass")
30
+ )}
31
+ name="submitAction"
32
+ id="updateProfile"
33
+ value="updateProfile"
34
+ >
35
+ {msg("confirmLinkIdpReviewProfile")}
36
+ </button>
37
+ <button
38
+ type="submit"
39
+ className={clsx(
40
+ getClassName("kcButtonClass"),
41
+ getClassName("kcButtonDefaultClass"),
42
+ getClassName("kcButtonBlockClass"),
43
+ getClassName("kcButtonLargeClass")
44
+ )}
45
+ name="submitAction"
46
+ id="linkAccount"
47
+ value="linkAccount"
48
+ >
49
+ {msg("confirmLinkIdpContinue", idpAlias)}
50
+ </button>
51
+ </div>
52
+ </form>
53
+ </Template>
58
54
  );
59
55
  }
package/src/login/pages/LoginIdpLinkEmail.tsx CHANGED
@@ -10,22 +10,16 @@ export default function LoginIdpLinkEmail(props: PageProps<Extract<KcContext, {
10
10
  const { msg } = i18n;
11
11
 
12
12
  return (
13
- <Template
14
- {...{ kcContext, i18n, doUseDefaultCss, classes }}
15
- headerNode={msg("emailLinkIdpTitle", idpAlias)}
16
- formNode={
17
- <>
18
- <p id="instruction1" className="instruction">
19
- {msg("emailLinkIdp1", idpAlias, brokerContext.username, realm.displayName)}
20
- </p>
21
- <p id="instruction2" className="instruction">
22
- {msg("emailLinkIdp2")} <a href={url.loginAction}>{msg("doClickHere")}</a> {msg("emailLinkIdp3")}
23
- </p>
24
- <p id="instruction3" className="instruction">
25
- {msg("emailLinkIdp4")} <a href={url.loginAction}>{msg("doClickHere")}</a> {msg("emailLinkIdp5")}
26
- </p>
27
- </>
28
- }
29
- />
13
+ <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("emailLinkIdpTitle", idpAlias)}>
14
+ <p id="instruction1" className="instruction">
15
+ {msg("emailLinkIdp1", idpAlias, brokerContext.username, realm.displayName)}
16
+ </p>
17
+ <p id="instruction2" className="instruction">
18
+ {msg("emailLinkIdp2")} <a href={url.loginAction}>{msg("doClickHere")}</a> {msg("emailLinkIdp3")}
19
+ </p>
20
+ <p id="instruction3" className="instruction">
21
+ {msg("emailLinkIdp4")} <a href={url.loginAction}>{msg("doClickHere")}</a> {msg("emailLinkIdp5")}
22
+ </p>
23
+ </Template>
30
24
  );
31
25
  }
package/src/login/pages/LoginOtp.tsx CHANGED
@@ -37,61 +37,57 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
37
37
  }, []);
38
38
 
39
39
  return (
40
- <Template
41
- {...{ kcContext, i18n, doUseDefaultCss, classes }}
42
- headerNode={msg("doLogIn")}
43
- formNode={
44
- <form id="kc-otp-login-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
45
- {otpLogin.userOtpCredentials.length > 1 && (
46
- <div className={getClassName("kcFormGroupClass")}>
47
- <div className={getClassName("kcInputWrapperClass")}>
48
- {otpLogin.userOtpCredentials.map(otpCredential => (
49
- <div key={otpCredential.id} className={getClassName("kcSelectOTPListClass")}>
50
- <input type="hidden" value="${otpCredential.id}" />
51
- <div className={getClassName("kcSelectOTPListItemClass")}>
52
- <span className={getClassName("kcAuthenticatorOtpCircleClass")} />
53
- <h2 className={getClassName("kcSelectOTPItemHeadingClass")}>{otpCredential.userLabel}</h2>
54
- </div>
55
- </div>
56
- ))}
57
- </div>
58
- </div>
59
- )}
40
+ <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("doLogIn")}>
41
+ <form id="kc-otp-login-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
42
+ {otpLogin.userOtpCredentials.length > 1 && (
60
43
  <div className={getClassName("kcFormGroupClass")}>
61
- <div className={getClassName("kcLabelWrapperClass")}>
62
- <label htmlFor="otp" className={getClassName("kcLabelClass")}>
63
- {msg("loginOtpOneTime")}
64
- </label>
65
- </div>
66
-
67
44
  <div className={getClassName("kcInputWrapperClass")}>
68
- <input id="otp" name="otp" autoComplete="off" type="text" className={getClassName("kcInputClass")} autoFocus />
45
+ {otpLogin.userOtpCredentials.map(otpCredential => (
46
+ <div key={otpCredential.id} className={getClassName("kcSelectOTPListClass")}>
47
+ <input type="hidden" value="${otpCredential.id}" />
48
+ <div className={getClassName("kcSelectOTPListItemClass")}>
49
+ <span className={getClassName("kcAuthenticatorOtpCircleClass")} />
50
+ <h2 className={getClassName("kcSelectOTPItemHeadingClass")}>{otpCredential.userLabel}</h2>
51
+ </div>
52
+ </div>
53
+ ))}
69
54
  </div>
70
55
  </div>
56
+ )}
57
+ <div className={getClassName("kcFormGroupClass")}>
58
+ <div className={getClassName("kcLabelWrapperClass")}>
59
+ <label htmlFor="otp" className={getClassName("kcLabelClass")}>
60
+ {msg("loginOtpOneTime")}
61
+ </label>
62
+ </div>
71
63
 
72
- <div className={getClassName("kcFormGroupClass")}>
73
- <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
74
- <div className={getClassName("kcFormOptionsWrapperClass")} />
75
- </div>
64
+ <div className={getClassName("kcInputWrapperClass")}>
65
+ <input id="otp" name="otp" autoComplete="off" type="text" className={getClassName("kcInputClass")} autoFocus />
66
+ </div>
67
+ </div>
76
68
 
77
- <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
78
- <input
79
- className={clsx(
80
- getClassName("kcButtonClass"),
81
- getClassName("kcButtonPrimaryClass"),
82
- getClassName("kcButtonBlockClass"),
83
- getClassName("kcButtonLargeClass")
84
- )}
85
- name="login"
86
- id="kc-login"
87
- type="submit"
88
- value={msgStr("doLogIn")}
89
- />
90
- </div>
69
+ <div className={getClassName("kcFormGroupClass")}>
70
+ <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
71
+ <div className={getClassName("kcFormOptionsWrapperClass")} />
91
72
  </div>
92
- </form>
93
- }
94
- />
73
+
74
+ <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
75
+ <input
76
+ className={clsx(
77
+ getClassName("kcButtonClass"),
78
+ getClassName("kcButtonPrimaryClass"),
79
+ getClassName("kcButtonBlockClass"),
80
+ getClassName("kcButtonLargeClass")
81
+ )}
82
+ name="login"
83
+ id="kc-login"
84
+ type="submit"
85
+ value={msgStr("doLogIn")}
86
+ />
87
+ </div>
88
+ </div>
89
+ </form>
90
+ </Template>
95
91
  );
96
92
  }
97
93
 
package/src/login/pages/LoginPageExpired.tsx CHANGED
@@ -10,26 +10,19 @@ export default function LoginPageExpired(props: PageProps<Extract<KcContext, { p
10
10
  const { msg } = i18n;
11
11
 
12
12
  return (
13
- <Template
14
- {...{ kcContext, i18n, doUseDefaultCss, classes }}
15
- displayMessage={false}
16
- headerNode={msg("pageExpiredTitle")}
17
- formNode={
18
- <>
19
- <p id="instruction1" className="instruction">
20
- {msg("pageExpiredMsg1")}
21
- <a id="loginRestartLink" href={url.loginRestartFlowUrl}>
22
- {msg("doClickHere")}
23
- </a>{" "}
24
- .<br />
25
- {msg("pageExpiredMsg2")}{" "}
26
- <a id="loginContinueLink" href={url.loginAction}>
27
- {msg("doClickHere")}
28
- </a>{" "}
29
- .
30
- </p>
31
- </>
32
- }
33
- />
13
+ <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("pageExpiredTitle")}>
14
+ <p id="instruction1" className="instruction">
15
+ {msg("pageExpiredMsg1")}
16
+ <a id="loginRestartLink" href={url.loginRestartFlowUrl}>
17
+ {msg("doClickHere")}
18
+ </a>{" "}
19
+ .<br />
20
+ {msg("pageExpiredMsg2")}{" "}
21
+ <a id="loginContinueLink" href={url.loginAction}>
22
+ {msg("doClickHere")}
23
+ </a>{" "}
24
+ .
25
+ </p>
26
+ </Template>
34
27
  );
35
28
  }