JSFiddle - React, Tailwind, and code Playground

by chrisguzman

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.firebase.com/js/client/1.0.15/firebase.js"></script>
<script src="https://cdn.firebase.com/js/simple-login/1.6.1/firebase-simple-login.js"></script>
<div id="dialog-register" title="Register new user">
    <form>
            <label for="name">Email</label>
            <input type="text" name="email" id="register-email"/>
            <label for="password">Password</label>
            <input type="password" name="password" id="register-password" value=""/>
    </form>
</div>
<button id="opener-register" onclick="showLoginBox()">Register</button>

JavaScript

var myRootRef = new Firebase('https://helloworldtest.firebaseio.com/');
var auth = new FirebaseSimpleLogin(myRootRef, function (error, user) {
    if (error) {
        alert(error);
        return;
    }
    if (user) {
        // User is already logged in.
        doLogin(user);
    } else {
        // User is logged out.
        // showLoginBox();
    }
});

function showLoginBox() {
    $("#registerButton").on("click", function () {
        var email = $("#email").val();
        var password = $("#password").val();
        auth.createUser(email, password, function (error, user) {
            if (!error) {
                doLogin(user);
            } else {
                alert(error);
            }
        });
    });
}