keycloakify 4.7.0 → 4.7.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.
- package/CHANGELOG.md +5 -0
- package/lib/components/Login.js +31 -14
- package/lib/components/Login.js.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/Login.tsx +48 -22
package/CHANGELOG.md
CHANGED
package/lib/components/Login.js
CHANGED
|
@@ -46,23 +46,40 @@ var useKcMessage_1 = require("../i18n/useKcMessage");
|
|
|
46
46
|
var tss_react_1 = require("tss-react");
|
|
47
47
|
var useConstCallback_1 = require("powerhooks/useConstCallback");
|
|
48
48
|
exports.Login = (0, react_1.memo)(function (_a) {
|
|
49
|
-
var _b;
|
|
50
49
|
var kcContext = _a.kcContext, props = __rest(_a, ["kcContext"]);
|
|
51
50
|
var social = kcContext.social, realm = kcContext.realm, url = kcContext.url, usernameEditDisabled = kcContext.usernameEditDisabled, login = kcContext.login, auth = kcContext.auth, registrationDisabled = kcContext.registrationDisabled;
|
|
52
|
-
var
|
|
51
|
+
var _b = (0, useKcMessage_1.useKcMessage)(), msg = _b.msg, msgStr = _b.msgStr;
|
|
53
52
|
var cx = (0, tss_react_1.useCssAndCx)().cx;
|
|
54
|
-
var
|
|
55
|
-
var onSubmit = (0, useConstCallback_1.useConstCallback)(function () {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
53
|
+
var _c = __read((0, react_1.useState)(false), 2), isLoginButtonDisabled = _c[0], setIsLoginButtonDisabled = _c[1];
|
|
54
|
+
var onSubmit = (0, useConstCallback_1.useConstCallback)(function (e) {
|
|
55
|
+
var _a;
|
|
56
|
+
e.preventDefault();
|
|
57
|
+
setIsLoginButtonDisabled(true);
|
|
58
|
+
var formElement = e.target;
|
|
59
|
+
//NOTE: Even if we login with email Keycloak expect username and password in
|
|
60
|
+
//the POST request.
|
|
61
|
+
(_a = formElement.querySelector("input[name='email']")) === null || _a === void 0 ? void 0 : _a.setAttribute("name", "username");
|
|
62
|
+
formElement.submit();
|
|
63
|
+
});
|
|
64
|
+
return ((0, jsx_runtime_1.jsx)(Template_1.Template, __assign({}, __assign({ kcContext: kcContext }, props), { doFetchDefaultThemeResources: true, displayInfo: social.displayInfo, displayWide: realm.password && social.providers !== undefined, headerNode: msg("doLogIn"), formNode: (0, jsx_runtime_1.jsxs)("div", __assign({ id: "kc-form", className: cx(realm.password && social.providers !== undefined && props.kcContentWrapperClass) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ id: "kc-form-wrapper", className: cx(realm.password && social.providers && [props.kcFormSocialAccountContentClass, props.kcFormSocialAccountClass]) }, { children: realm.password && ((0, jsx_runtime_1.jsxs)("form", __assign({ id: "kc-form-login", onSubmit: onSubmit, action: url.loginAction, method: "post" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: cx(props.kcFormGroupClass) }, { children: (function () {
|
|
65
|
+
var _a;
|
|
66
|
+
var label = !realm.loginWithEmailAllowed
|
|
67
|
+
? "username"
|
|
68
|
+
: realm.registrationEmailAsUsername
|
|
69
|
+
? "email"
|
|
70
|
+
: "usernameOrEmail";
|
|
71
|
+
var autoCompleteHelper = label === "usernameOrEmail" ? "username" : label;
|
|
72
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: autoCompleteHelper, className: cx(props.kcLabelClass) }, { children: msg(label) }), void 0), (0, jsx_runtime_1.jsx)("input", __assign({ tabIndex: 1, id: autoCompleteHelper, className: cx(props.kcInputClass),
|
|
73
|
+
//NOTE: This is used by Google Chrome auto fill so we use it to tell
|
|
74
|
+
//the browser how to pre fill the form but before submit we put it back
|
|
75
|
+
//to username because it is what keycloak expects.
|
|
76
|
+
name: autoCompleteHelper, defaultValue: (_a = login.username) !== null && _a !== void 0 ? _a : "", type: "text" }, (usernameEditDisabled
|
|
77
|
+
? { "disabled": true }
|
|
78
|
+
: {
|
|
79
|
+
"autoFocus": true,
|
|
80
|
+
"autoComplete": "off",
|
|
81
|
+
})), void 0)] }, void 0));
|
|
82
|
+
})() }), void 0), (0, jsx_runtime_1.jsxs)("div", __assign({ className: cx(props.kcFormGroupClass) }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "password", className: cx(props.kcLabelClass) }, { children: msg("password") }), void 0), (0, jsx_runtime_1.jsx)("input", { tabIndex: 2, id: "password", className: cx(props.kcInputClass), name: "password", type: "password", autoComplete: "off" }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", __assign({ className: cx(props.kcFormGroupClass, props.kcFormSettingClass) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ id: "kc-form-options" }, { children: realm.rememberMe && !usernameEditDisabled && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "checkbox" }, { children: (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("input", __assign({ tabIndex: 3, id: "rememberMe", name: "rememberMe", type: "checkbox" }, (login.rememberMe
|
|
66
83
|
? {
|
|
67
84
|
"checked": true,
|
|
68
85
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Login.js","sourceRoot":"","sources":["../../src/lib/components/Login.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAuC;AACvC,uCAAsC;AAGtC,qDAAoD;AACpD,uCAAwC;AACxC,gEAA+D;
|
|
1
|
+
{"version":3,"file":"Login.js","sourceRoot":"","sources":["../../src/lib/components/Login.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -5,6 +5,7 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
|
|
|
5
5
|
import { useKcMessage } from "../i18n/useKcMessage";
|
|
6
6
|
import { useCssAndCx } from "tss-react";
|
|
7
7
|
import { useConstCallback } from "powerhooks/useConstCallback";
|
|
8
|
+
import type { FormEventHandler } from "react";
|
|
8
9
|
|
|
9
10
|
export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Login } & KcProps) => {
|
|
10
11
|
const { social, realm, url, usernameEditDisabled, login, auth, registrationDisabled } = kcContext;
|
|
@@ -15,7 +16,19 @@ export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.L
|
|
|
15
16
|
|
|
16
17
|
const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
|
|
17
18
|
|
|
18
|
-
const onSubmit = useConstCallback(
|
|
19
|
+
const onSubmit = useConstCallback<FormEventHandler<HTMLFormElement>>(e => {
|
|
20
|
+
e.preventDefault();
|
|
21
|
+
|
|
22
|
+
setIsLoginButtonDisabled(true);
|
|
23
|
+
|
|
24
|
+
const formElement = e.target as HTMLFormElement;
|
|
25
|
+
|
|
26
|
+
//NOTE: Even if we login with email Keycloak expect username and password in
|
|
27
|
+
//the POST request.
|
|
28
|
+
formElement.querySelector("input[name='email']")?.setAttribute("name", "username");
|
|
29
|
+
|
|
30
|
+
formElement.submit();
|
|
31
|
+
});
|
|
19
32
|
|
|
20
33
|
return (
|
|
21
34
|
<Template
|
|
@@ -33,27 +46,40 @@ export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.L
|
|
|
33
46
|
{realm.password && (
|
|
34
47
|
<form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
|
|
35
48
|
<div className={cx(props.kcFormGroupClass)}>
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
?
|
|
39
|
-
:
|
|
40
|
-
?
|
|
41
|
-
:
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
49
|
+
{(() => {
|
|
50
|
+
const label = !realm.loginWithEmailAllowed
|
|
51
|
+
? "username"
|
|
52
|
+
: realm.registrationEmailAsUsername
|
|
53
|
+
? "email"
|
|
54
|
+
: "usernameOrEmail";
|
|
55
|
+
|
|
56
|
+
const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label;
|
|
57
|
+
|
|
58
|
+
return (
|
|
59
|
+
<>
|
|
60
|
+
<label htmlFor={autoCompleteHelper} className={cx(props.kcLabelClass)}>
|
|
61
|
+
{msg(label)}
|
|
62
|
+
</label>
|
|
63
|
+
<input
|
|
64
|
+
tabIndex={1}
|
|
65
|
+
id={autoCompleteHelper}
|
|
66
|
+
className={cx(props.kcInputClass)}
|
|
67
|
+
//NOTE: This is used by Google Chrome auto fill so we use it to tell
|
|
68
|
+
//the browser how to pre fill the form but before submit we put it back
|
|
69
|
+
//to username because it is what keycloak expects.
|
|
70
|
+
name={autoCompleteHelper}
|
|
71
|
+
defaultValue={login.username ?? ""}
|
|
72
|
+
type="text"
|
|
73
|
+
{...(usernameEditDisabled
|
|
74
|
+
? { "disabled": true }
|
|
75
|
+
: {
|
|
76
|
+
"autoFocus": true,
|
|
77
|
+
"autoComplete": "off",
|
|
78
|
+
})}
|
|
79
|
+
/>
|
|
80
|
+
</>
|
|
81
|
+
);
|
|
82
|
+
})()}
|
|
57
83
|
</div>
|
|
58
84
|
<div className={cx(props.kcFormGroupClass)}>
|
|
59
85
|
<label htmlFor="password" className={cx(props.kcLabelClass)}>
|