@particle-network/authkit
Version:
Auth Core provides MPC (Multi-Party Computation)-based threshold signatures.
8 lines (7 loc) • 12.2 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/components/react-auth-code-input/index.tsx"],
"sourcesContent": ["import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\nimport { isAutoFocusSupported } from '../../utils';\n\nconst allowedCharactersValues = ['alpha', 'numeric', 'alphanumeric'] as const;\n\nexport type AuthCodeProps = {\n allowedCharacters?: (typeof allowedCharactersValues)[number];\n ariaLabel?: string;\n autoFocus?: boolean;\n containerClassName?: string;\n disabled?: boolean;\n inputClassName?: string;\n isPassword?: boolean;\n length?: number;\n placeholder?: string;\n onChange: (res: string) => void;\n code?: string;\n};\n\ntype InputMode = 'text' | 'numeric';\n\ntype InputType = 'text' | 'tel' | 'password';\n\ntype InputProps = {\n type: InputType;\n inputMode: InputMode;\n pattern: string;\n min?: string;\n max?: string;\n};\n\nexport type AuthCodeRef = {\n focus: () => void;\n clear: () => void;\n};\n\nconst propsMap: { [key: string]: InputProps } = {\n alpha: {\n type: 'text',\n inputMode: 'text',\n pattern: '[a-zA-Z]{1}',\n },\n\n alphanumeric: {\n type: 'text',\n inputMode: 'text',\n pattern: '[a-zA-Z0-9]{1}',\n },\n\n numeric: {\n type: 'tel',\n inputMode: 'numeric',\n pattern: '[0-9]{1}',\n min: '0',\n max: '9',\n },\n};\n\nconst AuthCode = forwardRef<AuthCodeRef, AuthCodeProps>(\n (\n {\n allowedCharacters = 'alphanumeric',\n ariaLabel,\n autoFocus = true,\n containerClassName,\n disabled,\n inputClassName,\n isPassword = false,\n length = 6,\n placeholder,\n onChange,\n code = '',\n },\n ref\n ) => {\n if (isNaN(length) || length < 1) {\n throw new Error('Length should be a number and greater than 0');\n }\n\n if (!allowedCharactersValues.some((value) => value === allowedCharacters)) {\n throw new Error('Invalid value for allowedCharacters. Use alpha, numeric, or alphanumeric');\n }\n\n const inputsRef = useRef<Array<HTMLInputElement>>([]);\n const inputProps = propsMap[allowedCharacters];\n\n useImperativeHandle(ref, () => ({\n focus: () => {\n if (inputsRef.current) {\n inputsRef.current[0].focus();\n }\n },\n clear: () => {\n if (inputsRef.current) {\n for (let i = 0; i < inputsRef.current.length; i++) {\n inputsRef.current[i].value = '';\n }\n inputsRef.current[0].focus();\n }\n sendResult();\n },\n }));\n\n useEffect(() => {\n if (autoFocus && isAutoFocusSupported()) {\n inputsRef.current[0].focus();\n }\n }, []);\n\n useEffect(() => {\n if (code) {\n for (let i = 0; i < inputsRef.current.length; i++) {\n inputsRef.current[i].value = '';\n }\n for (let i = 0; i < code.length; i++) {\n inputsRef.current[i].value = code[i];\n }\n sendResult();\n }\n }, [code]);\n\n let oldValue = inputsRef.current.map((input) => input.value).join('') || '';\n\n const sendResult = () => {\n const res = inputsRef.current.map((input) => input.value).join('');\n if (oldValue !== res) {\n console.log('sendResult', res);\n onChange && onChange(res);\n oldValue = res;\n }\n };\n\n const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const {\n target: { value, nextElementSibling },\n } = e;\n\n if (value.length == 1) {\n if (value.match(inputProps.pattern)) {\n if (nextElementSibling !== null) {\n (nextElementSibling as HTMLInputElement).focus();\n }\n } else {\n e.target.value = '';\n }\n } else if (value.length > 1) {\n const pastedValue = value;\n let currentInput: number = Number(e.target.getAttribute('data-index')) || 0;\n for (let i = 0; i < pastedValue.length; i++) {\n const pastedCharacter = pastedValue.charAt(i);\n if (pastedCharacter.match(inputProps.pattern) && inputsRef.current?.[currentInput]) {\n inputsRef.current[currentInput].value = pastedCharacter;\n if (inputsRef.current[currentInput].nextElementSibling !== null) {\n (inputsRef.current[currentInput].nextElementSibling as HTMLInputElement).focus();\n currentInput++;\n }\n }\n }\n }\n setTimeout(() => {\n sendResult();\n });\n };\n\n const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const { key } = e;\n const target = e.target as HTMLInputElement;\n if (key === 'Backspace') {\n if (target.value === '') {\n if (target.previousElementSibling !== null) {\n const t = target.previousElementSibling as HTMLInputElement;\n t.value = '';\n t.focus();\n e.preventDefault();\n }\n } else {\n target.value = '';\n }\n setTimeout(() => {\n sendResult();\n });\n }\n };\n\n const handleOnFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n e.target.select();\n };\n\n const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n let pastedValue = e.clipboardData.getData('Text') ?? '';\n pastedValue = pastedValue.replace(/\\s/g, '').substring(0, 6);\n\n let currentInput = 0;\n\n for (let i = 0; i < pastedValue.length; i++) {\n const pastedCharacter = pastedValue.charAt(i);\n const currentValue = inputsRef.current[currentInput].value;\n if (pastedCharacter.match(inputProps.pattern)) {\n if (!currentValue) {\n inputsRef.current[currentInput].value = pastedCharacter;\n if (inputsRef.current[currentInput].nextElementSibling !== null) {\n (inputsRef.current[currentInput].nextElementSibling as HTMLInputElement).focus();\n currentInput++;\n }\n }\n }\n }\n sendResult();\n\n e.preventDefault();\n };\n\n return (\n <div className={containerClassName}>\n {new Array(6).fill(0).map((_, i) => {\n return (\n <input\n key={i}\n data-index={i}\n onChange={handleOnChange}\n onKeyDown={handleOnKeyDown}\n onFocus={handleOnFocus}\n onPaste={handleOnPaste}\n {...inputProps}\n type={isPassword ? 'password' : inputProps.type}\n ref={(el: HTMLInputElement) => {\n inputsRef.current[i] = el;\n }}\n // maxLength={1}\n className={inputClassName}\n autoComplete={i === 0 ? 'one-time-code' : 'off'}\n aria-label={ariaLabel ? `${ariaLabel}. Character ${i + 1}.` : `Character ${i + 1}.`}\n disabled={disabled}\n placeholder={placeholder}\n />\n );\n })}\n <div\n className='input-code-mask'\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n for (let i = inputsRef.current.length - 1; i >= 0; i--) {\n if (\n (i > 0 && !inputsRef.current[i].value && inputsRef.current[i - 1].value) ||\n (i === 0 && !inputsRef.current[i].value) ||\n (i == inputsRef.current.length - 1 && inputsRef.current[i].value)\n ) {\n inputsRef.current[i].focus();\n inputsRef.current[i].setSelectionRange(\n inputsRef.current[i].value.length,\n inputsRef.current[i].value.length\n );\n break;\n }\n }\n }}\n />\n </div>\n );\n }\n);\n\nexport default AuthCode;\n"],
"mappings": ";;;;;;AAAA,OAAO,SAAS,YAAY,WAAW,qBAAqB,cAAc;AAG1E,IAAM,0BAA0B,CAAC,SAAS,WAAW,cAAc;AAiCnE,IAAM,WAA0C;AAAA,EAC9C,OAAO;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EAEA,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EAEA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AACF;AAEA,IAAM,WAAW;AAAA,EACf,CACE;AAAA,IACE,oBAAoB;AAAA,IACpB;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,GACA,QACG;AACH,QAAI,MAAM,MAAM,KAAK,SAAS,GAAG;AAC/B,YAAM,IAAI,MAAM,8CAA8C;AAAA,IAChE;AAEA,QAAI,CAAC,wBAAwB,KAAK,CAAC,UAAU,UAAU,iBAAiB,GAAG;AACzE,YAAM,IAAI,MAAM,0EAA0E;AAAA,IAC5F;AAEA,UAAM,YAAY,OAAgC,CAAC,CAAC;AACpD,UAAM,aAAa,SAAS;AAE5B,wBAAoB,KAAK,OAAO;AAAA,MAC9B,OAAO,MAAM;AACX,YAAI,UAAU,SAAS;AACrB,oBAAU,QAAQ,GAAG,MAAM;AAAA,QAC7B;AAAA,MACF;AAAA,MACA,OAAO,MAAM;AACX,YAAI,UAAU,SAAS;AACrB,mBAAS,IAAI,GAAG,IAAI,UAAU,QAAQ,QAAQ,KAAK;AACjD,sBAAU,QAAQ,GAAG,QAAQ;AAAA,UAC/B;AACA,oBAAU,QAAQ,GAAG,MAAM;AAAA,QAC7B;AACA,mBAAW;AAAA,MACb;AAAA,IACF,EAAE;AAEF,cAAU,MAAM;AACd,UAAI,aAAa,qBAAqB,GAAG;AACvC,kBAAU,QAAQ,GAAG,MAAM;AAAA,MAC7B;AAAA,IACF,GAAG,CAAC,CAAC;AAEL,cAAU,MAAM;AACd,UAAI,MAAM;AACR,iBAAS,IAAI,GAAG,IAAI,UAAU,QAAQ,QAAQ,KAAK;AACjD,oBAAU,QAAQ,GAAG,QAAQ;AAAA,QAC/B;AACA,iBAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;AACpC,oBAAU,QAAQ,GAAG,QAAQ,KAAK;AAAA,QACpC;AACA,mBAAW;AAAA,MACb;AAAA,IACF,GAAG,CAAC,IAAI,CAAC;AAET,QAAI,WAAW,UAAU,QAAQ,IAAI,CAAC,UAAU,MAAM,KAAK,EAAE,KAAK,EAAE,KAAK;AAEzE,UAAM,aAAa,MAAM;AACvB,YAAM,MAAM,UAAU,QAAQ,IAAI,CAAC,UAAU,MAAM,KAAK,EAAE,KAAK,EAAE;AACjE,UAAI,aAAa,KAAK;AACpB,gBAAQ,IAAI,cAAc,GAAG;AAC7B,oBAAY,SAAS,GAAG;AACxB,mBAAW;AAAA,MACb;AAAA,IACF;AAEA,UAAM,iBAAiB,CAAC,MAA2C;AApIvE;AAqIM,YAAM;AAAA,QACJ,QAAQ,EAAE,OAAO,mBAAmB;AAAA,MACtC,IAAI;AAEJ,UAAI,MAAM,UAAU,GAAG;AACrB,YAAI,MAAM,MAAM,WAAW,OAAO,GAAG;AACnC,cAAI,uBAAuB,MAAM;AAC/B,YAAC,mBAAwC,MAAM;AAAA,UACjD;AAAA,QACF,OAAO;AACL,YAAE,OAAO,QAAQ;AAAA,QACnB;AAAA,MACF,WAAW,MAAM,SAAS,GAAG;AAC3B,cAAM,cAAc;AACpB,YAAI,eAAuB,OAAO,EAAE,OAAO,aAAa,YAAY,CAAC,KAAK;AAC1E,iBAAS,IAAI,GAAG,IAAI,YAAY,QAAQ,KAAK;AAC3C,gBAAM,kBAAkB,YAAY,OAAO,CAAC;AAC5C,cAAI,gBAAgB,MAAM,WAAW,OAAO,OAAK,eAAU,YAAV,mBAAoB,gBAAe;AAClF,sBAAU,QAAQ,cAAc,QAAQ;AACxC,gBAAI,UAAU,QAAQ,cAAc,uBAAuB,MAAM;AAC/D,cAAC,UAAU,QAAQ,cAAc,mBAAwC,MAAM;AAC/E;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AACA,iBAAW,MAAM;AACf,mBAAW;AAAA,MACb,CAAC;AAAA,IACH;AAEA,UAAM,kBAAkB,CAAC,MAA6C;AACpE,YAAM,EAAE,IAAI,IAAI;AAChB,YAAM,SAAS,EAAE;AACjB,UAAI,QAAQ,aAAa;AACvB,YAAI,OAAO,UAAU,IAAI;AACvB,cAAI,OAAO,2BAA2B,MAAM;AAC1C,kBAAM,IAAI,OAAO;AACjB,cAAE,QAAQ;AACV,cAAE,MAAM;AACR,cAAE,eAAe;AAAA,UACnB;AAAA,QACF,OAAO;AACL,iBAAO,QAAQ;AAAA,QACjB;AACA,mBAAW,MAAM;AACf,qBAAW;AAAA,QACb,CAAC;AAAA,MACH;AAAA,IACF;AAEA,UAAM,gBAAgB,CAAC,MAA0C;AAC/D,QAAE,OAAO,OAAO;AAAA,IAClB;AAEA,UAAM,gBAAgB,CAAC,MAA8C;AA5LzE;AA6LM,UAAI,eAAc,OAAE,cAAc,QAAQ,MAAM,MAA9B,YAAmC;AACrD,oBAAc,YAAY,QAAQ,OAAO,EAAE,EAAE,UAAU,GAAG,CAAC;AAE3D,UAAI,eAAe;AAEnB,eAAS,IAAI,GAAG,IAAI,YAAY,QAAQ,KAAK;AAC3C,cAAM,kBAAkB,YAAY,OAAO,CAAC;AAC5C,cAAM,eAAe,UAAU,QAAQ,cAAc;AACrD,YAAI,gBAAgB,MAAM,WAAW,OAAO,GAAG;AAC7C,cAAI,CAAC,cAAc;AACjB,sBAAU,QAAQ,cAAc,QAAQ;AACxC,gBAAI,UAAU,QAAQ,cAAc,uBAAuB,MAAM;AAC/D,cAAC,UAAU,QAAQ,cAAc,mBAAwC,MAAM;AAC/E;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AACA,iBAAW;AAEX,QAAE,eAAe;AAAA,IACnB;AAEA,WACE,oCAAC,SAAI,WAAW,sBACb,IAAI,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM;AAClC,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,cAAY;AAAA,UACZ,UAAU;AAAA,UACV,WAAW;AAAA,UACX,SAAS;AAAA,UACT,SAAS;AAAA,UACR,GAAG;AAAA,UACJ,MAAM,aAAa,aAAa,WAAW;AAAA,UAC3C,KAAK,CAAC,OAAyB;AAC7B,sBAAU,QAAQ,KAAK;AAAA,UACzB;AAAA,UAEA,WAAW;AAAA,UACX,cAAc,MAAM,IAAI,kBAAkB;AAAA,UAC1C,cAAY,YAAY,GAAG,wBAAwB,IAAI,OAAO,aAAa,IAAI;AAAA,UAC/E;AAAA,UACA;AAAA;AAAA,MACF;AAAA,IAEJ,CAAC,GACD;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS,CAAC,MAAM;AACd,YAAE,eAAe;AACjB,YAAE,gBAAgB;AAClB,mBAAS,IAAI,UAAU,QAAQ,SAAS,GAAG,KAAK,GAAG,KAAK;AACtD,gBACG,IAAI,KAAK,CAAC,UAAU,QAAQ,GAAG,SAAS,UAAU,QAAQ,IAAI,GAAG,SACjE,MAAM,KAAK,CAAC,UAAU,QAAQ,GAAG,SACjC,KAAK,UAAU,QAAQ,SAAS,KAAK,UAAU,QAAQ,GAAG,OAC3D;AACA,wBAAU,QAAQ,GAAG,MAAM;AAC3B,wBAAU,QAAQ,GAAG;AAAA,gBACnB,UAAU,QAAQ,GAAG,MAAM;AAAA,gBAC3B,UAAU,QAAQ,GAAG,MAAM;AAAA,cAC7B;AACA;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA;AAAA,IACF,CACF;AAAA,EAEJ;AACF;AAEA,IAAO,gCAAQ;",
"names": []
}