From e4a2937f2a02cc2090ba1a07d8b9e07d36355258 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Wed, 7 Dec 2022 11:36:20 -0300
Subject: no-fix: moving out registration page

---
 packages/demobank-ui/src/pages/home/index.tsx | 248 +-------------------------
 1 file changed, 2 insertions(+), 246 deletions(-)

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

diff --git a/packages/demobank-ui/src/pages/home/index.tsx b/packages/demobank-ui/src/pages/home/index.tsx
index e05ace2e0..ca5cae571 100644
--- a/packages/demobank-ui/src/pages/home/index.tsx
+++ b/packages/demobank-ui/src/pages/home/index.tsx
@@ -30,10 +30,12 @@ import { QrCodeSection } from "./QrCodeSection.js";
 import {
   getBankBackendBaseUrl,
   getIbanFromPayto,
+  undefinedIfEmpty,
   validateAmount,
 } from "../../utils.js";
 import { BankFrame } from "./BankFrame.js";
 import { Transactions } from "./Transactions.js";
+import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
 
 /**
  * FIXME:
@@ -553,112 +555,10 @@ async function loginCall(
   }));
 }
 
-/**
- * This function requests /register.
- *
- * This function is responsible to change two states:
- * the backend's (to store the login credentials) and
- * the page's (to indicate a successful login or a problem).
- */
-async function registrationCall(
-  req: { username: string; password: string },
-  /**
-   * FIXME: figure out if the two following
-   * functions can be retrieved somewhat from
-   * the state.
-   */
-  backendStateSetter: StateUpdater<BackendStateType | undefined>,
-  pageStateSetter: StateUpdater<PageStateType>,
-): Promise<void> {
-  let baseUrl = getBankBackendBaseUrl();
-  /**
-   * If the base URL doesn't end with slash and the path
-   * is not empty, then the concatenation made by URL()
-   * drops the last path element.
-   */
-  if (!baseUrl.endsWith("/")) baseUrl += "/";
-
-  const headers = new Headers();
-  headers.append("Content-Type", "application/json");
-  const url = new URL("access-api/testing/register", baseUrl);
-  let res: Response;
-  try {
-    res = await fetch(url.href, {
-      method: "POST",
-      body: JSON.stringify({
-        username: req.username,
-        password: req.password,
-      }),
-      headers,
-    });
-  } catch (error) {
-    console.log(
-      `Could not POST new registration to the bank (${url.href})`,
-      error,
-    );
-    pageStateSetter((prevState) => ({
-      ...prevState,
-
-      error: {
-        title: `Registration failed, please report`,
-        debug: JSON.stringify(error),
-      },
-    }));
-    return;
-  }
-  if (!res.ok) {
-    const response = await res.json();
-    if (res.status === 409) {
-      pageStateSetter((prevState) => ({
-        ...prevState,
-
-        error: {
-          title: `That username is already taken`,
-          debug: JSON.stringify(response),
-        },
-      }));
-    } else {
-      pageStateSetter((prevState) => ({
-        ...prevState,
-
-        error: {
-          title: `New registration gave response error`,
-          debug: JSON.stringify(response),
-        },
-      }));
-    }
-  } else {
-    // registration was ok
-    pageStateSetter((prevState) => ({
-      ...prevState,
-      isLoggedIn: true,
-    }));
-    backendStateSetter((prevState) => ({
-      ...prevState,
-      url: baseUrl,
-      username: req.username,
-      password: req.password,
-    }));
-    route("/account");
-  }
-}
-
 /**************************
  * Functional components. *
  *************************/
 
-function ShowInputErrorLabel({
-  isDirty,
-  message,
-}: {
-  message: string | undefined;
-  isDirty: boolean;
-}): VNode {
-  if (message && isDirty)
-    return <div style={{ marginTop: 8, color: "red" }}>{message}</div>;
-  return <Fragment />;
-}
-
 function PaytoWireTransfer({
   focus,
   currency,
@@ -1257,11 +1157,6 @@ function PaymentOptions({ currency }: { currency?: string }): VNode {
   );
 }
 
-function undefinedIfEmpty<T extends object>(obj: T): T | undefined {
-  return Object.keys(obj).some((k) => (obj as any)[k] !== undefined)
-    ? obj
-    : undefined;
-}
 /**
  * Collect and submit login data.
  */
@@ -1361,129 +1256,6 @@ function LoginForm(): VNode {
   );
 }
 
-/**
- * Collect and submit registration data.
- */
-function RegistrationForm(): VNode {
-  const [backendState, backendStateSetter] = useBackendState();
-  const { pageState, pageStateSetter } = usePageContext();
-  const [username, setUsername] = useState<string | undefined>();
-  const [password, setPassword] = useState<string | undefined>();
-  const [repeatPassword, setRepeatPassword] = useState<string | undefined>();
-
-  const { i18n } = useTranslationContext();
-
-  const errors = undefinedIfEmpty({
-    username: !username ? i18n.str`Missing username` : undefined,
-    password: !password ? i18n.str`Missing password` : undefined,
-    repeatPassword: !repeatPassword
-      ? i18n.str`Missing password`
-      : repeatPassword !== password
-      ? i18n.str`Password don't match`
-      : undefined,
-  });
-
-  return (
-    <Fragment>
-      <h1 class="nav">{i18n.str`Welcome to ${bankUiSettings.bankName}!`}</h1>
-      <article>
-        <div class="register-div">
-          <form action="javascript:void(0);" class="register-form" noValidate>
-            <div class="pure-form">
-              <h2>{i18n.str`Please register!`}</h2>
-              <p class="unameFieldLabel registerFieldLabel formFieldLabel">
-                <label for="register-un">{i18n.str`Username:`}</label>
-              </p>
-              <input
-                id="register-un"
-                name="register-un"
-                type="text"
-                placeholder="Username"
-                value={username ?? ""}
-                onInput={(e): void => {
-                  setUsername(e.currentTarget.value);
-                }}
-              />
-              <ShowInputErrorLabel
-                message={errors?.username}
-                isDirty={username !== undefined}
-              />
-              <p class="unameFieldLabel registerFieldLabel formFieldLabel">
-                <label for="register-pw">{i18n.str`Password:`}</label>
-              </p>
-              <input
-                type="password"
-                name="register-pw"
-                id="register-pw"
-                placeholder="Password"
-                value={password ?? ""}
-                required
-                onInput={(e): void => {
-                  setPassword(e.currentTarget.value);
-                }}
-              />
-              <ShowInputErrorLabel
-                message={errors?.password}
-                isDirty={username !== undefined}
-              />
-              <p class="unameFieldLabel registerFieldLabel formFieldLabel">
-                <label for="register-repeat">{i18n.str`Repeat Password:`}</label>
-              </p>
-              <input
-                type="password"
-                style={{ marginBottom: 8 }}
-                name="register-repeat"
-                id="register-repeat"
-                placeholder="Same password"
-                value={repeatPassword ?? ""}
-                required
-                onInput={(e): void => {
-                  setRepeatPassword(e.currentTarget.value);
-                }}
-              />
-              <ShowInputErrorLabel
-                message={errors?.repeatPassword}
-                isDirty={username !== undefined}
-              />
-              <br />
-              <button
-                class="pure-button pure-button-primary btn-register"
-                disabled={!!errors}
-                onClick={() => {
-                  if (!username || !password) return;
-                  registrationCall(
-                    { username, password },
-                    backendStateSetter, // will store BE URL, if OK.
-                    pageStateSetter,
-                  );
-
-                  setUsername(undefined);
-                  setPassword(undefined);
-                  setRepeatPassword(undefined);
-                }}
-              >
-                {i18n.str`Register`}
-              </button>
-              {/* FIXME: should use a different color */}
-              <button
-                class="pure-button pure-button-secondary btn-cancel"
-                onClick={() => {
-                  setUsername(undefined);
-                  setPassword(undefined);
-                  setRepeatPassword(undefined);
-                  route("/account");
-                }}
-              >
-                {i18n.str`Cancel`}
-              </button>
-            </div>
-          </form>
-        </div>
-      </article>
-    </Fragment>
-  );
-}
-
 /**
  * Show only the account's balance.  NOTE: the backend state
  * is mostly needed to provide the user's credentials to POST
@@ -1689,22 +1461,6 @@ function SWRWithCredentials(props: any): VNode {
   );
 }
 
-export function RegistrationPage(): VNode {
-  const { i18n } = useTranslationContext();
-  if (!bankUiSettings.allowRegistrations) {
-    return (
-      <BankFrame>
-        <p>{i18n.str`Currently, the bank is not accepting new registrations!`}</p>
-      </BankFrame>
-    );
-  }
-  return (
-    <BankFrame>
-      <RegistrationForm />
-    </BankFrame>
-  );
-}
-
 export function AccountPage(): VNode {
   const [backendState, backendStateSetter] = useBackendState();
   const { i18n } = useTranslationContext();
-- 
cgit v1.2.3