From 2def74cb323ad7cc5c24363c2c113c5b99af9fa2 Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Wed, 22 Nov 2023 17:00:14 +0100
Subject: [PATCH] autocompletion

---
 src/components/text-inputs/AuthInputBox.tsx   |  4 ++
 .../text-inputs/TextInputControl.tsx          |  6 +++
 src/pages/parts/auth/LoginFormPart.tsx        |  2 +
 src/pages/parts/auth/VerifyPassphrasePart.tsx | 54 ++++++++++---------
 4 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/src/components/text-inputs/AuthInputBox.tsx b/src/components/text-inputs/AuthInputBox.tsx
index be0cee19..8ff9553e 100644
--- a/src/components/text-inputs/AuthInputBox.tsx
+++ b/src/components/text-inputs/AuthInputBox.tsx
@@ -3,6 +3,8 @@ import { TextInputControl } from "./TextInputControl";
 export function AuthInputBox(props: {
   value?: string;
   label?: string;
+  name?: string;
+  autoComplete?: string;
   placeholder?: string;
   onChange?: (data: string) => void;
 }) {
@@ -12,7 +14,9 @@ export function AuthInputBox(props: {
         <p className="font-bold text-white">{props.label}</p>
       ) : null}
       <TextInputControl
+        name={props.name}
         value={props.value}
+        autoComplete={props.autoComplete}
         onChange={props.onChange}
         placeholder={props.placeholder}
         className="w-full flex-1 bg-authentication-inputBg px-4 py-3 text-search-text focus:outline-none rounded-lg placeholder:text-gray-700"
diff --git a/src/components/text-inputs/TextInputControl.tsx b/src/components/text-inputs/TextInputControl.tsx
index c3b42616..7b95f219 100644
--- a/src/components/text-inputs/TextInputControl.tsx
+++ b/src/components/text-inputs/TextInputControl.tsx
@@ -3,6 +3,8 @@ export interface TextInputControlPropsNoLabel {
   onUnFocus?: () => void;
   onFocus?: () => void;
   value?: string;
+  name?: string;
+  autoComplete?: string;
   placeholder?: string;
   className?: string;
 }
@@ -16,6 +18,8 @@ export function TextInputControl({
   onUnFocus,
   value,
   label,
+  name,
+  autoComplete,
   className,
   placeholder,
   onFocus,
@@ -27,6 +31,8 @@ export function TextInputControl({
       placeholder={placeholder}
       onChange={(e) => onChange && onChange(e.target.value)}
       value={value}
+      name={name}
+      autoComplete={autoComplete}
       onBlur={() => onUnFocus && onUnFocus()}
       onFocus={() => onFocus?.()}
     />
diff --git a/src/pages/parts/auth/LoginFormPart.tsx b/src/pages/parts/auth/LoginFormPart.tsx
index e3ad71d2..0e7027b3 100644
--- a/src/pages/parts/auth/LoginFormPart.tsx
+++ b/src/pages/parts/auth/LoginFormPart.tsx
@@ -58,6 +58,8 @@ export function LoginFormPart(props: LoginFormPartProps) {
         <AuthInputBox
           label="12-Word Passphrase"
           value={mnemonic}
+          autoComplete="username"
+          name="username"
           onChange={setMnemonic}
           placeholder="Passphrase"
         />
diff --git a/src/pages/parts/auth/VerifyPassphrasePart.tsx b/src/pages/parts/auth/VerifyPassphrasePart.tsx
index 6c32612a..b7458741 100644
--- a/src/pages/parts/auth/VerifyPassphrasePart.tsx
+++ b/src/pages/parts/auth/VerifyPassphrasePart.tsx
@@ -82,32 +82,36 @@ export function VerifyPassphrase(props: VerifyPassphraseProps) {
 
   return (
     <LargeCard>
-      <LargeCardText
-        icon={<Icon icon={Icons.CIRCLE_CHECK} />}
-        title="Enter your passphrase"
-      >
-        If you&apos;ve already lost it, how will you ever be able to take care
-        of a child?
-      </LargeCardText>
-      <AuthInputBox
-        label="Your passphrase"
-        value={mnemonic}
-        onChange={setMnemonic}
-      />
-      {result.error ? (
-        <p className="mt-3 text-authentication-errorText">
-          {result.error.message}
-        </p>
-      ) : null}
-      <LargeCardButtons>
-        <Button
-          theme="purple"
-          loading={result.loading}
-          onClick={() => execute(mnemonic)}
+      <form>
+        <LargeCardText
+          icon={<Icon icon={Icons.CIRCLE_CHECK} />}
+          title="Enter your passphrase"
         >
-          Register
-        </Button>
-      </LargeCardButtons>
+          If you&apos;ve already lost it, how will you ever be able to take care
+          of a child?
+        </LargeCardText>
+        <AuthInputBox
+          label="Your passphrase"
+          autoComplete="username"
+          name="username"
+          value={mnemonic}
+          onChange={setMnemonic}
+        />
+        {result.error ? (
+          <p className="mt-3 text-authentication-errorText">
+            {result.error.message}
+          </p>
+        ) : null}
+        <LargeCardButtons>
+          <Button
+            theme="purple"
+            loading={result.loading}
+            onClick={() => execute(mnemonic)}
+          >
+            Register
+          </Button>
+        </LargeCardButtons>
+      </form>
     </LargeCard>
   );
 }