first commit

frontend/node_modules/antd/es/input/OTP/OTPInput.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { InputProps, InputRef } from '../Input';
+export interface OTPInputProps extends Omit<InputProps, 'onChange'> {
+    index: number;
+    onChange: (index: number, value: string) => void;
+    /** Tell parent to do active offset */
+    onActiveChange: (nextIndex: number) => void;
+    mask?: boolean | string;
+}
+declare const OTPInput: React.ForwardRefExoticComponent<OTPInputProps & React.RefAttributes<InputRef>>;
+export default OTPInput;

frontend/node_modules/antd/es/input/OTP/OTPInput.js

@@ -0,0 +1,89 @@
+"use client";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import classNames from 'classnames';
+import raf from "rc-util/es/raf";
+import { ConfigContext } from '../../config-provider';
+import Input from '../Input';
+const OTPInput = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+      className,
+      value,
+      onChange,
+      onActiveChange,
+      index,
+      mask
+    } = props,
+    restProps = __rest(props, ["className", "value", "onChange", "onActiveChange", "index", "mask"]);
+  const {
+    getPrefixCls
+  } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('otp');
+  const maskValue = typeof mask === 'string' ? mask : value;
+  // ========================== Ref ===========================
+  const inputRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => inputRef.current);
+  // ========================= Input ==========================
+  const onInternalChange = e => {
+    onChange(index, e.target.value);
+  };
+  // ========================= Focus ==========================
+  const syncSelection = () => {
+    raf(() => {
+      var _a;
+      const inputEle = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.input;
+      if (document.activeElement === inputEle && inputEle) {
+        inputEle.select();
+      }
+    });
+  };
+  // ======================== Keyboard ========================
+  const onInternalKeyDown = event => {
+    const {
+      key,
+      ctrlKey,
+      metaKey
+    } = event;
+    if (key === 'ArrowLeft') {
+      onActiveChange(index - 1);
+    } else if (key === 'ArrowRight') {
+      onActiveChange(index + 1);
+    } else if (key === 'z' && (ctrlKey || metaKey)) {
+      event.preventDefault();
+    } else if (key === 'Backspace' && !value) {
+      onActiveChange(index - 1);
+    }
+    syncSelection();
+  };
+  // ========================= Render =========================
+  return /*#__PURE__*/React.createElement("span", {
+    className: `${prefixCls}-input-wrapper`,
+    role: "presentation"
+  }, mask && value !== '' && value !== undefined && (/*#__PURE__*/React.createElement("span", {
+    className: `${prefixCls}-mask-icon`,
+    "aria-hidden": "true"
+  }, maskValue)), /*#__PURE__*/React.createElement(Input, Object.assign({
+    "aria-label": `OTP Input ${index + 1}`,
+    type: mask === true ? 'password' : 'text'
+  }, restProps, {
+    ref: inputRef,
+    value: value,
+    onInput: onInternalChange,
+    onFocus: syncSelection,
+    onKeyDown: onInternalKeyDown,
+    onMouseDown: syncSelection,
+    onMouseUp: syncSelection,
+    className: classNames(className, {
+      [`${prefixCls}-mask-input`]: mask
+    })
+  })));
+});
+export default OTPInput;

frontend/node_modules/antd/es/input/OTP/index.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { InputStatus } from '../../_util/statusUtils';
+import type { Variant } from '../../config-provider';
+import type { SizeType } from '../../config-provider/SizeContext';
+export interface OTPRef {
+    focus: VoidFunction;
+    blur: VoidFunction;
+    nativeElement: HTMLDivElement;
+}
+export interface OTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onInput'> {
+    prefixCls?: string;
+    length?: number;
+    variant?: Variant;
+    rootClassName?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    size?: SizeType;
+    defaultValue?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    formatter?: (value: string) => string;
+    separator?: ((index: number) => React.ReactNode) | React.ReactNode;
+    disabled?: boolean;
+    status?: InputStatus;
+    mask?: boolean | string;
+    type?: React.HTMLInputTypeAttribute;
+    onInput?: (value: string[]) => void;
+}
+declare const OTP: React.ForwardRefExoticComponent<OTPProps & React.RefAttributes<OTPRef>>;
+export default OTP;

frontend/node_modules/antd/es/input/OTP/index.js

@@ -0,0 +1,212 @@
+"use client";
+
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import classNames from 'classnames';
+import useEvent from "rc-util/es/hooks/useEvent";
+import pickAttrs from "rc-util/es/pickAttrs";
+import { getMergedStatus } from '../../_util/statusUtils';
+import { devUseWarning } from '../../_util/warning';
+import { ConfigContext } from '../../config-provider';
+import useSize from '../../config-provider/hooks/useSize';
+import { FormItemInputContext } from '../../form/context';
+import useStyle from '../style/otp';
+import OTPInput from './OTPInput';
+function strToArr(str) {
+  return (str || '').split('');
+}
+const Separator = props => {
+  const {
+    index,
+    prefixCls,
+    separator
+  } = props;
+  const separatorNode = typeof separator === 'function' ? separator(index) : separator;
+  if (!separatorNode) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    className: `${prefixCls}-separator`
+  }, separatorNode);
+};
+const OTP = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+      prefixCls: customizePrefixCls,
+      length = 6,
+      size: customSize,
+      defaultValue,
+      value,
+      onChange,
+      formatter,
+      separator,
+      variant,
+      disabled,
+      status: customStatus,
+      autoFocus,
+      mask,
+      type,
+      onInput,
+      inputMode
+    } = props,
+    restProps = __rest(props, ["prefixCls", "length", "size", "defaultValue", "value", "onChange", "formatter", "separator", "variant", "disabled", "status", "autoFocus", "mask", "type", "onInput", "inputMode"]);
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Input.OTP');
+    process.env.NODE_ENV !== "production" ? warning(!(typeof mask === 'string' && mask.length > 1), 'usage', '`mask` prop should be a single character.') : void 0;
+  }
+  const {
+    getPrefixCls,
+    direction
+  } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('otp', customizePrefixCls);
+  const domAttrs = pickAttrs(restProps, {
+    aria: true,
+    data: true,
+    attr: true
+  });
+  // ========================= Root =========================
+  // Style
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
+  // ========================= Size =========================
+  const mergedSize = useSize(ctx => customSize !== null && customSize !== void 0 ? customSize : ctx);
+  // ======================== Status ========================
+  const formContext = React.useContext(FormItemInputContext);
+  const mergedStatus = getMergedStatus(formContext.status, customStatus);
+  const proxyFormContext = React.useMemo(() => Object.assign(Object.assign({}, formContext), {
+    status: mergedStatus,
+    hasFeedback: false,
+    feedbackIcon: null
+  }), [formContext, mergedStatus]);
+  // ========================= Refs =========================
+  const containerRef = React.useRef(null);
+  const refs = React.useRef({});
+  React.useImperativeHandle(ref, () => ({
+    focus: () => {
+      var _a;
+      (_a = refs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+    },
+    blur: () => {
+      var _a;
+      for (let i = 0; i < length; i += 1) {
+        (_a = refs.current[i]) === null || _a === void 0 ? void 0 : _a.blur();
+      }
+    },
+    nativeElement: containerRef.current
+  }));
+  // ======================= Formatter ======================
+  const internalFormatter = txt => formatter ? formatter(txt) : txt;
+  // ======================== Values ========================
+  const [valueCells, setValueCells] = React.useState(() => strToArr(internalFormatter(defaultValue || '')));
+  React.useEffect(() => {
+    if (value !== undefined) {
+      setValueCells(strToArr(value));
+    }
+  }, [value]);
+  const triggerValueCellsChange = useEvent(nextValueCells => {
+    setValueCells(nextValueCells);
+    if (onInput) {
+      onInput(nextValueCells);
+    }
+    // Trigger if all cells are filled
+    if (onChange && nextValueCells.length === length && nextValueCells.every(c => c) && nextValueCells.some((c, index) => valueCells[index] !== c)) {
+      onChange(nextValueCells.join(''));
+    }
+  });
+  const patchValue = useEvent((index, txt) => {
+    let nextCells = _toConsumableArray(valueCells);
+    // Fill cells till index
+    for (let i = 0; i < index; i += 1) {
+      if (!nextCells[i]) {
+        nextCells[i] = '';
+      }
+    }
+    if (txt.length <= 1) {
+      nextCells[index] = txt;
+    } else {
+      nextCells = nextCells.slice(0, index).concat(strToArr(txt));
+    }
+    nextCells = nextCells.slice(0, length);
+    // Clean the last empty cell
+    for (let i = nextCells.length - 1; i >= 0; i -= 1) {
+      if (nextCells[i]) {
+        break;
+      }
+      nextCells.pop();
+    }
+    // Format if needed
+    const formattedValue = internalFormatter(nextCells.map(c => c || ' ').join(''));
+    nextCells = strToArr(formattedValue).map((c, i) => {
+      if (c === ' ' && !nextCells[i]) {
+        return nextCells[i];
+      }
+      return c;
+    });
+    return nextCells;
+  });
+  // ======================== Change ========================
+  const onInputChange = (index, txt) => {
+    var _a;
+    const nextCells = patchValue(index, txt);
+    const nextIndex = Math.min(index + txt.length, length - 1);
+    if (nextIndex !== index && nextCells[index] !== undefined) {
+      (_a = refs.current[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    triggerValueCellsChange(nextCells);
+  };
+  const onInputActiveChange = nextIndex => {
+    var _a;
+    (_a = refs.current[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+  };
+  // ======================== Render ========================
+  const inputSharedProps = {
+    variant,
+    disabled,
+    status: mergedStatus,
+    mask,
+    type,
+    inputMode
+  };
+  return wrapCSSVar(/*#__PURE__*/React.createElement("div", Object.assign({}, domAttrs, {
+    ref: containerRef,
+    className: classNames(prefixCls, {
+      [`${prefixCls}-sm`]: mergedSize === 'small',
+      [`${prefixCls}-lg`]: mergedSize === 'large',
+      [`${prefixCls}-rtl`]: direction === 'rtl'
+    }, cssVarCls, hashId),
+    role: "group"
+  }), /*#__PURE__*/React.createElement(FormItemInputContext.Provider, {
+    value: proxyFormContext
+  }, Array.from({
+    length
+  }).map((_, index) => {
+    const key = `otp-${index}`;
+    const singleValue = valueCells[index] || '';
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: key
+    }, /*#__PURE__*/React.createElement(OTPInput, Object.assign({
+      ref: inputEle => {
+        refs.current[index] = inputEle;
+      },
+      index: index,
+      size: mergedSize,
+      htmlSize: 1,
+      className: `${prefixCls}-input`,
+      onChange: onInputChange,
+      value: singleValue,
+      onActiveChange: onInputActiveChange,
+      autoFocus: index === 0 && autoFocus
+    }, inputSharedProps)), index < length - 1 && (/*#__PURE__*/React.createElement(Separator, {
+      separator: separator,
+      index: index,
+      prefixCls: prefixCls
+    })));
+  }))));
+});
+export default OTP;