JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<div class="settings_section">
      <form id="mautic_auth" action="<?php echo 'authorize.php?' . $_SERVER['QUERY_STRING'] ?>" method="POST" target="_parent" >
        <div class="mautic_fields">
          <label for="authType">Mautic Authorization Type</label>
          <select id="authType" name="authType">
            <option value="BasicAuth">Basic Auth</option>
            <option value="OAuth2">OAuth 2</option>
          </select>
        </div>

        <div class="mautic_fields">
          <label for="baseUrl">Your Mautic URL</label>
          <input type="text" id="baseUrl" name="baseUrl" placeholder="Mautic URL">
        </div>

        <div id="basic_fields">
          <div class="mautic_fields">
            <label for="username">Your Mautic Username</label>
            <input type="text" id="mauticUsername" name="mauticUsername" placeholder="Mautic Username">
          </div>

          <div class="mautic_fields">
            <label for="mauticPassword">Your Mautic Password</label>
            <input type="password" id="mauticPassword" name="mauticPassword" placeholder="Mautic Password">
          </div>
        </div>

        <div id="oauth_fields">
          <div class="mautic_fields">
            <label for="clientKey">Your Mautic Client ID</label>
            <input type="text" id="clientKey" name="clientKey" placeholder="clientKey">
          </div>
          <div class="mautic_fields">
            <label for="clientSecret">Your mautic Client Secret</label>
            <input type="text" id="clientSecret" name="clientSecret" placeholder="clientSecret">
          </div>
        </div>
        <input type="hidden" name="shopUrl" value="<?php echo $_GET['shop'];?>">
      </form>

      <span id="autorize_status">Checking Authorization...</span>
      <button id="revoke" onclick="mautic_revoke();">Revoke Authorization</button>
      <button id="authorize" onclick="mautic_authorize();">Authorize</button>
      <div id="auth_message"></div>
     ...

JavaScript

function mautic_authorize() {
  verify_auth_fields();
  $('#auth_message').hide().text('Authorizing...').fadeIn().css('color', '#1ae21a');
  var form = $('#mautic_auth');
  if ( $('#authType').val() == 'BasicAuth') {
    $.ajax({
      type: 'POST',
      data: form.serialize(),
      url: 'ajax-handler.php?' + shopify_verify,
      success: function(data) {
        $('#autorize_status').text('Connected').css({'color': '#fff', 'background-color': '#1ae21a'});
        $('#auth_message').hide().text('Mautic Successfully Authorized').css('color', '#1ae21a').fadeIn();
        $('#mautic_auth, #authorize').slideUp();
        create_mautic_fields();
      },
      error: function(error) {
        $('#auth_message').hide().text('Error, Please contact us to solve this issue').fadeIn().css('color', '#ff0000');
      },
      statusCode: {
        401: function() {
          $('#autorize_status').hide().text('Not Connected').css({'color': '#717171', 'background-color': '#dcdcdc'}).fadeIn();
          $('#auth_message').hide().text('Authorization denied, invalid credentials').css('color', '#ff0000').fadeIn();
        },
        406: function() {
          $('#auth_message').hide().text('Not Acceptable Request: Shopify autorization failed, try refresh the page').css('color', '#ff0000').fadeIn();
        }
      }
    });
  } else {
    form.submit();
  }
}




function verify_auth_fields() {
  function validateUrl(value) {
    var expression = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi
    var regexp = new RegExp(expression);
    return regexp.test(value);
  }

  var authType = $('#authType'),
    mauticUsername = $('#mauticUsername'),
    mauticPassword = $('#mauticPassword'),
		clientKey = $('#clientKey'),
		clientSecret = $('#clientSecret'),
    validate_message;

  if (authType.val() == 'BasicAuth') {
    if (mauticUsername.val() == '') {
    //  return 'Please enter valid username';
      alert( 'te');
    } else if...