<!DOCTYPE html>
<html lang="en"><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Login V1</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <link rel="icon" type="image/png" href="https://colorlib.com/etc/lf/Login_v1/images/icons/favicon.ico">


    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/bootstrap.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/font-awesome.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/animate.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/hamburgers.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/select2.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/util.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/main.css') }}">        
    
    <meta name="robots" content="noindex, follow">

    <script>
      function login() {
          if (check_input_fields("login")==false) {
              return false;
          }
          var email = document.getElementById('login_email').value;
          var password = sha256(document.getElementById('login_pass').value);


          // Sends the post message to the server which will let us update the
          // currently displayed content
          // The rest of this code assumes you are not using a library.
          // It can be made less wordy if you use one.
          var form = document.createElement("form");
          form.setAttribute("method", "post");
          form.setAttribute("action", "login");

          var hiddenField = document.createElement("input");
          hiddenField.setAttribute("type", "hidden");
          hiddenField.setAttribute("name", "src");
          hiddenField.setAttribute("value", "home");
          form.appendChild(hiddenField);
          
          var hiddenField = document.createElement("input");
          hiddenField.setAttribute("type", "hidden");
          hiddenField.setAttribute("name", "action");
          hiddenField.setAttribute("value", "login");
          form.appendChild(hiddenField);

          hiddenField = document.createElement("input");
          hiddenField.setAttribute("type", "hidden");
          hiddenField.setAttribute("name", "email");
          hiddenField.setAttribute("value", email);
          form.appendChild(hiddenField);

          hiddenField = document.createElement("input");
          hiddenField.setAttribute("type", "hidden");
          hiddenField.setAttribute("name", "pass");
          hiddenField.setAttribute("value", password);
          form.appendChild(hiddenField);

          document.body.appendChild(form);
          form.submit();
      }

      function signup() {
          if (check_input_fields("signup")==false) {
              return false;
          }
          var email = document.getElementById('signup_email').value;
          var password = sha256(document.getElementById('signup_pass').value);
          //var username = document.getElementById('signup_username').value;

          // Sends the post message to the server which will let us update the
          // currently displayed content
          // The rest of this code assumes you are not using a library.
          // It can be made less wordy if you use one.
          var form = document.createElement("form");
          form.setAttribute("method", "post");
          form.setAttribute("action", "signup");

          var hiddenField = document.createElement("input");
          hiddenField.setAttribute("type", "hidden");
          hiddenField.setAttribute("name", "action");
          hiddenField.setAttribute("value", "signup");
          form.appendChild(hiddenField);

          hiddenField = document.createElement("input");
          hiddenField.setAttribute("type", "hidden");
          hiddenField.setAttribute("name", "email");
          hiddenField.setAttribute("value", email);
          form.appendChild(hiddenField);

          hiddenField = document.createElement("input");
          hiddenField.setAttribute("type", "hidden");
          hiddenField.setAttribute("name", "pass");
          hiddenField.setAttribute("value", password);
          form.appendChild(hiddenField);

          /* Currently we simply use email as the username
          hiddenField = document.createElement("input");
          hiddenField.setAttribute("type", "hidden");
          hiddenField.setAttribute("name", "username");
          hiddenField.setAttribute("value", username);
          form.appendChild(hiddenField);
           */

          document.body.appendChild(form);
          form.submit();
      }

      // check username for registration
      function validateUsername(str) {
            var error = "";
            var illegalChars = /\W/; // allow letters, numbers, and underscores

            if (str == "") {
                error = "&bull; Please enter Username<br>";
            } else if ((str.length < 5) || (str.length > 15)) {
                error = "&bull; Username must have 5-15 characters<br>";
            } else if (illegalChars.test(str)) {
            error = "&bull; Please enter valid Username. Use only numbers and alphabets<br>";
            } else {
                error = "";
            }
            return error;
        }

      // check all input fields
      function check_input_fields(action) {
          var msg_key = action + "_error";
          if (validateEmail(document.getElementById(action + '_email').value, action) == false) {
              document.getElementById(action + '_error').innerHTML = "Invalid email address";
              return false;
          } else if (validatePassword(document.getElementById(action + '_pass').value, action) == false) {
              //document.getElementById('signup_error').innerHTML = "Invalid email address";
              return false;
          } else if (confirmPassword(action) == false) {
              return false;
          }
          return true;
      }

      // check email for registration
      function validateEmail(email, action) {
          var msg_key = action + "_error";
         if (/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email)) {
             document.getElementById(msg_key).innerHTML = "";
            return true;
          }
         else{
             document.getElementById(msg_key).innerHTML = "Invalid email address";
             return false;
         }
        }

      // Depreciated: event function for email textbox
      function validateEmail_event(e) {
          if (validateEmail(e.value) == false) {
              //alert("You have entered an invalid email address!")
              document.getElementById('signup_error').innerHTML = "Invalid email address";
          }
          else{
              document.getElementById('signup_error').innerHTML = "";
          }
      }

      // check password for registration
    function validatePassword(password, action) {
          var pw = password //document.getElementById("signup_password").value;
          var msg_key = action + "_error";
          //check empty password field
          if(pw == "") {
             document.getElementById(msg_key).innerHTML = "Password cannot be empty";
             return false;
          }

         //minimum password length validation
          if(pw.length < 6) {
             document.getElementById(msg_key).innerHTML = "Password length must be at least 6 characters";
             return false;
          }

        //maximum length of password validation
          if(pw.length > 15) {
             document.getElementById(msg_key).innerHTML = "Password length must not exceed 15 characters";
             return false;
          }

          //if(action == "signup") {
          //    return confirmPassword(action);
          //}

          document.getElementById(msg_key).innerHTML = "";
          return true;
    }

     // check confirmation password
    function confirmPassword(action) {
      if (action == "signup") {
          var msg_key = action + "_error";
          var pw1 = document.getElementById("signup_pass").value;
          var pw2 = document.getElementById("pass_again").value;
          //alert(pw1)
          if (pw1 != pw2) {
              document.getElementById(msg_key).innerHTML = "Password not match";
              return false;
          }
          document.getElementById(msg_key).innerHTML = "";
          return true;
      }
    }

    // Display error message when registration failed

    </script>

    
  </head>
  <body>
    <div class="limiter">
      <div class="container-login100">
        <div class="wrap-login100">
          <div class="login100-pic js-tilt" data-tilt="" style="will-change: transform; transform: perspective(300px) rotateX(0deg) rotateY(0deg);">
            <img src="{{ url_for('static',filename='img-01.webp') }}" alt="IMG">
          </div>
          <form class="login100-form validate-form", id = 'login_form'>
            <span class="login100-form-title">
              {{title}}
            </span>
              <div class="text-center p-t-0">
                  <p style="color:red", id="login_error">{{login_error}}</p>
              </div>
            <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
              <input class="input100" type="text" name="email" id="login_email" placeholder="Email" value = "{{ login_email }}">
              <span class="focus-input100"></span>
              <span class="symbol-input100">
                <i class="fa fa-envelope" aria-hidden="true"></i>
              </span>
            </div>
            <div class="wrap-input100 validate-input" data-validate="Password is required">
              <input class="input100" type="password" name="pass" id="login_pass" placeholder="Password" value = "{{ login_password }}">
              <span class="focus-input100"></span>
              <span class="symbol-input100">
                <i class="fa fa-lock" aria-hidden="true"></i>
              </span>
            </div>
            <div class="container-login100-form-btn">
              <a class="login100-form-btn" onclick="login()" role="buttom" href="#">
                Login
              </a>
            </div>
              <div class="text-center p-t-12">
              <span class="txt1">
                Forgot
              </span>
              <a class="txt2" href="#">
                Username / Password?
              </a>
            </div>
            <div class="text-center p-t-20">
              <a class="txt2" href="#" onclick="document.getElementById('login_form').style.display='inline';document.getElementById('signup_form').style.display='none'">
                Login
                <i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
              </a>
                &nbsp &nbsp &nbsp
                <a class="txt2" href="#" onclick="document.getElementById('login_form').style.display='none';document.getElementById('signup_form').style.display='inline'">
                Create your Account
                <i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
              </a>
            </div>
          </form>

             <form class="login100-form validate-form", id = 'signup_form', style="display:none">
            <span class="login100-form-title">
              {{title}}
            </span>
              <div class="text-center p-t-0">
                  <p style="color:red" id="signup_error">{{signup_error}}</p>
              </div>
            <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
              <input class="input100" type="text" name="email" id="signup_email" placeholder="Email" action = "signup" onblur="validateEmail(this.value, this.getAttribute('action'))" value = "{{ signup_email }}" >
              <span class="focus-input100"></span>
              <span class="symbol-input100">
                <i class="fa fa-envelope" aria-hidden="true"></i>
              </span>
            </div>
             <!-- Simply consider email as the username
             <div class="wrap-input100 validate-input" data-validate="Valid username is required">
              <input class="input100" type="text" name="username" id="signup_username" placeholder="Username" value = {{ signup_username }}>
              <span class="focus-input100"></span>
              <span class="symbol-input100">
                <i class="fa fa-user" aria-hidden="true"></i>
              </span>
            </div>-->
            <div class="wrap-input100 validate-input" data-validate="Password is required">
              <input class="input100" type="password" name="pass" id="signup_pass" placeholder="Password" action = "signup" onblur="validatePassword(this.value, this.getAttribute('action'))" value = "{{ signup_password }}">
              <span class="focus-input100"></span>
              <span class="symbol-input100">
                <i class="fa fa-lock" aria-hidden="true"></i>
              </span>
            </div>
             <div class="wrap-input100 validate-input" data-validate="Password is required">
              <input class="input100" type="password" name="pass" id="pass_again" placeholder="Re-enter password" action = "signup" onblur="confirmPassword(this.getAttribute('action'))">
              <span class="focus-input100"></span>
              <span class="symbol-input100">
                <i class="fa fa-lock" aria-hidden="true"></i>
              </span>
            </div>
            <div class="container-login100-form-btn">
              <a class="login100-form-btn" onclick="signup()" role="buttom" href="#signup">
                Sign up
              </a>
            </div>
             <div class="text-center p-t-12">
              <span class="txt1">
                Forgot
              </span>
              <a class="txt2" href="#">
                Username / Password?
              </a>
            </div>
            <div class="text-center p-t-20">
              <a class="txt2" href="#" onclick="document.getElementById('login_form').style.display='inline';document.getElementById('signup_form').style.display='none'">
                Login
                <i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
                  &nbsp &nbsp &nbsp
              </a>
                <a class="txt2" href="#" onclick="document.getElementById('login_form').style.display='none';document.getElementById('signup_form').style.display='inline'">
                Create your Account
                <i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
              </a>
            </div>
          </form>

        </div>
      </div>
    </div>

    <script src="{{ url_for('static',filename='jquery-3.js') }}"></script>
    <script src="{{ url_for('static',filename='popper.js') }}"></script>
    <script src="{{ url_for('static',filename='bootstrap.js') }}"></script>
    <script src="{{ url_for('static',filename='select2.js') }}"></script>
    <script src="{{ url_for('static',filename='tilt.js') }}"></script>
    <script src="{{ url_for('static',filename='sha256.js') }}"></script>
    
    <script>
      $('.js-tilt').tilt({
	  scale: 1.1
      })
    </script>

    <script async="" src="js"></script>

    <script src="{{ url_for('static',filename='main.js') }}"></script>
    <!-- <script defer="defer" src="beacon.js" data-cf-beacon="{&quot;rayId&quot;:&quot;661ee9948aa12d64&quot;,&quot;token&quot;:&quot;cd0b4b3a733644fc843ef0b185f98241&quot;,&quot;version&quot;:&quot;2021.5.2&quot;,&quot;si&quot;:10}"></script> -->


</body></html>
