synapse-react-client/dist/components/Authentication/TOTPForm.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsxs as s, jsx as e } from "react/jsx-runtime";
import { Box as p, Button as d } from "@mui/material";
import { MuiOtpInput as m } from "mui-one-time-password-input";
import { useState as l } from "react";
const n = 6, f = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
function C(u) {
  const { onSubmit: i, loginIsPending: r } = u, [o, a] = l("");
  return /* @__PURE__ */ s(p, { children: [
    /* @__PURE__ */ e(
      m,
      {
        autoFocus: !0,
        length: n,
        value: o,
        onChange: a,
        onComplete: i,
        validateChar: (t) => f.includes(t) || t === "",
        gap: "2px",
        sx: {
          mx: "auto",
          maxWidth: "350px",
          ".MuiInputBase-root": {
            paddingLeft: "5px",
            paddingRight: "5px"
          },
          ".MuiFormControl-root:first-of-type > .MuiInputBase-root": {
            borderTopRightRadius: 0,
            borderBottomRightRadius: 0
          },
          ".MuiFormControl-root:last-of-type > .MuiInputBase-root": {
            borderTopLeftRadius: 0,
            borderBottomLeftRadius: 0
          },
          ".MuiFormControl-root:not(:first-of-type):not(:last-of-type) > .MuiInputBase-root": {
            borderRadius: 0
          }
        }
      }
    ),
    /* @__PURE__ */ e(
      d,
      {
        fullWidth: !0,
        type: "submit",
        color: "primary",
        variant: "contained",
        sx: {
          height: "50px",
          mt: 4,
          mb: 2
        },
        disabled: o.length !== n || r,
        onClick: (t) => {
          t.preventDefault(), i(o);
        },
        children: r ? "Verifying..." : "Submit"
      }
    )
  ] });
}
export {
  C as default
};
//# sourceMappingURL=TOTPForm.js.map