Untitled

UsernameScreen.tvml:

<?xml version="1.0" encoding="UTF-8" ?>
<document
  data-view="LoginScreen"
  data-next="templates/PasswordScreen.tvml">
  <head>
    <style>
      .ass-button {
        margin: 0 0 10px 0;
      }
    </style>
  </head>
  <formTemplate>
    <banner>
      <img src="${CONFIG.configURL}/${CONFIG.splashScreen}"
    width="1920" height="1080" />
      <description>Enter email</description>
    </banner>
    <textField id="username">Username</textField>
    <footer >
      <button class="ass-button" id="next">
        <text>Next</text>
      </button>
      <button class="ass-button" id="back">
        <text>Back</text>
      </button>
    </footer>
  </formTemplate>
</document>

PasswordScreen.tvml
<?xml version="1.0" encoding="UTF-8" ?>
<document
  data-view="PasswordScreen">
  <head>
    <style>
      .ass-button {
        margin: 0 0 10px 0;
      }
    </style>
  </head>
  <formTemplate>
    <banner>
      <img src="${CONFIG.configURL}/${CONFIG.splashScreen}"
    width="1920" height="1080" />
      <description>Enter password</description>
    </banner>
    <textField name="password" secure="true">******</textField>
    <footer>
      <button class="ass-button" id="login">
        <text>Login</text>
      </button>
      <button class="ass-button" id="back">
        <text>Back</text>
      </button>
    </footer>
  </formTemplate>
</document>

LoginScreen.js
ViewManager.registerView("LoginScreen", function(doc) {

  var document = doc.ownerDocument;
  var nextScreen = doc.firstChild.getAttribute("data-next");
  var backScreen = "templates/index.tvml"

  var userField = document.getElementsByTagName('textField').item(0);
  var userKey = userField.getFeature("Keyboard");

  var username = '';

  userKey.onTextChange = function(event) {
   User.username = userKey.text;
  }

  var loader = new TemplateLoader();

  function nextFunction(event) {

    if (User.username) {
      loader.load(nextScreen, displayNextPage);
    } else {
      console.log("username???")
    }

  }


  function backFunction(event) {

    loader.load(backScreen, displayNextPage);
  }

  function displayNextPage(newDoc) {

    if (newDoc) {
      nextDoc = newDoc;
    }

    if ( nextDoc) {
      navigationDocument.replaceDocument(nextDoc, doc);
    }

  }

  document
    .getElementById('next')
    .addEventListener('select', nextFunction);

  document
    .getElementById('back')
    .addEventListener('select', backFunction);

});


PasswordScreen.js
ViewManager.registerView("PasswordScreen", function(doc) {
  //todo : setting constants
  var urlLogin = BASE + '/apiserver/user-login';


  var document = doc.ownerDocument;
  var loader = new TemplateLoader();
  var xhr = new XMLHttpRequest();

  var invCred = 'templates/InvalidCredentialsAlert.tvml';
  var passField = document.getElementsByTagName('textField').item(0);
  var passKey = passField.getFeature("Keyboard");

  var backScreen = "templates/UsernameScreen.tvml"

  passKey.onTextChange = function(event) {
    User.password = passKey.text;
  }

  xhr.open("POST", urlLogin);

  xhr.onload = function() {

    var response = JSON.parse(xhr.response);
    if (response.status === false) {
      Login = "Login";
      //CAN BE A POPUP!!!
      loader.load(invCred, displayNextPage);
    } else {

      User.premium =  response.premium;
      User.roles = response.user.roles;
    }
  }

  function displayNextPage(newDoc) {

    if (newDoc) {
      nextDoc = newDoc;
    }

    if ( nextDoc) {
      navigationDocument.replaceDocument(nextDoc, doc);
    }

  }

  function backFunction(event) {

    loader.load(backScreen, displayNextPage);
  }


  document
    .getElementById('login')
    .addEventListener('select', function(event) {

      if (User.password) {

        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send("username="+User.username+"&password="+User.password+"&appIdentifier="+ User.appIdentifier);

      } else {
        console.log("PASSWORD???")
      }

    });

  document
    .getElementById('back')
    .addEventListener('select', backFunction);


});