[Project] Updated web dependencies

(cherry picked from commit 6248892979)

.gitignore

@@ -1,3 +1,4 @@
 # Created by .ignore support plugin (hsz.mobi)
 .idea/
 bower_components/
+*.iml

bower.json

@@ -1,8 +1,8 @@
 {
   "name": "strolch-wc-auth",
   "description": "Strolch WebComponent Auth",
-  "version": "0.4.0",
-  "authors": "Robert von Burg",
+  "version": "0.9.12",
+  "authors": ["Robert von Burg"],
   "keywords": [
     "strolch",
     "auth"
@@ -11,20 +11,25 @@
   "private": true,
   "repository": {
     "type": "git",
-    "url": "git@github.com:4treesCH/strolch-wc-auth.git"
+    "url": "git@github.com:strolch-li/strolch-wc-auth.git"
   },
-  "license": "https://github.com/4treesCH/strolch-wc-auth/blob/master/LICENSE",
-  "homepage": "https://github.com/4treesCH/strolch-wc-auth",
+  "license": "https://github.com/strolch-li/strolch-wc-auth/blob/master/LICENSE",
+  "homepage": "https://github.com/strolch-li/strolch-wc-auth",
   "ignore": [],
   "dependencies": {
-    "strolchjs": "4treesCH/strolchjs#^0.1.3",
-    "paper-material": "PolymerElements/paper-material#^1.0.6",
-    "paper-card": "PolymerElements/paper-card#^1.1.2",
+    "strolchjs": "4treesCH/strolchjs#^0.5.3",
+    "strolch-wc-localize-behavior": "strolch-li/strolch-wc-localize-behavior#^1.1.17",
+
+    "polymer": "Polymer/polymer#^1.12.0",
+
+    "iron-ajax": "PolymerElements/iron-ajax#^1.4.4",
+    "iron-a11y-keys": "PolymerElements/iron-a11y-keys#^1.0.9",
+
+    "paper-material": "PolymerElements/paper-material#^1.0.7",
+    "paper-card": "PolymerElements/paper-card#^1.1.6",
     "paper-dialog": "PolymerElements/paper-dialog#^1.1.0",
-    "paper-button": "PolymerElements/paper-button#^1.0.13",
-    "iron-a11y-keys": "PolymerElements/iron-a11y-keys#^1.0.6",
-    "paper-input": "PolymerElements/paper-input#^1.1.17",
-    "iron-ajax": "PolymerElements/iron-ajax#^1.4.3",
-    "strolch-localize-behavior": "strolch-localize-behavior#^1.0.0"
+    "paper-button": "PolymerElements/paper-button#^1.0.15",
+    "paper-input": "PolymerElements/paper-input#^1.2.1",
+    "paper-styles": "PolymerElements/paper-styles#^1.3.1"
   }
 }

locales.json

@@ -7,15 +7,39 @@
     "reset": "Reset",
     "passwordReset": "Password Reset",
     "passwordResetDesc": "To reset your password, enter your username",
+    "passwordChangeRequest": "A password change has been requested",
     "passwordResetInitiated": "The reset has been initiated for your account. Please check your e-mail inbox as there should be an e-mail with a reset code. The code in the e-mail will be valid for one hour.",
     "passwordResetCode": "Please enter the code here:",
     "passwordResetNew": "Type in a new password and please repeat it",
     "passwordResetDone": "Your password has been reset. Please login by navigating to the login dialog.",
     "code": "Code",
     "repeat": "Repeat",
-    "send": "Send"
+    "send": "Send",
+    "close": "Close",
+    "logoutFailed": "Logout failed",
+    "authenticationFailed": "Authentication failed",
+    "resetFailed": "Reset failed",
+    "passwordsDontMatch": "Passwords don't match",
+    "cancel": "Cancel",
+    "missingInput": "Missing input",
+    "usernameEmpty": "Username can not be empty",
+    "passwordEmpty": "Password can not be empty",
+    "production": "Production",
+    "testing": "Testing",
+    "staging": "Staging",
+    "development": "Development",
+    "keepAlive": "Stay logged in"
   },
   "de": {
+    "keepAlive": "Eingeloggt bleiben",
+    "production": "Produktion",
+    "testing": "Testing",
+    "staging": "Staging",
+    "development": "Entwicklung",
+    "missingInput": "Fehlende Eingabe",
+    "usernameEmpty": "Benutzername kann nicht leer sein",
+    "passwordEmpty": "Passwort kann nicht leer sein",
+    "cancel": "Abbrechen",
     "pleaseLogin": "Melden Sie sich bei {appTitle} an",
     "username": "Nutzername",
     "password": "Passwort",
@@ -23,12 +47,18 @@
     "reset": "Zurücksetzen",
     "passwordReset": "Passwort zurücksetzen",
     "passwordResetDesc": "Geben Sie Ihren Nutzernamen ein, um ihr Passwort zurückzusetzen",
+    "passwordChangeRequest": "Das Passwort muss geändert werden",
     "passwordResetInitiated": "Der Passwort-Reset wurde eingeleitet. Bitte überprüfen Sie ihren E-Mail Eingang, dieser sollte nun eine E-Mail mit dem Bestätigungs-Code enthalten. Dieser ist für eine Stunde gültig.",
     "passwordResetCode": "Bitte geben Sie den Code hier ein:",
     "passwordResetNew": "Geben Sie ein neues Passwort ein und wiederholen Sie es",
     "passwordResetDone": "Ihr Passwort wurde zurückgesetzt. Bitte loggen Sie sich im Login-Dialog ein.",
     "code": "Code",
     "repeat": "Wiederholen",
-    "send": "Absenden"
+    "send": "Absenden",
+    "close": "Schliessen",
+    "logoutFailed": "Ausloggen fehlgeschlagen",
+    "authenticationFailed": "Authentifizierung fehlgeschlagen",
+    "resetFailed": "Zurücksetzung fehlgeschlagen",
+    "passwordsDontMatch": "Passwörter sind nicht gleich"
   }
 }

strolch-wc-auth.html

@@ -1,13 +1,16 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../polymer/polymer.html">
 
-<link rel="import" href="../../bower_components/paper-material/paper-material.html">
-<link rel="import" href="../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../bower_components/paper-input/paper-input.html">
-<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
-<link rel="import" href="../../bower_components/paper-button/paper-button.html">
-<link rel="import" href="../../bower_components/iron-a11y-keys/iron-a11y-keys.html">
-<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
-<link rel="import" href="../../bower_components/strolch-localize-behavior/strolch-localize-behavior.html">
+<link rel="import" href="../paper-material/paper-material.html">
+<link rel="import" href="../paper-card/paper-card.html">
+<link rel="import" href="../paper-checkbox/paper-checkbox.html">
+<link rel="import" href="../paper-input/paper-input.html">
+<link rel="import" href="../paper-dialog/paper-dialog.html">
+<link rel="import" href="../paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../paper-listbox/paper-listbox.html">
+<link rel="import" href="../paper-button/paper-button.html">
+<link rel="import" href="../iron-a11y-keys/iron-a11y-keys.html">
+<link rel="import" href="../iron-ajax/iron-ajax.html">
+<link rel="import" href="../strolch-wc-localize-behavior/strolch-wc-localize-behavior.html">
 
 <dom-module id="strolch-wc-auth">
 
@@ -18,6 +21,8 @@
             :host {
                 display: block;
                 min-height: 100%;
+
+                --input-line-height: 24px;
             }
 
             .container {
@@ -25,7 +30,7 @@
             }
 
             .centered {
-                width: 300px;
+                width: 400px;
                 margin-left: auto;
                 margin-right: auto;
                 margin-top: 3rem;
@@ -36,7 +41,19 @@
             }
 
             .card-actions {
-                text-align: end;
+                display: flex;
+                justify-content: space-between
+            }
+
+            paper-input {
+                --paper-input-container-input: {
+                    height: var(--input-line-height);
+                    line-height: var(--input-line-height);
+                };
+            }
+
+            #languageDlg paper-listbox {
+                margin: 0;
             }
 
         </style>
@@ -45,108 +62,155 @@
 
             <div id="authForm" class="centered">
                 <iron-a11y-keys id="a11y" keys="enter" on-keys-pressed="_submitForm"></iron-a11y-keys>
-                <paper-card heading="{{localize('login')}}">
+                <paper-card heading="[[localize('login')]]">
                     <div class="card-content">
-                        <p>{{localize('pleaseLogin', 'appTitle', appTitle)}}</p>
-                        <paper-input id="username"
-                                     bind-value="{{username}}"
-                                     label="{{localize('username')}}"
+                        <p>[[localize('pleaseLogin', 'appTitle', appTitle)]]</p>
+                        <paper-input id="usernameInput"
+                                     value="{{username}}"
+                                     label="[[localize('username')]]"
                                      required
                                      autofocus="true"
                                      auto-validate></paper-input>
 
-                        <paper-input id="password"
-                                     bind-value="{{password}}"
-                                     label="{{localize('password')}}"
+                        <paper-input id="passwordInput"
+                                     value="{{password}}"
+                                     label="[[localize('password')]]"
                                      required
                                      type="password"
+                                     on-focus="onFocus"
                                      auto-validate></paper-input>
+
+                        <template is="dom-if" if="[[showKeepAlive]]">
+                            <paper-checkbox checked="{{keepAlive}}">[[localize('keepAlive')]]</paper-checkbox>
+                        </template>
+
+                        <template is="dom-if" if="[[showVersion]]">
+                            <template is="dom-if" if="[[showAppVersion]]">
+                                <p>[[appName]] [[appVersion]] @ [[_getEnv(environment)]]</p>
+                            </template>
+                            <template is="dom-if" if="[[showAppEnvironment]]">
+                                <p>[[appName]] @ [[_getEnv(environment)]]</p>
+                            </template>
+                        </template>
+
                     </div>
                     <div class="card-actions">
-                        <paper-button on-tap="_showResetForm">{{localize('reset')}}</paper-button>
-                        <paper-button on-tap="_submitForm">{{localize('login')}}</paper-button>
+                        <div>
+                            <paper-icon-button icon="icons:language" on-tap="showLanguages"></paper-icon-button>
+                            <paper-dialog id="languageDlg" no-overlap horizontal-align="left" vertical-align="top"
+                                          class="aligned-dialog">
+                                <paper-listbox class="dropdown-content" attr-for-selected="value"
+                                               selected="{{currentLanguage}}">
+                                    <template is="dom-repeat" items="[[languages]]" as="language">
+                                        <paper-item value="[[language.locale]]" on-tap="languageSelected">
+                                            [[language.name]]
+                                        </paper-item>
+                                    </template>
+                                </paper-listbox>
+                            </paper-dialog>
+                        </div>
+                        <div>
+                            <paper-button on-tap="_showResetForm">[[localize('reset')]]</paper-button>
+                            <paper-button on-tap="_submitForm">[[localize('login')]]</paper-button>
+                        </div>
                     </div>
                 </paper-card>
             </div>
 
             <div id="initiateResetForm" class="centered" hidden>
                 <iron-a11y-keys id="a11y" keys="enter" on-keys-pressed="_initiateReset"></iron-a11y-keys>
-                <paper-card heading="{{localize('passwordReset')}}">
+                <paper-card heading="[[localize('passwordReset')]]">
                     <div class="card-content">
-                        <p>{{localize('passwordResetDesc')}}</p>
-                        <paper-input id="usernameReset"
-                                     bind-value="{{username}}"
-                                     label="{{localize('username')}}"
+                        <p>[[localize('passwordResetDesc')]]</p>
+                        <paper-input id="usernameResetInput"
+                                     value="{{username}}"
+                                     label="[[localize('username')]]"
                                      required
                                      autofocus="true"
                                      auto-validate></paper-input>
                     </div>
                     <div class="card-actions">
-                        <paper-button on-tap="_initiateReset">{{localize('reset')}}</paper-button>
+                        <paper-button on-tap="_cancelReset">[[localize('cancel')]]</paper-button>
+                        <paper-button on-tap="_initiateReset">[[localize('reset')]]</paper-button>
                     </div>
                 </paper-card>
             </div>
 
             <div id="resetInitiated" class="centered" hidden>
                 <iron-a11y-keys id="a11y" keys="enter" on-keys-pressed="_validateChallenge"></iron-a11y-keys>
-                <paper-card heading="{{localize('passwordReset')}}">
+                <paper-card heading="[[localize('passwordReset')]]">
                     <div class="card-content">
-                        <p>{{localize('passwordResetInitiated')}}</p>
-                        <p>{{localize('passwordResetCode')}}</p>
-                        <paper-input id="code"
+                        <p>[[localize('passwordResetInitiated')]]</p>
+                        <p>[[localize('passwordResetCode')]]</p>
+                        <paper-input id="codeInput"
                                      bind-value="{{code}}"
-                                     label="{{localize('code')}}"
+                                     label="[[localize('code')]]"
                                      required
                                      autofocus="true"
                                      auto-validate></paper-input>
                     </div>
                     <div class="card-actions">
-                        <paper-button on-tap="_validateChallenge">{{localize('send')}}</paper-button>
+                        <paper-button on-tap="_validateChallenge">[[localize('send')]]</paper-button>
                     </div>
                 </paper-card>
             </div>
 
             <div id="resetForm" class="centered" hidden>
                 <iron-a11y-keys id="a11y" keys="enter" on-keys-pressed="_doReset"></iron-a11y-keys>
-                <paper-card heading="{{localize('passwordReset')}}">
+                <paper-card heading="[[localize('passwordReset')]]">
                     <div class="card-content">
-                        <p>{{localize('passwordResetNew')}}</p>
-                        <paper-input id="password1"
+                        <template is="dom-if" if="[[isPasswordChangeRequested]]">
+                            <p>[[localize('passwordChangeRequest')]]</p>
+                        </template>
+                        <template is="dom-if" if="[[!isPasswordChangeRequested]]">
+                            <p>[[localize('passwordResetNew')]]</p>
+                        </template>
+                        <paper-input id="password1Input"
                                      bind-value="{{password1}}"
-                                     label="{{localize('password')}}"
+                                     label="[[localize('password')]]"
                                      required
                                      type="password"
+                                     on-focus="onFocus"
                                      auto-validate></paper-input>
-                        <paper-input id="password2"
+                        <paper-input id="password2Input"
                                      bind-value="{{password2}}"
-                                     label="{{localize('repeat')}}"
+                                     label="[[localize('repeat')]]"
                                      required
                                      type="password"
+                                     on-focus="onFocus"
                                      auto-validate></paper-input>
                     </div>
                     <div class="card-actions">
-                        <paper-button on-tap="_doReset">{{localize('reset')}}</paper-button>
+                        <paper-button on-tap="_doReset">[[localize('reset')]]</paper-button>
                     </div>
                 </paper-card>
             </div>
 
             <div id="passwordResetDone" class="centered" hidden>
                 <iron-a11y-keys id="a11y" keys="enter" on-keys-pressed="_toLogin"></iron-a11y-keys>
-                <paper-card heading="{{localize('passwordReset')}}">
+                <paper-card heading="[[localize('passwordReset')]]">
                     <div class="card-content">
-                        <p>{{localize('passwordResetDone')}}</p>
+                        <p>[[localize('passwordResetDone')]]</p>
                     </div>
                     <div class="card-actions">
-                        <paper-button on-tap="_showLoginForm">{{localize('login')}}</paper-button>
+                        <paper-button id="backToLoginBtn" on-tap="_showLoginForm">[[localize('login')]]</paper-button>
                     </div>
                 </paper-card>
             </div>
 
         </div>
 
+        <paper-dialog id="dlg" modal on-iron-overlay-closed="onCloseDlg">
+            <h2>[[dlgTitle]]</h2>
+            <p>[[dlgText]]</p>
+            <div class="buttons">
+                <paper-button dialog-confirm autofocus>[[localize('close')]]</paper-button>
+            </div>
+        </paper-dialog>
+
         <iron-ajax id="ajaxAuthCheck"
                    handle-as="json"
-                   method="HEAD"
+                   method="GET"
                    on-response="sessionValidated"
                    on-error="sessionInvalid"></iron-ajax>
         <iron-ajax id="ajaxAuth"
@@ -155,7 +219,20 @@
                    method="POST"
                    on-response="_ajaxResponse"
                    on-error="_handleAjaxError"></iron-ajax>
-
+        <iron-ajax id="ajaxGetVersion"
+                   url="[[basePath]]rest/strolch/version"
+                   content-type="application/json"
+                   handle-as="json"
+                   method="GET"
+                   on-response="onGetVersionResponse"
+                   on-error="onGetVersionError"></iron-ajax>
+        <iron-ajax id="ajaxGetSupportedLanguages"
+                   url="[[basePath]]rest/strolch/languages/supported"
+                   content-type="application/json"
+                   handle-as="json"
+                   method="GET"
+                   on-response="onGetSupportedLanguagesResponse"
+                   on-error="onGetSupportedLanguagesError"></iron-ajax>
     </template>
 
     <script>
@@ -169,24 +246,61 @@
             ],
 
             properties: {
-                app: {
-                    type: Object
-                },
                 basePath: {
+                    type: String,
+                    value: './'
+                },
+                localesPath: {
+                    type: String,
+                    value: './locales.json'
+                },
+                currentLanguage: {
                     type: String,
                     value: function () {
-                        return './';
+                        return Strolch.getUserLocale();
                     }
                 },
+                languages: {
+                    type: Array,
+                    value: []
+                },
                 appTitle: {
                     type: String
                 },
+                showKeepAlive: {
+                    type: Boolean,
+                    value: false
+                },
+                showVersion: {
+                    type: Boolean,
+                    value: false
+                },
+                showAppVersion: {
+                    type: Boolean,
+                    value: false
+                },
+                showAppEnvironment: {
+                    type: Boolean,
+                    value: false
+                },
+                appVersion: {
+                    type: String,
+                    value: null
+                },
+                environment: {
+                    type: String,
+                    value: null
+                },
                 username: {
                     type: String
                 },
                 password: {
                     type: String
                 },
+                keepAlive: {
+                    type: Boolean,
+                    value: false
+                },
                 password1: {
                     type: String
                 },
@@ -196,25 +310,61 @@
                 code: {
                     type: String
                 },
-                dlgTitle : {
-                    type:String
+                dlgTitle: {
+                    type: String
+                },
+                isPasswordChangeRequested: {
+                    type: Boolean,
+                    value: false
                 }
             },
 
+            computeShowAppVersion: function (appVersion, environment) {
+                return appVersion != null && environment != null;
+            },
+            computeShowAppEnvironment: function (appVersion, environment) {
+                return appVersion == null && environment != null;
+            },
+            arrayEmpty: function (arr) {
+                return arr == null || arr.length === 0;
+            },
+
             ready: function () {
                 // do nothing
             },
 
-            attached: function () {
-                // this component has its own locales resources to load
-                this.loadResources(this.resolveUrl("./locales.json"));
+            onFocus: function (evt) {
+                evt.target.$.input.select();
+            },
 
-                // default the language to english, if there is none given by the app
-                if(!this.language) this.language = "en";
+            onCloseDlg: function (evt) {
+                this.$.passwordInput.inputElement.select();
+            },
+
+            showLanguages: function (e) {
+                this.debounce('open-lang-dlg', function () {
+                    var dlg = this.$$('#languageDlg');
+                    dlg.positionTarget = e.target;
+                    dlg.open();
+                });
+
+                // do not bubble the tap event to the wrapping element
+                e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);
+            },
+            languageSelected: function (e) {
+                var language = e.model.language;
+                console.log(language);
+                Strolch.setUserLocale(language.locale);
+                sessionStorage.setItem("languageOverride", language.locale);
+                window.location.reload();
             },
 
             reload: function () {
 
+                if (this.showVersion)
+                    this.$.ajaxGetVersion.generateRequest();
+                this.$.ajaxGetSupportedLanguages.generateRequest();
+
                 this.username = '';
                 this.password = '';
                 this.password1 = '';
@@ -225,16 +375,83 @@
                 this.$.authForm.hidden = false;
 
                 if (Strolch.hasAuthToken()) {
-                    this.$.ajaxAuthCheck.url = this.basePath + 'rest/strolch/authentication/' + localStorage.authToken;
+                    this.$.ajaxAuthCheck.url = this.basePath + 'rest/strolch/authentication/' + Strolch.getCookie("strolch.authorization");
                     this.$.ajaxAuthCheck.generateRequest();
                     console.log("Validating session...");
                 }
+
+                this.async(function () {
+                    this.$.usernameInput.focus();
+                }, 100);
             },
 
-            sessionValidated: function () {
+            sessionValidated: function (e) {
                 console.log("Session validated.");
+                var userConfig = e.detail.response;
+                Strolch.setUserConfig(userConfig);
                 Strolch.sessionVerified = true;
-                this.app.sessionValid();
+                this.fire('strolch-session-valid', {
+                    sessionVerified: true
+                });
+
+                if (userConfig.keepAlive && userConfig.refreshAllowed) {
+                    this.handleKeepAlive(userConfig);
+                }
+            },
+            handleKeepAlive: function (userConfig) {
+
+                console.log("Checking keep alive and Session TTL...");
+
+                var expiry = new Date(Strolch.getCookie("strolch.authorization.expirationDate"));
+                var now = new Date();
+                var diff = expiry.getTime() - now.getTime();
+                var expiryMin = Math.floor(diff / 1000 / 60);
+
+                var keepAliveMinutes = Number.parseInt(userConfig.keepAliveMinutes);
+                var keepAliveDays = keepAliveMinutes / 60 / 24;
+                var delayMin = 14;
+
+                if (keepAliveMinutes > 1440) {
+                    // more than a day
+
+                    if (expiryMin < 1440) {
+                        // expires today
+
+                        // refresh now
+                        console.log("Keep alive is " + keepAliveDays + " days and expiring today. Refreshing...");
+                        this.refreshSession();
+
+                    } else {
+                        // check again in delayMin min
+                        console.log("Keep alive is " + keepAliveDays + " days and expiring in the future. Delaying refresh for " + delayMin + "m...");
+                        this.async(function () {
+                            this.handleKeepAlive(Strolch.getUserConfig());
+                        }, delayMin * 60 * 1000);
+                    }
+                } else if (keepAliveMinutes < 15) {
+
+                    console.error("The keepAliveMinutes is < 15minutes! Server is badly configured, ignoring!");
+
+                } else {
+                    // less than a day
+
+                    if (expiryMin > 15) {
+                        // more than 15 min
+
+                        // check again in delayMin
+                        console.log("Keep alive is " + keepAliveMinutes + " minutes and expiring in " + expiryMin + "m. Delaying refresh for " + delayMin + "m...");
+                        setTimeout(function () {
+                            this.handleKeepAlive(Strolch.getUserConfig());
+                        }.bind(this), delayMin * 60 * 1000);
+
+                    } else {
+                        // less than 15 min
+
+                        // refresh now
+                        console.log("Keep alive is " + keepAliveMinutes + " minutes and expiring in " + expiryMin + "m. Refreshing...");
+                        this.refreshSession();
+                    }
+                }
             },
             sessionInvalid: function () {
                 console.log("Session invalid.");
@@ -246,47 +463,94 @@
                 console.log('No response handler defined!');
             },
 
-            _handleAjaxError: function (data) {
+            _handleAjaxError: function (e) {
                 var dlgText;
-                if (data.detail.request.response) {
-                    dlgText = data.detail.request.response.msg;
+                if (e.detail.request.response) {
+                    dlgText = e.detail.request.response.msg;
                 } else {
-                    dlgText = data.detail.error;
+                    dlgText = e.detail.error;
                 }
 
-                this.app.showError(this.dlgTitle, dlgText);
+                this.showError(this.dlgTitle, dlgText);
             },
 
             logout: function () {
                 console.log('Logging out...');
 
-                this._ajaxResponse = function (data) {
+                this._ajaxResponse = function (e) {
                     console.log('Logged out.');
                     Strolch.clearStorageData();
                 };
-                this.dlgTitle = "Logout failed";
+                this.dlgTitle = this.localize('logoutFailed');
                 this.$.ajaxAuth.url = this.basePath + 'rest/strolch/authentication/' + Strolch.getAuthToken();
                 this.$.ajaxAuth.method = 'DELETE';
                 this.$.ajaxAuth.generateRequest();
             },
 
+            refreshSession: function () {
+                console.log("Refreshing session...");
+
+                if (Strolch.isEmptyString(Strolch.getAuthToken())) {
+                    console.log("Can not refresh session as no auth token available!");
+                    return;
+                }
+
+                this._ajaxResponse = function (e) {
+                    console.log('Refreshed session which was about to expire...');
+                    var data = e.detail.response;
+
+                    var cookieExpiry = new Date(data.authorizationExpiration);
+                    Strolch.setCookie("strolch.authorization", data.authToken, cookieExpiry);
+                    Strolch.setCookie("strolch.authorization.expirationDate", data.authorizationExpiration, cookieExpiry);
+
+                    Strolch.setAuthToken(data.authToken);
+                    Strolch.setUserConfig(data);
+                };
+                this.dlgTitle = this.localize('sessionRefereshFailed');
+                this.$.ajaxAuth.url = this.basePath + 'rest/strolch/authentication/' + Strolch.getAuthToken();
+                this.$.ajaxAuth.method = 'PUT';
+                this.$.ajaxAuth.generateRequest();
+            },
+
             _submitForm: function () {
 
-                if (!this.$.username.validate() || !this.$.password.validate())
+                if (!this.$.usernameInput.validate()) {
+                    this.showError(this.localize('missingInput'), this.localize('usernameEmpty'));
                     return;
+                }
+                if (!this.$.passwordInput.validate()) {
+                    this.showError(this.localize('missingInput'), this.localize('passwordEmpty'));
+                    return;
+                }
 
                 console.log('Authenticating...');
-                this._ajaxResponse = function (data) {
+                this._ajaxResponse = function (e) {
+                    if (e.detail.response.usage === "set-password") {
+                        this.authToken = e.detail.response.authToken;
+                        this.isPasswordChangeRequested = true;
+                        this._hideAll();
+                        this.$.resetForm.hidden = false;
+                        this.$.password1Input.focus();
+                        return;
+                    }
+
                     console.log('Logged in.');
-                    Strolch.setAuthToken(data.detail.response.authToken);
-                    Strolch.setUserConfig(data.detail.response);
+                    Strolch.setAuthToken(e.detail.response.authToken);
+                    Strolch.setUserConfig(e.detail.response);
                     location.reload();
                 };
-                this.dlgTitle = "Authentication failed";
+                this.dlgTitle = this.localize('authenticationFailed');
                 this.$.ajaxAuth.body = {
-                    'username': this.username,
-                    'password': btoa(this.password)
+                    username: this.username,
+                    password: btoa(unescape(encodeURIComponent(this.password))),
+                    keepAlive: this.keepAlive
                 };
+                var languageOverride = sessionStorage.getItem("languageOverride");
+                if (languageOverride != null && languageOverride.length !== 0) {
+                    this.$.ajaxAuth.body.languageOverride = languageOverride;
+                }
+
+                this.password = "";
                 this.$.ajaxAuth.url = this.basePath + 'rest/strolch/authentication';
                 this.$.ajaxAuth.method = 'POST';
                 this.$.ajaxAuth.generateRequest();
@@ -303,90 +567,148 @@
             _showResetForm: function () {
                 this._hideAll();
                 this.$.initiateResetForm.hidden = false;
+                this.$.usernameResetInput.focus();
             },
 
             _showLoginForm: function () {
                 this._hideAll();
                 this.$.authForm.hidden = false;
+                this.$.passwordInput.inputElement.select();
+            },
+
+            _cancelReset: function () {
+                this._hideAll();
+                this.$.authForm.hidden = false;
             },
 
             _initiateReset: function () {
 
-                if (!this.$.usernameReset.validate())
-                    return;
+                if (!this.$.usernameResetInput.validate()) return;
 
                 console.log('Initiating reset...');
 
-                var that = this;
                 this._ajaxResponse = function (data) {
-                    that._hideAll();
-                    that.$.resetInitiated.hidden = false;
-                    that.$.code.focus();
+                    this._hideAll();
+                    this.$.resetInitiated.hidden = false;
+                    this.$.codeInput.focus();
                 };
-                this.dlgTitle = "Reset failed";
+                this.dlgTitle = this.localize('resetFailed');
 
                 this.$.ajaxAuth.url = this.basePath + 'rest/strolch/authentication/challenge';
                 this.$.ajaxAuth.method = 'POST';
                 this.$.ajaxAuth.body = {
-                    'username': this.username,
-                    'usage': 'set-password'
+                    username: this.username,
+                    usage: 'set-password'
                 };
                 this.$.ajaxAuth.generateRequest();
             },
 
             _validateChallenge: function () {
 
-                if (!this.$.code.validate())
-                    return;
+                if (!this.$.codeInput.validate()) return;
 
                 console.log('Validating challenge...');
 
-                var that = this;
                 this._ajaxResponse = function (data) {
-                    that.authToken = data.detail.response.authToken;
-                    that._hideAll();
-                    that.$.resetForm.hidden = false;
-                    that.$.password1.focus();
+                    this.authToken = data.detail.response.authToken;
+                    this._hideAll();
+                    this.$.resetForm.hidden = false;
+                    this.$.password1Input.focus();
                 };
-                this.dlgTitle = "Reset failed";
+                this.dlgTitle = this.localize('resetFailed');
 
                 this.$.ajaxAuth.url = this.basePath + 'rest/strolch/authentication/challenge';
                 this.$.ajaxAuth.method = 'PUT';
                 this.$.ajaxAuth.body = {
-                    'username': this.username,
-                    'challenge': this.code
+                    username: this.username,
+                    challenge: this.code
                 };
                 this.$.ajaxAuth.generateRequest();
             },
 
             _doReset: function () {
 
-                if (!this.$.password1.validate() || !this.$.password2.validate())
-                    return;
+                if (!this.$.password1Input.validate() || !this.$.password2Input.validate()) return;
 
                 if (this.password1 !== this.password2) {
-                    this.$.password1.invalid = true;
-                    this.$.password2.invalid = true;
-                    var dlgTitle = "Reset failed";
-                    var dlgText = 'Passwords do not match.';
-                    this.app.showError(dlgTitle, dlgText);
+                    this.$.password1Input.invalid = true;
+                    this.$.password2Input.invalid = true;
+                    var dlgTitle = this.localize('resetFailed');
+                    var dlgText = this.localize('passwordsDontMatch');
+                    this.showError(dlgTitle, dlgText);
                 }
 
                 console.log('Doing reset...');
 
-                var that = this;
-                this._ajaxResponse = function (data) {
-                    that._hideAll();
-                    that.$.passwordResetDone.hidden = false;
+                this._ajaxResponse = function (e) {
+                    this._hideAll();
+                    this.$.passwordResetDone.hidden = false;
+                    this.$.backToLoginBtn.focus();
                 };
-                this.dlgTitle = "Reset failed";
+                this.dlgTitle = this.localize('resetFailed');
 
                 this.$.ajaxAuth.url = this.basePath + 'rest/strolch/privilege/users/' + this.username + '/password';
+                this.$.ajaxAuth.headers.authorization = this.authToken;
                 this.$.ajaxAuth.method = 'PUT';
                 this.$.ajaxAuth.body = {
-                    'password': btoa(this.password1)
+                    password: btoa(unescape(encodeURIComponent(this.password1)))
                 };
+                this.password = "";
+                this.password1 = "";
+                this.password2 = "";
                 this.$.ajaxAuth.generateRequest();
+            },
+
+            onGetSupportedLanguagesResponse: function (e) {
+                if (e.detail.response != null) {
+                    this.languages = e.detail.response;
+                } else {
+                    this.languages = [];
+                }
+            },
+            onGetSupportedLanguagesError: function (e) {
+                this.languages = [];
+                console.log("Failed to get supported languages: " + e.detail.response);
+            },
+
+            onGetVersionResponse: function (e) {
+                var version = e.detail.response;
+                this.appName = version.agentVersion.agentName;
+                this.appVersion = version.appVersion.artifactVersion;
+                this.environment = version.agentVersion.environment;
+                this.showAppVersion = this.computeShowAppVersion(this.appVersion, this.environment)
+                this.showAppEnvironment = this.computeShowAppEnvironment(this.appVersion, this.environment)
+                Strolch.setAppVersion(version);
+                sessionStorage.setItem("strolchAppVersion", JSON.stringify(version));
+            },
+
+            onGetVersionError: function (e) {
+                var readyState = e.detail.request.xhr.readyState;
+                var status = e.detail.request.xhr.status;
+                console.log("Ignoring get version error due to readyState: " + readyState + " / status: " + status);
+            },
+            _getEnv: function (environment) {
+                console.log("environment=" + environment)
+                if (environment == null)
+                    return "-";
+                if (environment.indexOf('prod') >= 0) {
+                    return this.localize('production');
+                } else if (environment.indexOf('test') >= 0) {
+                    return this.localize('testing');
+                } else if (environment.indexOf('stag') >= 0) {
+                    return this.localize('staging');
+                } else if (environment.indexOf('dev') >= 0) {
+                    return this.localize('development');
+                } else {
+                    return environment;
+                }
+            },
+
+            showError: function (title, text) {
+                this.dlgTitle = title;
+                this.dlgText = text;
+                console.log('ERROR: ' + this.dlgTitle + ': ' + this.dlgText);
+                this.$.dlg.open();
             }
         });