Updating the Screen rule

Next we will update our rule with the template and the actions:

apply: {
  fields: [
  { name: 'shopsLastUpdate', row: 18, col: 29, len: 8 },
  { name: 'accountsLastUpdate', row: 18, col: 62, len: 8 },
  { name: 'username', row: 19, col: 67, len: 6 },
  { name: 'password', row: 20, col: 67, len: 6 }
  { name: 'newPassword', row: 21, col: 67, len: 6 }
  ],
  render: {
    view: {
      template: '#login'
    }
  },
  actions: {
    main: function (hs) { hs.enter(); },
    exit: function (hs) { hs.pf1(); }
  }
}

Alternatively, we can save the HTML template into a file and link it:

apply: {
  ...
  ...
  render: {
    view: {
      template: 'login.html'
    }
  },
  ...
  ...
}

Here is the JSFiddle version to test this step: