Add tsx syntax to AuthHome.
This commit is contained in:
Kitteh
parent
9db9630187
commit
dfbfcea253
|
|
@ -1,75 +0,0 @@
|
||||||
import { AuthMethod } from "../../../api/types/auth";
|
|
||||||
import { Page } from "../../../types/Page";
|
|
||||||
import { listAuth } from "../../../api/auth/listAuth";
|
|
||||||
import { makeElement } from "z-makeelement";
|
|
||||||
import { objectToMap } from "../../../utils";
|
|
||||||
import i18next from "i18next";
|
|
||||||
|
|
||||||
export function AuthListElement(page: Page, path: string, method: AuthMethod): HTMLElement {
|
|
||||||
const isClickable = method.type != "token";
|
|
||||||
|
|
||||||
return makeElement({
|
|
||||||
tag: "div",
|
|
||||||
class: ["uk-padding-small", "uk-background-secondary"],
|
|
||||||
children: [
|
|
||||||
makeElement({
|
|
||||||
tag: isClickable ? "a" : "span",
|
|
||||||
class: "uk-h4 uk-margin-bottom",
|
|
||||||
text: path,
|
|
||||||
onclick: async () => {
|
|
||||||
page.state.authPath = path;
|
|
||||||
if (method.type == "userpass") {
|
|
||||||
await page.router.changePage("USERPASS_USERS_LIST");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
makeElement({
|
|
||||||
tag: "span",
|
|
||||||
class: "uk-text-muted",
|
|
||||||
text: ` (${method.accessor})`,
|
|
||||||
}),
|
|
||||||
makeElement({
|
|
||||||
tag: "div",
|
|
||||||
class: "uk-margin-top",
|
|
||||||
children: [
|
|
||||||
makeElement({
|
|
||||||
tag: "button",
|
|
||||||
class: "uk-button uk-button-small uk-button-primary",
|
|
||||||
text: i18next.t("auth_home_view_config"),
|
|
||||||
onclick: async () => {
|
|
||||||
page.state.baseMount = path;
|
|
||||||
await page.router.changePage("AUTH_VIEW_CONFIG");
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
makeElement({
|
|
||||||
tag: "button",
|
|
||||||
class: "uk-button uk-button-small uk-button-primary",
|
|
||||||
text: i18next.t("auth_home_edit_config"),
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export class AuthHomePage extends Page {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
}
|
|
||||||
async goBack(): Promise<void> {
|
|
||||||
await this.router.changePage("ACCESS_HOME");
|
|
||||||
}
|
|
||||||
async render(): Promise<void> {
|
|
||||||
this.state.secretPath = [];
|
|
||||||
|
|
||||||
const authList = objectToMap(await listAuth()) as Map<string, AuthMethod>;
|
|
||||||
const contentElement = makeElement({ tag: "div" });
|
|
||||||
await this.router.setPageContent(contentElement);
|
|
||||||
for (const [path, details] of authList) {
|
|
||||||
contentElement.appendChild(AuthListElement(this, path, details));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
get name(): string {
|
|
||||||
return i18next.t("auth_home_title");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
76
src/pages/Access/Auth/AuthHome.tsx
Normal file
76
src/pages/Access/Auth/AuthHome.tsx
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
import { AuthMethod } from "../../../api/types/auth";
|
||||||
|
import { JSX, render } from "preact";
|
||||||
|
import { Page } from "../../../types/Page";
|
||||||
|
import { listAuth } from "../../../api/auth/listAuth";
|
||||||
|
import { notImplemented } from "../../../pageUtils";
|
||||||
|
import { objectToMap } from "../../../utils";
|
||||||
|
import i18next from "i18next";
|
||||||
|
|
||||||
|
export type AuthListElementProps = {
|
||||||
|
page: Page;
|
||||||
|
path: string;
|
||||||
|
method: AuthMethod;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function AuthListElement(props: AuthListElementProps): JSX.Element {
|
||||||
|
const isClickable = props.method.type != "token";
|
||||||
|
|
||||||
|
const onHeaderLinkClick = async (props: AuthListElementProps) => {
|
||||||
|
props.page.state.authPath = props.path;
|
||||||
|
if (props.method.type == "userpass") {
|
||||||
|
await props.page.router.changePage("USERPASS_USERS_LIST");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="uk-padding-small uk-background-secondary">
|
||||||
|
{isClickable ? (
|
||||||
|
<a class="uk-h4 uk-margin-bottom" onClick={() => onHeaderLinkClick(props)}>
|
||||||
|
{props.path}
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<span class="uk-h4 uk-margin-bottom">{props.path}</span>
|
||||||
|
)}
|
||||||
|
<span class="uk-text-muted">{` (${props.method.accessor})`}</span>
|
||||||
|
<div class="uk-margin-top">
|
||||||
|
<button
|
||||||
|
class="uk-button uk-button-small uk-button-primary"
|
||||||
|
onClick={async () => {
|
||||||
|
props.page.state.baseMount = props.path;
|
||||||
|
await props.page.router.changePage("AUTH_VIEW_CONFIG");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{i18next.t("auth_home_view_config")}
|
||||||
|
</button>
|
||||||
|
<button class="uk-button uk-button-small uk-button-primary" onClick={notImplemented}>
|
||||||
|
{i18next.t("auth_home_edit_config")}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export class AuthHomePage extends Page {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
async goBack(): Promise<void> {
|
||||||
|
await this.router.changePage("ACCESS_HOME");
|
||||||
|
}
|
||||||
|
async render(): Promise<void> {
|
||||||
|
this.state.secretPath = [];
|
||||||
|
const authList = objectToMap(await listAuth()) as Map<string, AuthMethod>;
|
||||||
|
|
||||||
|
render(
|
||||||
|
<div>
|
||||||
|
{Array.from(authList).map((values: [string, AuthMethod]) => (
|
||||||
|
<AuthListElement page={this} path={values[0]} method={values[1]} />
|
||||||
|
))}
|
||||||
|
</div>,
|
||||||
|
this.router.pageContentElement,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
get name(): string {
|
||||||
|
return i18next.t("auth_home_title");
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue