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: