@krowdy/kds-auth/OnetapAuth/OnetapAuth.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _kdsCore = require("@krowdy/kds-core");

var _icons = require("@material-ui/icons");

var _LoginSinglePage = _interopRequireDefault(require("../LoginSinglePage"));

var _utils = require("../utils");

var _ref3 = /*#__PURE__*/_react["default"].createElement(_icons.Close, {
  color: "disabled",
  fontSize: "small"
});

var OnetapAuth = function OnetapAuth(_ref) {
  var customMainText = _ref.customMainText;
  var classes = useStyles();

  var _ref2 = (0, _utils.useAuth)() || {},
      onClose = _ref2.onClose;

  return /*#__PURE__*/_react["default"].createElement(_kdsCore.Backdrop, {
    className: classes.container,
    onClose: onClose,
    open: true
  }, /*#__PURE__*/_react["default"].createElement(_kdsCore.Card, {
    className: classes.mainContainer
  }, /*#__PURE__*/_react["default"].createElement(_kdsCore.IconButton, {
    className: classes.closeButton,
    onClick: onClose,
    size: "small"
  }, _ref3), /*#__PURE__*/_react["default"].createElement(_kdsCore.CardContent, {
    className: classes.cardContent
  }, /*#__PURE__*/_react["default"].createElement(_LoginSinglePage["default"], {
    customMainText: customMainText
  }))));
};

var useStyles = (0, _kdsCore.makeStyles)(function (_ref4) {
  var zIndex = _ref4.zIndex,
      spacing = _ref4.spacing,
      breakpoints = _ref4.breakpoints;
  return {
    cardContent: (0, _defineProperty2["default"])({
      padding: spacing(8, 1.5)
    }, breakpoints.up('md'), {
      '&:last-child': {
        paddingBottom: spacing(4)
      },
      padding: spacing(8, 12)
    }),
    closeButton: {
      position: 'absolute',
      right: 12,
      top: 12
    },
    closeIcon: {
      position: 'absolute',
      right: 4,
      top: 4
    },
    container: {
      height: '100vh',
      left: 0,
      position: 'fixed',
      top: 0,
      width: '100vw',
      zIndex: zIndex.modal + 1
    },
    containerWithoutBorder: {
      boxShadow: 'none',
      maxWidth: 576
    },
    iframe: {
      border: 'none',
      height: '100%',
      outline: 'hidden',
      width: '100%'
    },
    mainContainer: (0, _defineProperty2["default"])({
      height: 615,
      position: 'relative',
      width: 576
    }, breakpoints.down('767px'), {
      height: '100%',
      overflow: 'auto'
    })
  };
}, {
  name: 'OnetapAuth'
});

var _default = _react["default"].memo(OnetapAuth);

exports["default"] = _default;