Вызов функции из полей HTML в sweetalert2 - PullRequest
Новая
       10

Вызов функции из полей HTML в sweetalert2

0 голосов
/ 22 октября 2018

Я только недавно начал использовать sweetAlert2, и это было очень приятно для меня до сих пор.Я пытался использовать его как модальную замену входа в систему, и почти все работает, кроме функции сброса пароля, которая мне нужна.Идея состоит в том, чтобы открыть другой swal для пароля сброса, и это то, с чем я застрял.

Мне было интересно, можно ли вызвать функцию из пользовательского HTML?Когда я делаю console.log() в onclick для ссылки сброса пароля, это работает, но когда я вызываю функцию, это не так.Вот пример того, что я пытаюсь сделать. 

import swal from 'sweetalert2';

export default function(category, url, loginSuccess, loginFail) {
  trackNavbarAnalytics(category)
  swal({
    html:
      `
      <form action="${url}/oauth_connect?from=facebook" method="post">
        <div class="signup-login-btn">
          <button class="social-btn fb-btn">
            <span class="fa fa-facebook fa-lg"></span> Sign In With Facebook
          </button>
        </div>
      </form>
      `
      +
      `
      <div class="social-nosocial-separator">
        <h6>Or</h6>
        <hr />
      </div>
      `
      +
      `
      <div class="DaycationInputField swal-input-container">
        <input type="email" placeholder="Email" id="swalLoginEmail">
        <input type="password" placeholder="Password" id="swalLoginPassword">
      </div>
      `,
    footer:
      `
        <div class="text-center">
          <a href="#" class="loginform-link" onclick="logToConsole()">Forgot your password?</a>
        </div>
      `,
    confirmButtonText: 'Login',
    showCloseButton: true,
    preConfirm: () => {
      let email = document.getElementById('swalLoginEmail').value;
      let password = document.getElementById('swalLoginPassword').value;

      let formData = new URLSearchParams();
      formData.append("email", email);
      formData.append("password", password);
      return fetch(url + "/oauth_connect?from=email_login", {
        method: 'POST',
        body: formData,
        credentials: 'include',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        },
      })
      .then((response) => {
        console.log("initial", response);
        if(!response.redirected){
          return response.json();
        } else {
          // What happens here?
        }
      })
      .then((data) => {
        console.log("second", data);
        if(data.status === "success"){
          loginSuccess(data.user);

          // identify user
          analytics.identify(data.user._id, {
            name: data.user.name,
            email: data.user.email,
          });

          analytics.track('Signed In', {'Signin Medium': 'Email Login', category: 'Sign In', label: 'Email' });
        } else {
          loginFail(data.message);
          throw new Error(data.message);
        }
      })
      .catch((err) => {
        console.error("error", err);
        swal.showValidationMessage(err.message);
      })
    }
  })
  .then((res) => {
    console.log("res", res);
  })
}

function logToConsole() {
  console.log('hi');
}

function trackNavbarAnalytics(category) {
  let event = category === 'Sign In' ? 'Clicked Navbar Signin' : 'Clicked Navbar Signup';
  analytics.track(event, { category });  
}

В нем говорится, что logToConsole не определено, что, вероятно, означает, что у него нет доступа к функции.Это потому, что оно находится внутри объявления swal и как я могу предоставить ему доступ к этой функции?

Любая помощь будет принята с благодарностью.Благодарю.:)

...