Untitled

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Welcome to Firebase Hosting</title>

  <!-- update the version number as needed -->
  <script defer src="/__/firebase/5.9.3/firebase-app.js"></script>
  <!-- include only the Firebase features as you need -->
  <script defer src="/__/firebase/5.9.3/firebase-auth.js"></script>
  <script defer src="/__/firebase/5.9.3/firebase-database.js"></script>
  <script defer src="/__/firebase/5.9.3/firebase-messaging.js"></script>
  <script defer src="/__/firebase/5.9.3/firebase-storage.js"></script>
  <!-- initialize the SDK after all desired features are loaded -->
  <script defer src="/__/firebase/init.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
  <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <style>
    body {
      position: relative;
      top: 15px;
      font-weight: 700;
      font-family: "Poppins", sans-serif;
    }


    .button:hover {
      transform: translatey(2px);
    }

    .button:focus {
      outline: none;
    }

    .button.google,
    .button.email {
      background-color: #FFFFFF;
      box-shadow: 0 3px 20px rgba(39, 68, 74, 0.2);
      color: #506569;
      font-size: .9rem;
      line-height: 2rem;
      position: relative;
      border: none;
      padding: .2rem 2rem;
      margin: .5rem;
      border-radius: 50px;
      transition: .1s all;
      transition-timing-function: ease;

    }

    .button.google>img {
      height: 25px;
      width: 25px;
      position: relative;
      top: -1px;
      right: 15px;
    }

    p {
      font-size: 25px;
      margin: .5rem;

    }

    h3 {
      color: #C5CCCD;
      font-weight: 500;
      margin: .5rem;

    }


    form.input-box {
      border: 2px solid lightgray;
      padding: 1rem;
      border-radius: 1rem;
      background: #FFFFFF;
      transition: .2s all;
    }

    form.input-box:focus-within {
      border: 2px solid silver;
    }


    input {
      border: none;
      background: transparent;
      padding: .2rem .1rem;
      width: 95%;
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      font-size: 1rem;
      transition: .2s all;
    }

    input:not(:last-child) {
      border-bottom: 2px solid #ECEEEE;
    }

    input::placeholder {
      color: #9DA8AB;
    }

    input:focus {
      outline: none;
      color: #08242A;
      padding: .8rem .1rem;
    }

    input:focus::placeholder {
      color: #758589;
    }
  </style>

</head>
<body>

  <div id="loginpage" class="container">

    <div class="shadow p-3 mb-5 bg-white rounded">
      <p>Login</p>

      <br>
      <form class="w-100 mv3 input-box">
        <input type="text" id="username" placeholder="Email">
        <input type="password" id="password" placeholder="Password">
      </form>

      <br>
      <button onclick="emailLogin()" class="button email flex justify-center align-center">Login with email</button>

      <h3 class="f2 mv0" style="font-size:20px;">or</h3>

      <button onclick="googleLogin()" class="button google flex justify-center align-center"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" class="flex self-center pr2">
        Login with Google</button>

    </div>
  </div>


  <script>
    document.addEventListener("DOMContentLoaded", event => {
      const app = firebase.app();

      firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
          window.location = '/home';

        } else {
          $('#loginpage').css("display","block")
        }

      });
    })


    function emailSignup(){
      username = document.getElementById("username").value
      password = document.getElementById("password").value
      firebase.auth().createUserWithEmailAndPassword(username, password).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
      console.log(errorCode)
      console.log(errorMessage)
    });
    }

    function emailLogin(){
      username = document.getElementById("username").value
      password = document.getElementById("password").value
      firebase.auth().signInWithEmailAndPassword(username, password).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
      console.log(errorCode)
      console.log(errorMessage)
      if(errorCode == "auth/user-not-found"){
        emailSignup()
      }
    });
    }


    function googleLogin() {
      const provider = new firebase.auth.GoogleAuthProvider();

      firebase.auth().signInWithPopup(provider)

        .then(result => {
          const user = result.user;
        })
    }
  </script>
</body>

</html>