import React, { Component } from 'react';
import logo from '../../logo.svg';
import './login.css';
import $ from 'jquery';

class Login extends Component {

  passwordTest() {
    const password = this.loginPassword.value
    let nonAlpha = false

    //Based off of https://stackoverflow.com/a/25352300 to get char codes
    for (let i = 0; i < password.length; i++) {
      let char = password.charCodeAt(i);
      if (!(char > 47 && char < 58) && // numeric (0-9)
          !(char > 64 && char < 91) && // upper alpha (A-Z)
          !(char > 96 && char < 123)) { // lower alpha (a-z)
        nonAlpha = true
      }
    }

    if ((!nonAlpha) || (password.length <= 10)) {
      $('p.error-password').show()
    } else {
      console.log(password)
      if (password === 'zola#frontend') {
        window.location.pathname = '/listing'
        document.cookie="session=" + this.loginEmail.value;
      } else { $('p.error-password').show() }
    }
  }

  userTest(e) {
    e.preventDefault();
    const email = this.loginEmail.value

    //TODO: Learn regex or copy one of the 100+ regex email validators online.
    if ((email.indexOf('@') === -1) || (email.split('@').length !== 2) || (email.split('@')[1].indexOf('.') === -1) || (email !== 'test@zola.com')) {
      $('p.error-email').show()
    } else {
      this.passwordTest()
    }
  }

// ○ Email: test@zola.com
// ○ Password: zola#frontend
  
  render() {
    return (
      <div className="loginContainer">
        <div className="loginCard">
          <img src={logo} alt="React Logo"/>
          <p className="error error-email">Denied</p>
          <p className="error error-password">Denied</p>
          <p className="error error-match">Denied</p>
          <form action="#" className="loginInputs" onSubmit={this.userTest.bind(this)}>
            <label htmlFor="loginEmail">Email</label>
            <input type="text" name="loginEmail" className="loginEmail"
              ref={(input) => { this.loginEmail = input; }} />
            <label htmlFor="loginPassword">Password</label>
            <input type="password" name="loginPassword" className="loginPassword"
              ref={(input) => { this.loginPassword = input; }}/>
            <button type="submit" className="btn loginBtn">Login</button>
          </form>
        </div>
      </div>
    );
  }
}

export default Login;
