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,6 +82,7 @@ export function VerifyPassphrase(props: VerifyPassphraseProps) {
 
   return (
     <LargeCard>
+      <form>
         <LargeCardText
           icon={<Icon icon={Icons.CIRCLE_CHECK} />}
           title="Enter your passphrase"
@@ -91,6 +92,8 @@ export function VerifyPassphrase(props: VerifyPassphraseProps) {
         </LargeCardText>
         <AuthInputBox
           label="Your passphrase"
+          autoComplete="username"
+          name="username"
           value={mnemonic}
           onChange={setMnemonic}
         />
@@ -108,6 +111,7 @@ export function VerifyPassphrase(props: VerifyPassphraseProps) {
             Register
           </Button>
         </LargeCardButtons>
+      </form>
     </LargeCard>
   );
 }