JSFiddle - React, Tailwind, and code Playground

by Marcos vini

HTML

<div class='panel'>

<form id="acesso" method="post">    
<label>E-mail:<input type="email"   name="email" id="email"></label>
<label>Senha:<input type="text"  name="senha" id="password"></label>
<br>
<input type="button" id='gerar' value="Acessar">   

    <div id="resultado"></div>

</form>
</div>

CSS

::focus,::active{
  outline:none;
}

body{
      font: 16px/1 Helvetica,Arial,sans-serif;
}
.panel {
    margin-bottom: 20px;
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    max-width:450px;
}
input[type='text']:focus,input[type='email']:focus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-color: #19b9e7 #17b0dc !important;
    outline: none;
    -webkit-transition: linear 0.5s;
    transition: linear 0.5s;
    -moz-transition: linear 0.5s;
    -ms-transition: linear 0.5s;
    -o-transition: linear 0.5s;
}
input[type='text'],input[type='email']{
      position: relative;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    border-radius: 0px !important;
    color: #999 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
}
input[type='button']{
      float: left;
      display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
...

JavaScript

"use strict";



var resultado = document.querySelector('#resultado');
const JWT  = {

acessar: function(){

new Promise((Resolve, Reject) => {	
let dados = new FormData(document.getElementById('acesso')); 
dados.append('ras_usu_login',document.getElementById("email").value);
dados.append('ras_usu_senha',document.getElementById("password").value);
let x = new XMLHttpRequest();
x.open('POST','https://ws.fulltrack2.com/authorize/client');
 x.setRequestHeader('Content-Type', 'application/json');

x.setRequestHeader('Access-Control-Allow-Origin', '*');
 x.setRequestHeader('Accept-Language','pt-br');

x.setRequestHeader('Cache-Control', 'no-cache');
x.setRequestHeader('Pragma', 'no-cache');

x.setRequestHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');
x.setRequestHeader('Access-Control-Allow-Headers', 'X-PINGOTHER, Content-Type');
x.withCredentials = true;






x.send(dados);

x.onreadystatechange = function() {
	var r = x.responseText;
},x.onload = function() {
		var r = x.responseText;
    console.log(r)
    }






}).then(c => resultado.innerHTML= 'sucesso').catch( error =>  resultado.innerHTML =error );;


}



}

var el = document.getElementById("gerar");
if(el){

el.addEventListener('click', function(){

    JWT.acessar();
      
 


});
}