Detalhes de implementação

Para uma customização mais fácil, é detalhado abaixo os detalhes de implementação do aplicativo.

Estrutura

O aplicativo é, de forma resumida, uma página HTML simples.
O aplicativo possui três telas distintas:

Loading: é uma tela de carregamento que o aplicativo utiliza ao efetuar operações em segundo plano.
Iframe: é uma tela com um iframe para que o usuário possa navegar no site.
Login: é uma tela de login que é responsável por autenticar o usuário no portal.

O aplicativo utiliza o AngularJS para controlar seu estado e aplicar os devidos templates. Cada tela mencionada acima é um template de AngularJS na página principal (index.html).
Como uma página HTML simples, o aplicativo está dividido nos seguintes arquivos:

index.html: É a estrutura do HTML do aplicativo.
app.js: Contém a lógica do aplicativo.
styles.scss / styles.css: Contém o estilo CSS do aplicativo. O arquivo styles.scss é compilado no arquivo styles.css.

index.html

A estrutura básica do index.html é: <!DOCTYPE html> <html ng-app="lumUserApp" ng-controller="MainController as mainController"> <head> ... </head> <body>   <script type="text/ng-template" id="loading.html"> ... </script>  <script type="text/ng-template" id="iframe.html"> ...  <iframe src="{{url}}" ng-onload="frameLoaded()"></iframe> ... </script>  <script type="text/ng-template" id="login.html">  <form ng-submit="doLoginUser()" name="loginForm"> ...  <button ng-disabled="isSubmitting">{{Localization.localize(Localization.Messages.STR_OK_BUTTON)}}</button> ... </form> </script>   <div ng-view></div>  ... </body> </html>

Os scripts com type text/ng-template são os templates AngularJS utilizados em cada uma das telas.
O script com id loading.html pertence à tela de carregamento do aplicativo, o com id iframe.html à tela de Iframe e o com id login.html, à tela de login.

Os templates citados são renderizados, de acordo com o fluxo do aplicativo, na div que contém o atributo ng-view.

app.js

A estrutura básica do app.js é a seguinte:
// app variable var app; // exec whole app with angular in context (function (angular) { 'use strict'; /** * App secure storage class. */ function AppSecureStorage(appId) { ... } /** * App storage. */ function AppStorage() { ... } /** * Localization helper object. */ var Localization = ...; var AjaxConfig = ...; function App() { ... return { ... Controllers: { MainController: function ($scope, $route, $routeParams, $location, $http, $timeout) { ... }, ... SetCookiesController: function ($scope, $route, $routeParams, $location, $http) { ... }, ... IframeController: function ($scope, $route, $routeParams, $location) { ... }, AutoLoginController: function ($scope, $route, $routeParams, $location, $http) { ... }, LoginController: function ($scope, $route, $routeParams, $location, $http) { ... } } }; } app = new App(); // config angular angular.module('lumUserApp', ['ngRoute', 'ngOnload']) .config(['$routeProvider', '$locationProvider', '$sceProvider', function ($routeProvider, $locationProvider, $sceProvider) { $sceProvider.enabled(false); $routeProvider ... .when('/setcookies', { templateUrl: 'loading.html', controller: 'SetCookiesController', controllerAs: 'setCookiesController' }) .when('/autologin', { templateUrl: 'loading.html', controller: 'AutoLoginController', controllerAs: 'autoLoginController' }) .when('/login', { templateUrl: 'login.html', controller: 'LoginController', controllerAs: 'loginController' }) .when('/iframe', { templateUrl: 'iframe.html', controller: 'IframeController', controllerAs: 'iframeController' }); }]) .controller('MainController', ['$scope', '$route', '$routeParams', '$location', '$http', '$timeout', app.Controllers.MainController]) .controller('AutoLoginController', ['$scope', '$route', '$routeParams', '$location', '$http', app.Controllers.AutoLoginController]) .controller('LoginController', ['$scope', '$route', '$routeParams', '$location', '$http', app.Controllers.LoginController]) .controller('IframeController', ['$scope', '$route', '$routeParams', '$location', app.Controllers.IframeController]) ... .controller('SetCookiesController', ['$scope', '$route', '$routeParams', '$location', '$http', app.Controllers.SetCookiesController]); })(window.angular);

Nesse script, existem algumas classes e objetos de apoio:

AppSecureStorage: classe que auxilia o acesso à área de armazenamento seguro
AppStorage: classe que auxilia o acesso à área de armazenamento não seguro
Localization: objeto para auxiliar operações de localização
AjaxConfig: objeto que armazena opções de chamadas ajax

Em app.Controllers, são armazenados os controladores AngularJS.
O controlador MainController é responsável pelo processamento inicial.
O controlador AutoLoginController é responsável pelo auto login do usuário.
O controlador LoginController é responsável por controlar o login do usuário (tanto a tela quanto a execução do login).
O controlador IframeController é responsável por controlar a tela de Iframe.