chaos/VaultUI
1
0
Fork 0
Code Issues Activity

split login forms into own files

Browse source
This commit is contained in:
ChaotiCryptidz 2022-01-21 20:04:39 +00:00
parent fd7f00b1a5
commit 886ca8a240
6 changed files with 121 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
src/ui/pages/Login.tsx
View file

@ -1,110 +1,10 @@
import { Button } from "../elements/Button";
import { Component, JSX } from "preact";
import { DefaultPageProps } from "../../types/DefaultPageProps";
import { Form } from "../elements/Form";
import { Margin } from "../elements/Margin";
import { MarginInline } from "../elements/MarginInline";
import { PageTitle } from "../elements/PageTitle";
import { route } from "preact-router";
import { setErrorText } from "../../pageUtils";
import { TokenLoginForm } from "./Login_Token";
import { UsernameLoginForm } from "./Login_Username";
import i18next from "i18next";
export class TokenLoginForm extends Component<DefaultPageProps> {
constructor() {
super();
}
render(): JSX.Element {
return (
<Form onSubmit={(data) => this.onSubmit(data)}>
<Margin>
<input
class="uk-input uk-form-width-medium"
id="tokenInput"
name="token"
type="password"
placeholder={i18next.t("log_in_token_input")}
required
/>
</Margin>
<MarginInline>
<Button text={i18next.t("log_in_btn")} color="primary" type="submit" />
</MarginInline>
</Form>
);
}
async onSubmit(data: FormData): Promise<void> {
const token = data.get("token");
this.props.settings.token = token as string;
try {
await this.props.api.lookupSelf();
route("/");
} catch (e: unknown) {
const error = e as Error;
document.querySelector("#tokenInput").classList.add("uk-form-danger");
if (error.message == "permission denied") {
setErrorText(i18next.t("log_in_token_login_error"));
} else {
setErrorText(error.message);
}
}
}
}
export class UsernameLoginForm extends Component<DefaultPageProps> {
constructor() {
super();
}
render(): JSX.Element {
return (
<Form onSubmit={(data) => this.onSubmit(data)}>
<Margin>
<input
class="uk-input uk-form-width-medium"
id="usernameInput"
name="username"
type="text"
placeholder={i18next.t("log_in_username_input")}
required
/>
</Margin>
<Margin>
<input
class="uk-input uk-form-width-medium"
id="passwordInput"
name="password"
type="password"
placeholder={i18next.t("log_in_password_input")}
required
/>
</Margin>
<MarginInline>
<Button text={i18next.t("log_in_btn")} color="primary" type="submit" />
</MarginInline>
</Form>
);
}
async onSubmit(data: FormData): Promise<void> {
try {
const res = await this.props.api.usernameLogin(
data.get("username") as string,
data.get("password") as string,
);
this.props.settings.token = res;
route("/");
} catch (e: unknown) {
const error = e as Error;
document.querySelector("#usernameInput").classList.add("uk-form-danger");
document.querySelector("#passwordInput").classList.add("uk-form-danger");
setErrorText(error.message);
}
}
}
export class Login extends Component<DefaultPageProps> {
render(): JSX.Element {
return (
@ -122,10 +22,10 @@ export class Login extends Component<DefaultPageProps> {
<p id="errorText" class="uk-text-danger" />
<ul class="uk-switcher uk-margin switcher-container">
<li>
<TokenLoginForm settings={this.props.settings} api={this.props.api} />
<TokenLoginForm {...this.props} />
</li>
<li>
<UsernameLoginForm settings={this.props.settings} api={this.props.api} />
<UsernameLoginForm {...this.props} />
</li>
</ul>
</div>

49
src/ui/pages/Login_Token.tsx Normal file
View file

@ -0,0 +1,49 @@
import { Button } from "../elements/Button";
import { Component, JSX } from "preact";
import { DefaultPageProps } from "../../types/DefaultPageProps";
import { Form } from "../elements/Form";
import { Margin } from "../elements/Margin";
import { MarginInline } from "../elements/MarginInline";
import { route } from "preact-router";
import { setErrorText } from "../../pageUtils";
import i18next from "i18next";
export class TokenLoginForm extends Component<DefaultPageProps> {
render(): JSX.Element {
return (
<Form onSubmit={(data) => this.onSubmit(data)}>
<Margin>
<input
class="uk-input uk-form-width-medium"
id="tokenInput"
name="token"
type="password"
placeholder={i18next.t("log_in_token_input")}
required
/>
</Margin>
<MarginInline>
<Button text={i18next.t("log_in_btn")} color="primary" type="submit" />
</MarginInline>
</Form>
);
}
async onSubmit(data: FormData): Promise<void> {
const token = data.get("token");
this.props.settings.token = token as string;
try {
await this.props.api.lookupSelf();
route("/");
} catch (e: unknown) {
const error = e as Error;
document.querySelector("#tokenInput").classList.add("uk-form-danger");
if (error.message == "permission denied") {
setErrorText(i18next.t("log_in_token_login_error"));
} else {
setErrorText(error.message);
}
}
}
}

57
src/ui/pages/Login_Username.tsx Normal file
View file

@ -0,0 +1,57 @@
import { Button } from "../elements/Button";
import { Component, JSX } from "preact";
import { DefaultPageProps } from "../../types/DefaultPageProps";
import { Form } from "../elements/Form";
import { Margin } from "../elements/Margin";
import { MarginInline } from "../elements/MarginInline";
import { route } from "preact-router";
import { setErrorText } from "../../pageUtils";
import i18next from "i18next";
export class UsernameLoginForm extends Component<DefaultPageProps> {
render(): JSX.Element {
return (
<Form onSubmit={(data) => this.onSubmit(data)}>
<Margin>
<input
class="uk-input uk-form-width-medium"
id="usernameInput"
name="username"
type="text"
placeholder={i18next.t("log_in_username_input")}
required
/>
</Margin>
<Margin>
<input
class="uk-input uk-form-width-medium"
id="passwordInput"
name="password"
type="password"
placeholder={i18next.t("log_in_password_input")}
required
/>
</Margin>
<MarginInline>
<Button text={i18next.t("log_in_btn")} color="primary" type="submit" />
</MarginInline>
</Form>
);
}
async onSubmit(data: FormData): Promise<void> {
try {
const res = await this.props.api.usernameLogin(
data.get("username") as string,
data.get("password") as string,
);
this.props.settings.token = res;
route("/");
} catch (e: unknown) {
const error = e as Error;
document.querySelector("#usernameInput").classList.add("uk-form-danger");
document.querySelector("#passwordInput").classList.add("uk-form-danger");
setErrorText(error.message);
}
}
}

4
src/ui/pages/Unseal.tsx
View file

@ -2,12 +2,12 @@ import { Button } from "../elements/Button";
import { Component, JSX } from "preact";
import { DefaultPageProps } from "../../types/DefaultPageProps";
import { PageTitle } from "../elements/PageTitle";
import { UnsealForm } from "./Unseal_Form";
import { UnsealQR } from "./Unseal_QR";
import { route } from "preact-router";
import { setErrorText } from "../../pageUtils";
import { toStr } from "../../utils";
import i18next from "i18next";
import { UnsealForm } from "./Unseal_Form";
import { UnsealQR } from "./Unseal_QR";
const UnsealInputModes = {
FORM_INPUT: "FORM_INPUT",

6
src/ui/pages/Unseal_Form.tsx
View file

@ -1,12 +1,12 @@
import i18next from "i18next";
import { JSX } from "preact/jsx-runtime";
import { Button } from "../elements/Button";
import { Form } from "../elements/Form";
import { JSX } from "preact/jsx-runtime";
import { MarginInline } from "../elements/MarginInline";
import i18next from "i18next";
type FormUnsealProps = {
onKeySubmit: (key: string) => void;
}
};
export function UnsealForm(props: FormUnsealProps): JSX.Element {
return (

8
src/ui/pages/Unseal_QR.tsx
View file

@ -1,9 +1,9 @@
import { QRScanner } from "../elements/QRScanner"
import { QRScanner } from "../elements/QRScanner";
type QRUnsealProps = {
onKeySubmit: (key: string) => void;
}
onKeySubmit: (key: string) => void;
};
export function UnsealQR(props: QRUnsealProps) {
return <QRScanner onScan={(code: string) => props.onKeySubmit(code)} />
return <QRScanner onScan={(code: string) => props.onKeySubmit(code)} />;
}