Fix login and registration forms.

Implement submission when pressing the enter button
and using the state on the data entered in the <input>
fields.

1 files changed, 58 insertions, 29 deletions

diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
index f6514b5..ca9da77 100644
--- a/packages/bank/src/pages/home/index.tsx
+++ b/packages/bank/src/pages/home/index.tsx
@@ -110,7 +110,7 @@ interface AccountStateType {
  * Helpers. *
  ***********/
 
-async function fetcher(url) {
+async function fetcher(url: string) {
   return fetch(url).then((r) => (r.json()));
 }
 
@@ -249,6 +249,25 @@ const getRootPath = () => {
  ******************/
 
 /**
+ * Stores in the state a object containing a 'username'
+ * and 'password' field, in order to avoid losing the
+ * handle of the data entered by the user in <input> fields.
+ */
+type CredentialsRequestTypeOpt = CredentialsRequestType | undefined;
+function useCredentialsRequestType(
+  state?: CredentialsRequestType
+): [CredentialsRequestTypeOpt, StateUpdater<CredentialsRequestTypeOpt>] {
+
+  const ret = useLocalStorage("credentials-request-state", JSON.stringify(state));
+  const retObj: CredentialsRequestTypeOpt = ret[0] ? JSON.parse(ret[0]) : ret[0];
+  const retSetter: StateUpdater<CredentialsRequestTypeOpt> = function(val) {
+    const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val)
+    ret[1](newVal)
+  }
+  return [retObj, retSetter]
+}
+
+/**
  * Return getters and setters for
  * login credentials and backend's
  * base URL.
@@ -678,7 +697,7 @@ function Currency(): VNode {
   if (typeof error !== "undefined") {
     return <b>error: currency could not be retrieved</b>;
   }
-  if (typeof data === "undefined") return "...";
+  if (typeof data === "undefined") return <Fragment>"..."</Fragment>;
   console.log("found bank config", data);
   return data.currency;
 }
@@ -724,11 +743,15 @@ function BankFrame(Props: any): VNode {
       }}>{i18n`Logout`}</a>);
 
   // Prepare demo sites links.
+  let DEMO_SITES = [
+    ["%DEMO_SITE_0_NAME%", "%DEMO_SITE_0_URL%"],
+    ["%DEMO_SITE_1_NAME%", "%DEMO_SITE_1_URL%"],
+    ["%DEMO_SITE_2_NAME%", "%DEMO_SITE_2_URL%"],
+    ["%DEMO_SITE_3_NAME%", "%DEMO_SITE_3_URL%"],
+  ];
   let demo_sites = [];
-  console.log(DEMO_SITES);
   for (const site in DEMO_SITES)
-    if (typeof DEMO_SITES[site] !== "undefined")
-      demo_sites.push(<a href={DEMO_SITES[site]}>{site}</a>) 
+    demo_sites.push(<a href={site[0]}>{site[1]}</a>) 
 
   return (
     <Fragment>
@@ -1087,10 +1110,10 @@ function TalerWithdrawal(Props: any): VNode {
  */
 function LoginForm(Props: any): VNode {
   const {backendStateSetter, pageStateSetter} = Props;
-  var submitData: CredentialsRequestType;
+  const [submitData, submitDataSetter] = useCredentialsRequestType();
   const i18n = useTranslator();
   // FIXME: try removing the outer Fragment.
-  return <div class="login-form">
+  return (<form action="javascript:void(0);" class="login-form">
     <h2>{i18n`Please login!`}</h2>
     <div class="pure-form">
       <input
@@ -1098,20 +1121,21 @@ function LoginForm(Props: any): VNode {
         placeholder="username"
         required
         onInput={(e): void => {
-          submitData = {
+          submitDataSetter((submitData: any) => ({
             ...submitData,
             username: e.currentTarget.value,
-          };}} />
+        }))}} />
       <input
         type="password"
         placeholder="password"
         required
         onInput={(e): void => {
-          submitData = {
+	  submitDataSetter((submitData: any) => ({
             ...submitData,
             password: e.currentTarget.value,
-          };}} />
+        }))}} />
       <button
+	autofocus
         type="submit"
         class="pure-button pure-button-primary"
         onClick={() => {
@@ -1124,7 +1148,7 @@ function LoginForm(Props: any): VNode {
             );
         }}>{i18n`Login`}</button>
     </div>
-  </div>
+  </form>);
 }
 
 /**
@@ -1132,12 +1156,12 @@ function LoginForm(Props: any): VNode {
  */
 function RegistrationForm(Props: any): VNode {
   const [pageState, pageStateSetter] = useContext(PageContext);
-  var submitData: CredentialsRequestType;
+  const [submitData, submitDataSetter] = useCredentialsRequestType();
   const i18n = useTranslator();
-
+  // https://stackoverflow.com/questions/36683770/how-to-get-the-value-of-an-input-field-using-reactjs
   return (
-    <BankFrame>
-      <h1 class="nav">{i18n`Register to the $currency bank!`}</h1>
+    <Fragment>
+      <h1 class="nav">{i18n`Register to the euFin bank!`}</h1>
       <aside class="sidebar" id="left"></aside>
         <article>
           <a href="#" onClick={() => {
@@ -1148,30 +1172,33 @@ function RegistrationForm(Props: any): VNode {
         <article>
           <div class="register-form">
             <h1>{i18n`Registration form`}</h1>
-            <div class="pure-form">
+            <form action="javascript:void(0);" class="pure-form">
               <input
                 type="text"
                 placeholder="username"
                 required
                 autofocus
                 onInput={(e): void => {
-                  submitData = {
+		  submitDataSetter((submitData: any) => ({
                     ...submitData,
                     username: e.currentTarget.value,
-                  };}} />
+                  }))}} />
               <input
-                type="password"
+                type="text"
                 placeholder="password"
                 required
+                autofocus
                 onInput={(e): void => {
-                  submitData = {
+		  submitDataSetter((submitData: any) => ({
                     ...submitData,
                     password: e.currentTarget.value,
-                  };}} />
+                  }))}} />
               <button
+	        autofocus
                 class="pure-button pure-button-primary"
                 onClick={() => {
 		  console.log("maybe submitting the registration..");
+		  console.log(submitData);
 		  if (typeof submitData === "undefined") return;
 	          if ((typeof submitData.password === "undefined") ||
 		      (typeof submitData.username === "undefined")) return;
@@ -1183,10 +1210,10 @@ function RegistrationForm(Props: any): VNode {
                     Props.backendStateSetter, // will store BE URL, if OK.
                     pageStateSetter
                   );}}>{i18n`Register`}</button>
-            </div>
+            </form>
           </div>
        </article>
-     </BankFrame>
+     </Fragment>
   )
 }
 
@@ -1261,7 +1288,7 @@ function Account(Props: any): VNode {
   const { accountLabel, backendState } = Props;
   // Getting the bank account balance:
   const endpoint = `access-api/accounts/${accountLabel}`;
-  const { data, error } = useSWR(endpoint, {revalidateOnStale: true});
+  const { data, error } = useSWR(endpoint);
   const [pageState, pageStateSetter] = useContext(PageContext);
   const {
     withdrawalInProgress,
@@ -1301,7 +1328,7 @@ function Account(Props: any): VNode {
 	 * taint successful registrations:
 	 */
 	console.log("Cache at Account:", cache);
-	for (const key of cache.keys()) {
+	for (const key of Object.keys(cache)) {
           console.log("processing key: " + key);
           if (RegExp(`${endpoint}$`).test(key)) {
 	    console.log("Deleting key: " + key);
@@ -1341,7 +1368,7 @@ function Account(Props: any): VNode {
     return <BankFrame>
       <p>{transferOutcome}</p>
       <button onClick={() => {
-        pageStateSetter((prevState) => {
+        pageStateSetter((prevState: PageStateType) => {
           const { transferOutcome, ...rest } = prevState;
           return {...rest};})}}>
         {i18n`Close wire transfer`}
@@ -1356,7 +1383,7 @@ function Account(Props: any): VNode {
     return <BankFrame>
       <p>{withdrawalOutcome}</p>
       <button onClick={() => {
-        pageStateSetter((prevState) => {
+        pageStateSetter((prevState: PageStateType) => {
           const { withdrawalOutcome, withdrawalId, ...rest } = prevState;
           return {
             ...rest,
@@ -1576,7 +1603,9 @@ export function BankHome(): VNode {
   if (pageState.tryRegister) {
     return (
       <PageContext.Provider value={[pageState, pageStateSetter]}>
-        <RegistrationForm backendStateSetter={backendStateSetter} />
+        <BankFrame>
+	  <RegistrationForm backendStateSetter={backendStateSetter} />
+	</BankFrame>
       </PageContext.Provider>
     );
   }