<?php
require_once("../inc/functions.php");
if(isset($_GET["out"])) {
SignOut();
$error = "You have been signed out.";
}
if(!empty($_POST["email"]) && !empty($_POST["password"])) {
$sign = SignIn($_POST["email"], $_POST["password"]);
if($sign) {
header("Location: $url/admin/");
exit;
}
else {
  $error = "Invalid login credentials";
}
}
 ?>
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
  <title>Sign In | Shortner</title>
      <style>
      body {
        background: #2e3e4e;
      }
      h1 {
        display: table;
        margin: 40px auto;
        color: #fff;
        font: 20px Helvetica;
        text-transform: uppercase;
        letter-spacing: 3px;
        text-align: center;
      }
      @media only screen and (max-width: 550px) {
        h1 {
          font: 12px Helvetica;
        }
}
      form {
        display: table;
        margin: 40px auto;
      }
      form label {
        position: relative;
        display: block;
      }
      form label input {
        font: 18px Helvetica, Arial, sans-serif;
        box-sizing: border-box;
        display: block;
        border: none;
        padding: 20px;
        width: 300px;
        margin-bottom: 20px;
        font-size: 18px;
        outline: none;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
      }
      form label input::-webkit-input-placeholder {
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        color: #999;
        font: 18px Helvetica, Arial, sans-serif;
      }
      form label input::-moz-placeholder {
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        color: #999;
        font: 18px Helvetica, Arial, sans-serif;
      }
      form label input:-ms-input-placeholder {
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        color: #999;
        font: 18px Helvetica, Arial, sans-serif;
      }
      form label input::placeholder {
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        color: #999;
        font: 18px Helvetica, Arial, sans-serif;
      }
      form label input:focus, form label input.populated {
        padding-top: 28px;
        padding-bottom: 12px;
      }
      form label input:focus::-webkit-input-placeholder, form label input.populated::-webkit-input-placeholder {
        color: transparent;
      }
      form label input:focus::-moz-placeholder, form label input.populated::-moz-placeholder {
        color: transparent;
      }
      form label input:focus:-ms-input-placeholder, form label input.populated:-ms-input-placeholder {
        color: transparent;
      }
      form label input:focus::placeholder, form label input.populated::placeholder {
        color: transparent;
      }
      form label input:focus + span, form label input.populated + span {
        opacity: 1;
        top: 10px;
      }
      form label span {
        color: #35dc9b;
        font: 13px Helvetica, Arial, sans-serif;
        position: absolute;
        top: 0px;
        left: 20px;
        opacity: 0;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
      }
      form input[type="submit"] {
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        font: 18px Helvetica, Arial, sans-serif;
        border: none;
        background: #4169E1;
        color: #fff;
        padding: 10px 30px;
      }
      form input[type="submit"]:hover {
        background: #4169E1;
      }
      .container {
        margin-top: 30vh;
      }
      .error {
        text-align: center;
        padding: 10px;
        z-index: 99;
        width: 97vw;
        background: #f44250;
        min-height: 30px;
        display: block;
        color: #fff;
        font: 20px Helvetica;
      }
      .text {
        font: 14px Helvetica;
        text-decoration: none;
        color: #000;
        text-align: center;
        margin-top: 10px;
      }
      .input-container {
       width: 300px;
       margin: 5px;
       position: relative;
       border-radius: 5px;
       margin-bottom: 15px;
       display: table;
       clear: both;
     }
      .input-container input {
       width: 100%;
       background-color: #fff;
       font: 18px Helvetica, sans-serif;
       font-size: 18px;
       box-sizing: border-box;
       display: block;
       border: none;
       border-radius: 5px;
       padding: 20px;
       outline: none;
       -webkit-transition: all 0.2s ease-in-out;
       transition: all 0.2s ease-in-out;
     }
     .input-container input::-webkit-input-placeholder {
       -webkit-transition: all 0.2s ease-in-out;
       transition: all 0.2s ease-in-out;
       color: #999;
       font: 18px Helvetica, Arial, sans-serif;
     }
     .input-container input::-moz-placeholder {
       -webkit-transition: all 0.2s ease-in-out;
       transition: all 0.2s ease-in-out;
       color: #999;
       font: 18px Helvetica, Arial, sans-serif;
     }
     .input-container input:-ms-input-placeholder {
       -webkit-transition: all 0.2s ease-in-out;
       transition: all 0.2s ease-in-out;
       color: #999;
       font: 18px Helvetica, Arial, sans-serif;
     }
     .input-container input::placeholder {
       -webkit-transition: all 0.2s ease-in-out;
       transition: all 0.2s ease-in-out;
       color: #999;
       font: 18px Helvetica, Arial, sans-serif;
     }
     .input-container input:focus, .input-container input.populated {
       padding-top: 28px;
       padding-bottom: 12px;
     }
      .input-container input:focus::-webkit-input-placeholder, .input-container input.populated::-webkit-input-placeholder {
       color: transparent;
     }
      .input-container input:focus::-moz-placeholder,  .input-container input.populated::-moz-placeholder {
       color: transparent;
     }
      .input-container input:focus:-ms-input-placeholder,  .input-container input.populated:-ms-input-placeholder {
       color: transparent;
     }
      .input-container input:focus::placeholder,  .input-container input.populated::placeholder {
       color: transparent;
     }
      .input-container input:focus + label,  .input-container input.populated + label {
       opacity: 1;
       top: 10px;
     }
      .input-container label {
       color: #35dc9b;
       font: 13px Helvetica, Arial, sans-serif;
       position: absolute;
       top: 0px;
       left: 20px;
       opacity: 0;
       -webkit-transition: all 0.2s ease-in-out;
       transition: all 0.2s ease-in-out;
     }
     .inputs-straight-align {
       clear: both;
     }
     .inputs-straight-align .input-container{
       float:left;
       clear: none;
     }

     .input-container .invalid {
     border-bottom: 4px solid red;
     }
     .input-container .invalid_symbol:before {
      background: #fff;
      color: red;
      font-size: 20px;
      position: absolute;
      top: 23px;
      right: 20px;
      opacity: 1;
      font-family: FontAwesome;
      content: "\f071";
     }
     .hide_symbol .invalid_symbol {
      display: none;
     }
      </style>
</head>
<body>
  <?php if(isset($error)) : ?>
  <div class="error">
    <?php echo $error; ?>
  </div>
  <?php endif; ?>
  <div class="container">
  <h1>SIGN IN</h1>
<form action="#" method="POST">
  <div class="input-container">
    <input type="email" name="email" placeholder="Email"  required>
    <label>Email</label>
  </div>
  <div class="input-container">
    <input type="password" name="password" placeholder="Password"  required>
    <label>Password</label>
  </div>
  <input type="submit" value="SIGN IN">
</form>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script>
  $(document).ready(function() {
    $('.input-container input').each(function() {
      var input = $(this);
      if (input.val().length) {
        input.addClass('populated');
      } else {
        input.removeClass('populated');
      }
    });
    $('.input-container input').on('change', function() {
      var input = $(this);
      if (input.val().length) {
        input.addClass('populated');
      } else {
        input.removeClass('populated');
      }
    });

    $('select').on('focusout', function() {
      var input = $(this);
      if(input.val() == null) {
      input.addClass("invalid");
      }
      else {
       input.removeClass('invalid');
      }
    });

    $('.input-container input').on('focusout', function() {
      var input = $(this);
      if (input.val().length) {
        var email_verify = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
        if (input.attr('type') == "email")  {
         if(!input.val().match(email_verify)) {
         input.addClass("invalid");
         input.parent().append("<span class='invalid_symbol'></span>");
         input.parent().removeClass("hide_symbol");
         }
         else {
          input.removeClass('invalid');
          input.parent().addClass("hide_symbol");
         }
      }

      else if (input.attr('type') == "url")  {
       if(!isUrlValid(input.val())) {
       input.addClass("invalid");
       input.parent().append("<span class='invalid_symbol'></span>");
       input.parent().removeClass("hide_symbol");
       }
       else {
        input.removeClass('invalid');
        input.parent().addClass("hide_symbol");
       }
    }
    else if (input.attr('type') == "tel")  {
     if (!validatePhone(input.val())) {
     input.addClass("invalid");
     input.parent().append("<span class='invalid_symbol'></span>");
     input.parent().removeClass("hide_symbol");
     }
     else {
      input.removeClass('invalid');
      input.parent().addClass("hide_symbol");
     }
  }


      }
      else {
        input.removeClass('invalid');
        input.parent().addClass("hide_symbol");
      }

    });
  });

  function validatePhone(txtPhone) {
      var filter = /^[0-9-+]+$/;
      if (filter.test(txtPhone) && txtPhone.length >= 4 && txtPhone.length <= 16) {
          return true;
      }
      else {
          return false;
      }
  }

  function isUrlValid(url) {
   if(/(^|\s)((https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)/.test(url)) {
     return true;
   } else {
     return false;
   }
  };
  </script>
</body>
</html>
