@web3auth/ui/dist/lib.cjs/packages/ui/src/components/SocialLoginPasswordless.js

Ui modal for web3Auth

'use strict';

var auth = require('@web3auth/auth');
var React = require('react');
var reactI18next = require('react-i18next');
var localeImport = require('../localeImport.js');
var utils = require('../utils.js');
var Button = require('./Button/Button.js');
var Icon = require('./Icon.js');
var jsxRuntime = require('react/jsx-runtime');

function SocialLoginPasswordless(props) {
  const {
    handleSocialLoginClick,
    adapter,
    isPrimaryBtn,
    isEmailVisible,
    isSmsVisible
  } = props;
  const [fieldValue, setFieldValue] = React.useState("");
  const [countryCode, setCountryCode] = React.useState("");
  const [isValidInput, setIsValidInput] = React.useState(null);
  const [t] = reactI18next.useTranslation(undefined, {
    i18n: localeImport
  });
  const handleFormSubmit = async e => {
    e.preventDefault();
    const value = fieldValue;
    if (isEmailVisible) {
      const isEmailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
      if (isEmailValid) {
        return handleSocialLoginClick({
          adapter,
          loginParams: {
            loginProvider: auth.LOGIN_PROVIDER.EMAIL_PASSWORDLESS,
            login_hint: value,
            name: "Email"
          }
        });
      }
    }
    if (isSmsVisible) {
      const number = value.startsWith("+") ? value : `${countryCode}${value}`;
      const result = await utils.validatePhoneNumber(number);
      if (result) {
        return handleSocialLoginClick({
          adapter,
          loginParams: {
            loginProvider: auth.LOGIN_PROVIDER.SMS_PASSWORDLESS,
            login_hint: typeof result === "string" ? result : number,
            name: "Mobile"
          }
        });
      }
    }
    setIsValidInput(false);
    return undefined;
  };
  React.useEffect(() => {
    const getLocation = async () => {
      const result = await utils.getUserCountry();
      if (result && result.dialCode) {
        setCountryCode(result.dialCode);
      }
    };
    if (isSmsVisible) getLocation();
  }, [isSmsVisible]);
  const handleInputChange = e => {
    setFieldValue(e.target.value);
    if (isValidInput === false) setIsValidInput(null);
  };
  const title = React.useMemo(() => {
    if (isEmailVisible && isSmsVisible) return "modal.social.passwordless-title";
    if (isEmailVisible) return "modal.social.email";
    return "modal.social.phone";
  }, [isEmailVisible, isSmsVisible]);
  const placeholder = React.useMemo(() => {
    if (isEmailVisible && isSmsVisible) return "+(00)123456/name@example.com";
    if (isEmailVisible) return "name@example.com";
    return "+(00)123456";
  }, [isEmailVisible, isSmsVisible]);
  const invalidInputErrorMessage = React.useMemo(() => {
    if (isEmailVisible && isSmsVisible) return "modal.errors-invalid-number-email";
    if (isEmailVisible) return "modal.errors-invalid-email";
    return "modal.errors-invalid-number";
  }, [isEmailVisible, isSmsVisible]);
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: "w3ajs-passwordless w3a-group w3a-group--passwordless",
    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "w3a-group__title",
      children: [t(title), isSmsVisible && /*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "w3a--relative w3a--flex w3a--flex-col w3a--items-center w3a--cursor-pointer w3a--group",
        children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
          iconName: "information-circle-light",
          darkIconName: "information-circle"
        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "w3a--absolute w3a--z-20 w3a--flex-col w3a--items-center w3a--hidden w3a--mb-5 w3a--top-4 group-hover:w3a--flex",
          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
            className: "w3a--w-3 w3a--h-3 w3a--ml-[3px] -w3a--mb-2 w3a--rotate-45 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-600"
          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
            className: `w3a--relative w3a--p-4 w3a--w-[300px] w3a--text-xs w3a--leading-none w3a--text-app-white w3a--rounded-md w3a--bg-app-gray-50 dark:w3a--bg-app-gray-600 w3a--shadow-lg ${isSmsVisible && !isEmailVisible ? "w3a--left-20" : "w3a--left-8"}`,
            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
              className: "w3a--mb-1 w3a--text-xs w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
              children: t("modal.popup.phone-header")
            }), /*#__PURE__*/jsxRuntime.jsx("div", {
              className: "w3a--text-xs w3a--text-app-gray-400",
              children: t("modal.popup.phone-body")
            })]
          })]
        })]
      })]
    }), /*#__PURE__*/jsxRuntime.jsxs("form", {
      className: "w3ajs-passwordless-form",
      onSubmit: e => handleFormSubmit(e),
      children: [/*#__PURE__*/jsxRuntime.jsx("input", {
        className: "w3a--w-full w3a--mb-4 w3a-text-field",
        name: "passwordless-input",
        required: true,
        placeholder: `${t("modal.social.sms-placeholder-text")} ${placeholder}`,
        onFocus: e => {
          e.target.placeholder = "";
        },
        onBlur: e => {
          e.target.placeholder = `${t("modal.social.sms-placeholder-text")} ${placeholder}`;
        },
        onChange: e => handleInputChange(e)
      }), isValidInput === false && /*#__PURE__*/jsxRuntime.jsx("div", {
        className: "w3a-sms-field--error",
        children: t(invalidInputErrorMessage)
      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
        variant: isPrimaryBtn ? "primary" : "tertiary",
        disabled: fieldValue === "",
        className: "w3a--w-full",
        type: "submit",
        children: t("modal.social.passwordless-cta")
      })]
    })]
  });
}

module.exports = SocialLoginPasswordless;