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

React components that implement Google's Material Design.

import React from 'react';
import { Backdrop, Card, CardContent, IconButton, makeStyles } from '@krowdy/kds-core';
import { Close as CloseIcon } from '@material-ui/icons';
import LoginSinglePage from '../LoginSinglePage';
import { useAuth } from '../utils';

var _ref = /*#__PURE__*/React.createElement(CloseIcon, {
  color: "disabled",
  fontSize: "small"
});

const OnetapAuth = ({
  customMainText
}) => {
  const classes = useStyles();
  const {
    onClose
  } = useAuth() || {};
  return /*#__PURE__*/React.createElement(Backdrop, {
    className: classes.container,
    onClose: onClose,
    open: true
  }, /*#__PURE__*/React.createElement(Card, {
    className: classes.mainContainer
  }, /*#__PURE__*/React.createElement(IconButton, {
    className: classes.closeButton,
    onClick: onClose,
    size: "small"
  }, _ref), /*#__PURE__*/React.createElement(CardContent, {
    className: classes.cardContent
  }, /*#__PURE__*/React.createElement(LoginSinglePage, {
    customMainText: customMainText
  }))));
};

const useStyles = makeStyles(({
  zIndex,
  spacing,
  breakpoints
}) => ({
  cardContent: {
    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: {
    height: 615,
    position: 'relative',
    width: 576,
    [breakpoints.down('767px')]: {
      height: '100%',
      overflow: 'auto'
    }
  }
}), {
  name: 'OnetapAuth'
});
export default React.memo(OnetapAuth);