Reactjs sweetalert2 put input above html

Question

I have a sweetalert popup that prompts the user to change their password. I have the main input field asking the user for their current password, then I have some html with input boxes asking the user to enter their new password twice. I'd like to have the input field above the html, however I can't figure out how to do it. Here is my code:

const MySwal = withReactContent(Swal)
    MySwal.fire({
      title: 'Change Password?',
      focusConfirm: true,
      input: 'password',
      inputPlaceholder: 'Enter your current password...',
        html:
          '<input id="newPassword1" type="password" placeholder="Enter your new password..." /><br />' +
          '<input id="newPassword2" type="password" placeholder="Confirm your new password..." />' ,
        type: 'warning',
        showCancelButton: true,
        cancelButtonColor: 'grey',
        confirmButtonText: 'Update!',
        allowOutsideClick: true,
        inputValidator: (value) => {
          if (!value) {
            return 'You need to write something!'
          }
        }
    })

Any ideas how I can do this?

Answer 1

You can try something like this:

EDIT: I have updated my answer to also show how to handle 'light' validation...

Live Demo

import React, { useState } from 'react';
import { render } from 'react-dom';
import Swal from 'sweetalert2'
import withReactContent from 'sweetalert2-react-content'

const MySwal = withReactContent(Swal);

let changePwSwal = {
  title: 'Change Password?',
  focusConfirm: false,
  html: `
    <input class="swal2-input" id="currentPassword" type="password" placeholder="Enter your current password..." /><br />
    <input class="swal2-input" id="newPassword1" type="password" placeholder="Enter your new password..." /><br />
    <input class="swal2-input" id="newPassword2" type="password" placeholder="Confirm your new password..." />
  `,
  type: 'warning',
  showCancelButton: true,
  cancelButtonColor: 'grey',
  confirmButtonText: 'Update!',
  allowOutsideClick: false,
  preConfirm: () => ({
    currentPassword: document.getElementById('currentPassword').value,
    newPassword1: document.getElementById('newPassword1').value,
    newPassword2: document.getElementById('newPassword2').value
  })
};

export default function App() {
  const [formdata, setformdata] = useState();

  const handleResetPassword = () => {
    const resetPw = async () => {
      const swalval = await MySwal.fire(changePwSwal);
      let v = swalval && swalval.value || swalval.dismiss;
      if (v && v.currentPassword && v.newPassword1 && v.newPassword2 || v === 'cancel') {
        if (v.newPassword1 !== v.newPassword2) {
          await MySwal.fire({ type: 'error', title: 'Passwords do not match!' });
          resetPw();
        } else if (v !== 'cancel') {
          setformdata(swalval);
        }
      } else {
        await MySwal.fire({ type: 'error', title: 'All fields are required!!' });
        resetPw();
      }
    }

    resetPw();
  }

  return (
    <div>
      <button onClick={handleResetPassword}>Reset Password</button>
      <pre>{JSON.stringify(formdata, null, 2)}</pre>
    </div>
  );
}

render(<App />, document.getElementById('root'));