Add tsx syntax in UserPassUserView.
This commit is contained in:
Kitteh
parent
c2d8be3f09
commit
9db9630187
19
src/elements/ReactHeaderAndContent.tsx
Normal file
19
src/elements/ReactHeaderAndContent.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
import { JSX } from "preact";
|
||||||
|
|
||||||
|
export type HeaderAndContentProps = {
|
||||||
|
title: string;
|
||||||
|
content: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function HeaderAndContent(props: HeaderAndContentProps): JSX.Element {
|
||||||
|
return (
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<h5>{props.title}</h5>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p>{props.content}</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,97 +0,0 @@
|
||||||
import { HeaderAndContent } from "../../../../elements/HeaderAndContent";
|
|
||||||
import { Page } from "../../../../types/Page";
|
|
||||||
import { getUserPassUser } from "../../../../api/auth/userpass/getUserPassUser";
|
|
||||||
import { makeElement } from "z-makeelement";
|
|
||||||
import { toStr } from "../../../../utils";
|
|
||||||
import i18next from "i18next";
|
|
||||||
|
|
||||||
export class UserPassUserViewPage extends Page {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
}
|
|
||||||
async goBack(): Promise<void> {
|
|
||||||
await this.router.changePage("USERPASS_USERS_LIST");
|
|
||||||
}
|
|
||||||
|
|
||||||
async render(): Promise<void> {
|
|
||||||
const pageContent = makeElement({
|
|
||||||
tag: "div",
|
|
||||||
});
|
|
||||||
await this.router.setPageContent(pageContent);
|
|
||||||
|
|
||||||
const buttonBoxElement = makeElement({
|
|
||||||
tag: "p",
|
|
||||||
children: [
|
|
||||||
makeElement({
|
|
||||||
tag: "button",
|
|
||||||
class: ["uk-button", "uk-button-danger"],
|
|
||||||
onclick: async () => {
|
|
||||||
await this.router.changePage("USERPASS_USER_DELETE");
|
|
||||||
},
|
|
||||||
text: i18next.t("userpass_user_view_delete_btn"),
|
|
||||||
}),
|
|
||||||
makeElement({
|
|
||||||
tag: "button",
|
|
||||||
class: ["uk-button", "uk-button-primary"],
|
|
||||||
onclick: async () => {
|
|
||||||
await this.router.changePage("USERPASS_USER_EDIT");
|
|
||||||
},
|
|
||||||
text: i18next.t("userpass_user_view_edit_btn"),
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
});
|
|
||||||
pageContent.appendChild(buttonBoxElement);
|
|
||||||
|
|
||||||
const contentElement = makeElement({
|
|
||||||
tag: "div",
|
|
||||||
});
|
|
||||||
pageContent.appendChild(contentElement);
|
|
||||||
|
|
||||||
const tableElement = makeElement({
|
|
||||||
tag: "table",
|
|
||||||
class: "uk-table",
|
|
||||||
});
|
|
||||||
contentElement.appendChild(tableElement);
|
|
||||||
|
|
||||||
const tableBody = makeElement({ tag: "tbody" });
|
|
||||||
tableElement.appendChild(tableBody);
|
|
||||||
|
|
||||||
const user = await getUserPassUser(this.state.authPath, this.state.userPassUser);
|
|
||||||
|
|
||||||
tableBody.appendChild(
|
|
||||||
HeaderAndContent(i18next.t("userpass_common_cidrs"), user.token_bound_cidrs.join()),
|
|
||||||
);
|
|
||||||
tableBody.appendChild(
|
|
||||||
HeaderAndContent(
|
|
||||||
i18next.t("userpass_common_exp_max_ttl"),
|
|
||||||
toStr(user.token_explicit_max_ttl),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
tableBody.appendChild(
|
|
||||||
HeaderAndContent(i18next.t("userpass_common_max_ttl"), toStr(user.token_max_ttl)),
|
|
||||||
);
|
|
||||||
tableBody.appendChild(
|
|
||||||
HeaderAndContent(
|
|
||||||
i18next.t("userpass_common_default_policy_attached"),
|
|
||||||
toStr(user.token_no_default_policy),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
tableBody.appendChild(
|
|
||||||
HeaderAndContent(i18next.t("userpass_common_max_token_uses"), toStr(user.token_num_uses)),
|
|
||||||
);
|
|
||||||
tableBody.appendChild(
|
|
||||||
HeaderAndContent(i18next.t("userpass_common_token_peroid"), toStr(user.token_period)),
|
|
||||||
);
|
|
||||||
tableBody.appendChild(
|
|
||||||
HeaderAndContent(i18next.t("userpass_common_policies"), user.token_policies.join()),
|
|
||||||
);
|
|
||||||
tableBody.appendChild(
|
|
||||||
HeaderAndContent(i18next.t("userpass_common_initial_ttl"), toStr(user.token_ttl)),
|
|
||||||
);
|
|
||||||
tableBody.appendChild(HeaderAndContent(i18next.t("userpass_common_type"), user.token_type));
|
|
||||||
}
|
|
||||||
|
|
||||||
get name(): string {
|
|
||||||
return i18next.t("userpass_user_view_title");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
88
src/pages/Access/Auth/userpass/UserPassUserView.tsx
Normal file
88
src/pages/Access/Auth/userpass/UserPassUserView.tsx
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
import { HeaderAndContent } from "../../../../elements/ReactHeaderAndContent";
|
||||||
|
import { Page } from "../../../../types/Page";
|
||||||
|
import { getUserPassUser } from "../../../../api/auth/userpass/getUserPassUser";
|
||||||
|
import { render } from "preact";
|
||||||
|
import { toStr } from "../../../../utils";
|
||||||
|
import i18next from "i18next";
|
||||||
|
|
||||||
|
export class UserPassUserViewPage extends Page {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
async goBack(): Promise<void> {
|
||||||
|
await this.router.changePage("USERPASS_USERS_LIST");
|
||||||
|
}
|
||||||
|
|
||||||
|
async render(): Promise<void> {
|
||||||
|
const user = await getUserPassUser(this.state.authPath, this.state.userPassUser);
|
||||||
|
|
||||||
|
render(
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<button
|
||||||
|
class="uk-button uk-button-danger"
|
||||||
|
onClick={async () => {
|
||||||
|
await this.router.changePage("USERPASS_USER_DELETE");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{i18next.t("userpass_user_view_delete_btn")}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="uk-button uk-button-primary"
|
||||||
|
onClick={async () => {
|
||||||
|
await this.router.changePage("USERPASS_USER_EDIT");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{i18next.t("userpass_user_view_edit_btn")}
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
<table class="uk-table">
|
||||||
|
<tbody>
|
||||||
|
<HeaderAndContent
|
||||||
|
title={i18next.t("userpass_common_cidrs")}
|
||||||
|
content={user.token_bound_cidrs.join()}
|
||||||
|
/>
|
||||||
|
<HeaderAndContent
|
||||||
|
title={i18next.t("userpass_common_exp_max_ttl")}
|
||||||
|
content={toStr(user.token_explicit_max_ttl)}
|
||||||
|
/>
|
||||||
|
<HeaderAndContent
|
||||||
|
title={i18next.t("userpass_common_max_ttl")}
|
||||||
|
content={toStr(user.token_max_ttl)}
|
||||||
|
/>
|
||||||
|
<HeaderAndContent
|
||||||
|
title={i18next.t("userpass_common_default_policy_attached")}
|
||||||
|
content={toStr(user.token_no_default_policy)}
|
||||||
|
/>
|
||||||
|
<HeaderAndContent
|
||||||
|
title={i18next.t("userpass_common_max_token_uses")}
|
||||||
|
content={toStr(user.token_num_uses)}
|
||||||
|
/>
|
||||||
|
<HeaderAndContent
|
||||||
|
title={i18next.t("userpass_common_token_peroid")}
|
||||||
|
content={toStr(user.token_period)}
|
||||||
|
/>
|
||||||
|
<HeaderAndContent
|
||||||
|
title={i18next.t("userpass_common_policies")}
|
||||||
|
content={user.token_policies.join()}
|
||||||
|
/>
|
||||||
|
<HeaderAndContent
|
||||||
|
title={i18next.t("userpass_common_initial_ttl")}
|
||||||
|
content={toStr(user.token_ttl)}
|
||||||
|
/>
|
||||||
|
<HeaderAndContent
|
||||||
|
title={i18next.t("userpass_common_type")}
|
||||||
|
content={toStr(user.token_type)}
|
||||||
|
/>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>,
|
||||||
|
this.router.pageContentElement,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
get name(): string {
|
||||||
|
return i18next.t("userpass_user_view_title");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
1;
|
||||||
Loading…
Reference in a new issue