JSFiddle - React, Tailwind, and code Playground

by Perry Kaufman

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://www.gstatic.com/firebasejs/4.5.0/firebase.js"></script>

<div id="app">
  <div class="banner">
    <div class="bannerLeft">
      <span class="bannerTitle">GW2 Profile</span>
    </div>
    <div class="bannerRight" v-if="!status">
      <form v-on:submit.prevent="signIn">
        <table>
          <tr>
            <td>
              <input v-bind:class="emailClass" v-model="email" v-on:keyup="placeholderReset" type="text" v-bind:placeholder="emailHolder" />
            </td>
            <td>
              <input v-bind:class="passClass" v-model="password" v-on:keyup="placeholderReset" type="password" v-bind:placeholder="passHolder" />
            </td>
            <td>
              <button type="submit">sign in</button>
            </td>
            <td>
              <button type="button" v-on:click="signUp">sign up</button>
            </td>
        </table>
      </form>
    </div>
    <div class="bannerRight" v-if="status">
      <span class="loginMessage">Hello {{displayEmail}} </span>
      <button type="button" v-on:click="signOut">sign out</button>
    </div>
  </div>
</div>

CSS

body {
  font-family: sans-serif;
  background-color: lightgray;
  padding: 0;
}

.banner {
  background-image: url("https://d3b4yo2b5lbfy.cloudfront.net/wp-content/uploads/wallpapers/add552014-11-18_TP-800x600.jpg");
  position: relative;
  padding: 5px;
  border: 2px solid black;
  background-color: #273746;
  height: 30px;
  margin: 0;
}

.bannerLeft {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}

.bannerRight {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}

.bannerTitle,
.loginMessage {
  color: white;
}

.bannerTitle {
  font-size: 26px;
  font-weight: bold;
}

.loginMessage {
  font-weight: 580;
}

.loginTextInput,.loginTextError {
  border: 1px solid black;
  padding: 2px;
}

.loginTextError::placeholder {
  color: red;
  opacity: 1;
}

button {
  color: white;
  background-color: black;
  border: none;
  padding: 3px 8px 3px 8px;
}

button:active {
  background-color: darkgray;
}

JavaScript

// Initialize Firebase
  var config = {
    apiKey: "AIzaSyAHmlXOLaS6vpp5VORKELlBYQURtn8utao",
    authDomain: "testproject-c8451.firebaseapp.com",
    databaseURL: "https://testproject-c8451.firebaseio.com",
    projectId: "testproject-c8451",
    storageBucket: "testproject-c8451.appspot.com",
    messagingSenderId: "809672710893"
  };
  firebase.initializeApp(config);
  var auth = firebase.auth();

  auth.onAuthStateChanged(function(user) {
    if (user) {
      vm.status = true;
      vm.displayEmail = auth.currentUser.email;
    } else {
      vm.status = false;
      vm.displayEmail = '';
    }
  });

  var vm = new Vue({
    el: '#app',
    data: {
      email: '',
      password: '',
      status: false,
      displayEmail: '',
      emailHolder: 'Email',
      passHolder: 'Password',
      emailClass: 'loginTextInput',
      passClass: 'loginTextInput'
    },
    methods: {
      signIn: function() {
        var promise = auth.signInWithEmailAndPassword(this.email, this.password);
        promise.catch(function(error) {
          var errorCode = error.code;
          if (errorCode == 'auth/invalid-email') {
            vm.emailFieldMessage('invalid email');
          } else if (errorCode == 'auth/user-not-found') {
            vm.emailFieldMessage('user not found');
          } else if (errorCode == 'auth/wrong-password') {
            vm.passFieldMessage('wrong password');
          } else {
            console.log(error.message);
          }
        });
      },
      signUp: function() {
        var promise = auth.createUserWithEmailAndPassword(this.email, this.password);
        promise.catch(function(error) {
          var errorCode = error.code;
          if (errorCode == 'auth/email-already-in-use') {
            vm.emailFieldMessage('email unavailable');
          } else if (errorCode == 'auth/invalid-email') {
            vm.emailFieldMessage('invalid email');
          } else if (errorCode == 'auth/weak-password') {
           ...