Merge pull request #1607 from pangeacyber/otp_autofill

Support OTP autofill on iPhone
pangeacyber · Oct 16, 2024 · d7705c8 · d7705c8
2 parents faa0d24 + 2d342c1
commit d7705c8
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 6 deletions.
diff --git a/packages/react-mui-authn/CHANGELOG.md b/packages/react-mui-authn/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.15] - 2024-10-16
+
+###
+
+- Fix iPhone OTP autofill
+
 ## [0.5.14] - 2024-10-08
 
 ### Fixed

diff --git a/packages/react-mui-authn/package.json b/packages/react-mui-authn/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pangeacyber/react-mui-authn",
-  "version": "0.5.14",
+  "version": "0.5.15",
   "description": "Components for integration with Pangea AuthN Service",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

diff --git a/packages/react-mui-authn/src/components/fields/CodeField/CodeInput.tsx b/packages/react-mui-authn/src/components/fields/CodeField/CodeInput.tsx
@@ -131,11 +131,13 @@ const CodeInput: FC<CodeInputProps> = ({
   };
 
   const handlePaste = (e: React.ClipboardEvent) => {
-    const clip = e.clipboardData.getData("text");
-    if (!/\d{6}/.test(clip)) return;
     e.preventDefault();
+    const clip = e.clipboardData.getData("text");
+    const cleanedClip = clip.trim().replace(/(\r\n|\n|\r)/gm, "");
+
+    if (!/\d{6}/.test(cleanedClip)) return;
 
-    const s = clip.split("");
+    const s = cleanedClip.split("");
     inputs.map((inputId, idx) => {
       setValues((state) => ({
         ...state,

diff --git a/packages/react-mui-authn/src/features/AuthFlow/components/OtpForm/index.tsx b/packages/react-mui-authn/src/features/AuthFlow/components/OtpForm/index.tsx
@@ -141,7 +141,7 @@ const OtpForm: FC<Props> = ({
         <Stack
           direction={{ xs: "column", sm: "row" }}
           justifyContent="center"
-          gap={{ xs: 0, sm: 1 }}
+          gap={1}
         >
           {otpType !== "totp" && (
             <Button

diff --git a/packages/react-mui-authn/src/stories/themes/config/pangea.ts b/packages/react-mui-authn/src/stories/themes/config/pangea.ts
@@ -13,7 +13,7 @@ export const PANGEA: any = {
   brand_page_logo:
     "https://pangea-marketing.s3.us-west-2.amazonaws.com/pangea-color-beta.svg",
   brand_url: "",
-  button_border_radius: "4px",
+  button_border_radius: "20px",
   button_variant: "contained",
   density: "normal",
   font_family: "Kanit",