From bba3e08ce897d78146c187a4bd45dfbe1d6a9517 Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Thu, 12 Oct 2023 14:52:57 +0200
Subject: [PATCH] Fix autocomplete and modal backdrop

---
 src/components/EnterPinModal/EnterPinModal.tsx | 6 +++---
 src/components/Modal/Modal.module.scss         | 6 +++++-
 src/components/Modal/Modal.tsx                 | 9 +++++++--
 src/components/TextInput/TextInput.tsx         | 2 ++
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/EnterPinModal/EnterPinModal.tsx b/src/components/EnterPinModal/EnterPinModal.tsx
index 3267956..614e371 100644
--- a/src/components/EnterPinModal/EnterPinModal.tsx
+++ b/src/components/EnterPinModal/EnterPinModal.tsx
@@ -76,7 +76,7 @@ const EnterPinModal: Component<{
 
   createEffect(() => {
     if (props.open) {
-      pinInput?.focus();
+      setTimeout(() => pinInput?.focus(), 200);
     }
   });
 
@@ -86,7 +86,7 @@ const EnterPinModal: Component<{
 
 
   return (
-    <Modal open={props.open}>
+    <Modal open={props.open} opaqueBackdrop={true}>
       <div id={props.id} class={styles.modal}>
         <button class={styles.xClose} onClick={props.onAbort}>
           <div class={styles.iconClose}></div>
@@ -110,7 +110,7 @@ const EnterPinModal: Component<{
             onClick={onConfirm}
             disabled={!isValidPin()}
           >
-            {intl.formatMessage(tActions.createPin)}
+            {intl.formatMessage(tActions.login)}
           </ButtonPrimary>
         </div>
       </div>
diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss
index f5e6042..1d7e5aa 100644
--- a/src/components/Modal/Modal.module.scss
+++ b/src/components/Modal/Modal.module.scss
@@ -1,8 +1,12 @@
 .modal {
   background-color: var(--background-modal);
   width: 100vw;
-  height:100vh;
+  height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
+
+  &.opaque {
+    background-color: var(--background-site);
+  }
 }
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 81c6d67..c30a0fb 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -4,12 +4,17 @@ import { hookForDev } from '../../lib/devTools';
 
 import styles from './Modal.module.scss';
 
-const Modal: Component<{ children: JSXElement, open?: boolean, id?: string}> = (props) => {
+const Modal: Component<{
+  children: JSXElement,
+  open?: boolean,
+  id?: string,
+  opaqueBackdrop?: boolean,
+}> = (props) => {
 
   return (
     <Show when={props.open}>
       <Portal mount={document.getElementById("modal") as Node}>
-        <div id={props.id} class={styles.modal}>
+        <div id={props.id} class={`${styles.modal} ${props.opaqueBackdrop ? styles.opaque : ''}`}>
           {props.children}
         </div>
       </Portal>
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
index 34c2bb0..a0679f9 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/src/components/TextInput/TextInput.tsx
@@ -14,6 +14,7 @@ const TextInput: Component<{
   ref?: HTMLInputElement,
   validationState?: 'valid' | 'invalid',
   type?: string,
+  autocomplete?: string,
 }> = (props) => {
 
   return (
@@ -36,6 +37,7 @@ const TextInput: Component<{
             class={styles.input}
             readOnly={props.readonly}
             type={props.type}
+            autocomplete={props.autocomplete || "off"}
           />
 
           <div class={styles.inputAfter}>