keycloakify 6.8.3 → 6.8.4
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.
- package/README.md +4 -0
- package/lib/components/IdpReviewUserProfile.js +7 -8
- package/lib/components/IdpReviewUserProfile.js.map +1 -1
- package/lib/components/Login.js +16 -17
- package/lib/components/Login.js.map +1 -1
- package/lib/components/LoginConfigTotp.js +17 -18
- package/lib/components/LoginConfigTotp.js.map +1 -1
- package/lib/components/LoginIdpLinkConfirm.js +4 -5
- package/lib/components/LoginIdpLinkConfirm.js.map +1 -1
- package/lib/components/LoginOtp.js +17 -18
- package/lib/components/LoginOtp.js.map +1 -1
- package/lib/components/LoginPassword.js +8 -9
- package/lib/components/LoginPassword.js.map +1 -1
- package/lib/components/LoginResetPassword.js +12 -13
- package/lib/components/LoginResetPassword.js.map +1 -1
- package/lib/components/LoginUpdatePassword.js +18 -19
- package/lib/components/LoginUpdatePassword.js.map +1 -1
- package/lib/components/LoginUpdateProfile.js +28 -29
- package/lib/components/LoginUpdateProfile.js.map +1 -1
- package/lib/components/LoginUsername.js +12 -13
- package/lib/components/LoginUsername.js.map +1 -1
- package/lib/components/LogoutConfirm.js +5 -6
- package/lib/components/LogoutConfirm.js.map +1 -1
- package/lib/components/Register.js +38 -39
- package/lib/components/Register.js.map +1 -1
- package/lib/components/RegisterUserProfile.js +10 -12
- package/lib/components/RegisterUserProfile.js.map +1 -1
- package/lib/components/Template.js +26 -27
- package/lib/components/Template.js.map +1 -1
- package/lib/components/Terms.js +3 -4
- package/lib/components/Terms.js.map +1 -1
- package/lib/components/UpdateUserProfile.js +8 -9
- package/lib/components/UpdateUserProfile.js.map +1 -1
- package/lib/components/WebauthnAuthenticate.js +16 -17
- package/lib/components/WebauthnAuthenticate.js.map +1 -1
- package/lib/components/shared/UserProfileCommons.js +19 -15
- package/lib/components/shared/UserProfileCommons.js.map +1 -1
- package/lib/tools/clsx.d.ts +3 -0
- package/lib/tools/clsx.js +6 -0
- package/lib/tools/clsx.js.map +1 -0
- package/lib/tools/useCssAndCx.d.ts +7 -1
- package/lib/tools/useCssAndCx.js +9 -6
- package/lib/tools/useCssAndCx.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -4
- package/src/lib/components/IdpReviewUserProfile.tsx +7 -9
- package/src/lib/components/Login.tsx +17 -19
- package/src/lib/components/LoginConfigTotp.tsx +17 -19
- package/src/lib/components/LoginIdpLinkConfirm.tsx +4 -6
- package/src/lib/components/LoginOtp.tsx +18 -20
- package/src/lib/components/LoginPassword.tsx +8 -10
- package/src/lib/components/LoginResetPassword.tsx +12 -14
- package/src/lib/components/LoginUpdatePassword.tsx +21 -21
- package/src/lib/components/LoginUpdateProfile.tsx +29 -31
- package/src/lib/components/LoginUsername.tsx +13 -15
- package/src/lib/components/LogoutConfirm.tsx +5 -7
- package/src/lib/components/Register.tsx +40 -40
- package/src/lib/components/RegisterUserProfile.tsx +10 -20
- package/src/lib/components/Template.tsx +26 -28
- package/src/lib/components/Terms.tsx +3 -5
- package/src/lib/components/UpdateUserProfile.tsx +9 -11
- package/src/lib/components/WebauthnAuthenticate.tsx +16 -18
- package/src/lib/components/shared/UserProfileCommons.tsx +30 -27
- package/src/lib/tools/clsx.ts +7 -0
- package/src/lib/tools/useCssAndCx.ts +9 -8
|
@@ -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 {
|
|
6
|
+
import { clsx } from "../tools/clsx";
|
|
7
7
|
import type { I18n } from "../i18n";
|
|
8
8
|
|
|
9
9
|
export type LoginUpdatePasswordProps = KcProps & {
|
|
@@ -16,8 +16,6 @@ export type LoginUpdatePasswordProps = KcProps & {
|
|
|
16
16
|
const LoginUpdatePassword = memo((props: LoginUpdatePasswordProps) => {
|
|
17
17
|
const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
|
|
18
18
|
|
|
19
|
-
const { cx } = useCssAndCx();
|
|
20
|
-
|
|
21
19
|
const { msg, msgStr } = i18n;
|
|
22
20
|
|
|
23
21
|
const { url, messagesPerField, isAppInitiatedAction, username } = kcContext;
|
|
@@ -27,7 +25,7 @@ const LoginUpdatePassword = memo((props: LoginUpdatePasswordProps) => {
|
|
|
27
25
|
{...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
|
|
28
26
|
headerNode={msg("updatePasswordTitle")}
|
|
29
27
|
formNode={
|
|
30
|
-
<form id="kc-passwd-update-form" className={
|
|
28
|
+
<form id="kc-passwd-update-form" className={clsx(kcProps.kcFormClass)} action={url.loginAction} method="post">
|
|
31
29
|
<input
|
|
32
30
|
type="text"
|
|
33
31
|
id="username"
|
|
@@ -39,44 +37,46 @@ const LoginUpdatePassword = memo((props: LoginUpdatePasswordProps) => {
|
|
|
39
37
|
/>
|
|
40
38
|
<input type="password" id="password" name="password" autoComplete="current-password" style={{ display: "none" }} />
|
|
41
39
|
|
|
42
|
-
<div className={
|
|
43
|
-
<div className={
|
|
44
|
-
<label htmlFor="password-new" className={
|
|
40
|
+
<div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("password", kcProps.kcFormGroupErrorClass))}>
|
|
41
|
+
<div className={clsx(kcProps.kcLabelWrapperClass)}>
|
|
42
|
+
<label htmlFor="password-new" className={clsx(kcProps.kcLabelClass)}>
|
|
45
43
|
{msg("passwordNew")}
|
|
46
44
|
</label>
|
|
47
45
|
</div>
|
|
48
|
-
<div className={
|
|
46
|
+
<div className={clsx(kcProps.kcInputWrapperClass)}>
|
|
49
47
|
<input
|
|
50
48
|
type="password"
|
|
51
49
|
id="password-new"
|
|
52
50
|
name="password-new"
|
|
53
51
|
autoFocus
|
|
54
52
|
autoComplete="new-password"
|
|
55
|
-
className={
|
|
53
|
+
className={clsx(kcProps.kcInputClass)}
|
|
56
54
|
/>
|
|
57
55
|
</div>
|
|
58
56
|
</div>
|
|
59
57
|
|
|
60
|
-
<div
|
|
61
|
-
|
|
62
|
-
|
|
58
|
+
<div
|
|
59
|
+
className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("password-confirm", kcProps.kcFormGroupErrorClass))}
|
|
60
|
+
>
|
|
61
|
+
<div className={clsx(kcProps.kcLabelWrapperClass)}>
|
|
62
|
+
<label htmlFor="password-confirm" className={clsx(kcProps.kcLabelClass)}>
|
|
63
63
|
{msg("passwordConfirm")}
|
|
64
64
|
</label>
|
|
65
65
|
</div>
|
|
66
|
-
<div className={
|
|
66
|
+
<div className={clsx(kcProps.kcInputWrapperClass)}>
|
|
67
67
|
<input
|
|
68
68
|
type="password"
|
|
69
69
|
id="password-confirm"
|
|
70
70
|
name="password-confirm"
|
|
71
71
|
autoComplete="new-password"
|
|
72
|
-
className={
|
|
72
|
+
className={clsx(kcProps.kcInputClass)}
|
|
73
73
|
/>
|
|
74
74
|
</div>
|
|
75
75
|
</div>
|
|
76
76
|
|
|
77
|
-
<div className={
|
|
78
|
-
<div id="kc-form-options" className={
|
|
79
|
-
<div className={
|
|
77
|
+
<div className={clsx(kcProps.kcFormGroupClass)}>
|
|
78
|
+
<div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
|
|
79
|
+
<div className={clsx(kcProps.kcFormOptionsWrapperClass)}>
|
|
80
80
|
{isAppInitiatedAction && (
|
|
81
81
|
<div className="checkbox">
|
|
82
82
|
<label>
|
|
@@ -88,16 +88,16 @@ const LoginUpdatePassword = memo((props: LoginUpdatePasswordProps) => {
|
|
|
88
88
|
</div>
|
|
89
89
|
</div>
|
|
90
90
|
|
|
91
|
-
<div id="kc-form-buttons" className={
|
|
91
|
+
<div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
|
|
92
92
|
{isAppInitiatedAction ? (
|
|
93
93
|
<>
|
|
94
94
|
<input
|
|
95
|
-
className={
|
|
95
|
+
className={clsx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
|
|
96
96
|
type="submit"
|
|
97
97
|
defaultValue={msgStr("doSubmit")}
|
|
98
98
|
/>
|
|
99
99
|
<button
|
|
100
|
-
className={
|
|
100
|
+
className={clsx(kcProps.kcButtonClass, kcProps.kcButtonDefaultClass, kcProps.kcButtonLargeClass)}
|
|
101
101
|
type="submit"
|
|
102
102
|
name="cancel-aia"
|
|
103
103
|
value="true"
|
|
@@ -107,7 +107,7 @@ const LoginUpdatePassword = memo((props: LoginUpdatePasswordProps) => {
|
|
|
107
107
|
</>
|
|
108
108
|
) : (
|
|
109
109
|
<input
|
|
110
|
-
className={
|
|
110
|
+
className={clsx(
|
|
111
111
|
kcProps.kcButtonClass,
|
|
112
112
|
kcProps.kcButtonPrimaryClass,
|
|
113
113
|
kcProps.kcButtonBlockClass,
|
|
@@ -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 {
|
|
6
|
+
import { clsx } from "../tools/clsx";
|
|
7
7
|
import type { I18n } from "../i18n";
|
|
8
8
|
|
|
9
9
|
export type LoginUpdateProfile = KcProps & {
|
|
@@ -16,8 +16,6 @@ export type LoginUpdateProfile = KcProps & {
|
|
|
16
16
|
const LoginUpdateProfile = memo((props: LoginUpdateProfile) => {
|
|
17
17
|
const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
|
|
18
18
|
|
|
19
|
-
const { cx } = useCssAndCx();
|
|
20
|
-
|
|
21
19
|
const { msg, msgStr } = i18n;
|
|
22
20
|
|
|
23
21
|
const { url, user, messagesPerField, isAppInitiatedAction } = kcContext;
|
|
@@ -27,86 +25,86 @@ const LoginUpdateProfile = memo((props: LoginUpdateProfile) => {
|
|
|
27
25
|
{...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
|
|
28
26
|
headerNode={msg("loginProfileTitle")}
|
|
29
27
|
formNode={
|
|
30
|
-
<form id="kc-update-profile-form" className={
|
|
28
|
+
<form id="kc-update-profile-form" className={clsx(kcProps.kcFormClass)} action={url.loginAction} method="post">
|
|
31
29
|
{user.editUsernameAllowed && (
|
|
32
|
-
<div className={
|
|
33
|
-
<div className={
|
|
34
|
-
<label htmlFor="username" className={
|
|
30
|
+
<div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("username", kcProps.kcFormGroupErrorClass))}>
|
|
31
|
+
<div className={clsx(kcProps.kcLabelWrapperClass)}>
|
|
32
|
+
<label htmlFor="username" className={clsx(kcProps.kcLabelClass)}>
|
|
35
33
|
{msg("username")}
|
|
36
34
|
</label>
|
|
37
35
|
</div>
|
|
38
|
-
<div className={
|
|
36
|
+
<div className={clsx(kcProps.kcInputWrapperClass)}>
|
|
39
37
|
<input
|
|
40
38
|
type="text"
|
|
41
39
|
id="username"
|
|
42
40
|
name="username"
|
|
43
41
|
defaultValue={user.username ?? ""}
|
|
44
|
-
className={
|
|
42
|
+
className={clsx(kcProps.kcInputClass)}
|
|
45
43
|
/>
|
|
46
44
|
</div>
|
|
47
45
|
</div>
|
|
48
46
|
)}
|
|
49
47
|
|
|
50
|
-
<div className={
|
|
51
|
-
<div className={
|
|
52
|
-
<label htmlFor="email" className={
|
|
48
|
+
<div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("email", kcProps.kcFormGroupErrorClass))}>
|
|
49
|
+
<div className={clsx(kcProps.kcLabelWrapperClass)}>
|
|
50
|
+
<label htmlFor="email" className={clsx(kcProps.kcLabelClass)}>
|
|
53
51
|
{msg("email")}
|
|
54
52
|
</label>
|
|
55
53
|
</div>
|
|
56
|
-
<div className={
|
|
57
|
-
<input type="text" id="email" name="email" defaultValue={user.email ?? ""} className={
|
|
54
|
+
<div className={clsx(kcProps.kcInputWrapperClass)}>
|
|
55
|
+
<input type="text" id="email" name="email" defaultValue={user.email ?? ""} className={clsx(kcProps.kcInputClass)} />
|
|
58
56
|
</div>
|
|
59
57
|
</div>
|
|
60
58
|
|
|
61
|
-
<div className={
|
|
62
|
-
<div className={
|
|
63
|
-
<label htmlFor="firstName" className={
|
|
59
|
+
<div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("firstName", kcProps.kcFormGroupErrorClass))}>
|
|
60
|
+
<div className={clsx(kcProps.kcLabelWrapperClass)}>
|
|
61
|
+
<label htmlFor="firstName" className={clsx(kcProps.kcLabelClass)}>
|
|
64
62
|
{msg("firstName")}
|
|
65
63
|
</label>
|
|
66
64
|
</div>
|
|
67
|
-
<div className={
|
|
65
|
+
<div className={clsx(kcProps.kcInputWrapperClass)}>
|
|
68
66
|
<input
|
|
69
67
|
type="text"
|
|
70
68
|
id="firstName"
|
|
71
69
|
name="firstName"
|
|
72
70
|
defaultValue={user.firstName ?? ""}
|
|
73
|
-
className={
|
|
71
|
+
className={clsx(kcProps.kcInputClass)}
|
|
74
72
|
/>
|
|
75
73
|
</div>
|
|
76
74
|
</div>
|
|
77
75
|
|
|
78
|
-
<div className={
|
|
79
|
-
<div className={
|
|
80
|
-
<label htmlFor="lastName" className={
|
|
76
|
+
<div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("lastName", kcProps.kcFormGroupErrorClass))}>
|
|
77
|
+
<div className={clsx(kcProps.kcLabelWrapperClass)}>
|
|
78
|
+
<label htmlFor="lastName" className={clsx(kcProps.kcLabelClass)}>
|
|
81
79
|
{msg("lastName")}
|
|
82
80
|
</label>
|
|
83
81
|
</div>
|
|
84
|
-
<div className={
|
|
82
|
+
<div className={clsx(kcProps.kcInputWrapperClass)}>
|
|
85
83
|
<input
|
|
86
84
|
type="text"
|
|
87
85
|
id="lastName"
|
|
88
86
|
name="lastName"
|
|
89
87
|
defaultValue={user.lastName ?? ""}
|
|
90
|
-
className={
|
|
88
|
+
className={clsx(kcProps.kcInputClass)}
|
|
91
89
|
/>
|
|
92
90
|
</div>
|
|
93
91
|
</div>
|
|
94
92
|
|
|
95
|
-
<div className={
|
|
96
|
-
<div id="kc-form-options" className={
|
|
97
|
-
<div className={
|
|
93
|
+
<div className={clsx(kcProps.kcFormGroupClass)}>
|
|
94
|
+
<div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
|
|
95
|
+
<div className={clsx(kcProps.kcFormOptionsWrapperClass)} />
|
|
98
96
|
</div>
|
|
99
97
|
|
|
100
|
-
<div id="kc-form-buttons" className={
|
|
98
|
+
<div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
|
|
101
99
|
{isAppInitiatedAction ? (
|
|
102
100
|
<>
|
|
103
101
|
<input
|
|
104
|
-
className={
|
|
102
|
+
className={clsx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
|
|
105
103
|
type="submit"
|
|
106
104
|
defaultValue={msgStr("doSubmit")}
|
|
107
105
|
/>
|
|
108
106
|
<button
|
|
109
|
-
className={
|
|
107
|
+
className={clsx(kcProps.kcButtonClass, kcProps.kcButtonDefaultClass, kcProps.kcButtonLargeClass)}
|
|
110
108
|
type="submit"
|
|
111
109
|
name="cancel-aia"
|
|
112
110
|
value="true"
|
|
@@ -116,7 +114,7 @@ const LoginUpdateProfile = memo((props: LoginUpdateProfile) => {
|
|
|
116
114
|
</>
|
|
117
115
|
) : (
|
|
118
116
|
<input
|
|
119
|
-
className={
|
|
117
|
+
className={clsx(
|
|
120
118
|
kcProps.kcButtonClass,
|
|
121
119
|
kcProps.kcButtonPrimaryClass,
|
|
122
120
|
kcProps.kcButtonBlockClass,
|
|
@@ -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 {
|
|
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 LoginUsername = memo((props: LoginUsernameProps) => {
|
|
|
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 LoginUsername = memo((props: LoginUsernameProps) => {
|
|
|
47
45
|
displayWide={realm.password && social.providers !== undefined}
|
|
48
46
|
headerNode={msg("doLogIn")}
|
|
49
47
|
formNode={
|
|
50
|
-
<div id="kc-form" className={
|
|
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={
|
|
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={
|
|
57
|
+
<div className={clsx(kcProps.kcFormGroupClass)}>
|
|
60
58
|
{!usernameHidden &&
|
|
61
59
|
(() => {
|
|
62
60
|
const label = !realm.loginWithEmailAllowed
|
|
@@ -69,13 +67,13 @@ const LoginUsername = memo((props: LoginUsernameProps) => {
|
|
|
69
67
|
|
|
70
68
|
return (
|
|
71
69
|
<>
|
|
72
|
-
<label htmlFor={autoCompleteHelper} className={
|
|
70
|
+
<label htmlFor={autoCompleteHelper} className={clsx(kcProps.kcLabelClass)}>
|
|
73
71
|
{msg(label)}
|
|
74
72
|
</label>
|
|
75
73
|
<input
|
|
76
74
|
tabIndex={1}
|
|
77
75
|
id={autoCompleteHelper}
|
|
78
|
-
className={
|
|
76
|
+
className={clsx(kcProps.kcInputClass)}
|
|
79
77
|
//NOTE: This is used by Google Chrome auto fill so we use it to tell
|
|
80
78
|
//the browser how to pre fill the form but before submit we put it back
|
|
81
79
|
//to username because it is what keycloak expects.
|
|
@@ -89,7 +87,7 @@ const LoginUsername = memo((props: LoginUsernameProps) => {
|
|
|
89
87
|
);
|
|
90
88
|
})()}
|
|
91
89
|
</div>
|
|
92
|
-
<div className={
|
|
90
|
+
<div className={clsx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
|
|
93
91
|
<div id="kc-form-options">
|
|
94
92
|
{realm.rememberMe && !usernameHidden && (
|
|
95
93
|
<div className="checkbox">
|
|
@@ -111,10 +109,10 @@ const LoginUsername = memo((props: LoginUsernameProps) => {
|
|
|
111
109
|
)}
|
|
112
110
|
</div>
|
|
113
111
|
</div>
|
|
114
|
-
<div id="kc-form-buttons" className={
|
|
112
|
+
<div id="kc-form-buttons" className={clsx(kcProps.kcFormGroupClass)}>
|
|
115
113
|
<input
|
|
116
114
|
tabIndex={4}
|
|
117
|
-
className={
|
|
115
|
+
className={clsx(
|
|
118
116
|
kcProps.kcButtonClass,
|
|
119
117
|
kcProps.kcButtonPrimaryClass,
|
|
120
118
|
kcProps.kcButtonBlockClass,
|
|
@@ -131,16 +129,16 @@ const LoginUsername = memo((props: LoginUsernameProps) => {
|
|
|
131
129
|
)}
|
|
132
130
|
</div>
|
|
133
131
|
{realm.password && social.providers !== undefined && (
|
|
134
|
-
<div id="kc-social-providers" className={
|
|
132
|
+
<div id="kc-social-providers" className={clsx(kcProps.kcFormSocialAccountContentClass, kcProps.kcFormSocialAccountClass)}>
|
|
135
133
|
<ul
|
|
136
|
-
className={
|
|
134
|
+
className={clsx(
|
|
137
135
|
kcProps.kcFormSocialAccountListClass,
|
|
138
136
|
social.providers.length > 4 && kcProps.kcFormSocialAccountDoubleListClass
|
|
139
137
|
)}
|
|
140
138
|
>
|
|
141
139
|
{social.providers.map(p => (
|
|
142
|
-
<li key={p.providerId} className={
|
|
143
|
-
<a href={p.loginUrl} id={`zocial-${p.alias}`} className={
|
|
140
|
+
<li key={p.providerId} className={clsx(kcProps.kcFormSocialAccountListLinkClass)}>
|
|
141
|
+
<a href={p.loginUrl} id={`zocial-${p.alias}`} className={clsx("zocial", p.providerId)}>
|
|
144
142
|
<span>{p.displayName}</span>
|
|
145
143
|
</a>
|
|
146
144
|
</li>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { memo } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { clsx } from "../tools/clsx";
|
|
3
3
|
import DefaultTemplate from "./Template";
|
|
4
4
|
import type { TemplateProps } from "./Template";
|
|
5
5
|
import type { KcProps } from "./KcProps";
|
|
@@ -18,8 +18,6 @@ const LogoutConfirm = memo((props: LogoutConfirmProps) => {
|
|
|
18
18
|
|
|
19
19
|
const { url, client, logoutConfirm } = kcContext;
|
|
20
20
|
|
|
21
|
-
const { cx } = useCssAndCx();
|
|
22
|
-
|
|
23
21
|
const { msg, msgStr } = i18n;
|
|
24
22
|
|
|
25
23
|
return (
|
|
@@ -33,14 +31,14 @@ const LogoutConfirm = memo((props: LogoutConfirmProps) => {
|
|
|
33
31
|
<p className="instruction">{msg("logoutConfirmHeader")}</p>
|
|
34
32
|
<form className="form-actions" action={url.logoutConfirmAction} method="POST">
|
|
35
33
|
<input type="hidden" name="session_code" value={logoutConfirm.code} />
|
|
36
|
-
<div className={
|
|
34
|
+
<div className={clsx(kcProps.kcFormGroupClass)}>
|
|
37
35
|
<div id="kc-form-options">
|
|
38
|
-
<div className={
|
|
36
|
+
<div className={clsx(kcProps.kcFormOptionsWrapperClass)}></div>
|
|
39
37
|
</div>
|
|
40
|
-
<div id="kc-form-buttons" className={
|
|
38
|
+
<div id="kc-form-buttons" className={clsx(kcProps.kcFormGroupClass)}>
|
|
41
39
|
<input
|
|
42
40
|
tabIndex={4}
|
|
43
|
-
className={
|
|
41
|
+
className={clsx(
|
|
44
42
|
kcProps.kcButtonClass,
|
|
45
43
|
kcProps.kcButtonPrimaryClass,
|
|
46
44
|
kcProps.kcButtonBlockClass,
|
|
@@ -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 {
|
|
6
|
+
import { clsx } from "../tools/clsx";
|
|
7
7
|
import type { I18n } from "../i18n";
|
|
8
8
|
|
|
9
9
|
export type RegisterProps = KcProps & {
|
|
@@ -20,59 +20,57 @@ const Register = memo((props: RegisterProps) => {
|
|
|
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
|
headerNode={msg("registerTitle")}
|
|
29
27
|
formNode={
|
|
30
|
-
<form id="kc-register-form" className={
|
|
31
|
-
<div className={
|
|
32
|
-
<div className={
|
|
33
|
-
<label htmlFor="firstName" className={
|
|
28
|
+
<form id="kc-register-form" className={clsx(kcProps.kcFormClass)} action={url.registrationAction} method="post">
|
|
29
|
+
<div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("firstName", kcProps.kcFormGroupErrorClass))}>
|
|
30
|
+
<div className={clsx(kcProps.kcLabelWrapperClass)}>
|
|
31
|
+
<label htmlFor="firstName" className={clsx(kcProps.kcLabelClass)}>
|
|
34
32
|
{msg("firstName")}
|
|
35
33
|
</label>
|
|
36
34
|
</div>
|
|
37
|
-
<div className={
|
|
35
|
+
<div className={clsx(kcProps.kcInputWrapperClass)}>
|
|
38
36
|
<input
|
|
39
37
|
type="text"
|
|
40
38
|
id="firstName"
|
|
41
|
-
className={
|
|
39
|
+
className={clsx(kcProps.kcInputClass)}
|
|
42
40
|
name="firstName"
|
|
43
41
|
defaultValue={register.formData.firstName ?? ""}
|
|
44
42
|
/>
|
|
45
43
|
</div>
|
|
46
44
|
</div>
|
|
47
45
|
|
|
48
|
-
<div className={
|
|
49
|
-
<div className={
|
|
50
|
-
<label htmlFor="lastName" className={
|
|
46
|
+
<div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("lastName", kcProps.kcFormGroupErrorClass))}>
|
|
47
|
+
<div className={clsx(kcProps.kcLabelWrapperClass)}>
|
|
48
|
+
<label htmlFor="lastName" className={clsx(kcProps.kcLabelClass)}>
|
|
51
49
|
{msg("lastName")}
|
|
52
50
|
</label>
|
|
53
51
|
</div>
|
|
54
|
-
<div className={
|
|
52
|
+
<div className={clsx(kcProps.kcInputWrapperClass)}>
|
|
55
53
|
<input
|
|
56
54
|
type="text"
|
|
57
55
|
id="lastName"
|
|
58
|
-
className={
|
|
56
|
+
className={clsx(kcProps.kcInputClass)}
|
|
59
57
|
name="lastName"
|
|
60
58
|
defaultValue={register.formData.lastName ?? ""}
|
|
61
59
|
/>
|
|
62
60
|
</div>
|
|
63
61
|
</div>
|
|
64
62
|
|
|
65
|
-
<div className={
|
|
66
|
-
<div className={
|
|
67
|
-
<label htmlFor="email" className={
|
|
63
|
+
<div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("email", kcProps.kcFormGroupErrorClass))}>
|
|
64
|
+
<div className={clsx(kcProps.kcLabelWrapperClass)}>
|
|
65
|
+
<label htmlFor="email" className={clsx(kcProps.kcLabelClass)}>
|
|
68
66
|
{msg("email")}
|
|
69
67
|
</label>
|
|
70
68
|
</div>
|
|
71
|
-
<div className={
|
|
69
|
+
<div className={clsx(kcProps.kcInputWrapperClass)}>
|
|
72
70
|
<input
|
|
73
71
|
type="text"
|
|
74
72
|
id="email"
|
|
75
|
-
className={
|
|
73
|
+
className={clsx(kcProps.kcInputClass)}
|
|
76
74
|
name="email"
|
|
77
75
|
defaultValue={register.formData.email ?? ""}
|
|
78
76
|
autoComplete="email"
|
|
@@ -80,17 +78,17 @@ const Register = memo((props: RegisterProps) => {
|
|
|
80
78
|
</div>
|
|
81
79
|
</div>
|
|
82
80
|
{!realm.registrationEmailAsUsername && (
|
|
83
|
-
<div className={
|
|
84
|
-
<div className={
|
|
85
|
-
<label htmlFor="username" className={
|
|
81
|
+
<div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("username", kcProps.kcFormGroupErrorClass))}>
|
|
82
|
+
<div className={clsx(kcProps.kcLabelWrapperClass)}>
|
|
83
|
+
<label htmlFor="username" className={clsx(kcProps.kcLabelClass)}>
|
|
86
84
|
{msg("username")}
|
|
87
85
|
</label>
|
|
88
86
|
</div>
|
|
89
|
-
<div className={
|
|
87
|
+
<div className={clsx(kcProps.kcInputWrapperClass)}>
|
|
90
88
|
<input
|
|
91
89
|
type="text"
|
|
92
90
|
id="username"
|
|
93
|
-
className={
|
|
91
|
+
className={clsx(kcProps.kcInputClass)}
|
|
94
92
|
name="username"
|
|
95
93
|
defaultValue={register.formData.username ?? ""}
|
|
96
94
|
autoComplete="username"
|
|
@@ -100,17 +98,19 @@ const Register = memo((props: RegisterProps) => {
|
|
|
100
98
|
)}
|
|
101
99
|
{passwordRequired && (
|
|
102
100
|
<>
|
|
103
|
-
<div
|
|
104
|
-
|
|
105
|
-
|
|
101
|
+
<div
|
|
102
|
+
className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("password", kcProps.kcFormGroupErrorClass))}
|
|
103
|
+
>
|
|
104
|
+
<div className={clsx(kcProps.kcLabelWrapperClass)}>
|
|
105
|
+
<label htmlFor="password" className={clsx(kcProps.kcLabelClass)}>
|
|
106
106
|
{msg("password")}
|
|
107
107
|
</label>
|
|
108
108
|
</div>
|
|
109
|
-
<div className={
|
|
109
|
+
<div className={clsx(kcProps.kcInputWrapperClass)}>
|
|
110
110
|
<input
|
|
111
111
|
type="password"
|
|
112
112
|
id="password"
|
|
113
|
-
className={
|
|
113
|
+
className={clsx(kcProps.kcInputClass)}
|
|
114
114
|
name="password"
|
|
115
115
|
autoComplete="new-password"
|
|
116
116
|
/>
|
|
@@ -118,41 +118,41 @@ const Register = memo((props: RegisterProps) => {
|
|
|
118
118
|
</div>
|
|
119
119
|
|
|
120
120
|
<div
|
|
121
|
-
className={
|
|
121
|
+
className={clsx(
|
|
122
122
|
kcProps.kcFormGroupClass,
|
|
123
123
|
messagesPerField.printIfExists("password-confirm", kcProps.kcFormGroupErrorClass)
|
|
124
124
|
)}
|
|
125
125
|
>
|
|
126
|
-
<div className={
|
|
127
|
-
<label htmlFor="password-confirm" className={
|
|
126
|
+
<div className={clsx(kcProps.kcLabelWrapperClass)}>
|
|
127
|
+
<label htmlFor="password-confirm" className={clsx(kcProps.kcLabelClass)}>
|
|
128
128
|
{msg("passwordConfirm")}
|
|
129
129
|
</label>
|
|
130
130
|
</div>
|
|
131
|
-
<div className={
|
|
132
|
-
<input type="password" id="password-confirm" className={
|
|
131
|
+
<div className={clsx(kcProps.kcInputWrapperClass)}>
|
|
132
|
+
<input type="password" id="password-confirm" className={clsx(kcProps.kcInputClass)} name="password-confirm" />
|
|
133
133
|
</div>
|
|
134
134
|
</div>
|
|
135
135
|
</>
|
|
136
136
|
)}
|
|
137
137
|
{recaptchaRequired && (
|
|
138
138
|
<div className="form-group">
|
|
139
|
-
<div className={
|
|
139
|
+
<div className={clsx(kcProps.kcInputWrapperClass)}>
|
|
140
140
|
<div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey}></div>
|
|
141
141
|
</div>
|
|
142
142
|
</div>
|
|
143
143
|
)}
|
|
144
|
-
<div className={
|
|
145
|
-
<div id="kc-form-options" className={
|
|
146
|
-
<div className={
|
|
144
|
+
<div className={clsx(kcProps.kcFormGroupClass)}>
|
|
145
|
+
<div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
|
|
146
|
+
<div className={clsx(kcProps.kcFormOptionsWrapperClass)}>
|
|
147
147
|
<span>
|
|
148
148
|
<a href={url.loginUrl}>{msg("backToLogin")}</a>
|
|
149
149
|
</span>
|
|
150
150
|
</div>
|
|
151
151
|
</div>
|
|
152
152
|
|
|
153
|
-
<div id="kc-form-buttons" className={
|
|
153
|
+
<div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
|
|
154
154
|
<input
|
|
155
|
-
className={
|
|
155
|
+
className={clsx(
|
|
156
156
|
kcProps.kcButtonClass,
|
|
157
157
|
kcProps.kcButtonPrimaryClass,
|
|
158
158
|
kcProps.kcButtonBlockClass,
|