keycloakify 9.3.0 → 9.3.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/README.md +1 -0
- package/login/lib/useGetClassName.js +1 -1
- package/login/lib/useGetClassName.js.map +1 -1
- package/login/pages/LoginOtp.js +5 -43
- package/login/pages/LoginOtp.js.map +1 -1
- package/package.json +1 -1
- package/src/login/lib/useGetClassName.ts +1 -1
- package/src/login/pages/LoginOtp.tsx +64 -94
package/README.md
CHANGED
@@ -114,6 +114,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
|
|
114
114
|
<td align="center" valign="top" width="14.28%"><a href="https://m-siemens.de/"><img src="https://avatars.githubusercontent.com/u/1873922?v=4?s=100" width="100px;" alt="Markus Siemens"/><br /><sub><b>Markus Siemens</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=msiemens" title="Code">💻</a></td>
|
115
115
|
<td align="center" valign="top" width="14.28%"><a href="https://github.com/law108000"><img src="https://avatars.githubusercontent.com/u/8112024?v=4?s=100" width="100px;" alt="Rlok"/><br /><sub><b>Rlok</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=law108000" title="Code">💻</a></td>
|
116
116
|
<td align="center" valign="top" width="14.28%"><a href="https://github.com/Moulyy"><img src="https://avatars.githubusercontent.com/u/115405804?v=4?s=100" width="100px;" alt="Moulyy"/><br /><sub><b>Moulyy</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=Moulyy" title="Code">💻</a></td>
|
117
|
+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/giorgoslytos"><img src="https://avatars.githubusercontent.com/u/50946162?v=4?s=100" width="100px;" alt="giorgoslytos"/><br /><sub><b>giorgoslytos</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=giorgoslytos" title="Code">💻</a></td>
|
117
118
|
</tr>
|
118
119
|
</tbody>
|
119
120
|
</table>
|
@@ -81,7 +81,7 @@ export const { useGetClassName } = createUseClassName({
|
|
81
81
|
"kcAuthenticatorWebAuthnClass": "fa fa-key list-view-pf-icon-lg",
|
82
82
|
"kcAuthenticatorWebAuthnPasswordlessClass": "fa fa-key list-view-pf-icon-lg",
|
83
83
|
//css classes for the OTP Login Form
|
84
|
-
"kcSelectOTPListClass": "card-pf card-pf-view card-pf-view-select card-pf-view-single-select",
|
84
|
+
"kcSelectOTPListClass": "card-pf card-pf-view card-pf-view-select card-pf-view-single-select col-xs-12",
|
85
85
|
"kcSelectOTPListItemClass": "card-pf-body card-pf-top-element",
|
86
86
|
"kcAuthenticatorOtpCircleClass": "fa fa-mobile card-pf-icon-circle",
|
87
87
|
"kcSelectOTPItemHeadingClass": "card-pf-title text-center",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useGetClassName.js","sourceRoot":"","sources":["../../src/login/lib/useGetClassName.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,kBAAkB,CAAW;IAC5D,gBAAgB,EAAE;QACd,aAAa,EAAE,SAAS;QACxB,aAAa,EAAE,UAAU;QACzB,cAAc,EAAE,eAAe;QAC/B,uBAAuB,EAAE,KAAK;QAC9B,eAAe,EAAE,sBAAsB;QACvC,sBAAsB,EAAE,SAAS;QACjC,iBAAiB,EAAE,SAAS;QAC5B,wBAAwB,EAAE,mBAAmB;QAC7C,0BAA0B,EAAE,yBAAyB;QACrD,iCAAiC,EAAE,oBAAoB;QACvD,mBAAmB,EAAE,iBAAiB;QACtC,sBAAsB,EAAE,SAAS;QACjC,qBAAqB,EAAE,8BAA8B;QACrD,uBAAuB,EAAE,kCAAkC;QAC3D,uBAAuB,EAAE,kBAAkB;QAC3C,oBAAoB,EAAE,oBAAoB;QAC1C,iBAAiB,EAAE,2BAA2B;QAC9C,kBAAkB,EAAE,YAAY;QAChC,qBAAqB,EAAE,yCAAyC;QAChE,eAAe,EAAE,iBAAiB;QAClC,wBAAwB,EAAE,SAAS;QAEnC,aAAa,EAAE,gBAAgB;QAC/B,kBAAkB,EAAE,iBAAiB;QACrC,gBAAgB,EAAE,4EAA4E;QAC9F,qBAAqB,EAAE,WAAW;QAClC,eAAe,EAAE,oBAAoB;QACrC,uBAAuB,EAAE,8BAA8B;QAEvD,iBAAiB,EAAE,6EAA6E;QAChG,8BAA8B,EAAE,mDAAmD;QACnF,oCAAoC,EAAE,4BAA4B;QAClE,kCAAkC,EAAE,sBAAsB;QAC1D,mBAAmB,EAAE,mBAAmB;QACxC,uBAAuB,EAAE,mBAAmB;QAE5C,aAAa,EAAE,iBAAiB;QAChC,uBAAuB,EAAE,WAAW;QACpC,cAAc,EAAE,eAAe;QAC/B,cAAc,EAAE,cAAc;QAC9B,0BAA0B,EAAE,6DAA6D;QACzF,qBAAqB,EAAE,yCAAyC;QAChE,2BAA2B,EAAE,SAAS;QACtC,oBAAoB,EAAE,yCAAyC;QAC/D,oBAAoB,EAAE,yCAAyC;QAC/D,oBAAoB,EAAE,mBAAmB;QACzC,iBAAiB,EAAE,cAAc;QAEjC,iBAAiB,EAAE,8CAA8C;QAEjE,wBAAwB;QACxB,mBAAmB,EAAE,kBAAkB;QAEvC,+DAA+D;QAC/D,eAAe,EAAE,KAAK;QACtB,0HAA0H;QAC1H,sBAAsB,EAAE,aAAa;QACrC,sBAAsB,EAAE,aAAa;QACrC,sCAAsC;QACtC,oBAAoB,EAAE,QAAQ;QAC9B,oBAAoB,EAAE,WAAW;QAEjC,wBAAwB;QACxB,mBAAmB,EAAE,UAAU;QAC/B,cAAc,EAAE,kBAAkB;QAElC,qCAAqC;QACrC,eAAe,EAAE,SAAS;QAE1B,4CAA4C;QAC5C,uBAAuB,EAAE,yBAAyB;QAClD,2BAA2B,EAAE,sCAAsC;QACnE,+BAA+B,EAAE,4BAA4B;QAC7D,uCAAuC,EAAE,uCAAuC;QAChF,+BAA+B,EAAE,uCAAuC;QACxE,2BAA2B,EAAE,2BAA2B;QACxD,+BAA+B,EAAE,wBAAwB;QACzD,+BAA+B,EAAE,mBAAmB;QACpD,+BAA+B,EAAE,mBAAmB;QACpD,sCAAsC,EAAE,0BAA0B;QAClE,kCAAkC,EAAE,yBAAyB;QAC7D,mCAAmC,EAAE,sBAAsB;QAE3D,qCAAqC;QACrC,6BAA6B,EAAE,yBAAyB;QACxD,8BAA8B,EAAE,mCAAmC;QACnE,yBAAyB,EAAE,mCAAmC;QAC9D,8BAA8B,EAAE,gCAAgC;QAChE,0CAA0C,EAAE,gCAAgC;QAE5E,oCAAoC;QACpC,sBAAsB,EAAE
|
1
|
+
{"version":3,"file":"useGetClassName.js","sourceRoot":"","sources":["../../src/login/lib/useGetClassName.ts"],"names":[],"mappings":"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"}
|
package/login/pages/LoginOtp.js
CHANGED
@@ -1,6 +1,4 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import { useEffect } from "react";
|
3
|
-
import { headInsert } from "../../tools/headInsert";
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
4
2
|
import { clsx } from "../../tools/clsx";
|
5
3
|
import { useGetClassName } from "../../login/lib/useGetClassName";
|
6
4
|
export default function LoginOtp(props) {
|
@@ -11,45 +9,9 @@ export default function LoginOtp(props) {
|
|
11
9
|
});
|
12
10
|
const { otpLogin, url } = kcContext;
|
13
11
|
const { msg, msgStr } = i18n;
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
"src": `${kcContext.url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
|
19
|
-
});
|
20
|
-
(async () => {
|
21
|
-
await prLoaded;
|
22
|
-
if (isCleanedUp) {
|
23
|
-
return;
|
24
|
-
}
|
25
|
-
evaluateInlineScript();
|
26
|
-
})();
|
27
|
-
return () => {
|
28
|
-
isCleanedUp = true;
|
29
|
-
remove();
|
30
|
-
};
|
31
|
-
}, []);
|
32
|
-
return (_jsx(Template, Object.assign({}, { kcContext, i18n, doUseDefaultCss, classes }, { headerNode: msg("doLogIn") }, { children: _jsxs("form", Object.assign({ id: "kc-otp-login-form", className: getClassName("kcFormClass"), action: url.loginAction, method: "post" }, { children: [otpLogin.userOtpCredentials.length > 1 && (_jsx("div", Object.assign({ className: getClassName("kcFormGroupClass") }, { children: _jsx("div", Object.assign({ className: getClassName("kcInputWrapperClass") }, { children: otpLogin.userOtpCredentials.map(otpCredential => (_jsxs("div", Object.assign({ className: getClassName("kcSelectOTPListClass") }, { children: [_jsx("input", { type: "hidden", value: "${otpCredential.id}" }), _jsxs("div", Object.assign({ className: getClassName("kcSelectOTPListItemClass") }, { children: [_jsx("span", { className: getClassName("kcAuthenticatorOtpCircleClass") }), _jsx("h2", Object.assign({ className: getClassName("kcSelectOTPItemHeadingClass") }, { children: otpCredential.userLabel }))] }))] }), otpCredential.id))) })) }))), _jsxs("div", Object.assign({ className: getClassName("kcFormGroupClass") }, { children: [_jsx("div", Object.assign({ className: getClassName("kcLabelWrapperClass") }, { children: _jsx("label", Object.assign({ htmlFor: "otp", className: getClassName("kcLabelClass") }, { children: msg("loginOtpOneTime") })) })), _jsx("div", Object.assign({ className: getClassName("kcInputWrapperClass") }, { children: _jsx("input", { id: "otp", name: "otp", autoComplete: "off", type: "text", className: getClassName("kcInputClass"), autoFocus: true }) }))] })), _jsxs("div", Object.assign({ className: getClassName("kcFormGroupClass") }, { children: [_jsx("div", Object.assign({ id: "kc-form-options", className: getClassName("kcFormOptionsClass") }, { children: _jsx("div", { className: getClassName("kcFormOptionsWrapperClass") }) })), _jsx("div", Object.assign({ id: "kc-form-buttons", className: getClassName("kcFormButtonsClass") }, { children: _jsx("input", { className: clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonBlockClass"), getClassName("kcButtonLargeClass")), name: "login", id: "kc-login", type: "submit", value: msgStr("doLogIn") }) }))] }))] })) })));
|
33
|
-
}
|
34
|
-
function evaluateInlineScript() {
|
35
|
-
$(document).ready(function () {
|
36
|
-
// Card Single Select
|
37
|
-
$(".card-pf-view-single-select").click(function () {
|
38
|
-
if ($(this).hasClass("active")) {
|
39
|
-
$(this).removeClass("active");
|
40
|
-
$(this).children().removeAttr("name");
|
41
|
-
}
|
42
|
-
else {
|
43
|
-
$(".card-pf-view-single-select").removeClass("active");
|
44
|
-
$(".card-pf-view-single-select").children().removeAttr("name");
|
45
|
-
$(this).addClass("active");
|
46
|
-
$(this).children().attr("name", "selectedCredentialId");
|
47
|
-
}
|
48
|
-
});
|
49
|
-
var defaultCred = $(".card-pf-view-single-select")[0];
|
50
|
-
if (defaultCred) {
|
51
|
-
defaultCred.click();
|
52
|
-
}
|
53
|
-
});
|
12
|
+
return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
|
13
|
+
input[type="radio"]:checked~label.kcSelectOTPListClass{
|
14
|
+
border: 2px solid #39a5dc;
|
15
|
+
}` }), _jsx(Template, Object.assign({}, { kcContext, i18n, doUseDefaultCss, classes }, { headerNode: msg("doLogIn") }, { children: _jsxs("form", Object.assign({ id: "kc-otp-login-form", className: getClassName("kcFormClass"), action: url.loginAction, method: "post" }, { children: [otpLogin.userOtpCredentials.length > 1 && (_jsx("div", Object.assign({ className: getClassName("kcFormGroupClass") }, { children: _jsx("div", Object.assign({ className: getClassName("kcInputWrapperClass") }, { children: otpLogin.userOtpCredentials.map((otpCredential, index) => (_jsxs("div", { children: [_jsx("input", { id: `kc-otp-credential-${index}`, name: "selectedCredentialId", type: "radio", value: otpCredential.id, style: { display: "none" } }), _jsx("label", Object.assign({ htmlFor: `kc-otp-credential-${index}`, className: getClassName("kcSelectOTPListClass") }, { children: _jsxs("div", Object.assign({ className: getClassName("kcSelectOTPListItemClass") }, { children: [_jsx("span", { className: getClassName("kcAuthenticatorOtpCircleClass") }), _jsx("h2", Object.assign({ className: getClassName("kcSelectOTPItemHeadingClass") }, { children: otpCredential.userLabel }))] })) }), otpCredential.id)] }, otpCredential.id))) })) }))), _jsxs("div", Object.assign({ className: getClassName("kcFormGroupClass") }, { children: [_jsx("div", Object.assign({ className: getClassName("kcLabelWrapperClass") }, { children: _jsx("label", Object.assign({ htmlFor: "otp", className: getClassName("kcLabelClass") }, { children: msg("loginOtpOneTime") })) })), _jsx("div", Object.assign({ className: getClassName("kcInputWrapperClass") }, { children: _jsx("input", { id: "otp", name: "otp", autoComplete: "off", type: "text", className: getClassName("kcInputClass"), autoFocus: true }) }))] })), _jsxs("div", Object.assign({ className: getClassName("kcFormGroupClass") }, { children: [_jsx("div", Object.assign({ id: "kc-form-options", className: getClassName("kcFormOptionsClass") }, { children: _jsx("div", { className: getClassName("kcFormOptionsWrapperClass") }) })), _jsx("div", Object.assign({ id: "kc-form-buttons", className: getClassName("kcFormButtonsClass") }, { children: _jsx("input", { className: clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonBlockClass"), getClassName("kcButtonLargeClass")), name: "login", id: "kc-login", type: "submit", value: msgStr("doLogIn") }) }))] }))] })) }))] }));
|
54
16
|
}
|
55
17
|
//# sourceMappingURL=LoginOtp.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"LoginOtp.js","sourceRoot":"","sources":["../../src/login/pages/LoginOtp.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
1
|
+
{"version":3,"file":"LoginOtp.js","sourceRoot":"","sources":["../../src/login/pages/LoginOtp.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
@@ -94,7 +94,7 @@ export const { useGetClassName } = createUseClassName<ClassKey>({
|
|
94
94
|
"kcAuthenticatorWebAuthnPasswordlessClass": "fa fa-key list-view-pf-icon-lg",
|
95
95
|
|
96
96
|
//css classes for the OTP Login Form
|
97
|
-
"kcSelectOTPListClass": "card-pf card-pf-view card-pf-view-select card-pf-view-single-select",
|
97
|
+
"kcSelectOTPListClass": "card-pf card-pf-view card-pf-view-select card-pf-view-single-select col-xs-12",
|
98
98
|
"kcSelectOTPListItemClass": "card-pf-body card-pf-top-element",
|
99
99
|
"kcAuthenticatorOtpCircleClass": "fa fa-mobile card-pf-icon-circle",
|
100
100
|
"kcSelectOTPItemHeadingClass": "card-pf-title text-center",
|
@@ -1,5 +1,3 @@
|
|
1
|
-
import { useEffect } from "react";
|
2
|
-
import { headInsert } from "keycloakify/tools/headInsert";
|
3
1
|
import { clsx } from "keycloakify/tools/clsx";
|
4
2
|
import type { PageProps } from "keycloakify/login/pages/PageProps";
|
5
3
|
import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
|
@@ -18,105 +16,77 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
|
|
18
16
|
|
19
17
|
const { msg, msgStr } = i18n;
|
20
18
|
|
21
|
-
useEffect(() => {
|
22
|
-
let isCleanedUp = false;
|
23
|
-
|
24
|
-
const { prLoaded, remove } = headInsert({
|
25
|
-
"type": "javascript",
|
26
|
-
"src": `${kcContext.url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
|
27
|
-
});
|
28
|
-
|
29
|
-
(async () => {
|
30
|
-
await prLoaded;
|
31
|
-
|
32
|
-
if (isCleanedUp) {
|
33
|
-
return;
|
34
|
-
}
|
35
|
-
|
36
|
-
evaluateInlineScript();
|
37
|
-
})();
|
38
|
-
|
39
|
-
return () => {
|
40
|
-
isCleanedUp = true;
|
41
|
-
remove();
|
42
|
-
};
|
43
|
-
}, []);
|
44
|
-
|
45
19
|
return (
|
46
|
-
|
47
|
-
<
|
48
|
-
{
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
20
|
+
<>
|
21
|
+
<style>
|
22
|
+
{`
|
23
|
+
input[type="radio"]:checked~label.kcSelectOTPListClass{
|
24
|
+
border: 2px solid #39a5dc;
|
25
|
+
}`}
|
26
|
+
</style>
|
27
|
+
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("doLogIn")}>
|
28
|
+
<form id="kc-otp-login-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
|
29
|
+
{otpLogin.userOtpCredentials.length > 1 && (
|
30
|
+
<div className={getClassName("kcFormGroupClass")}>
|
31
|
+
<div className={getClassName("kcInputWrapperClass")}>
|
32
|
+
{otpLogin.userOtpCredentials.map((otpCredential, index) => (
|
33
|
+
<div key={otpCredential.id}>
|
34
|
+
<input
|
35
|
+
id={`kc-otp-credential-${index}`}
|
36
|
+
name="selectedCredentialId"
|
37
|
+
type="radio"
|
38
|
+
value={otpCredential.id}
|
39
|
+
style={{ display: "none" }}
|
40
|
+
/>
|
41
|
+
<label
|
42
|
+
htmlFor={`kc-otp-credential-${index}`}
|
43
|
+
key={otpCredential.id}
|
44
|
+
className={getClassName("kcSelectOTPListClass")}
|
45
|
+
>
|
46
|
+
<div className={getClassName("kcSelectOTPListItemClass")}>
|
47
|
+
<span className={getClassName("kcAuthenticatorOtpCircleClass")} />
|
48
|
+
<h2 className={getClassName("kcSelectOTPItemHeadingClass")}>{otpCredential.userLabel}</h2>
|
49
|
+
</div>
|
50
|
+
</label>
|
57
51
|
</div>
|
58
|
-
|
59
|
-
|
52
|
+
))}
|
53
|
+
</div>
|
54
|
+
</div>
|
55
|
+
)}
|
56
|
+
<div className={getClassName("kcFormGroupClass")}>
|
57
|
+
<div className={getClassName("kcLabelWrapperClass")}>
|
58
|
+
<label htmlFor="otp" className={getClassName("kcLabelClass")}>
|
59
|
+
{msg("loginOtpOneTime")}
|
60
|
+
</label>
|
60
61
|
</div>
|
61
|
-
</div>
|
62
|
-
)}
|
63
|
-
<div className={getClassName("kcFormGroupClass")}>
|
64
|
-
<div className={getClassName("kcLabelWrapperClass")}>
|
65
|
-
<label htmlFor="otp" className={getClassName("kcLabelClass")}>
|
66
|
-
{msg("loginOtpOneTime")}
|
67
|
-
</label>
|
68
|
-
</div>
|
69
62
|
|
70
|
-
|
71
|
-
|
63
|
+
<div className={getClassName("kcInputWrapperClass")}>
|
64
|
+
<input id="otp" name="otp" autoComplete="off" type="text" className={getClassName("kcInputClass")} autoFocus />
|
65
|
+
</div>
|
72
66
|
</div>
|
73
|
-
</div>
|
74
67
|
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
68
|
+
<div className={getClassName("kcFormGroupClass")}>
|
69
|
+
<div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
|
70
|
+
<div className={getClassName("kcFormOptionsWrapperClass")} />
|
71
|
+
</div>
|
79
72
|
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
73
|
+
<div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
|
74
|
+
<input
|
75
|
+
className={clsx(
|
76
|
+
getClassName("kcButtonClass"),
|
77
|
+
getClassName("kcButtonPrimaryClass"),
|
78
|
+
getClassName("kcButtonBlockClass"),
|
79
|
+
getClassName("kcButtonLargeClass")
|
80
|
+
)}
|
81
|
+
name="login"
|
82
|
+
id="kc-login"
|
83
|
+
type="submit"
|
84
|
+
value={msgStr("doLogIn")}
|
85
|
+
/>
|
86
|
+
</div>
|
93
87
|
</div>
|
94
|
-
</
|
95
|
-
</
|
96
|
-
|
88
|
+
</form>
|
89
|
+
</Template>
|
90
|
+
</>
|
97
91
|
);
|
98
92
|
}
|
99
|
-
|
100
|
-
declare const $: any;
|
101
|
-
|
102
|
-
function evaluateInlineScript() {
|
103
|
-
$(document).ready(function () {
|
104
|
-
// Card Single Select
|
105
|
-
$(".card-pf-view-single-select").click(function (this: any) {
|
106
|
-
if ($(this).hasClass("active")) {
|
107
|
-
$(this).removeClass("active");
|
108
|
-
$(this).children().removeAttr("name");
|
109
|
-
} else {
|
110
|
-
$(".card-pf-view-single-select").removeClass("active");
|
111
|
-
$(".card-pf-view-single-select").children().removeAttr("name");
|
112
|
-
$(this).addClass("active");
|
113
|
-
$(this).children().attr("name", "selectedCredentialId");
|
114
|
-
}
|
115
|
-
});
|
116
|
-
|
117
|
-
var defaultCred = $(".card-pf-view-single-select")[0];
|
118
|
-
if (defaultCred) {
|
119
|
-
defaultCred.click();
|
120
|
-
}
|
121
|
-
});
|
122
|
-
}
|