How to use sweetalert2 - 10 common examples

try {
      await vueAuth.login(form).then(() => {
        commit("isAuthenticated", {
          isAuthenticated: vueAuth.isAuthenticated()
        });
      });

      await dispatch("fetchMe");

      form.busy = false;
      vm.$router.push({ name: "dashboard" });
    } catch (error) {
      form.errors.set(error.response.data.errors);
      form.busy = false;
      if (error.response.status === 401) {
        let modal = swal.mixin({
          confirmButtonClass: "v-btn blue-grey  subheading white--text",
          buttonsStyling: false
        });
        modal.fire({
          title: `${error.response.data.error}`,
          html: `<p class="title">${error.response.data.message}</p>`,
          type: "error",
          confirmButtonText: "Back"
        });
      }
    }
  },
  /* form : name,email ,provider(fb),provider_user_id(fb_id) */

static playPause = () => {
    const videoElement = document.getElementById('video');
    if (videoElement.paused) {
      videoElement.play();
    } else {
      videoElement.pause();
    }
  };

  static toggleVideoControls = () => {
    const videoElement = document.getElementById('video');
    videoElement.controls = !videoElement.controls;
  };

  toastPopup = Swal.mixin({
    toast: true,
    position: 'top-start',
    showConfirmButton: false,
    timer: 3000
  });

  constructor(props) {
    super(props);
    // here we do a manual conditional proxy because React won't do it for us
    let socket;
    if (window.location.origin === 'http://localhost:3000') {
      console.log('manually proxying socket');
      socket = io('http://localhost:3001');
    } else {
      socket = io();
    }

public confirmDeleteUser(user: User): void {
        // Due to sweet alert scope issue, define as function variable and pass to swal

        const parent = this;
        // let getUsers = this.getUsers;
        this.errorMessage = '';

        swal({
            title: 'Are you sure?',
            text: 'Once delete, you won\'t be able to revert this!',
            type: 'question',
            showLoaderOnConfirm: true,
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!',
            preConfirm: function () {
                parent.loading = true;
                return new Promise(function (resolve, reject) {
                    parent.userDataService.deleteUserById(user.id)
                        .subscribe(
                            result => {
                                parent.getUsers();
                                parent.loading = false;

async createAccount() {
        // Check for bip44 account gap (20 empty accounts)
        const emptyAccounts = 
            Object.values(this.props.accounts)
                .filter(account => account.internal && !account.transactions.length)
                .sort((a, b) => b.accountIndex - a.accountIndex);

        if(emptyAccounts.length >= 2 && (emptyAccounts[0].accountIndex - 20 >= emptyAccounts[emptyAccounts.length - 2].accountIndex)) {
            return Swal({
                title: this.translate({ id: 'accounts.create.tooMany' }),
                type: 'error'
            });
        }

        const { value: name } = await Swal({
            title: this.translate({ id: 'accounts.create.title' }),
            input: 'text',
            inputPlaceholder: this.translate({ id: 'accounts.create.placeholder' }),
            showCancelButton: true,
            inputValidator: name => {
                if(!name)
                    return this.translate({ id: 'accounts.create.requiresName' });

                if(name.trim().length > 32)
                    return this.translate({ id: 'accounts.create.nameTooLong' })

const _processStoryOutput = (story) => {
    try {

      const {output} = story;

      if ((output.data instanceof Blob) &&
           (output.data.size > 0)) {

        // output type is Blob,
        // so download now
        const blob = output.data;

        swal({
          title: 'Enter a filename',
          input: 'text',
          showCancelButton: true,
          confirmButtonText: 'Save',
          allowOutsideClick: false
        }).then((filename) => {

          FileSaver.saveAs(blob, filename);
        })
          .catch(() => {
            // silent
            FileSaver.saveAs(blob);
          });
      } else if ((typeof output.data !== 'undefined')
                || (!_.isEmpty(output.text))
                || (!_.isEmpty(output.data))) {

};

      let hasError = {
        mriFile: true,
        candID: false,
        pSCID: false,
        visitLabel: false,
      };

      this.setState({errorMessage, hasError});
      return;
    }

    if (data.IsPhantom === 'N') {
      if (!data.candID || !data.pSCID || !data.visitLabel) {
        swal.fire({
          title: 'Incorrect file name!',
          text: 'Could not determine PSCID, CandID and Visit Label '
                + 'based on the filename!\n',
          type: 'error',
          confirmButtonText: 'OK',
        });
        return;
      }
    }

    // Checks if a file with a given fileName has already been uploaded
    const mriFile = this.props.mriList.find(
      (mriFile) => mriFile.fileName.indexOf(fileName) > -1
    );

    // New File

async function promptTimeOffset(inputValue) {
  const { value } = await swal.fire({
    title: 'Set custom start time offset',
    text: 'Instead of video apparently starting at 0, you can offset by a specified value (useful for viewing/cutting videos according to timecodes)',
    input: 'text',
    inputValue: inputValue || '',
    showCancelButton: true,
    inputPlaceholder: '00:00:00.000',
  });

  if (value === undefined) {
    return undefined;
  }

  const duration = parseDuration(value);
  // Invalid, try again
  if (duration === undefined) return promptTimeOffset(value);

$('.delete-swal').click(function (e) {
    e.preventDefault(); // Prevent the href from redirecting directly
    var url = $(this).attr("href");
    var title = $(this).attr("title");

    Swal.fire({
      title: title,
      text: '',
      icon: 'warning',
      showCancelButton: true,
      cancelButtonText: 'Cancel',
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes',
    }).then((result) => {
      if (result.value) {
        /*Swal.fire(
            'Deleted!',
            'Your file has been deleted.',
            'success'
        )*/
        window.location.href = url;

handleNext = event => {
    const { toggleStateVariable } = this.props;
    const { activeStep, models, modelName } = this.state;

    event.preventDefault();
    // If step = 0 then need to check
    // If model name exists
    if (activeStep === 0) {
      if (models.includes(modelName)) {
        Swal.fire('Model Already Exists', '', 'info');
        return;
      }
    }
    // If step = 2 then model ready to submit
    if (activeStep === 2) {
      this.postModel();
      toggleStateVariable(false, 'createOpen');
    }

    this.setState(state => ({
      activeStep: state.activeStep + 1
    }));
  };

const spinnerHtml = `
          <div>
              <div class="text-center">傳送到 HKEPC 伺服器中</div>
          </div>
        `

      swal({
        animation: false,
        html: spinnerHtml,
        allowOutsideClick: false,
        showCancelButton: false,
        showConfirmButton: false
      })

      swal.showLoading()

      // Post to the server
      this.apiService.dynamicRequest({
        method: 'POST',
        url: actionUrl,
        data: {
          subject: subject,
          message: replyMessage,
          typeid: _.get(post, 'category.id', undefined),
          handlekey: 'newthread',
          topicsubmit: true,
          ...hiddenFormInputs,
          ...imageFormData,
          ...deleteImageFormData
        },
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }