-
- `);
- render($page);
-
- effect(backend$.pipe(
- rxjs.mergeMap((specs) => Object.keys(specs)),
- rxjs.map((label) => [createElement(`
- Storage Backend
- - -
-
- `)]),
- applyMutation(qs($page, "[data-bind=\"backend-available\"]"), "appendChild")
- ));
-}
-
-function componentAuthenticationMiddleware(render) {
- const $page = createElement(`
-
- ${label}
-
- +
-
-
-
-
- `);
- render($page);
-}
-
-const css = await CSS(import.meta.url, "ctrl_backend.css");
diff --git a/public/pages/adminpage/ctrl_backend_component_authentication.js b/public/pages/adminpage/ctrl_backend_component_authentication.js
new file mode 100644
index 000000000..72a9cf4f3
--- /dev/null
+++ b/public/pages/adminpage/ctrl_backend_component_authentication.js
@@ -0,0 +1,47 @@
+import { createElement } from "../../lib/skeleton/index.js";
+
+export default function(render) {
+ const $page = createElement(`
+
-
- admin
- +
-
-
-
-
- htpasswd
- +
-
-
-
-
- ldap
- +
-
-
-
-
- openid
-
- 
-
-
-
-
-
-
-
-
- passthrough
- +
-
-
-
-
-saml
- +
-
-
-
+
+ `);
+ render($page);
+}
diff --git a/public/pages/adminpage/ctrl_backend_component_storage.js b/public/pages/adminpage/ctrl_backend_component_storage.js
new file mode 100644
index 000000000..7bcdf6c31
--- /dev/null
+++ b/public/pages/adminpage/ctrl_backend_component_storage.js
@@ -0,0 +1,30 @@
+import { createElement } from "../../lib/skeleton/index.js";
+import rxjs, { effect, applyMutation } from "../../lib/rx.js";
+import { qs } from "../../lib/dom.js";
+import backend$ from "../connectpage/model_backend.js";
+
+export default function(render) {
+ const $page = createElement(`
+
+
+ admin
+ +
+
+
+
+
+ htpasswd
+ +
+
+
+
+
+ ldap
+ +
+
+
+
+
+ openid
+
+
+
+
+
+
+
+
+
+
+ passthrough
+ +
+
+
+
+
+saml
+ +
+
+
+
+
+ `);
+ render($page);
+
+ effect(backend$.pipe(
+ rxjs.mergeMap((specs) => Object.keys(specs)),
+ rxjs.map((label) => [createElement(`
+ Storage Backend
+ + +
+
+ `)]),
+ applyMutation(qs($page, "[data-bind=\"backend-available\"]"), "appendChild")
+ ));
+}
diff --git a/public/pages/adminpage/ctrl_log.js b/public/pages/adminpage/ctrl_log.js
new file mode 100644
index 000000000..19d975253
--- /dev/null
+++ b/public/pages/adminpage/ctrl_log.js
@@ -0,0 +1,29 @@
+import { createElement, createRender } from "../../lib/skeleton/index.js";
+import rxjs, { effect, stateMutation, applyMutation } from "../../lib/rx.js";
+import { qs } from "../../lib/dom.js";
+
+import componentLogForm from "./ctrl_log_form.js";
+import componentLogViewer from "./ctrl_log_viewer.js";
+import componentAuditor from "./ctrl_log_audit.js";
+import transition from "./animate.js";
+import AdminHOC from "./decorator.js";
+
+function Page(render) {
+ const $page = createElement(`
+
+ ${label}
+
+ +
+
+
+
+
Logging
+ + + +Activity Report
+ +
+ `);
+ render(transition($page));
+
+ componentLogForm(createRender($page.querySelector(".component_logger")));
+ componentLogViewer(createRender($page.querySelector(".component_logviewer")));
+ componentAuditor(createRender($page.querySelector(".component_reporter")));
+}
+
+export default AdminHOC(Page);
diff --git a/public/pages/adminpage/ctrl_log_audit.js b/public/pages/adminpage/ctrl_log_audit.js
new file mode 100644
index 000000000..cf378f811
--- /dev/null
+++ b/public/pages/adminpage/ctrl_log_audit.js
@@ -0,0 +1,32 @@
+import { createElement } from "../../lib/skeleton/index.js";
+import rxjs, { effect, stateMutation, applyMutation } from "../../lib/rx.js";
+import { qs } from "../../lib/dom.js";
+import { createForm } from "../../lib/form.js";
+import { formTmpl } from "../../components/form.js";
+
+import Audit from "./model_audit.js";
+
+export default function(render) {
+ const $page = createElement(`
+
+
+
+
+ `);
+ render($page);
+
+ // setup the form
+ effect(Audit.get().pipe(
+ rxjs.map(({ form }) => form),
+ rxjs.map((formSpec) => createForm(formSpec, formTmpl())),
+ rxjs.mergeMap((promise) => rxjs.from(promise)),
+ rxjs.map(($form) => [$form]),
+ applyMutation(qs($page, "form"), "appendChild")
+ ));
+
+ // setup the result
+ effect(Audit.get().pipe(
+ rxjs.map(({ render }) => render),
+ stateMutation(qs($page, "[data-bind=\"auditor\"]"), "innerHTML")
+ ));
+}
diff --git a/public/pages/adminpage/ctrl_log_form.js b/public/pages/adminpage/ctrl_log_form.js
new file mode 100644
index 000000000..6908ab1a7
--- /dev/null
+++ b/public/pages/adminpage/ctrl_log_form.js
@@ -0,0 +1,29 @@
+import { createElement } from "../../lib/skeleton/index.js";
+import rxjs, { effect, applyMutation } from "../../lib/rx.js";
+import { generateSkeleton } from "../../components/skeleton.js";
+import { createForm } from "../../lib/form.js";
+import { formTmpl } from "../../components/form.js";
+
+import { get as getConfig } from "./model_config.js";
+import { renderLeaf } from "./helper_form.js";
+
+export default function(render) {
+ const $form = createElement(`
+
+ `);
+
+ render($form);
+
+ // feature1: render the form
+ effect(getConfig().pipe(
+ rxjs.map(({ log }) => ({ params: log })),
+ rxjs.map((formSpec) => createForm(formSpec, formTmpl({ renderLeaf }))),
+ rxjs.mergeMap((promise) => rxjs.from(promise)),
+ rxjs.map(($form) => [$form]),
+ applyMutation($form, "replaceChildren")
+ ));
+
+ // TODO feature2: response to form change
+}
diff --git a/public/pages/adminpage/ctrl_log_viewer.js b/public/pages/adminpage/ctrl_log_viewer.js
new file mode 100644
index 000000000..e802452a2
--- /dev/null
+++ b/public/pages/adminpage/ctrl_log_viewer.js
@@ -0,0 +1,13 @@
+import { createElement } from "../../lib/skeleton/index.js";
+import rxjs, { effect, stateMutation } from "../../lib/rx.js";
+
+import Log from "./model_log.js";
+
+export default function(render) {
+ const $page = createElement(`…`); + render($page); + + effect(Log.get().pipe( + stateMutation($page, "textContent") + )); +} diff --git a/public/pages/adminpage/ctrl_logger.js b/public/pages/adminpage/ctrl_logger.js deleted file mode 100644 index 2a09e0d40..000000000 --- a/public/pages/adminpage/ctrl_logger.js +++ /dev/null @@ -1,88 +0,0 @@ -import { createElement, createRender } from "../../lib/skeleton/index.js"; -import rxjs, { effect, stateMutation, applyMutation } from "../../lib/rx.js"; -import { qs } from "../../lib/dom.js"; -import { createForm } from "../../lib/form.js"; -import { formTmpl } from "../../components/form.js"; -import { generateSkeleton } from "../../components/skeleton.js"; - -import transition from "./animate.js"; -import { renderLeaf } from "./helper_form.js"; -import AdminHOC from "./decorator.js"; -import Log from "./model_log.js"; -import Audit from "./model_audit.js"; -import { get as getConfig } from "./model_config.js"; - -function Page(render) { - const $page = createElement(` -
-
diff --git a/public/pages/adminpage/index.css b/public/pages/adminpage/index.css
index 22741c259..cc0b2bf1a 100644
--- a/public/pages/adminpage/index.css
+++ b/public/pages/adminpage/index.css
@@ -122,36 +122,42 @@
margin: 15px 0;
}
-.component_page_admin .formbuilder h2 ~ div > div > label {
+.component_page_admin .formbuilder h2 ~ div > div > label,
+.component_page_admin .formbuilder h2 ~ div > div > div > label {
display: block;
border-bottom: 2px dashed rgba(100, 100, 100, 0.1);
margin-bottom: 15px;
padding-bottom: 5px;
margin-top: 15px;
}
-.component_page_admin .component_input,
-.component_page_admin .component_textarea,
-.component_page_admin .component_select {
+.component_page_admin .formbuilder .component_input,
+.component_page_admin .formbuilder .component_textarea,
+.component_page_admin .formbuilder .component_select {
background: rgba(0, 0, 0, 0.05);
border: 2px solid rgba(0, 0, 0, 0.05);
border-radius: 3px;
padding-left: 5px;
}
-.component_page_admin .component_input[readonly],
-.component_page_admin .component_textarea[readonly],
-.component_page_admin .component_select[readonly] {
+.component_page_admin .formbuilder .component_input[readonly],
+.component_page_admin .formbuilder .component_textarea[readonly],
+.component_page_admin .formbuilder .component_select[readonly] {
background: var(--dark);
color: var(--light);
}
-.component_page_admin .component_input:not([readonly]):hover,
-.component_page_admin .component_input:not([readonly]):focus,
-.component_page_admin .component_textarea:not([readonly]):hover,
-.component_page_admin .component_textarea:not([readonly]):focus,
-.component_page_admin .component_select:not([readonly]):hover,
-.component_page_admin .component_select:not([readonly]):focus {
+.component_page_admin .formbuilder .component_input:not([readonly]):hover,
+.component_page_admin .formbuilder .component_input:not([readonly]):focus,
+.component_page_admin .formbuilder .component_textarea:not([readonly]):hover,
+.component_page_admin .formbuilder .component_textarea:not([readonly]):focus,
+.component_page_admin .formbuilder .component_select:not([readonly]):hover,
+.component_page_admin .formbuilder .component_select:not([readonly]):focus {
background: rgba(0, 0, 0, 0.07);
}
-.component_page_admin .formbuilder_password .component_input {
+.component_page_admin form .formbuilder_password:focus-within img.component_icon,
+.component_page_admin form .formbuilder_password:hover img.component_icon{
+ border-color: rgba(0, 0, 0, 0.05);
+ background: rgba(0, 0, 0, 0.07);
+}
+.component_page_admin .formbuilder .formbuilder_password .component_input {
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
@@ -173,11 +179,11 @@
line-height: 1em;
text-align: justify;
}
-.component_page_admin form input::placeholder,
-.component_page_admin form textarea::placeholder {
+.component_page_admin .formbuilder input::placeholder,
+.component_page_admin .formbuilder textarea::placeholder {
opacity: 0.6;
}
-.component_page_admin form label.input_type_hidden {
+.component_page_admin .formbuilder label.input_type_hidden {
display: none;
}
.component_page_admin form fieldset legend {
@@ -206,14 +212,12 @@
.component_page_admin form .formbuilder_password {
display: flex;
}
-.component_page_admin form .formbuilder_password:focus-within img.component_icon {
- border-color: var(--emphasis-primary);
-}
.component_page_admin form .formbuilder_password img.component_icon {
- height: 20px;
- border: none;
- cursor: pointer;
- padding: 5px 5px;
- border-bottom: 2px solid rgba(70, 99, 114, 0.1);
- transition: border-color 0.2s ease-out;
+ border: 2px solid rgba(0,0,0,.05);
+ height: 18px;
+ border-left: none;
+ background: rgba(0,0,0,.05);
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ padding-right: 5px;
}
Logging
- - - -Activity Report
- -
- `);
- render(transition($page));
-
- componentLogForm(createRender($page.querySelector(".component_logger")));
- componentLogViewer(createRender($page.querySelector(".component_logviewer")));
- componentAuditor(createRender($page.querySelector(".component_reporter")));
-}
-
-export default AdminHOC(Page);
-
-function componentLogForm(render) {
- const $form = createElement(`
-
- `);
-
- render($form);
-
- // feature1: render the form
- effect(getConfig().pipe(
- rxjs.map(({ log }) => ({ params: log })),
- rxjs.map((formSpec) => createForm(formSpec, formTmpl({ renderLeaf }))),
- rxjs.mergeMap((promise) => rxjs.from(promise)),
- rxjs.map(($form) => [$form]),
- applyMutation($form, "replaceChildren")
- ));
-
- // TODO feature2: response to form change
-}
-
-function componentLogViewer(render) {
- const $page = createElement(`
`);
+ // feature: nice transition
+ render(transition($form, {
+ timeoutEnter: 250,
+ enter: zoomIn(1.2),
+ timeoutLeave: 0
+ }));
+
// feature: form interactions
effect(rxjs.fromEvent(qs($form, "form"), "submit").pipe(
preventDefault(),
@@ -42,13 +49,6 @@ export default async function(render) {
rxjs.delay(300), applyMutation(qs($form, ".input_group"), "classList", "remove")
));
- // feature: nice transition
- render(transition($form, {
- timeoutEnter: 250,
- enter: zoomIn(1.2),
- timeoutLeave: 0
- }));
-
// feature: autofocus
effect(rxjs.of([]).pipe(
applyMutation(qs($form, "input"), "focus")
diff --git a/public/pages/adminpage/ctrl_setup.css b/public/pages/adminpage/ctrl_setup.css
index 353607a97..1faf45f5e 100644
--- a/public/pages/adminpage/ctrl_setup.css
+++ b/public/pages/adminpage/ctrl_setup.css
@@ -23,25 +23,7 @@
.component_setup #step1 form {
max-width: 400px;
}
-.component_setup #step1 form {
- display: flex;
- background: white;
- border-radius: 2px;
- box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
-}
-.component_setup #step1 form input {
- padding: 15px 20px;
- border-bottom: 0;
- margin: 0;
- height: inherit !important;
-}
-.component_setup #step1 form button {
- width: inherit;
- padding: 0 10px;
-}
-.component_setup #step1 form button .component_icon {
- height: 25px;
-}
+
.component_setup #step2 .component_dependency_installed {
margin: 10px 0;
padding: 10px 10px;
diff --git a/public/pages/adminpage/ctrl_setup.js b/public/pages/adminpage/ctrl_setup.js
index b92ee862e..8118d0764 100644
--- a/public/pages/adminpage/ctrl_setup.js
+++ b/public/pages/adminpage/ctrl_setup.js
@@ -4,7 +4,7 @@ import { qs } from "../../lib/dom.js";
import { ApplicationError } from "../../lib/error.js";
import { transition, animate, zoomIn, slideXOut, slideXIn } from "../../lib/animate.js";
-import { CSS } from "../../helpers/loader";
+import { CSS } from "../../helpers/loader.js";
import modal from "../../helpers/modal.js";
import ctrlError from "../ctrl_error.js";
@@ -13,7 +13,7 @@ import { cssHideMenu } from "./animate.js";
import "../../components/icon.js";
-const stepper$ = new rxjs.BehaviorSubject(2);
+const stepper$ = new rxjs.BehaviorSubject(1);
export default function(render) {
const $page = createElement(`
@@ -44,10 +44,12 @@ function componentStep1(render) {
…`); - render($page); - - effect(Log.get().pipe( - stateMutation($page, "textContent") - )); -} - -function componentAuditor(render) { - const $page = createElement(` -
-
-
-
- `);
- render($page);
-
- // setup the form
- effect(Audit.get().pipe(
- rxjs.map(({ form }) => form),
- rxjs.map((formSpec) => createForm(formSpec, formTmpl())),
- rxjs.mergeMap((promise) => rxjs.from(promise)),
- rxjs.map(($form) => [$form]),
- applyMutation(qs($page, "form"), "appendChild")
- ));
-
- // setup the result
- effect(Audit.get().pipe(
- rxjs.map(({ render }) => render),
- stateMutation(qs($page, "[data-bind=\"auditor\"]"), "innerHTML")
- ));
-}
diff --git a/public/pages/adminpage/ctrl_login.js b/public/pages/adminpage/ctrl_login.js
index 28f990f2b..02f6e179a 100644
--- a/public/pages/adminpage/ctrl_login.js
+++ b/public/pages/adminpage/ctrl_login.js
@@ -24,6 +24,13 @@ export default async function(render) {
Create your instance admin password: