JSFiddle - React, Tailwind, and code Playground

by seefeld

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Login</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
        <script type="text/javascript">

        </script>
    </head>
    <body> 
        <div data-role="page"> 
            <div data-role="header" >
            <h2>Login</h2></div> 
            <div data-role="content">
                <form id="loginForm">
                    <label for="username">Username:</label>
                    <input type="text" id="username" value=""  name="username"/>
                    <label for="password">Password:</label>
                    <input type="text" id="password" value=""   name="password"/>
                    <a href="forget.html">Forgoten?</a><br>
                    <a href="index.html" data-role="button" data-transition="turn" data-inline="true" data-icon="back" >Back</a>
                    <a href="#" id="submitButton" data-role="button" data-inline="true" data-theme="b" data-icon="forward">Login</a>
                </form>
            </div> 
            <div data-role="footer" data-position="fixed"><h2></h2></div> 
        </div> 
    </body>
</html>

JavaScript

/**
             * Clears all the inputs in the page.
             */
            function clearPageInputs() {
                $("input[type=text]").val('');
            }


            /**
             * Trim function
             */
            String.prototype.trim = function() {
                a = this.replace(/^\s+/, '');
                return a.replace(/\s+$/, '');
            };

            /**
             * Submits the login form
             */
            function sumbitLoginForm(user, pass) {
                if (user.trim() == '' || pass.trim() == '')
                {   
                    // fill username and password in Greek language
                    alert("fill username and password");
                }
                else
                {
                    $.ajax({
                        type: 'post',
                        url: 'http://localhost/Mobile/',
                        data: { username: user, password: pass },
                        dataType: 'json',
                        success: function(data) {
                            if(data && data.status == 1) {
                                // save in local storage
                                localStorage.setItem("username", user);
                                localStorage.setItem("password", pass);
                                // perform page transition 
                                $.mobile.changePage("menu1.html");
                            }
                            else {
                                clearPageInputs()
                                // wrong username / password in Greek language
                                alert("wrong username / password ");
                            }   
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert("Error: " + xhr.status + "\n" +
                                   "Message: " + xhr.statusText + "\n" +
                ...