Fix autocomplete and modal backdrop

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>

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);
+  }
 }

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>

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}>