JSFiddle - React, Tailwind, and code Playground

by gkucmierz

HTML

<form method="post" action="//api.test/auth">

<fieldset>

<label for="email">email</label> <input type="email" name="email" id="email" required />

<label for="password">password</label> <input type="password" name="password"

id="password" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$" required />

<input type="submit" value="login" />

</fieldset>

<div class="result">
    <span class="login-successfull">logowanie poprawne</span>
    <span class="authentication-failed">niepoprawne login lub hasło</span>
    <span class="incorrect-data">niepoprawne dane</span>
    <span class="service-error">błąd usługi</span>
</div>
</form>

CSS

.result > span {
    display: none;
}

JavaScript

var form  = $('form');
form.submit(function(evt) {
    var data = {
        email: $('#email', this).val(),
        password: $('#password', this).val()
    };
    
    var mapStatuses = {
        201: 'login-successfull',
        401: 'authentication-failed',
        400: 'incorrect-data',
        500: 'service-error'
    };
    
    $.post($(this).attr('action'), data)
    .always(function(result) {
        if (result.status in mapStatuses) {
            $('.result .' + mapStatuses[result.status]).show();
        }
    });
    if (result.status === 200) form.hide();
    
    evt.preventDefault();
});