JSFiddle - React, Tailwind, and code Playground

by W K

HTML

<script src="https://code.google.com/p/youtube-direct-lite/source/browse/static/js/ytdl/auth.js"></script>
<body>
    <div id="loginwrap">
        <div class="content">
            <input type="text" id="email" placeholder="Email"></input>
            <br></br>
            <input type="password" id="pass" placeholder="Password"></input>
            <br></br>
            <div class="content">
            <div class="btn" onclick="login()">Login</div>
            </div>
        </div>
    </div>
</body>

CSS

h3 {
    font-size:12px;
}
.btn {
    color:#000;
    background-color:#fff;
    box-shadow:1px 1px 1px 1px #000;
    position:relative;
    top:0px;
    left:0px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.btn:hover {
    top:-3px;
    left:-3px;
    background-color:#4679bd;
}
#loginwrap {
    margin-left:auto;
    margin-right:auto;
    width:70%;
    background-color:#0f0f0f;
    padding:5px;
    border-radius:5px;
}
.content {
    width:50%;
    margin-left:auto;
    margin-right:auto;
}
}

JavaScript

var clientId = "tcgm-yt-daily-lister";
var apiKey = "YOUR API KEY";
var scopes = "https://www.googleapis.com/auth/plus.me";

function login() {
    var elem=document.GetElementById("loginwrap");
    elem.style.top="-200px";
}

function handleClientLoad() {
  gapi.client.setApiKey(apiKey);
  window.setTimeout(checkAuth,1);
}

function checkAuth() {
  gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
}

function handleAuthResult(authResult) {
  var authorizeButton = document.getElementById("authorize-button");
  if (authResult && !authResult.error) {
    authorizeButton.style.visibility = "hidden";
    makeApiCall();
  } else {
    authorizeButton.style.visibility = "";
    authorizeButton.onclick = handleAuthClick;
  }
}

function handleAuthClick(event) {
  gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
  return false;
}