Use tsx syntax in TOTPView.
This commit is contained in:
Kitteh
parent
e4d749cce0
commit
23cc9b60c9
|
|
@ -1,119 +0,0 @@
|
||||||
import { CopyableInputBox } from "../../../elements/CopyableInputBox";
|
|
||||||
import { DoesNotExistError } from "../../../types/internalErrors";
|
|
||||||
import { Page } from "../../../types/Page";
|
|
||||||
import { SecretTitleElement } from "../SecretTitleElement";
|
|
||||||
import { getTOTPCode } from "../../../api/totp/getTOTPCode";
|
|
||||||
import { getTOTPKeys } from "../../../api/totp/getTOTPKeys";
|
|
||||||
import { makeElement } from "z-makeelement";
|
|
||||||
import { objectToMap } from "../../../utils";
|
|
||||||
import { setErrorText } from "../../../pageUtils";
|
|
||||||
import i18next from "i18next";
|
|
||||||
|
|
||||||
export interface TOTPListElement extends HTMLElement {
|
|
||||||
setCode(code: string): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class TOTPViewPage extends Page {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
this.refresher = undefined;
|
|
||||||
this.totpListElements = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
refresher: number;
|
|
||||||
totpListElements: Record<string, TOTPListElement>;
|
|
||||||
|
|
||||||
async goBack(): Promise<void> {
|
|
||||||
await this.router.changePage("SECRETS_HOME");
|
|
||||||
}
|
|
||||||
|
|
||||||
async render(): Promise<void> {
|
|
||||||
const totpList = makeElement({ tag: "div" });
|
|
||||||
await this.router.setPageContent(
|
|
||||||
makeElement({
|
|
||||||
tag: "div",
|
|
||||||
children: [
|
|
||||||
makeElement({
|
|
||||||
tag: "button",
|
|
||||||
text: i18next.t("totp_view_new_btn"),
|
|
||||||
class: ["uk-button", "uk-button-primary", "uk-margin-bottom"],
|
|
||||||
onclick: async () => {
|
|
||||||
await this.router.changePage("NEW_TOTP");
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
makeElement({
|
|
||||||
tag: "p",
|
|
||||||
id: "loadingText",
|
|
||||||
text: i18next.t("totp_view_loading"),
|
|
||||||
}),
|
|
||||||
makeElement({ tag: "br" }),
|
|
||||||
makeElement({ tag: "br" }),
|
|
||||||
totpList,
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await getTOTPKeys(this.state.baseMount);
|
|
||||||
for (const totpKeyName of res) {
|
|
||||||
const totpListElement = this.makeTOTPListElement(totpKeyName);
|
|
||||||
totpList.appendChild(totpListElement);
|
|
||||||
this.totpListElements[totpKeyName] = totpListElement;
|
|
||||||
await this.updateTOTPElement(totpKeyName, totpListElement);
|
|
||||||
}
|
|
||||||
document.getElementById("loadingText").remove();
|
|
||||||
} catch (e: unknown) {
|
|
||||||
const error = e as Error;
|
|
||||||
if (error == DoesNotExistError) {
|
|
||||||
const loadingText = document.getElementById("loadingText");
|
|
||||||
loadingText.innerText = i18next.t("totp_view_empty");
|
|
||||||
} else {
|
|
||||||
setErrorText(error.message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const totpRefresher = async () => {
|
|
||||||
await Promise.all(
|
|
||||||
Array.from(objectToMap(this.totpListElements)).map((kv: [string, TOTPListElement]) => {
|
|
||||||
return this.updateTOTPElement(...kv);
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
};
|
|
||||||
await totpRefresher();
|
|
||||||
this.refresher = setInterval(async () => {
|
|
||||||
await totpRefresher();
|
|
||||||
}, 3000) as unknown as number;
|
|
||||||
}
|
|
||||||
|
|
||||||
async cleanup(): Promise<void> {
|
|
||||||
clearInterval(this.refresher);
|
|
||||||
this.totpListElements = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
async updateTOTPElement(totpKeyName: string, totpListElement: TOTPListElement): Promise<void> {
|
|
||||||
totpListElement.setCode(await getTOTPCode(this.state.baseMount, totpKeyName));
|
|
||||||
}
|
|
||||||
|
|
||||||
makeTOTPListElement(totpKeyName: string): TOTPListElement {
|
|
||||||
const totpKeyBox = CopyableInputBox(totpKeyName, false);
|
|
||||||
const totpValueBox = CopyableInputBox(i18next.t("totp_view_loading_box"));
|
|
||||||
|
|
||||||
const gridElement = makeElement({
|
|
||||||
tag: "div",
|
|
||||||
class: ["uk-grid", "uk-grid-small", "uk-text-expand"],
|
|
||||||
children: [totpKeyBox, totpValueBox],
|
|
||||||
}) as TOTPListElement;
|
|
||||||
|
|
||||||
gridElement.setCode = (code: string) => totpValueBox.setText(code);
|
|
||||||
|
|
||||||
return gridElement;
|
|
||||||
}
|
|
||||||
|
|
||||||
async getPageTitle(): Promise<Element | string> {
|
|
||||||
return await SecretTitleElement(this.router);
|
|
||||||
}
|
|
||||||
|
|
||||||
get name(): string {
|
|
||||||
return i18next.t("totp_view_title");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
128
src/pages/Secrets/TOTP/TOTPView.tsx
Normal file
128
src/pages/Secrets/TOTP/TOTPView.tsx
Normal file
|
|
@ -0,0 +1,128 @@
|
||||||
|
import { CopyableInputBox } from "../../../elements/ReactCopyableInputBox";
|
||||||
|
import { DoesNotExistError } from "../../../types/internalErrors";
|
||||||
|
import { Page } from "../../../types/Page";
|
||||||
|
import { SecretTitleElement } from "../SecretTitleElement";
|
||||||
|
import { getTOTPCode } from "../../../api/totp/getTOTPCode";
|
||||||
|
import { getTOTPKeys } from "../../../api/totp/getTOTPKeys";
|
||||||
|
import { makeElement } from "z-makeelement";
|
||||||
|
import { objectToMap } from "../../../utils";
|
||||||
|
import { setErrorText } from "../../../pageUtils";
|
||||||
|
import i18next from "i18next";
|
||||||
|
import { render, JSX } from "preact";
|
||||||
|
|
||||||
|
export interface TOTPListElement extends HTMLElement {
|
||||||
|
setCode(code: string): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function quickHash(str: string): string {
|
||||||
|
var hash = 0;
|
||||||
|
if (str.length == 0) {
|
||||||
|
return String(hash).toString();
|
||||||
|
}
|
||||||
|
for (var i = 0; i < str.length; i++) {
|
||||||
|
var char = str.charCodeAt(i);
|
||||||
|
hash = ((hash << 5) - hash) + char;
|
||||||
|
hash = hash & hash;
|
||||||
|
}
|
||||||
|
return String(hash).toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function TOTPGridItem(props: { item_key: string, item_value: string }): JSX.Element {
|
||||||
|
return (
|
||||||
|
<div class="uk-grid uk-grid-small uk-text-left" uk-grid>
|
||||||
|
<CopyableInputBox text={props.item_key} copyable />
|
||||||
|
<CopyableInputBox text={props.item_value} copyable />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export class TOTPViewPage extends Page {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.refresher = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
refresher: number;
|
||||||
|
|
||||||
|
async goBack(): Promise<void> {
|
||||||
|
await this.router.changePage("SECRETS_HOME");
|
||||||
|
}
|
||||||
|
|
||||||
|
async render(): Promise<void> {
|
||||||
|
console.log(quickHash("abc"));
|
||||||
|
|
||||||
|
render((
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
class="uk-button uk-button-primary uk-margin-bottom"
|
||||||
|
onClick={async () => {
|
||||||
|
await this.router.changePage("NEW_TOTP");
|
||||||
|
}}>
|
||||||
|
{i18next.t("totp_view_new_btn")}
|
||||||
|
</button>
|
||||||
|
<p id="loadingText">{i18next.t("totp_view_loading")}</p>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<div id="totpList"></div>
|
||||||
|
</div>
|
||||||
|
), this.router.pageContentElement)
|
||||||
|
|
||||||
|
try {
|
||||||
|
await this.updateTOTPElements();
|
||||||
|
document.getElementById("loadingText").remove();
|
||||||
|
} catch (e: unknown) {
|
||||||
|
const error = e as Error;
|
||||||
|
if (error == DoesNotExistError) {
|
||||||
|
const loadingText = document.getElementById("loadingText");
|
||||||
|
loadingText.innerText = i18next.t("totp_view_empty");
|
||||||
|
} else {
|
||||||
|
setErrorText(error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const totpRefresher = async () => {
|
||||||
|
await this.updateTOTPElements();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.refresher = setInterval(async () => {
|
||||||
|
await totpRefresher();
|
||||||
|
}, 3000) as unknown as number;
|
||||||
|
}
|
||||||
|
|
||||||
|
async cleanup(): Promise<void> {
|
||||||
|
clearInterval(this.refresher);
|
||||||
|
}
|
||||||
|
|
||||||
|
async updateTOTPElements(): Promise<void> {
|
||||||
|
render((
|
||||||
|
<>
|
||||||
|
{await Promise.all(Array.from(await getTOTPKeys(this.state.baseMount)).map(async (key) =>
|
||||||
|
<TOTPGridItem
|
||||||
|
item_key={String(key).toString()}
|
||||||
|
item_value={await getTOTPCode(this.state.baseMount, key)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
), document.querySelector("#totpList"))
|
||||||
|
}
|
||||||
|
|
||||||
|
makeTOTPListElement(totpKeyName: string): TOTPListElement {
|
||||||
|
|
||||||
|
const gridElement = makeElement({
|
||||||
|
tag: "div",
|
||||||
|
class: ["uk-grid", "uk-grid-small", "uk-text-expand"],
|
||||||
|
}) as TOTPListElement;
|
||||||
|
|
||||||
|
|
||||||
|
return gridElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
async getPageTitle(): Promise<Element | string> {
|
||||||
|
return await SecretTitleElement(this.router);
|
||||||
|
}
|
||||||
|
|
||||||
|
get name(): string {
|
||||||
|
return i18next.t("totp_view_title");
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue