diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/LoginForm.tsx')
| -rw-r--r-- | packages/demobank-ui/src/pages/LoginForm.tsx | 188 |
1 files changed, 86 insertions, 102 deletions
diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx index a5d8695dc..3d4279f99 100644 --- a/packages/demobank-ui/src/pages/LoginForm.tsx +++ b/packages/demobank-ui/src/pages/LoginForm.tsx @@ -14,21 +14,19 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { h, VNode } from "preact"; -import { route } from "preact-router"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; +import { Fragment, h, VNode } from "preact"; import { useEffect, useRef, useState } from "preact/hooks"; import { useBackendContext } from "../context/backend.js"; -import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; -import { BackendStateHandler } from "../hooks/backend.js"; import { bankUiSettings } from "../settings.js"; -import { getBankBackendBaseUrl, undefinedIfEmpty } from "../utils.js"; +import { undefinedIfEmpty } from "../utils.js"; +import { PASSWORD_REGEX, USERNAME_REGEX } from "./RegistrationPage.js"; import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js"; -import { USERNAME_REGEX, PASSWORD_REGEX } from "./RegistrationPage.js"; /** * Collect and submit login data. */ -export function LoginForm(): VNode { +export function LoginForm({ onRegister }: { onRegister: () => void }): VNode { const backend = useBackendContext(); const [username, setUsername] = useState<string | undefined>(); const [password, setPassword] = useState<string | undefined>(); @@ -52,107 +50,93 @@ export function LoginForm(): VNode { }); return ( - <div class="login-div"> - <form - class="login-form" - noValidate - onSubmit={(e) => { - e.preventDefault(); - }} - autoCapitalize="none" - autoCorrect="off" - > - <div class="pure-form"> - <h2>{i18n.str`Please login!`}</h2> - <p class="unameFieldLabel loginFieldLabel formFieldLabel"> - <label for="username">{i18n.str`Username:`}</label> - </p> - <input - ref={ref} - autoFocus - type="text" - name="username" - id="username" - value={username ?? ""} - placeholder="Username" - required - onInput={(e): void => { - setUsername(e.currentTarget.value); - }} - /> - <ShowInputErrorLabel - message={errors?.username} - isDirty={username !== undefined} - /> - <p class="passFieldLabel loginFieldLabel formFieldLabel"> - <label for="password">{i18n.str`Password:`}</label> - </p> - <input - type="password" - name="password" - id="password" - value={password ?? ""} - placeholder="Password" - required - onInput={(e): void => { - setPassword(e.currentTarget.value); - }} - /> - <ShowInputErrorLabel - message={errors?.password} - isDirty={password !== undefined} - /> - <br /> - <button - type="submit" - class="pure-button pure-button-primary" - disabled={!!errors} - onClick={(e) => { - e.preventDefault(); - if (!username || !password) return; - loginCall({ username, password }, backend); - setUsername(undefined); - setPassword(undefined); - }} - > - {i18n.str`Login`} - </button> + <Fragment> + <h1 class="nav">{i18n.str`Welcome to ${bankUiSettings.bankName}!`}</h1> - {bankUiSettings.allowRegistrations ? ( + <div class="login-div"> + <form + class="login-form" + noValidate + onSubmit={(e) => { + e.preventDefault(); + }} + autoCapitalize="none" + autoCorrect="off" + > + <div class="pure-form"> + <h2>{i18n.str`Please login!`}</h2> + <p class="unameFieldLabel loginFieldLabel formFieldLabel"> + <label for="username">{i18n.str`Username:`}</label> + </p> + <input + ref={ref} + autoFocus + type="text" + name="username" + id="username" + value={username ?? ""} + placeholder="Username" + autocomplete="username" + required + onInput={(e): void => { + setUsername(e.currentTarget.value); + }} + /> + <ShowInputErrorLabel + message={errors?.username} + isDirty={username !== undefined} + /> + <p class="passFieldLabel loginFieldLabel formFieldLabel"> + <label for="password">{i18n.str`Password:`}</label> + </p> + <input + type="password" + name="password" + id="password" + autocomplete="current-password" + value={password ?? ""} + placeholder="Password" + required + onInput={(e): void => { + setPassword(e.currentTarget.value); + }} + /> + <ShowInputErrorLabel + message={errors?.password} + isDirty={password !== undefined} + /> + <br /> <button - class="pure-button pure-button-secondary btn-cancel" + type="submit" + class="pure-button pure-button-primary" + disabled={!!errors} onClick={(e) => { e.preventDefault(); - route("/register"); + if (!username || !password) return; + backend.logIn({ username, password }); + setUsername(undefined); + setPassword(undefined); }} > - {i18n.str`Register`} + {i18n.str`Login`} </button> - ) : ( - <div /> - )} - </div> - </form> - </div> - ); -} - -async function loginCall( - req: { username: string; password: string }, - /** - * FIXME: figure out if the two following - * functions can be retrieved from the state. - */ - backend: BackendStateHandler, -): Promise<void> { - /** - * Optimistically setting the state as 'logged in', and - * let the Account component request the balance to check - * whether the credentials are valid. */ - backend.save({ - url: getBankBackendBaseUrl(), - username: req.username, - password: req.password, - }); + {bankUiSettings.allowRegistrations ? ( + <button + class="pure-button pure-button-secondary btn-cancel" + onClick={(e) => { + e.preventDefault(); + onRegister(); + }} + > + {i18n.str`Register`} + </button> + ) : ( + <div /> + )} + </div> + </form> + </div> + </Fragment> + ); } |