Реализация ввода электронной почты и пароля с помощью SweetAlert2: пример кода

Чтобы использовать SweetAlert2 для ввода электронной почты и пароля, вы можете создать собственное модальное диалоговое окно с двумя полями ввода: одно для электронной почты, а другое для пароля. Вот пример того, как это можно реализовать с помощью JavaScript:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.css">
</head>
<body>
<button onclick="showLoginDialog()">Login</button>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.all.min.js"></script>
<script>
  function showLoginDialog() {
    Swal.fire({
      title: 'Login',
      html:
        '<input type="email" id="email" placeholder="Email" class="swal2-input">' +
        '<input type="password" id="password" placeholder="Password" class="swal2-input">',
      showCancelButton: true,
      confirmButtonText: 'Login',
      preConfirm: () => {
        const email = Swal.getPopup().querySelector('#email').value;
        const password = Swal.getPopup().querySelector('#password').value;
        return { email: email, password: password };
      }
    }).then((result) => {
      if (result.isConfirmed) {
        const email = result.value.email;
        const password = result.value.password;
        // Do something with the email and password
        console.log('Email:', email);
        console.log('Password:', password);
      }
    });
  }
</script>
</body>
</html>

В этом примере при нажатии кнопки «Войти» вызывается функция showLoginDialog(). Он создает модальное диалоговое окно SweetAlert2 с двумя полями ввода электронной почты и пароля. Когда пользователь нажимает кнопку «Войти» в модальном окне, запускается обратный вызов preConfirm. Он извлекает значения из полей ввода и возвращает их как объект. Наконец, результат записывается в консоль, но вы можете изменить код для выполнения любых желаемых действий со значениями адреса электронной почты и пароля.