From ce7ddaebe3383958dbebef2b3249e490d2edab0a Mon Sep 17 00:00:00 2001
From: Felix Magedanz <felix.magedanz@hanko.io>
Date: Thu, 4 Aug 2022 14:47:50 +0200
Subject: [PATCH] small changes to inputs and example css

- Comply with preact requirements
- added autocorrect = off to username input to prevent autocorrection in Safari
- Minor padding change for example app
---
 example/public/assets/css/index.css               | 5 +----
 hanko-js/src/ui/components/InputPasscodeDigit.tsx | 2 +-
 hanko-js/src/ui/pages/LoginEmail.tsx              | 5 +++--
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/example/public/assets/css/index.css b/example/public/assets/css/index.css
index 228e01be8..8ca8d23a9 100644
--- a/example/public/assets/css/index.css
+++ b/example/public/assets/css/index.css
@@ -14,11 +14,8 @@
 }
 
 @media screen and (max-width: 470px) {
-    .main {
-        margin-top: 8px;
-    }
     .auth-container {
-        padding: 5px;
+        padding: 10px;
     }
 }
 
diff --git a/hanko-js/src/ui/components/InputPasscodeDigit.tsx b/hanko-js/src/ui/components/InputPasscodeDigit.tsx
index 115afdb35..1dafa9c44 100644
--- a/hanko-js/src/ui/components/InputPasscodeDigit.tsx
+++ b/hanko-js/src/ui/components/InputPasscodeDigit.tsx
@@ -43,7 +43,7 @@ const InputPasscodeDigit = ({ index, focus, digit = "", ...props }: Props) => {
         part={"input passcode-input"}
         name={props.name + index.toString(10)}
         type={"text"}
-        inputmode={"numeric"}
+        inputMode={"numeric"}
         maxLength={1}
         ref={ref}
         value={digit.charAt(0)}
diff --git a/hanko-js/src/ui/pages/LoginEmail.tsx b/hanko-js/src/ui/pages/LoginEmail.tsx
index 681898ee8..f00518d93 100644
--- a/hanko-js/src/ui/pages/LoginEmail.tsx
+++ b/hanko-js/src/ui/pages/LoginEmail.tsx
@@ -182,7 +182,8 @@ const LoginEmail = () => {
         <InputText
           name={"email"}
           type={"email"}
-          autocomplete={"username"}
+          autoComplete={"username"}
+          autoCorrect={"off"}
           required={true}
           onInput={onEmailInput}
           value={email}
@@ -194,7 +195,7 @@ const LoginEmail = () => {
             isPasskeyLoginLoading ||
             isPasskeyLoginSuccess
           }
-          autofocus
+          autoFocus
         />
         <Button
           isLoading={isEmailLoginLoading}