keycloakify 7.0.0-rc.6 → 7.0.0-rc.7

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 (76) 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/login/Template.js +2 -2
  6. package/login/Template.js.map +1 -1
  7. package/login/TemplateProps.d.ts +1 -1
  8. package/login/TemplateProps.js.map +1 -1
  9. package/login/pages/Error.js +1 -1
  10. package/login/pages/Error.js.map +1 -1
  11. package/login/pages/IdpReviewUserProfile.js +1 -1
  12. package/login/pages/IdpReviewUserProfile.js.map +1 -1
  13. package/login/pages/Info.js +2 -2
  14. package/login/pages/Info.js.map +1 -1
  15. package/login/pages/Login.js +4 -4
  16. package/login/pages/Login.js.map +1 -1
  17. package/login/pages/LoginConfigTotp.js +1 -1
  18. package/login/pages/LoginConfigTotp.js.map +1 -1
  19. package/login/pages/LoginIdpLinkConfirm.js +1 -1
  20. package/login/pages/LoginIdpLinkConfirm.js.map +1 -1
  21. package/login/pages/LoginIdpLinkEmail.js +2 -2
  22. package/login/pages/LoginIdpLinkEmail.js.map +1 -1
  23. package/login/pages/LoginOtp.js +1 -1
  24. package/login/pages/LoginOtp.js.map +1 -1
  25. package/login/pages/LoginPageExpired.js +2 -2
  26. package/login/pages/LoginPageExpired.js.map +1 -1
  27. package/login/pages/LoginPassword.js +1 -1
  28. package/login/pages/LoginPassword.js.map +1 -1
  29. package/login/pages/LoginResetPassword.js +2 -2
  30. package/login/pages/LoginResetPassword.js.map +1 -1
  31. package/login/pages/LoginUpdatePassword.js +1 -1
  32. package/login/pages/LoginUpdatePassword.js.map +1 -1
  33. package/login/pages/LoginUpdateProfile.js +1 -1
  34. package/login/pages/LoginUpdateProfile.js.map +1 -1
  35. package/login/pages/LoginUsername.js +4 -4
  36. package/login/pages/LoginUsername.js.map +1 -1
  37. package/login/pages/LoginVerifyEmail.js +2 -2
  38. package/login/pages/LoginVerifyEmail.js.map +1 -1
  39. package/login/pages/LogoutConfirm.js +2 -2
  40. package/login/pages/LogoutConfirm.js.map +1 -1
  41. package/login/pages/Register.js +1 -1
  42. package/login/pages/Register.js.map +1 -1
  43. package/login/pages/RegisterUserProfile.js +1 -1
  44. package/login/pages/RegisterUserProfile.js.map +1 -1
  45. package/login/pages/Terms.js +2 -2
  46. package/login/pages/Terms.js.map +1 -1
  47. package/login/pages/UpdateUserProfile.js +1 -1
  48. package/login/pages/UpdateUserProfile.js.map +1 -1
  49. package/login/pages/WebauthnAuthenticate.js +1 -1
  50. package/login/pages/WebauthnAuthenticate.js.map +1 -1
  51. package/package.json +1 -1
  52. package/src/bin/eject-keycloak-page.ts +1 -1
  53. package/src/bin/initialize-email-theme.ts +9 -1
  54. package/src/login/Template.tsx +3 -3
  55. package/src/login/TemplateProps.ts +2 -1
  56. package/src/login/pages/Error.tsx +12 -17
  57. package/src/login/pages/IdpReviewUserProfile.tsx +27 -31
  58. package/src/login/pages/Info.tsx +22 -23
  59. package/src/login/pages/Login.tsx +143 -144
  60. package/src/login/pages/LoginConfigTotp.tsx +135 -143
  61. package/src/login/pages/LoginIdpLinkConfirm.tsx +34 -38
  62. package/src/login/pages/LoginIdpLinkEmail.tsx +11 -17
  63. package/src/login/pages/LoginOtp.tsx +44 -48
  64. package/src/login/pages/LoginPageExpired.tsx +14 -21
  65. package/src/login/pages/LoginPassword.tsx +50 -54
  66. package/src/login/pages/LoginResetPassword.tsx +44 -45
  67. package/src/login/pages/LoginUpdatePassword.tsx +96 -100
  68. package/src/login/pages/LoginUpdateProfile.tsx +100 -107
  69. package/src/login/pages/LoginUsername.tsx +108 -109
  70. package/src/login/pages/LoginVerifyEmail.tsx +10 -17
  71. package/src/login/pages/LogoutConfirm.tsx +33 -40
  72. package/src/login/pages/Register.tsx +120 -127
  73. package/src/login/pages/RegisterUserProfile.tsx +36 -37
  74. package/src/login/pages/Terms.tsx +26 -33
  75. package/src/login/pages/UpdateUserProfile.tsx +46 -50
  76. package/src/login/pages/WebauthnAuthenticate.tsx +87 -96
package/src/login/pages/LoginUpdateProfile.tsx CHANGED
@@ -17,141 +17,134 @@ export default function LoginUpdateProfile(props: PageProps<Extract<KcContext, {
17
17
  const { url, user, messagesPerField, isAppInitiatedAction } = kcContext;
18
18
 
19
19
  return (
20
- <Template
21
- {...{ kcContext, i18n, doUseDefaultCss, classes }}
22
- headerNode={msg("loginProfileTitle")}
23
- formNode={
24
- <form id="kc-update-profile-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
25
- {user.editUsernameAllowed && (
26
- <div
27
- className={clsx(
28
- getClassName("kcFormGroupClass"),
29
- messagesPerField.printIfExists("username", getClassName("kcFormGroupErrorClass"))
30
- )}
31
- >
32
- <div className={getClassName("kcLabelWrapperClass")}>
33
- <label htmlFor="username" className={getClassName("kcLabelClass")}>
34
- {msg("username")}
35
- </label>
36
- </div>
37
- <div className={getClassName("kcInputWrapperClass")}>
38
- <input
39
- type="text"
40
- id="username"
41
- name="username"
42
- defaultValue={user.username ?? ""}
43
- className={getClassName("kcInputClass")}
44
- />
45
- </div>
46
- </div>
47
- )}
48
-
49
- <div
50
- className={clsx(
51
- getClassName("kcFormGroupClass"),
52
- messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass"))
53
- )}
54
- >
55
- <div className={getClassName("kcLabelWrapperClass")}>
56
- <label htmlFor="email" className={getClassName("kcLabelClass")}>
57
- {msg("email")}
58
- </label>
59
- </div>
60
- <div className={getClassName("kcInputWrapperClass")}>
61
- <input type="text" id="email" name="email" defaultValue={user.email ?? ""} className={getClassName("kcInputClass")} />
62
- </div>
63
- </div>
64
-
20
+ <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginProfileTitle")}>
21
+ <form id="kc-update-profile-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
22
+ {user.editUsernameAllowed && (
65
23
  <div
66
24
  className={clsx(
67
25
  getClassName("kcFormGroupClass"),
68
- messagesPerField.printIfExists("firstName", getClassName("kcFormGroupErrorClass"))
26
+ messagesPerField.printIfExists("username", getClassName("kcFormGroupErrorClass"))
69
27
  )}
70
28
  >
71
29
  <div className={getClassName("kcLabelWrapperClass")}>
72
- <label htmlFor="firstName" className={getClassName("kcLabelClass")}>
73
- {msg("firstName")}
30
+ <label htmlFor="username" className={getClassName("kcLabelClass")}>
31
+ {msg("username")}
74
32
  </label>
75
33
  </div>
76
34
  <div className={getClassName("kcInputWrapperClass")}>
77
35
  <input
78
36
  type="text"
79
- id="firstName"
80
- name="firstName"
81
- defaultValue={user.firstName ?? ""}
37
+ id="username"
38
+ name="username"
39
+ defaultValue={user.username ?? ""}
82
40
  className={getClassName("kcInputClass")}
83
41
  />
84
42
  </div>
85
43
  </div>
44
+ )}
86
45
 
87
- <div
88
- className={clsx(
89
- getClassName("kcFormGroupClass"),
90
- messagesPerField.printIfExists("lastName", getClassName("kcFormGroupErrorClass"))
91
- )}
92
- >
93
- <div className={getClassName("kcLabelWrapperClass")}>
94
- <label htmlFor="lastName" className={getClassName("kcLabelClass")}>
95
- {msg("lastName")}
96
- </label>
97
- </div>
98
- <div className={getClassName("kcInputWrapperClass")}>
99
- <input
100
- type="text"
101
- id="lastName"
102
- name="lastName"
103
- defaultValue={user.lastName ?? ""}
104
- className={getClassName("kcInputClass")}
105
- />
106
- </div>
46
+ <div
47
+ className={clsx(getClassName("kcFormGroupClass"), messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass")))}
48
+ >
49
+ <div className={getClassName("kcLabelWrapperClass")}>
50
+ <label htmlFor="email" className={getClassName("kcLabelClass")}>
51
+ {msg("email")}
52
+ </label>
53
+ </div>
54
+ <div className={getClassName("kcInputWrapperClass")}>
55
+ <input type="text" id="email" name="email" defaultValue={user.email ?? ""} className={getClassName("kcInputClass")} />
107
56
  </div>
57
+ </div>
108
58
 
109
- <div className={getClassName("kcFormGroupClass")}>
110
- <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
111
- <div className={getClassName("kcFormOptionsWrapperClass")} />
112
- </div>
59
+ <div
60
+ className={clsx(
61
+ getClassName("kcFormGroupClass"),
62
+ messagesPerField.printIfExists("firstName", getClassName("kcFormGroupErrorClass"))
63
+ )}
64
+ >
65
+ <div className={getClassName("kcLabelWrapperClass")}>
66
+ <label htmlFor="firstName" className={getClassName("kcLabelClass")}>
67
+ {msg("firstName")}
68
+ </label>
69
+ </div>
70
+ <div className={getClassName("kcInputWrapperClass")}>
71
+ <input
72
+ type="text"
73
+ id="firstName"
74
+ name="firstName"
75
+ defaultValue={user.firstName ?? ""}
76
+ className={getClassName("kcInputClass")}
77
+ />
78
+ </div>
79
+ </div>
113
80
 
114
- <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
115
- {isAppInitiatedAction ? (
116
- <>
117
- <input
118
- className={clsx(
119
- getClassName("kcButtonClass"),
120
- getClassName("kcButtonPrimaryClass"),
121
- getClassName("kcButtonLargeClass")
122
- )}
123
- type="submit"
124
- defaultValue={msgStr("doSubmit")}
125
- />
126
- <button
127
- className={clsx(
128
- getClassName("kcButtonClass"),
129
- getClassName("kcButtonDefaultClass"),
130
- getClassName("kcButtonLargeClass")
131
- )}
132
- type="submit"
133
- name="cancel-aia"
134
- value="true"
135
- >
136
- {msg("doCancel")}
137
- </button>
138
- </>
139
- ) : (
81
+ <div
82
+ className={clsx(
83
+ getClassName("kcFormGroupClass"),
84
+ messagesPerField.printIfExists("lastName", getClassName("kcFormGroupErrorClass"))
85
+ )}
86
+ >
87
+ <div className={getClassName("kcLabelWrapperClass")}>
88
+ <label htmlFor="lastName" className={getClassName("kcLabelClass")}>
89
+ {msg("lastName")}
90
+ </label>
91
+ </div>
92
+ <div className={getClassName("kcInputWrapperClass")}>
93
+ <input
94
+ type="text"
95
+ id="lastName"
96
+ name="lastName"
97
+ defaultValue={user.lastName ?? ""}
98
+ className={getClassName("kcInputClass")}
99
+ />
100
+ </div>
101
+ </div>
102
+
103
+ <div className={getClassName("kcFormGroupClass")}>
104
+ <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
105
+ <div className={getClassName("kcFormOptionsWrapperClass")} />
106
+ </div>
107
+
108
+ <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
109
+ {isAppInitiatedAction ? (
110
+ <>
140
111
  <input
141
112
  className={clsx(
142
113
  getClassName("kcButtonClass"),
143
114
  getClassName("kcButtonPrimaryClass"),
144
- getClassName("kcButtonBlockClass"),
145
115
  getClassName("kcButtonLargeClass")
146
116
  )}
147
117
  type="submit"
148
118
  defaultValue={msgStr("doSubmit")}
149
119
  />
150
- )}
151
- </div>
120
+ <button
121
+ className={clsx(
122
+ getClassName("kcButtonClass"),
123
+ getClassName("kcButtonDefaultClass"),
124
+ getClassName("kcButtonLargeClass")
125
+ )}
126
+ type="submit"
127
+ name="cancel-aia"
128
+ value="true"
129
+ >
130
+ {msg("doCancel")}
131
+ </button>
132
+ </>
133
+ ) : (
134
+ <input
135
+ className={clsx(
136
+ getClassName("kcButtonClass"),
137
+ getClassName("kcButtonPrimaryClass"),
138
+ getClassName("kcButtonBlockClass"),
139
+ getClassName("kcButtonLargeClass")
140
+ )}
141
+ type="submit"
142
+ defaultValue={msgStr("doSubmit")}
143
+ />
144
+ )}
152
145
  </div>
153
- </form>
154
- }
155
- />
146
+ </div>
147
+ </form>
148
+ </Template>
156
149
  );
157
150
  }
package/src/login/pages/LoginUsername.tsx CHANGED
@@ -41,114 +41,6 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
41
41
  displayInfo={social.displayInfo}
42
42
  displayWide={realm.password && social.providers !== undefined}
43
43
  headerNode={msg("doLogIn")}
44
- formNode={
45
- <div id="kc-form" className={clsx(realm.password && social.providers !== undefined && getClassName("kcContentWrapperClass"))}>
46
- <div
47
- id="kc-form-wrapper"
48
- className={clsx(
49
- realm.password &&
50
- social.providers && [getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass")]
51
- )}
52
- >
53
- {realm.password && (
54
- <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
55
- <div className={getClassName("kcFormGroupClass")}>
56
- {!usernameHidden &&
57
- (() => {
58
- const label = !realm.loginWithEmailAllowed
59
- ? "username"
60
- : realm.registrationEmailAsUsername
61
- ? "email"
62
- : "usernameOrEmail";
63
-
64
- const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label;
65
-
66
- return (
67
- <>
68
- <label htmlFor={autoCompleteHelper} className={getClassName("kcLabelClass")}>
69
- {msg(label)}
70
- </label>
71
- <input
72
- tabIndex={1}
73
- id={autoCompleteHelper}
74
- className={getClassName("kcInputClass")}
75
- //NOTE: This is used by Google Chrome auto fill so we use it to tell
76
- //the browser how to pre fill the form but before submit we put it back
77
- //to username because it is what keycloak expects.
78
- name={autoCompleteHelper}
79
- defaultValue={login.username ?? ""}
80
- type="text"
81
- autoFocus={true}
82
- autoComplete="off"
83
- />
84
- </>
85
- );
86
- })()}
87
- </div>
88
- <div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
89
- <div id="kc-form-options">
90
- {realm.rememberMe && !usernameHidden && (
91
- <div className="checkbox">
92
- <label>
93
- <input
94
- tabIndex={3}
95
- id="rememberMe"
96
- name="rememberMe"
97
- type="checkbox"
98
- {...(login.rememberMe
99
- ? {
100
- "checked": true
101
- }
102
- : {})}
103
- />
104
- {msg("rememberMe")}
105
- </label>
106
- </div>
107
- )}
108
- </div>
109
- </div>
110
- <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
111
- <input
112
- tabIndex={4}
113
- className={clsx(
114
- getClassName("kcButtonClass"),
115
- getClassName("kcButtonPrimaryClass"),
116
- getClassName("kcButtonBlockClass"),
117
- getClassName("kcButtonLargeClass")
118
- )}
119
- name="login"
120
- id="kc-login"
121
- type="submit"
122
- value={msgStr("doLogIn")}
123
- disabled={isLoginButtonDisabled}
124
- />
125
- </div>
126
- </form>
127
- )}
128
- </div>
129
- {realm.password && social.providers !== undefined && (
130
- <div
131
- id="kc-social-providers"
132
- className={clsx(getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass"))}
133
- >
134
- <ul
135
- className={clsx(
136
- getClassName("kcFormSocialAccountListClass"),
137
- social.providers.length > 4 && getClassName("kcFormSocialAccountDoubleListClass")
138
- )}
139
- >
140
- {social.providers.map(p => (
141
- <li key={p.providerId} className={getClassName("kcFormSocialAccountListLinkClass")}>
142
- <a href={p.loginUrl} id={`zocial-${p.alias}`} className={clsx("zocial", p.providerId)}>
143
- <span>{p.displayName}</span>
144
- </a>
145
- </li>
146
- ))}
147
- </ul>
148
- </div>
149
- )}
150
- </div>
151
- }
152
44
  infoNode={
153
45
  realm.password &&
154
46
  realm.registrationAllowed &&
@@ -163,6 +55,113 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
163
55
  </div>
164
56
  )
165
57
  }
166
- />
58
+ >
59
+ <div id="kc-form" className={clsx(realm.password && social.providers !== undefined && getClassName("kcContentWrapperClass"))}>
60
+ <div
61
+ id="kc-form-wrapper"
62
+ className={clsx(
63
+ realm.password &&
64
+ social.providers && [getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass")]
65
+ )}
66
+ >
67
+ {realm.password && (
68
+ <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
69
+ <div className={getClassName("kcFormGroupClass")}>
70
+ {!usernameHidden &&
71
+ (() => {
72
+ const label = !realm.loginWithEmailAllowed
73
+ ? "username"
74
+ : realm.registrationEmailAsUsername
75
+ ? "email"
76
+ : "usernameOrEmail";
77
+
78
+ const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label;
79
+
80
+ return (
81
+ <>
82
+ <label htmlFor={autoCompleteHelper} className={getClassName("kcLabelClass")}>
83
+ {msg(label)}
84
+ </label>
85
+ <input
86
+ tabIndex={1}
87
+ id={autoCompleteHelper}
88
+ className={getClassName("kcInputClass")}
89
+ //NOTE: This is used by Google Chrome auto fill so we use it to tell
90
+ //the browser how to pre fill the form but before submit we put it back
91
+ //to username because it is what keycloak expects.
92
+ name={autoCompleteHelper}
93
+ defaultValue={login.username ?? ""}
94
+ type="text"
95
+ autoFocus={true}
96
+ autoComplete="off"
97
+ />
98
+ </>
99
+ );
100
+ })()}
101
+ </div>
102
+ <div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
103
+ <div id="kc-form-options">
104
+ {realm.rememberMe && !usernameHidden && (
105
+ <div className="checkbox">
106
+ <label>
107
+ <input
108
+ tabIndex={3}
109
+ id="rememberMe"
110
+ name="rememberMe"
111
+ type="checkbox"
112
+ {...(login.rememberMe
113
+ ? {
114
+ "checked": true
115
+ }
116
+ : {})}
117
+ />
118
+ {msg("rememberMe")}
119
+ </label>
120
+ </div>
121
+ )}
122
+ </div>
123
+ </div>
124
+ <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
125
+ <input
126
+ tabIndex={4}
127
+ className={clsx(
128
+ getClassName("kcButtonClass"),
129
+ getClassName("kcButtonPrimaryClass"),
130
+ getClassName("kcButtonBlockClass"),
131
+ getClassName("kcButtonLargeClass")
132
+ )}
133
+ name="login"
134
+ id="kc-login"
135
+ type="submit"
136
+ value={msgStr("doLogIn")}
137
+ disabled={isLoginButtonDisabled}
138
+ />
139
+ </div>
140
+ </form>
141
+ )}
142
+ </div>
143
+ {realm.password && social.providers !== undefined && (
144
+ <div
145
+ id="kc-social-providers"
146
+ className={clsx(getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass"))}
147
+ >
148
+ <ul
149
+ className={clsx(
150
+ getClassName("kcFormSocialAccountListClass"),
151
+ social.providers.length > 4 && getClassName("kcFormSocialAccountDoubleListClass")
152
+ )}
153
+ >
154
+ {social.providers.map(p => (
155
+ <li key={p.providerId} className={getClassName("kcFormSocialAccountListLinkClass")}>
156
+ <a href={p.loginUrl} id={`zocial-${p.alias}`} className={clsx("zocial", p.providerId)}>
157
+ <span>{p.displayName}</span>
158
+ </a>
159
+ </li>
160
+ ))}
161
+ </ul>
162
+ </div>
163
+ )}
164
+ </div>
165
+ </Template>
167
166
  );
168
167
  }
package/src/login/pages/LoginVerifyEmail.tsx CHANGED
@@ -10,22 +10,15 @@ export default function LoginVerifyEmail(props: PageProps<Extract<KcContext, { p
10
10
  const { url, user } = kcContext;
11
11
 
12
12
  return (
13
- <Template
14
- {...{ kcContext, i18n, doUseDefaultCss, classes }}
15
- displayMessage={false}
16
- headerNode={msg("emailVerifyTitle")}
17
- formNode={
18
- <>
19
- <p className="instruction">{msg("emailVerifyInstruction1", user?.email)}</p>
20
- <p className="instruction">
21
- {msg("emailVerifyInstruction2")}
22
- <br />
23
- <a href={url.loginAction}>{msg("doClickHere")}</a>
24
- &nbsp;
25
- {msg("emailVerifyInstruction3")}
26
- </p>
27
- </>
28
- }
29
- />
13
+ <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("emailVerifyTitle")}>
14
+ <p className="instruction">{msg("emailVerifyInstruction1", user?.email)}</p>
15
+ <p className="instruction">
16
+ {msg("emailVerifyInstruction2")}
17
+ <br />
18
+ <a href={url.loginAction}>{msg("doClickHere")}</a>
19
+ &nbsp;
20
+ {msg("emailVerifyInstruction3")}
21
+ </p>
22
+ </Template>
30
23
  );
31
24
  }
package/src/login/pages/LogoutConfirm.tsx CHANGED
@@ -17,47 +17,40 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
17
17
  const { msg, msgStr } = i18n;
18
18
 
19
19
  return (
20
- <Template
21
- {...{ kcContext, i18n, doUseDefaultCss, classes }}
22
- displayMessage={false}
23
- headerNode={msg("logoutConfirmTitle")}
24
- formNode={
25
- <>
26
- <div id="kc-logout-confirm" className="content-area">
27
- <p className="instruction">{msg("logoutConfirmHeader")}</p>
28
- <form className="form-actions" action={url.logoutConfirmAction} method="POST">
29
- <input type="hidden" name="session_code" value={logoutConfirm.code} />
30
- <div className={getClassName("kcFormGroupClass")}>
31
- <div id="kc-form-options">
32
- <div className={getClassName("kcFormOptionsWrapperClass")}></div>
33
- </div>
34
- <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
35
- <input
36
- tabIndex={4}
37
- className={clsx(
38
- getClassName("kcButtonClass"),
39
- getClassName("kcButtonPrimaryClass"),
40
- getClassName("kcButtonBlockClass"),
41
- getClassName("kcButtonLargeClass")
42
- )}
43
- name="confirmLogout"
44
- id="kc-logout"
45
- type="submit"
46
- value={msgStr("doLogout")}
47
- />
48
- </div>
49
- </div>
50
- </form>
51
- <div id="kc-info-message">
52
- {!logoutConfirm.skipLink && client.baseUrl && (
53
- <p>
54
- <a href={client.baseUrl} dangerouslySetInnerHTML={{ __html: msgStr("backToApplication") }} />
55
- </p>
56
- )}
20
+ <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("logoutConfirmTitle")}>
21
+ <div id="kc-logout-confirm" className="content-area">
22
+ <p className="instruction">{msg("logoutConfirmHeader")}</p>
23
+ <form className="form-actions" action={url.logoutConfirmAction} method="POST">
24
+ <input type="hidden" name="session_code" value={logoutConfirm.code} />
25
+ <div className={getClassName("kcFormGroupClass")}>
26
+ <div id="kc-form-options">
27
+ <div className={getClassName("kcFormOptionsWrapperClass")}></div>
28
+ </div>
29
+ <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
30
+ <input
31
+ tabIndex={4}
32
+ className={clsx(
33
+ getClassName("kcButtonClass"),
34
+ getClassName("kcButtonPrimaryClass"),
35
+ getClassName("kcButtonBlockClass"),
36
+ getClassName("kcButtonLargeClass")
37
+ )}
38
+ name="confirmLogout"
39
+ id="kc-logout"
40
+ type="submit"
41
+ value={msgStr("doLogout")}
42
+ />
57
43
  </div>
58
44
  </div>
59
- </>
60
- }
61
- />
45
+ </form>
46
+ <div id="kc-info-message">
47
+ {!logoutConfirm.skipLink && client.baseUrl && (
48
+ <p>
49
+ <a href={client.baseUrl} dangerouslySetInnerHTML={{ __html: msgStr("backToApplication") }} />
50
+ </p>
51
+ )}
52
+ </div>
53
+ </div>
54
+ </Template>
62
55
  );
63
56
  }