Gani Georgiev
127 lines
4.4 KiB
JavaScript
127 lines
4.4 KiB
JavaScript
export function otpAccordion(collection) {
|
|
const uniqueId = "otp_" + app.utils.randomString();
|
|
|
|
const data = store({
|
|
get config() {
|
|
if (!collection.otp) {
|
|
collection.otp = {
|
|
enabled: false,
|
|
duration: 300,
|
|
length: 8,
|
|
};
|
|
}
|
|
|
|
return collection.otp;
|
|
},
|
|
get isSuperusers() {
|
|
return collection.system && collection.name == "_superusers";
|
|
},
|
|
});
|
|
|
|
return t.details(
|
|
{
|
|
pbEvent: "otpAccordion",
|
|
name: "auth-methods",
|
|
className: "accordion otp-accordion",
|
|
},
|
|
t.summary(
|
|
null,
|
|
t.i({ className: "ri-time-line", ariaHidden: true }),
|
|
t.span({ className: "txt", textContent: "One-time password (OTP)" }),
|
|
t.span({
|
|
className: () => `label m-l-auto ${data.config.enabled ? "success" : ""}`,
|
|
textContent: () => (data.config.enabled ? "Enabled" : "Disabled"),
|
|
}),
|
|
() => {
|
|
if (!app.store.errors?.otp) {
|
|
return;
|
|
}
|
|
|
|
return t.i({
|
|
className: "ri-error-warning-fill txt-danger",
|
|
ariaDescription: app.attrs.tooltip("Has errors", "left"),
|
|
});
|
|
},
|
|
),
|
|
t.div(
|
|
{ className: "grid sm" },
|
|
t.div(
|
|
{ className: "col-sm-12" },
|
|
t.div(
|
|
{ className: "field" },
|
|
t.input({
|
|
type: "checkbox",
|
|
id: uniqueId + ".enabled",
|
|
name: "otp.enabled",
|
|
className: "switch",
|
|
checked: () => data.config.enabled,
|
|
onchange: (e) => {
|
|
data.config.enabled = e.target.checked;
|
|
|
|
if (data.isSuperusers) {
|
|
collection.mfa.enabled = e.target.checked;
|
|
}
|
|
},
|
|
}),
|
|
t.label({
|
|
htmlFor: uniqueId + ".enabled",
|
|
textContent: "Enable",
|
|
}),
|
|
() => {
|
|
if (!data.isSuperusers) {
|
|
return;
|
|
}
|
|
|
|
return t.i({
|
|
className: "ri-information-line link-hint",
|
|
ariaDescription: app.attrs.tooltip(
|
|
"Superusers can have OTP only as part of Two-factor authentication.",
|
|
),
|
|
});
|
|
},
|
|
),
|
|
),
|
|
t.div(
|
|
{ className: "col-sm-6" },
|
|
t.div(
|
|
{ className: "field" },
|
|
t.label({
|
|
htmlFor: uniqueId + ".duration",
|
|
textContent: "Duration (in seconds)",
|
|
}),
|
|
t.input({
|
|
type: "number",
|
|
id: uniqueId + ".duration",
|
|
name: "otp.duration",
|
|
min: 1,
|
|
step: 1,
|
|
required: true,
|
|
value: () => data.config.duration || "",
|
|
oninput: (e) => (data.config.duration = parseInt(e.target.value, 10)),
|
|
}),
|
|
),
|
|
),
|
|
t.div(
|
|
{ className: "col-sm-6" },
|
|
t.div(
|
|
{ className: "field" },
|
|
t.label({
|
|
htmlFor: uniqueId + ".length",
|
|
textContent: "Generated password length",
|
|
}),
|
|
t.input({
|
|
type: "number",
|
|
id: uniqueId + ".length",
|
|
name: "otp.length",
|
|
min: 1,
|
|
step: 1,
|
|
required: true,
|
|
value: () => data.config.length || "",
|
|
oninput: (e) => (data.config.length = parseInt(e.target.value, 10)),
|
|
}),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|