keycloakify 6.7.2 → 6.8.1

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 (91) hide show
  1. package/README.md +6 -0
  2. package/lib/components/Error.d.ts +6 -3
  3. package/lib/components/Error.js +4 -4
  4. package/lib/components/Error.js.map +1 -1
  5. package/lib/components/IdpReviewUserProfile.d.ts +6 -3
  6. package/lib/components/IdpReviewUserProfile.js +10 -10
  7. package/lib/components/IdpReviewUserProfile.js.map +1 -1
  8. package/lib/components/Info.d.ts +6 -3
  9. package/lib/components/Info.js +4 -4
  10. package/lib/components/Info.js.map +1 -1
  11. package/lib/components/KcApp.d.ts +7 -4
  12. package/lib/components/KcApp.js +25 -24
  13. package/lib/components/KcApp.js.map +1 -1
  14. package/lib/components/Login.d.ts +6 -3
  15. package/lib/components/Login.js +17 -17
  16. package/lib/components/Login.js.map +1 -1
  17. package/lib/components/LoginConfigTotp.d.ts +6 -3
  18. package/lib/components/LoginConfigTotp.js +25 -25
  19. package/lib/components/LoginConfigTotp.js.map +1 -1
  20. package/lib/components/LoginIdpLinkConfirm.d.ts +6 -3
  21. package/lib/components/LoginIdpLinkConfirm.js +7 -7
  22. package/lib/components/LoginIdpLinkConfirm.js.map +1 -1
  23. package/lib/components/LoginIdpLinkEmail.d.ts +6 -3
  24. package/lib/components/LoginIdpLinkEmail.js +4 -4
  25. package/lib/components/LoginIdpLinkEmail.js.map +1 -1
  26. package/lib/components/LoginOtp.d.ts +6 -3
  27. package/lib/components/LoginOtp.js +19 -19
  28. package/lib/components/LoginOtp.js.map +1 -1
  29. package/lib/components/LoginPageExpired.d.ts +6 -3
  30. package/lib/components/LoginPageExpired.js +4 -4
  31. package/lib/components/LoginPageExpired.js.map +1 -1
  32. package/lib/components/LoginPassword.d.ts +6 -3
  33. package/lib/components/LoginPassword.js +12 -12
  34. package/lib/components/LoginPassword.js.map +1 -1
  35. package/lib/components/LoginResetPassword.d.ts +6 -3
  36. package/lib/components/LoginResetPassword.js +14 -14
  37. package/lib/components/LoginResetPassword.js.map +1 -1
  38. package/lib/components/LoginUpdatePassword.d.ts +6 -3
  39. package/lib/components/LoginUpdatePassword.js +20 -20
  40. package/lib/components/LoginUpdatePassword.js.map +1 -1
  41. package/lib/components/LoginUpdateProfile.d.ts +6 -3
  42. package/lib/components/LoginUpdateProfile.js +31 -31
  43. package/lib/components/LoginUpdateProfile.js.map +1 -1
  44. package/lib/components/LoginUsername.d.ts +6 -3
  45. package/lib/components/LoginUsername.js +13 -13
  46. package/lib/components/LoginUsername.js.map +1 -1
  47. package/lib/components/LoginVerifyEmail.d.ts +6 -3
  48. package/lib/components/LoginVerifyEmail.js +4 -4
  49. package/lib/components/LoginVerifyEmail.js.map +1 -1
  50. package/lib/components/LogoutConfirm.d.ts +6 -3
  51. package/lib/components/LogoutConfirm.js +8 -8
  52. package/lib/components/LogoutConfirm.js.map +1 -1
  53. package/lib/components/Register.d.ts +6 -3
  54. package/lib/components/Register.js +41 -41
  55. package/lib/components/Register.js.map +1 -1
  56. package/lib/components/RegisterUserProfile.d.ts +6 -3
  57. package/lib/components/RegisterUserProfile.js +12 -12
  58. package/lib/components/RegisterUserProfile.js.map +1 -1
  59. package/lib/components/Terms.d.ts +6 -3
  60. package/lib/components/Terms.js +6 -6
  61. package/lib/components/Terms.js.map +1 -1
  62. package/lib/components/UpdateUserProfile.d.ts +6 -3
  63. package/lib/components/UpdateUserProfile.js +11 -11
  64. package/lib/components/UpdateUserProfile.js.map +1 -1
  65. package/lib/components/WebauthnAuthenticate.d.ts +6 -3
  66. package/lib/components/WebauthnAuthenticate.js +18 -18
  67. package/lib/components/WebauthnAuthenticate.js.map +1 -1
  68. package/lib/tsconfig.tsbuildinfo +1 -1
  69. package/package.json +3 -3
  70. package/src/lib/components/Error.tsx +34 -31
  71. package/src/lib/components/IdpReviewUserProfile.tsx +50 -47
  72. package/src/lib/components/Info.tsx +49 -46
  73. package/src/lib/components/KcApp.tsx +74 -69
  74. package/src/lib/components/Login.tsx +178 -175
  75. package/src/lib/components/LoginConfigTotp.tsx +163 -160
  76. package/src/lib/components/LoginIdpLinkConfirm.tsx +56 -43
  77. package/src/lib/components/LoginIdpLinkEmail.tsx +34 -31
  78. package/src/lib/components/LoginOtp.tsx +86 -83
  79. package/src/lib/components/LoginPageExpired.tsx +38 -35
  80. package/src/lib/components/LoginPassword.tsx +79 -76
  81. package/src/lib/components/LoginResetPassword.tsx +67 -64
  82. package/src/lib/components/LoginUpdatePassword.tsx +105 -102
  83. package/src/lib/components/LoginUpdateProfile.tsx +108 -105
  84. package/src/lib/components/LoginUsername.tsx +145 -142
  85. package/src/lib/components/LoginVerifyEmail.tsx +34 -31
  86. package/src/lib/components/LogoutConfirm.tsx +57 -54
  87. package/src/lib/components/Register.tsx +137 -134
  88. package/src/lib/components/RegisterUserProfile.tsx +63 -60
  89. package/src/lib/components/Terms.tsx +56 -52
  90. package/src/lib/components/UpdateUserProfile.tsx +61 -58
  91. package/src/lib/components/WebauthnAuthenticate.tsx +179 -178
@@ -1,5 +1,6 @@
1
1
  import React, { useEffect, memo } from "react";
2
- import Template from "./Template";
2
+ import DefaultTemplate from "./Template";
3
+ import type { TemplateProps } from "./Template";
3
4
  import type { KcProps } from "./KcProps";
4
5
  import type { KcContextBase } from "../getKcContext/KcContextBase";
5
6
  import { headInsert } from "../tools/headInsert";
@@ -7,95 +8,97 @@ import { pathJoin } from "../../bin/tools/pathJoin";
7
8
  import { useCssAndCx } from "../tools/useCssAndCx";
8
9
  import type { I18n } from "../i18n";
9
10
 
10
- const LoginOtp = memo(
11
- ({
12
- kcContext,
13
- i18n,
14
- doFetchDefaultThemeResources = true,
15
- ...props
16
- }: { kcContext: KcContextBase.LoginOtp; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
17
- const { otpLogin, url } = kcContext;
18
-
19
- const { cx } = useCssAndCx();
20
-
21
- const { msg, msgStr } = i18n;
22
-
23
- useEffect(() => {
24
- let isCleanedUp = false;
25
-
26
- headInsert({
27
- "type": "javascript",
28
- "src": pathJoin(kcContext.url.resourcesCommonPath, "node_modules/jquery/dist/jquery.min.js")
29
- }).then(() => {
30
- if (isCleanedUp) return;
31
-
32
- evaluateInlineScript();
33
- });
34
-
35
- return () => {
36
- isCleanedUp = true;
37
- };
38
- }, []);
39
-
40
- return (
41
- <Template
42
- {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
43
- headerNode={msg("doLogIn")}
44
- formNode={
45
- <form id="kc-otp-login-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
46
- {otpLogin.userOtpCredentials.length > 1 && (
47
- <div className={cx(props.kcFormGroupClass)}>
48
- <div className={cx(props.kcInputWrapperClass)}>
49
- {otpLogin.userOtpCredentials.map(otpCredential => (
50
- <div key={otpCredential.id} className={cx(props.kcSelectOTPListClass)}>
51
- <input type="hidden" value="${otpCredential.id}" />
52
- <div className={cx(props.kcSelectOTPListItemClass)}>
53
- <span className={cx(props.kcAuthenticatorOtpCircleClass)} />
54
- <h2 className={cx(props.kcSelectOTPItemHeadingClass)}>{otpCredential.userLabel}</h2>
55
- </div>
11
+ export type LoginOtpProps = KcProps & {
12
+ kcContext: KcContextBase.LoginOtp;
13
+ i18n: I18n;
14
+ doFetchDefaultThemeResources?: boolean;
15
+ Template?: (props: TemplateProps) => JSX.Element | null;
16
+ };
17
+
18
+ const LoginOtp = memo((props: LoginOtpProps) => {
19
+ const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
20
+
21
+ const { otpLogin, url } = kcContext;
22
+
23
+ const { cx } = useCssAndCx();
24
+
25
+ const { msg, msgStr } = i18n;
26
+
27
+ useEffect(() => {
28
+ let isCleanedUp = false;
29
+
30
+ headInsert({
31
+ "type": "javascript",
32
+ "src": pathJoin(kcContext.url.resourcesCommonPath, "node_modules/jquery/dist/jquery.min.js")
33
+ }).then(() => {
34
+ if (isCleanedUp) return;
35
+
36
+ evaluateInlineScript();
37
+ });
38
+
39
+ return () => {
40
+ isCleanedUp = true;
41
+ };
42
+ }, []);
43
+
44
+ return (
45
+ <Template
46
+ {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
47
+ headerNode={msg("doLogIn")}
48
+ formNode={
49
+ <form id="kc-otp-login-form" className={cx(kcProps.kcFormClass)} action={url.loginAction} method="post">
50
+ {otpLogin.userOtpCredentials.length > 1 && (
51
+ <div className={cx(kcProps.kcFormGroupClass)}>
52
+ <div className={cx(kcProps.kcInputWrapperClass)}>
53
+ {otpLogin.userOtpCredentials.map(otpCredential => (
54
+ <div key={otpCredential.id} className={cx(kcProps.kcSelectOTPListClass)}>
55
+ <input type="hidden" value="${otpCredential.id}" />
56
+ <div className={cx(kcProps.kcSelectOTPListItemClass)}>
57
+ <span className={cx(kcProps.kcAuthenticatorOtpCircleClass)} />
58
+ <h2 className={cx(kcProps.kcSelectOTPItemHeadingClass)}>{otpCredential.userLabel}</h2>
56
59
  </div>
57
- ))}
58
- </div>
59
- </div>
60
- )}
61
- <div className={cx(props.kcFormGroupClass)}>
62
- <div className={cx(props.kcLabelWrapperClass)}>
63
- <label htmlFor="otp" className={cx(props.kcLabelClass)}>
64
- {msg("loginOtpOneTime")}
65
- </label>
60
+ </div>
61
+ ))}
66
62
  </div>
63
+ </div>
64
+ )}
65
+ <div className={cx(kcProps.kcFormGroupClass)}>
66
+ <div className={cx(kcProps.kcLabelWrapperClass)}>
67
+ <label htmlFor="otp" className={cx(kcProps.kcLabelClass)}>
68
+ {msg("loginOtpOneTime")}
69
+ </label>
70
+ </div>
67
71
 
68
- <div className={cx(props.kcInputWrapperClass)}>
69
- <input id="otp" name="otp" autoComplete="off" type="text" className={cx(props.kcInputClass)} autoFocus />
70
- </div>
72
+ <div className={cx(kcProps.kcInputWrapperClass)}>
73
+ <input id="otp" name="otp" autoComplete="off" type="text" className={cx(kcProps.kcInputClass)} autoFocus />
71
74
  </div>
75
+ </div>
72
76
 
73
- <div className={cx(props.kcFormGroupClass)}>
74
- <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
75
- <div className={cx(props.kcFormOptionsWrapperClass)} />
76
- </div>
77
+ <div className={cx(kcProps.kcFormGroupClass)}>
78
+ <div id="kc-form-options" className={cx(kcProps.kcFormOptionsClass)}>
79
+ <div className={cx(kcProps.kcFormOptionsWrapperClass)} />
80
+ </div>
77
81
 
78
- <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
79
- <input
80
- className={cx(
81
- props.kcButtonClass,
82
- props.kcButtonPrimaryClass,
83
- props.kcButtonBlockClass,
84
- props.kcButtonLargeClass
85
- )}
86
- name="login"
87
- id="kc-login"
88
- type="submit"
89
- value={msgStr("doLogIn")}
90
- />
91
- </div>
82
+ <div id="kc-form-buttons" className={cx(kcProps.kcFormButtonsClass)}>
83
+ <input
84
+ className={cx(
85
+ kcProps.kcButtonClass,
86
+ kcProps.kcButtonPrimaryClass,
87
+ kcProps.kcButtonBlockClass,
88
+ kcProps.kcButtonLargeClass
89
+ )}
90
+ name="login"
91
+ id="kc-login"
92
+ type="submit"
93
+ value={msgStr("doLogIn")}
94
+ />
92
95
  </div>
93
- </form>
94
- }
95
- />
96
- );
97
- }
98
- );
96
+ </div>
97
+ </form>
98
+ }
99
+ />
100
+ );
101
+ });
99
102
 
100
103
  declare const $: any;
101
104
 
@@ -1,44 +1,47 @@
1
1
  import React, { memo } from "react";
2
- import Template from "./Template";
2
+ import DefaultTemplate from "./Template";
3
+ import type { TemplateProps } from "./Template";
3
4
  import type { KcProps } from "./KcProps";
4
5
  import type { KcContextBase } from "../getKcContext/KcContextBase";
5
6
  import type { I18n } from "../i18n";
6
7
 
7
- const LoginPageExpired = memo(
8
- ({
9
- kcContext,
10
- i18n,
11
- doFetchDefaultThemeResources = true,
12
- ...props
13
- }: { kcContext: KcContextBase.LoginPageExpired; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
14
- const { url } = kcContext;
8
+ export type LoginPageExpired = KcProps & {
9
+ kcContext: KcContextBase.LoginPageExpired;
10
+ i18n: I18n;
11
+ doFetchDefaultThemeResources?: boolean;
12
+ Template?: (props: TemplateProps) => JSX.Element | null;
13
+ };
15
14
 
16
- const { msg } = i18n;
15
+ const LoginPageExpired = memo((props: LoginPageExpired) => {
16
+ const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
17
17
 
18
- return (
19
- <Template
20
- {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
21
- displayMessage={false}
22
- headerNode={msg("pageExpiredTitle")}
23
- formNode={
24
- <>
25
- <p id="instruction1" className="instruction">
26
- {msg("pageExpiredMsg1")}
27
- <a id="loginRestartLink" href={url.loginRestartFlowUrl}>
28
- {msg("doClickHere")}
29
- </a>{" "}
30
- .<br />
31
- {msg("pageExpiredMsg2")}{" "}
32
- <a id="loginContinueLink" href={url.loginAction}>
33
- {msg("doClickHere")}
34
- </a>{" "}
35
- .
36
- </p>
37
- </>
38
- }
39
- />
40
- );
41
- }
42
- );
18
+ const { url } = kcContext;
19
+
20
+ const { msg } = i18n;
21
+
22
+ return (
23
+ <Template
24
+ {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
25
+ displayMessage={false}
26
+ headerNode={msg("pageExpiredTitle")}
27
+ formNode={
28
+ <>
29
+ <p id="instruction1" className="instruction">
30
+ {msg("pageExpiredMsg1")}
31
+ <a id="loginRestartLink" href={url.loginRestartFlowUrl}>
32
+ {msg("doClickHere")}
33
+ </a>{" "}
34
+ .<br />
35
+ {msg("pageExpiredMsg2")}{" "}
36
+ <a id="loginContinueLink" href={url.loginAction}>
37
+ {msg("doClickHere")}
38
+ </a>{" "}
39
+ .
40
+ </p>
41
+ </>
42
+ }
43
+ />
44
+ );
45
+ });
43
46
 
44
47
  export default LoginPageExpired;
@@ -1,5 +1,6 @@
1
1
  import React, { useState, memo } from "react";
2
- import Template from "./Template";
2
+ import DefaultTemplate from "./Template";
3
+ import type { TemplateProps } from "./Template";
3
4
  import type { KcProps } from "./KcProps";
4
5
  import type { KcContextBase } from "../getKcContext/KcContextBase";
5
6
  import { useCssAndCx } from "../tools/useCssAndCx";
@@ -7,90 +8,92 @@ import { useConstCallback } from "powerhooks/useConstCallback";
7
8
  import type { FormEventHandler } from "react";
8
9
  import type { I18n } from "../i18n";
9
10
 
10
- const LoginPassword = memo(
11
- ({
12
- kcContext,
13
- i18n,
14
- doFetchDefaultThemeResources = true,
15
- ...props
16
- }: { kcContext: KcContextBase.LoginPassword; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
17
- const { realm, url, login } = kcContext;
11
+ export type LoginPasswordProps = KcProps & {
12
+ kcContext: KcContextBase.LoginPassword;
13
+ i18n: I18n;
14
+ doFetchDefaultThemeResources?: boolean;
15
+ Template?: (props: TemplateProps) => JSX.Element | null;
16
+ };
18
17
 
19
- const { msg, msgStr } = i18n;
18
+ const LoginPassword = memo((props: LoginPasswordProps) => {
19
+ const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
20
20
 
21
- const { cx } = useCssAndCx();
21
+ const { realm, url, login } = kcContext;
22
22
 
23
- const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
23
+ const { msg, msgStr } = i18n;
24
24
 
25
- const onSubmit = useConstCallback<FormEventHandler<HTMLFormElement>>(e => {
26
- e.preventDefault();
25
+ const { cx } = useCssAndCx();
27
26
 
28
- setIsLoginButtonDisabled(true);
27
+ const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
29
28
 
30
- const formElement = e.target as HTMLFormElement;
29
+ const onSubmit = useConstCallback<FormEventHandler<HTMLFormElement>>(e => {
30
+ e.preventDefault();
31
31
 
32
- formElement.submit();
33
- });
32
+ setIsLoginButtonDisabled(true);
34
33
 
35
- return (
36
- <Template
37
- {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
38
- headerNode={msg("doLogIn")}
39
- formNode={
40
- <div id="kc-form">
41
- <div id="kc-form-wrapper">
42
- <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
43
- <div className={cx(props.kcFormGroupClass)}>
44
- <hr />
45
- <label htmlFor="password" className={cx(props.kcLabelClass)}>
46
- {msg("password")}
47
- </label>
48
- <input
49
- tabIndex={2}
50
- id="password"
51
- className={cx(props.kcInputClass)}
52
- name="password"
53
- type="password"
54
- autoFocus={true}
55
- autoComplete="on"
56
- defaultValue={login.password ?? ""}
57
- />
58
- </div>
59
- <div className={cx(props.kcFormGroupClass, props.kcFormSettingClass)}>
60
- <div id="kc-form-options" />
61
- <div className={cx(props.kcFormOptionsWrapperClass)}>
62
- {realm.resetPasswordAllowed && (
63
- <span>
64
- <a tabIndex={5} href={url.loginResetCredentialsUrl}>
65
- {msg("doForgotPassword")}
66
- </a>
67
- </span>
68
- )}
69
- </div>
70
- </div>
71
- <div id="kc-form-buttons" className={cx(props.kcFormGroupClass)}>
72
- <input
73
- tabIndex={4}
74
- className={cx(
75
- props.kcButtonClass,
76
- props.kcButtonPrimaryClass,
77
- props.kcButtonBlockClass,
78
- props.kcButtonLargeClass
79
- )}
80
- name="login"
81
- id="kc-login"
82
- type="submit"
83
- value={msgStr("doLogIn")}
84
- disabled={isLoginButtonDisabled}
85
- />
34
+ const formElement = e.target as HTMLFormElement;
35
+
36
+ formElement.submit();
37
+ });
38
+
39
+ return (
40
+ <Template
41
+ {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
42
+ headerNode={msg("doLogIn")}
43
+ formNode={
44
+ <div id="kc-form">
45
+ <div id="kc-form-wrapper">
46
+ <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
47
+ <div className={cx(kcProps.kcFormGroupClass)}>
48
+ <hr />
49
+ <label htmlFor="password" className={cx(kcProps.kcLabelClass)}>
50
+ {msg("password")}
51
+ </label>
52
+ <input
53
+ tabIndex={2}
54
+ id="password"
55
+ className={cx(kcProps.kcInputClass)}
56
+ name="password"
57
+ type="password"
58
+ autoFocus={true}
59
+ autoComplete="on"
60
+ defaultValue={login.password ?? ""}
61
+ />
62
+ </div>
63
+ <div className={cx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
64
+ <div id="kc-form-options" />
65
+ <div className={cx(kcProps.kcFormOptionsWrapperClass)}>
66
+ {realm.resetPasswordAllowed && (
67
+ <span>
68
+ <a tabIndex={5} href={url.loginResetCredentialsUrl}>
69
+ {msg("doForgotPassword")}
70
+ </a>
71
+ </span>
72
+ )}
86
73
  </div>
87
- </form>
88
- </div>
74
+ </div>
75
+ <div id="kc-form-buttons" className={cx(kcProps.kcFormGroupClass)}>
76
+ <input
77
+ tabIndex={4}
78
+ className={cx(
79
+ kcProps.kcButtonClass,
80
+ kcProps.kcButtonPrimaryClass,
81
+ kcProps.kcButtonBlockClass,
82
+ kcProps.kcButtonLargeClass
83
+ )}
84
+ name="login"
85
+ id="kc-login"
86
+ type="submit"
87
+ value={msgStr("doLogIn")}
88
+ disabled={isLoginButtonDisabled}
89
+ />
90
+ </div>
91
+ </form>
89
92
  </div>
90
- }
91
- />
92
- );
93
- }
94
- );
93
+ </div>
94
+ }
95
+ />
96
+ );
97
+ });
95
98
 
96
99
  export default LoginPassword;
@@ -1,79 +1,82 @@
1
1
  import React, { memo } from "react";
2
- import Template from "./Template";
2
+ import DefaultTemplate from "./Template";
3
+ import type { TemplateProps } from "./Template";
3
4
  import type { KcProps } from "./KcProps";
4
5
  import type { KcContextBase } from "../getKcContext/KcContextBase";
5
6
  import { useCssAndCx } from "../tools/useCssAndCx";
6
7
  import type { I18n } from "../i18n";
7
8
 
8
- const LoginResetPassword = memo(
9
- ({
10
- kcContext,
11
- i18n,
12
- doFetchDefaultThemeResources = true,
13
- ...props
14
- }: { kcContext: KcContextBase.LoginResetPassword; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
15
- const { url, realm, auth } = kcContext;
9
+ export type LoginResetPasswordProps = KcProps & {
10
+ kcContext: KcContextBase.LoginResetPassword;
11
+ i18n: I18n;
12
+ doFetchDefaultThemeResources?: boolean;
13
+ Template?: (props: TemplateProps) => JSX.Element | null;
14
+ };
16
15
 
17
- const { msg, msgStr } = i18n;
16
+ const LoginResetPassword = memo((props: LoginResetPasswordProps) => {
17
+ const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
18
18
 
19
- const { cx } = useCssAndCx();
19
+ const { url, realm, auth } = kcContext;
20
20
 
21
- return (
22
- <Template
23
- {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
24
- displayMessage={false}
25
- headerNode={msg("emailForgotTitle")}
26
- formNode={
27
- <form id="kc-reset-password-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
28
- <div className={cx(props.kcFormGroupClass)}>
29
- <div className={cx(props.kcLabelWrapperClass)}>
30
- <label htmlFor="username" className={cx(props.kcLabelClass)}>
31
- {!realm.loginWithEmailAllowed
32
- ? msg("username")
33
- : !realm.registrationEmailAsUsername
34
- ? msg("usernameOrEmail")
35
- : msg("email")}
36
- </label>
37
- </div>
38
- <div className={cx(props.kcInputWrapperClass)}>
39
- <input
40
- type="text"
41
- id="username"
42
- name="username"
43
- className={cx(props.kcInputClass)}
44
- autoFocus
45
- defaultValue={auth !== undefined && auth.showUsername ? auth.attemptedUsername : undefined}
46
- />
47
- </div>
21
+ const { msg, msgStr } = i18n;
22
+
23
+ const { cx } = useCssAndCx();
24
+
25
+ return (
26
+ <Template
27
+ {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
28
+ displayMessage={false}
29
+ headerNode={msg("emailForgotTitle")}
30
+ formNode={
31
+ <form id="kc-reset-password-form" className={cx(kcProps.kcFormClass)} action={url.loginAction} method="post">
32
+ <div className={cx(kcProps.kcFormGroupClass)}>
33
+ <div className={cx(kcProps.kcLabelWrapperClass)}>
34
+ <label htmlFor="username" className={cx(kcProps.kcLabelClass)}>
35
+ {!realm.loginWithEmailAllowed
36
+ ? msg("username")
37
+ : !realm.registrationEmailAsUsername
38
+ ? msg("usernameOrEmail")
39
+ : msg("email")}
40
+ </label>
48
41
  </div>
49
- <div className={cx(props.kcFormGroupClass, props.kcFormSettingClass)}>
50
- <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
51
- <div className={cx(props.kcFormOptionsWrapperClass)}>
52
- <span>
53
- <a href={url.loginUrl}>{msg("backToLogin")}</a>
54
- </span>
55
- </div>
42
+ <div className={cx(kcProps.kcInputWrapperClass)}>
43
+ <input
44
+ type="text"
45
+ id="username"
46
+ name="username"
47
+ className={cx(kcProps.kcInputClass)}
48
+ autoFocus
49
+ defaultValue={auth !== undefined && auth.showUsername ? auth.attemptedUsername : undefined}
50
+ />
51
+ </div>
52
+ </div>
53
+ <div className={cx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
54
+ <div id="kc-form-options" className={cx(kcProps.kcFormOptionsClass)}>
55
+ <div className={cx(kcProps.kcFormOptionsWrapperClass)}>
56
+ <span>
57
+ <a href={url.loginUrl}>{msg("backToLogin")}</a>
58
+ </span>
56
59
  </div>
60
+ </div>
57
61
 
58
- <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
59
- <input
60
- className={cx(
61
- props.kcButtonClass,
62
- props.kcButtonPrimaryClass,
63
- props.kcButtonBlockClass,
64
- props.kcButtonLargeClass
65
- )}
66
- type="submit"
67
- value={msgStr("doSubmit")}
68
- />
69
- </div>
62
+ <div id="kc-form-buttons" className={cx(kcProps.kcFormButtonsClass)}>
63
+ <input
64
+ className={cx(
65
+ kcProps.kcButtonClass,
66
+ kcProps.kcButtonPrimaryClass,
67
+ kcProps.kcButtonBlockClass,
68
+ kcProps.kcButtonLargeClass
69
+ )}
70
+ type="submit"
71
+ value={msgStr("doSubmit")}
72
+ />
70
73
  </div>
71
- </form>
72
- }
73
- infoNode={msg("emailInstruction")}
74
- />
75
- );
76
- }
77
- );
74
+ </div>
75
+ </form>
76
+ }
77
+ infoNode={msg("emailInstruction")}
78
+ />
79
+ );
80
+ });
78
81
 
79
82
  export default LoginResetPassword;