From a8c5a9696c1735a178158cbc9ac4f9bb4b6f013d Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Wed, 8 Feb 2023 17:41:19 -0300
Subject: impl accout management and refactor

---
 packages/demobank-ui/src/pages/LoginForm.tsx | 188 ++++++++++++---------------
 1 file changed, 86 insertions(+), 102 deletions(-)

(limited to 'packages/demobank-ui/src/pages/LoginForm.tsx')

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>
+  );
 }
-- 
cgit v1.2.3

