autocompletion

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"

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?.()}
     />

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"
         />

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