chaos/VaultUI
1
0
Fork 0
Code Issues Activity

Add typing to PwGen.ts.

Browse source
This commit is contained in:
Kitteh 2021-05-08 01:45:35 +01:00
parent dd9a63a8db
commit fd46140ad2
7 changed files with 61 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/allPages.ts
View file

@ -1,15 +1,15 @@
import { HomePage } from "./pages/Home.js";
import { HomePage } from "./pages/Home";
import { KeyValueDeletePage } from "./pages/KeyValue/KeyValueDelete.js";
import { KeyValueNewPage } from "./pages/KeyValue/KeyValueNew.js";
import { KeyValueSecretEditPage } from "./pages/KeyValue/KeyValueSecretsEdit.js";
import { KeyValueSecretPage } from "./pages/KeyValue/KeyValueSecret.js";
import { KeyValueVersionsPage } from "./pages/KeyValue/KeyValueVersions.js";
import { KeyValueViewPage } from "./pages/KeyValue/KeyValueView.js";
import { LoginPage } from "./pages/Login.js";
import { MePage } from "./pages/Me.js";
import { LoginPage } from "./pages/Login";
import { MePage } from "./pages/Me";
import { NewTOTPPage } from "./pages/TOTP/NewTOTP.js";
import { Page } from "./types/Page";
import { PwGenPage } from "./pages/PwGen.js";
import { PwGenPage } from "./pages/PwGen";
import { SetLanguagePage } from "./pages/SetLanguage.js";
import { SetVaultURLPage } from "./pages/SetVaultURL.js";
import { TOTPViewPage } from "./pages/TOTP/TOTPView.js";

2
src/elements/CopyableInputBox.ts
View file

@ -4,7 +4,7 @@ import { makeElement } from "../htmlUtils";
import ClipboardJS from "clipboard";
import i18next from "i18next";
interface CopyableInputBoxType extends HTMLElement {
export interface CopyableInputBoxType extends HTMLElement {
setText(text: string): void;
}

22
src/pages/Home.js → src/pages/Home.ts
View file

@ -1,9 +1,9 @@
import { Page } from "../types/Page";
import { changePage, prePageChecks, setErrorText } from "../pageUtils";
import { changePage, prePageChecks, setErrorText, setPageContent } from "../pageUtils";
import { getMounts } from "../api/getMounts";
import { lookupSelf } from "../api/lookupSelf";
import { makeElement } from "../htmlUtils";
import { pageState } from "../globalPageState.ts";
import { pageState } from "../globalPageState";
import { sortedObjectMap } from "../utils";
import i18next from 'i18next';
@ -11,10 +11,12 @@ export class HomePage extends Page {
constructor() {
super();
}
async render() {
pageContent.innerHTML = "";
async render(): Promise<void> {
setPageContent("");
if (!(await prePageChecks())) return;
const homePageContent = makeElement({tag: "div"});
setPageContent(homePageContent);
const textList = makeElement({
tag: "ul",
class: "uk-nav",
@ -38,10 +40,10 @@ export class HomePage extends Page {
})
]
});
pageContent.appendChild(textList);
homePageContent.appendChild(textList);
try {
let selfTokenInfo = await lookupSelf();
const selfTokenInfo = await lookupSelf();
textList.appendChild(makeElement({
tag: "li",
text: i18next.t("your_token_expires_in", {"date": new Date(selfTokenInfo.expire_time)})
@ -60,9 +62,9 @@ export class HomePage extends Page {
pageState.currentSecretVersion = null;
const navList = makeElement({ tag: "ul", class: ["uk-nav", "uk-nav-default", "uk-margin-top"] });
pageContent.appendChild(navList);
homePageContent.appendChild(navList);
let mounts = await getMounts();
const mounts = await getMounts();
// sort it by secretPath so it's in alphabetical order consistantly.
const mountsMap = sortedObjectMap(mounts);
@ -72,7 +74,7 @@ export class HomePage extends Page {
if (!("type" in mount)) return;
if (!(["kv", "totp", "transit", "cubbyhole"].includes(mount.type))) return;
let mountType = mount.type == "kv" ? "kv-v" + String(mount.options.version) : mount.type;
const mountType = mount.type == "kv" ? "kv-v" + String(mount.options.version) : mount.type;
let linkText = "";
let linkPage;
@ -104,7 +106,7 @@ export class HomePage extends Page {
}));
});
}
get name() {
get name(): string {
return i18next.t("home_page_title");
}
}

25
src/pages/Login.js → src/pages/Login.ts
View file

@ -4,7 +4,7 @@ import { Page } from "../types/Page";
import { changePage, setErrorText, setPageContent } from "../pageUtils";
import { lookupSelf } from "../api/lookupSelf";
import { makeElement } from "../htmlUtils";
import { pageState } from "../globalPageState.ts";
import { pageState } from "../globalPageState";
import { usernameLogin } from "../api/usernameLogin";
import i18next from 'i18next';
@ -12,8 +12,8 @@ export class LoginPage extends Page {
constructor() {
super();
}
render() {
let tokenLoginForm = makeElement({
render(): void {
const tokenLoginForm = makeElement({
tag: "form",
children: [
Margin(makeElement({
@ -35,9 +35,9 @@ export class LoginPage extends Page {
}
}))
]
});
}) as HTMLFormElement;
let usernameLoginForm = makeElement({
const usernameLoginForm = makeElement({
tag: "form",
children: [
Margin(makeElement({
@ -71,7 +71,7 @@ export class LoginPage extends Page {
}
}))
]
});
}) as HTMLFormElement;
setPageContent(makeElement({
tag: "div",
@ -122,9 +122,9 @@ export class LoginPage extends Page {
tokenLoginForm.addEventListener("submit", function (e) {
e.preventDefault();
let formData = new FormData(tokenLoginForm);
const formData = new FormData(tokenLoginForm);
const token = formData.get("token");
pageState.token = token;
pageState.token = token as string;
lookupSelf().then(_ => {
changePage("HOME");
}).catch(e => {
@ -134,8 +134,11 @@ export class LoginPage extends Page {
});
usernameLoginForm.addEventListener("submit", function (e) {
e.preventDefault();
let formData = new FormData(usernameLoginForm);
usernameLogin(formData.get("username"), formData.get("password")).then(res => {
const formData = new FormData(usernameLoginForm);
usernameLogin(
formData.get("username") as string,
formData.get("password") as string,
).then(res => {
pageState.token = res;
changePage("HOME");
}).catch(e => {
@ -146,7 +149,7 @@ export class LoginPage extends Page {
});
}
get name() {
get name(): string {
return i18next.t("log_in_title");
}
}

10
src/pages/Me.js → src/pages/Me.ts
View file

@ -2,7 +2,7 @@ import { Page } from "../types/Page";
import { addClipboardNotifications, changePage, prePageChecks, setErrorText, setPageContent } from "../pageUtils";
import { getCapabilitiesPath } from "../api/getCapabilities";
import { makeElement } from "../htmlUtils";
import { pageState } from "../globalPageState.ts";
import { pageState } from "../globalPageState";
import { renewSelf } from "../api/renewSelf";
import { sealVault } from "../api/sealVault";
import ClipboardJS from "clipboard";
@ -14,7 +14,7 @@ export class MePage extends Page {
super();
}
async render() {
async render(): Promise<void> {
if (!(await prePageChecks())) return;
setPageContent(makeElement({
tag: "ul",
@ -40,7 +40,7 @@ export class MePage extends Page {
"data-clipboard-text": pageState.token,
},
thenRun: (e) => {
let clipboard = new ClipboardJS(e);
const clipboard = new ClipboardJS(e);
addClipboardNotifications(clipboard);
}
})
@ -65,7 +65,7 @@ export class MePage extends Page {
tag: "a",
condition: await (async () => {
try {
let caps = await getCapabilitiesPath("sys/seal");
const caps = await getCapabilitiesPath("sys/seal");
return caps.includes("sudo") && caps.includes("update");
} catch (e) {
return !true;
@ -92,7 +92,7 @@ export class MePage extends Page {
}));
}
get name() {
get name(): string {
return i18next.t("me_page_title");
}
}

33
src/pages/PwGen.js → src/pages/PwGen.ts
View file

@ -1,4 +1,4 @@
import { CopyableInputBox } from "../elements/CopyableInputBox";
import { CopyableInputBox, CopyableInputBoxType } from "../elements/CopyableInputBox";
import { Margin } from "../elements/Margin";
import { Page } from "../types/Page";
import { makeElement } from "../htmlUtils";
@ -54,21 +54,25 @@ function Option(label, value) {
})
}
export class PwGenPage extends Page {
constructor() {
super();
}
passwordBox: CopyableInputBoxType;
passwordLengthTitle: HTMLTitleElement;
passwordLengthRange: HTMLInputElement;
passwordAlphabet: HTMLSelectElement;
passwordForm: HTMLFormElement;
async render() {
async render(): Promise<void> {
setPageContent("");
this.passwordBox = CopyableInputBox(genPassword(passwordOptionsDefault)) ;
this.passwordLengthTitle = makeElement({
tag: "h4",
text: this.getPasswordLengthText()
})
}) as HTMLTitleElement;
this.passwordLengthRange = makeElement({
tag: "input",
@ -80,7 +84,8 @@ export class PwGenPage extends Page {
max: passwordLengthMax,
min: passwordLengthMin,
},
})
}) as HTMLInputElement;
this.passwordLengthRange.addEventListener('input', this.updatePassword.bind(this));
this.passwordAlphabet = makeElement({
@ -91,7 +96,7 @@ export class PwGenPage extends Page {
Option("a-z 0-9", alphabets.SMOL),
Option("A-F 1-9", alphabets.HEX),
]
})
}) as HTMLSelectElement;
this.passwordForm = makeElement({
tag: "form",
@ -107,33 +112,33 @@ export class PwGenPage extends Page {
attributes: { type: "submit" },
}))
]
});
}) as HTMLFormElement;
this.passwordForm.addEventListener("submit", (e) => this.formEvent(e));
setPageContent(this.passwordForm);
}
getPasswordLengthText() {
getPasswordLengthText(): string {
return i18next.t("password_length_title", {
min: this?.passwordLengthRange?.value || 24,
max: passwordLengthMax
});
}
formEvent(e) {
formEvent(e: Event): void {
e.preventDefault();
this.updatePassword();
}
updatePassword() {
updatePassword(): void {
this.passwordLengthTitle.innerText = this.getPasswordLengthText();
this.passwordBox.setText(genPassword({
length: this.passwordLengthRange.value,
alphabet: this.passwordAlphabet.value,
length: (this.passwordLengthRange.value as unknown) as number,
alphabet: this.passwordAlphabet.value as string,
}));
}
cleanup() {
cleanup(): void {
this.passwordBox = undefined;
this.passwordLengthTitle = undefined;
this.passwordLengthRange = undefined;
@ -141,7 +146,7 @@ export class PwGenPage extends Page {
this.passwordForm = undefined;
}
get name() {
get name(): string {
return i18next.t("password_generator_title");
}
}

4
src/types/Page.ts
View file

@ -15,8 +15,8 @@ export class Page {
}
goBack(): void {
changePage("HOME");
}
};
cleanup(): void {
// Do Nothing
}
};
}