1
0
Fork 0
VaultUI/src/ui/pages/Home.tsx
2022-01-07 13:14:25 +00:00

113 lines
3.4 KiB
TypeScript

import { Component, JSX, render } from "preact";
import { Grid, GridSizes } from "../elements/Grid";
import { Margin } from "../elements/Margin";
import { PageState } from "../../state/PageState";
import { PageTitle } from "../elements/PageTitle";
import { Tile } from "../elements/Tile";
import { TokenInfo } from "../../api/types/token";
import { getCapabilitiesPath } from "../../api/sys/getCapabilities";
import { lookupSelf } from "../../api/sys/lookupSelf";
import { prePageChecks, setErrorText } from "../../pageUtils";
import { route } from "preact-router";
import i18next from "i18next";
type HomeProps = {
state: PageState;
};
type HomeState = {
selfTokenInfo: TokenInfo;
authCaps: string[];
policiesCaps: string[];
};
export class Home extends Component<HomeProps, HomeState> {
async componentDidMount() {
if (!(await prePageChecks(this.props.state))) return;
let selfTokenInfo: TokenInfo;
try {
selfTokenInfo = await lookupSelf();
} catch (e: unknown) {
const error = e as Error;
setErrorText(error.message);
if (error.message == "permission denied") {
this.props.state.token = "";
route("/login", true);
return;
}
}
const caps = await getCapabilitiesPath(["sys/auth", "sys/policies"]);
const authCaps = caps["sys/auth"];
const policiesCaps = caps["sys/policies"];
this.setState({
selfTokenInfo: selfTokenInfo,
authCaps: authCaps,
policiesCaps: policiesCaps,
});
}
render(): JSX.Element {
return (
this.state.selfTokenInfo && (
<>
<PageTitle title={this.name} />
<div>
<ul id="textList" class="uk-nav">
<li>
<span>{i18next.t("home_vaulturl_text", { text: this.props.state.apiURL })}</span>
</li>
<li>
<a href="/pw_gen">{i18next.t("home_password_generator_btn")}</a>
</li>
<li>
<span>
{i18next.t("home_your_token_expires_in", {
date: new Date(this.state.selfTokenInfo.expire_time),
})}
</span>
</li>
</ul>
<Margin>
<Grid size={GridSizes.MATCHING_TWO_ROWS}>
<Tile
title={i18next.t("home_secrets_title")}
description={i18next.t("home_secrets_description")}
icon="file-edit"
onclick={async () => {
route("/secrets");
}}
/>
<Tile
title={i18next.t("home_access_title")}
description={i18next.t("home_access_description")}
icon="users"
disabled={!this.state.authCaps.includes("read")}
onclick={async () => {
route("/access");
}}
/>
<Tile
title={i18next.t("home_policies_title")}
description={i18next.t("home_policies_description")}
icon="pencil"
disabled={!this.state.policiesCaps.includes("read")}
onclick={async () => {
route("/policies");
}}
/>
</Grid>
</Margin>
</div>
</>
)
);
}
get name(): string {
return i18next.t("home_page_title");
}
}