feat: 🔒️ Add password check field

2 files changed, 40 insertions, 3 deletions

diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
index b9d3633..df07f90 100644
--- a/packages/bank/src/pages/home/index.tsx
+++ b/packages/bank/src/pages/home/index.tsx
@@ -77,6 +77,7 @@ interface TransactionRequestType {
 interface CredentialsRequestType {
   username: string;
   password: string;
+  passwordrepeat?: string;
 }
 
 /**
@@ -1540,6 +1541,21 @@ const RegistrationForm = (Props: any): VNode => {
                     password: e.currentTarget.value,
                   }))
                 }} />
+              <p class="unameFieldLabel registerFieldLabel formFieldLabel"><label for="register-pw">{i18n`Repeat Password:`}</label></p>
+              <input
+                type="password"
+                name="register-pw-check"
+                id="register-pw-check"
+                placeholder="Password"
+                value={submitData && submitData.passwordrepeat}
+                required
+                onInput={(e): void => {
+                  submitDataSetter((submitData: any) => ({
+                    ...submitData,
+                    passwordrepeat: e.currentTarget.value,
+                  }))
+                }}
+              />
               <br />
               {/*
               <label for="phone">{i18n`Phone number:`}</label>
@@ -1577,8 +1593,22 @@ const RegistrationForm = (Props: any): VNode => {
                     console.log('username or password are the empty string');
                     return;
                   }
+                  if (submitData.passwordrepeat?.length === 0) {
+                    console.log('passrepeat empty');
+                    return;
+                  }
+                  if (submitData.passwordrepeat !== submitData.password) {
+                    pageStateSetter((prevState: any) => ({
+                      ...prevState,
+                      hasError: true,
+                      error: `Passwords did not match!`
+                    }))
+                    console.log('password does not match repeat');
+                    return;
+                  }
                   console.log('submitting the registration..');
                   document.body.classList.add('transition-login')
+                  delete submitData.passwordrepeat;
                   registrationCall(
                     { ...submitData },
                     Props.backendStateSetter, // will store BE URL, if OK.
@@ -1593,7 +1623,7 @@ const RegistrationForm = (Props: any): VNode => {
                      * strings due to a non lively update of the <input> fields
                      * after setting to undefined.
                      */
-                  submitDataSetter({ username: '', password: '' })
+                  submitDataSetter({ username: '', password: '', passwordrepeat: '' })
                 }}>
                 {i18n`Register`}
               </button>
@@ -1753,7 +1783,14 @@ function Account(Props: any): VNode {
     }
     }
   }
-  if (!data) return <p>Retrieving the profile page...</p>;
+  if (!data) return <p style={{
+    position: 'fixed',
+    display:'block',
+    top: '3em',
+    left: '0',
+    width: '100vw',
+    textAlign: 'center',
+  }}>Retrieving the profile page...</p>;
 
   /**
    * This block shows the withdrawal QR code.
diff --git a/packages/bank/src/scss/bank.scss b/packages/bank/src/scss/bank.scss
index 5b8b156..85d9856 100644
--- a/packages/bank/src/scss/bank.scss
+++ b/packages/bank/src/scss/bank.scss
@@ -252,7 +252,7 @@ input {
     box-shadow: none;
   }
 
-  input[placeholder="Password"][type="password"] {
+  input#register-pw-check[placeholder="Password"][type="password"] {
     margin-bottom: 8px;
   }