From 4b139931ebbf2f4b921ab84f71c4342f8872c243 Mon Sep 17 00:00:00 2001
From: Robert von Burg <eitch@eitchnet.ch>
Date: Thu, 6 Aug 2020 13:00:56 +0200
Subject: [PATCH] [Project] Updated webapp archetype

---
 .../app/src/behaviors/c-compute-behavior.html | 222 +++++-------------
 .../main/webapp/app/src/c-app-behavior.html   |   7 +-
 .../src/main/webapp/app/src/c-app-menu.html   |  20 +-
 .../src/main/webapp/app/src/c-app.html        |  40 +++-
 .../webapp/app/src/styles/c-app-style.html    |  29 +++
 .../main/webapp/app/src/views/c-view404.html  |  20 +-
 .../src/main/webapp/locales.json              |  77 +++++-
 7 files changed, 235 insertions(+), 180 deletions(-)

diff --git a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/behaviors/c-compute-behavior.html b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/behaviors/c-compute-behavior.html
index a461b4815..a98b5d9bb 100644
--- a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/behaviors/c-compute-behavior.html
+++ b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/behaviors/c-compute-behavior.html
@@ -46,142 +46,102 @@
          * Compute functions
          */
         hasMsg: function (value) {
-            return Strolch.isNotEmptyString(value) && value != "-";
+            return Strolch.isNotEmptyString(value) && value !== "-";
         },
 
         isEqual: function (v1, v2) {
-            return v1 === v2;
+            return Strolch.isEqual(v1, v2);
         },
         stringToArray: function (string) {
-            if (string == null || string.length == 0)
-                return [];
-            var a = [];
-            var b = string.split(',');
-            for (var i = 0; i < b.length; i++) {
-                a.push(b[i].trim());
-            }
-            return a;
+            return Strolch.stringToArray(string);
         },
         stringArrayLength: function (string) {
-            if (string == null || string.length == 0)
-                return 0;
-            return string.split(',').length;
+            return Strolch.stringArrayLength(string);
         },
-
         isDefined: function (arg0) {
-            return arg0 != undefined;
+            return Strolch.isDefined(arg0);
         },
         isNull: function (arg0) {
-            return arg0 == undefined || arg0 == null;
+            return Strolch.isNull(arg0);
         },
         isNotNull: function (arg0) {
-            return arg0 != undefined && arg0 != null;
+            return Strolch.isNotNull(arg0);
         },
         isNaN: function (arg0) {
-            return this.stringEmpty(arg0) || isNaN(arg0);
+            return Strolch.isNaN(arg0);
         },
         equal: function (arg0, arg1) {
-            return arg0 == arg1;
+            return Strolch.equal(arg0, arg1);
         },
         notEqual: function (arg0, arg1) {
-            return arg0 != arg1;
+            return Strolch.notEqual(arg0, arg1);
         },
         defined: function (arg0) {
-            return !!arg0;
+            return Strolch.defined(arg0);
         },
         greater: function (arg0, arg1) {
-            return arg0 > arg1;
+            return Strolch.greater(arg0, arg1);
         },
         greaterEqual: function (arg0, arg1) {
-            return arg0 >= arg1;
+            return Strolch.greaterEqual(arg0, arg1);
         },
         lesser: function (arg0, arg1) {
-            return arg0 < arg1;
+            return Strolch.lesser(arg0, arg1);
         },
         lesserEqual: function (arg0, arg1) {
-            return arg0 <= arg1;
+            return Strolch.lesserEqual(arg0, arg1);
         },
         and: function (arg0, arg1) {
-            return !!(arg0 && arg1);
+            return Strolch.and(arg0, arg1);
         },
         or: function (arg0, arg1) {
-            return !!(arg0 || arg1);
+            return Strolch.or(arg0, arg1);
         },
         arrayLength: function (array) {
-            return (array && array.length) ? array.length : 0;
+            return Strolch.arrayLength(array);
         },
         arrayFilled: function (array) {
-            return !!(array && array.length && array.length > 0);
+            return Strolch.arrayFilled(array);
         },
         arraySizeLessThan: function (array, size) {
-            return array != null && array.length < size;
+            return Strolch.arraySizeLessThan(array, size);
         },
         arraySizeGreaterThanOrEq: function (array, size) {
-            return array != null && array.length >= size;
+            return Strolch.arraySizeGreaterThanOrEq(array, size);
         },
         arrayEquals: function (array1, array2) {
-            if (array1 == null && array2 == null)
-                return true;
-            if (array1 == null && array2 != null)
-                return false;
-            if (array2 == null && array1 != null)
-                return false;
-            return (array1.length == array2.length) && array1.every(function (element, index) {
-                return element === array2[index];
-            });
+            return Strolch.arrayEquals(array1, array2);
         },
         add: function (arg0, arg1) {
-            return Number(arg0) + Number(arg1);
+            return Strolch.add(arg0, arg1);
         },
         sub: function (arg0, arg1) {
-            return Number(arg0) - Number(arg1);
+            return Strolch.sub(arg0, arg1);
         },
         round: function (value) {
-            return Math.round(value * 1000) / 1000;
+            return Strolch.round(value);
         },
         stringEmpty: function () {
-            for (var i in arguments) {
-                var arg = arguments[i];
-                if (!arg || arg.length == 0) return true;
-            }
-            return false;
+            return Strolch.stringEmpty(arguments);
         },
         isEmptyString: function (val) {
-            return typeof val == 'undefined' || val == null || val === '';
+            return Strolch.isEmptyString(val);
         },
         isNotEmptyString: function (val) {
-            return !this.isEmptyString(val);
+            return Strolch.isNotEmptyString(val);
         },
 
         isChrome: function () {
-            var isChromium = window.chrome, //
-                winNav = window.navigator, //
-                vendorName = winNav.vendor, //
-                isOpera = winNav.userAgent.indexOf("OPR") > -1, //
-                isIEedge = winNav.userAgent.indexOf("Edge") > -1, //
-                isIOSChrome = winNav.userAgent.match("CriOS");
-
-            if (isIOSChrome) {
-                return true;
-            } else if (isChromium !== null && //
-                typeof isChromium !== "undefined" && //
-                vendorName === "Google Inc." && //
-                isOpera === false && //
-                isIEedge === false) {
-                return true;
-            } else {
-                return false;
-            }
+            return Strolch.isChrome();
         },
         isFirefox: function () {
-            return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+            return Strolch.isFirefox();
         },
         isIE: function () {
-            var isIE = /*@cc_on!@*/false || !!document.documentMode;
-            return isIE;
+            return Strolch.isIE();
         },
         isEdge: function () {
-            return !Susi.Compute.isIE() && !!window.StyleMedia;
+            return Strolch.isEdge();
         },
 
         /*
@@ -193,134 +153,68 @@
 
         // gets the clock time as displayed in the UI
         getTimeString: function (datetime) {
-            var hour = datetime.getHours().toString();
-            var min = datetime.getMinutes().toString();
-
-            hour = hour.length < 2 ? "0" + hour : hour;
-            min = min.length < 2 ? "0" + min : min;
-            return hour + ":" + min;
+            return Strolch.getTimeString(datetime);
         },
 
         // gets the calendar date as displayed in the UI
         getDateString: function (datetime, addCentury) {
-            if (typeof (datetime) == 'string') {
-                datetime = new Date(datetime);
-            }
-
-            var day = (datetime.getDate()).toString();
-            var month = (datetime.getMonth() + 1).toString();
-            var year = (datetime.getFullYear()).toString();
-
-            day = day.length < 2 ? "0" + day : day;
-            month = month.length < 2 ? "0" + month : month;
-            year = addCentury ? year : year.slice(-2);
-            return day + "." + month + "." + year;
+            return Strolch.getDateString(datetime, addCentury);
         },
 
         // gets the date of a date string from getDateString()
         getDate: function (datetimeString) {
-            var splitString = datetimeString.split(".");
-            if (splitString.length != 3) return null;
-
-            var year = Number(splitString[2]);
-            var month = Number(splitString[1]) - 1;
-            var day = Number(splitString[0]);
-            return new Date(year, month, day);
+            return Strolch.getDate(datetimeString);
         },
 
         // gets the clock time of the current time
         getCurrentTimeString: function () {
-            return Susi.Datetime.getTimeString(new Date());
+            return Strolch.getCurrentTimeString();
         },
 
-        toDateTime: function (val) {
-
-            function pad10(i) {
-                if (i < 10) return '0' + i;
-                return i;
-            }
-
-            function pad100(i) {
-                if (i < 10) return '00' + i;
-                if (i < 100) return '0' + i;
-                return i;
-            }
-
-            if (Strolch.isEmptyString(val) || val == '-') return '-';
-            var date = new Date(val);
-
-            var y = date.getFullYear();
-            var m = pad10(date.getMonth() + 1);
-            var d = pad10(date.getDate());
-            var h = pad10(date.getHours());
-            var mi = pad10(date.getMinutes());
-            var s = pad10(date.getSeconds());
-            var mil = pad100(date.getMilliseconds());
-
-            return y + m + d + h + mi + s;
+        toDateTimeNoDelim: function (val) {
+            return Strolch.toDateTimeNoDelim(val);
         },
 
         // gets the calendar date of the current time
         getCurrentDateString: function () {
-            return Susi.Datetime.getDateString(new Date());
+            return Strolch.getDateString(new Date());
         },
 
         clearTime: function (date) {
-            date.setHours(0);
-            date.setMinutes(0);
-            date.setSeconds(0);
-            date.setMilliseconds(0);
-
-            return date;
+            return Strolch.clearTime(date);
         },
         dateToJson: function (date) {
-            date.setTime(date.getTime() - date.getTimezoneOffset() * 60 * 1000);
-            return date.toJSON();
+            return Strolch.dateToJson(date);
         },
 
         // returns true if a datetime has past
         isPast: function (datetime) {
-            return Date.now() > datetime.getTime();
+            return Strolch.isPast(datetime);
         },
 
         // returns true if a datetime is future
         isFuture: function (datetime) {
-            return Date.now() < datetime.getTime();
+            return Strolch.isFuture(datetime);
         },
 
         // turns hours into milliseconds
         hToMs: function (hour) {
-            return hour * 3600000;
+            return Strolch.hToMs(hour);
         },
 
         // turns milliseconds into hours
         msToH: function (milliseconds) {
-            return milliseconds / 3600000;
+            return Strolch.msToH(milliseconds);
         },
 
         getCookie: function (cname) {
-            var name = cname + "=";
-            var decodedCookie = decodeURIComponent(document.cookie);
-            var ca = decodedCookie.split(';');
-            for (var i = 0; i < ca.length; i++) {
-                var c = ca[i];
-                while (c.charAt(0) == ' ') {
-                    c = c.substring(1);
-                }
-                if (c.indexOf(name) == 0) {
-                    return c.substring(name.length, c.length);
-                }
-            }
-            return null;
+            return Strolch.getCookie(cname);
         },
-        setCookie: function (cname, cvalue, validDays) {
-            var d = new Date();
-            d.setTime(d.getTime() + (validDays * 24 * 60 * 60 * 1000));
-            var expires = "expires=" + d.toUTCString();
-            document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+        setCookie: function (cname, cvalue, expiration) {
+            Strolch.setCookie(cname, cvalue, expiration);
         },
         deleteCookie: function (cname) {
-            document.cookie = cname + '=; Path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+            Strolch.deleteCookie(cname);
         },
 
         // fires an event that will change the page of the app
@@ -337,15 +231,13 @@
         // convenience function to get the error message from responses
         onRequestError: function (event) {
             var readyState = event.detail.request.xhr.readyState;
-            var response = event.detail.request.xhr.response;
             var status = event.detail.request.xhr.status;
-            var isError = status && status >= 500;
 
             if (readyState === 4 && status === 0) {
                 this.fire("cx-server-not-available", event);
-            } else if (status == 401) {
+            } else if (status === 401) {
                 this.fire("cx-session-invalid", event);
-            } else if (status == 403) {
+            } else if (status === 403) {
                 this.fire("cx-privilege-denied", event);
             } else {
                 this.requestErrorToMsg(event);
@@ -364,7 +256,7 @@
             else
                 response = event.detail.detail.error.message;
 
-            var msg = "";
+            var msg;
             var isError = false;
 
             if (response && response.state) {
@@ -384,8 +276,8 @@
 
                 if (response && response.msg) {
                     msg = response.msg;
-                } else if (typeof (response) == 'string') {
-                    if (response.trim().charAt(0) == '{') {
+                } else if (typeof (response) === 'string') {
+                    if (response.trim().charAt(0) === '{') {
                         var json = JSON.parse(response);
 
                         if (json && json.i18n) {
@@ -473,13 +365,13 @@
         },
 
         localizeJsonMsg: function (jsonMsg) {
-            if (jsonMsg == null)
+            if (jsonMsg === null)
                 return jsonMsg;
 
             this.localize.useKeyIfMissing = true;
 
             try {
-                if (jsonMsg.values == null || Object.keys(jsonMsg.values).length === 0)
+                if (jsonMsg.values === null || Object.keys(jsonMsg.values).length === 0)
                     return this.localize(jsonMsg.key);
 
                 var values = [jsonMsg.key];
@@ -489,7 +381,7 @@
                     values.push(key);
                     values.push(jsonMsg.values[key]);
                 }
-                return this.localize.apply(null, values);
+                return this.localize.apply(this.localize, values);
             } catch (e) {
                 console.log(e);
                 return jsonMsg.key;
diff --git a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app-behavior.html b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app-behavior.html
index 36e72d3fe..c073b08b2 100644
--- a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app-behavior.html
+++ b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app-behavior.html
@@ -9,16 +9,21 @@
             }, 3000);
             this.checkForNewVersionInterval = setInterval(function () {
                 that.checkForNewVersion();
-            }, 10000);
+            }, 120000);
         },
 
         reloadPage: function (pageName) {
             this.debounce('page-reload', function () {
                 this.selectedPage = pageName;
+                document.title = this.localize == null ? pageName : this.localize(pageName);
                 var page = this.$$('#' + pageName);
                 if (page && page.reload) {
                     console.log('Reloading ' + pageName);
                     page.reload();
+
+                    if (page.viewOptions != null && page.viewOptions.hasSearchTerm) {
+                        this.$$('#debouncedInput').focus();
+                    }
                 }
             }, 100);
         },
diff --git a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app-menu.html b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app-menu.html
index af83d1247..a91c91e27 100644
--- a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app-menu.html
+++ b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app-menu.html
@@ -72,12 +72,26 @@
 
         <paper-menu id="menu" selected="{{page}}" attr-for-selected="id" on-tap="onMenuTap" hidden="[[sessionInvalid]]">
 
-            <paper-item id="reports" class="menu-item">Reports</paper-item>
+            <template is="dom-if" if="[[authTokenValid]]" restamp>
+
+                <template is="dom-if" if="[[hasPrivilege('li.strolch.report.ReportSearch')]]">
+                    <paper-item id="reports" class="menu-item">[[localize('reports')]]</paper-item>
+                </template>
+
+                <template is="dom-if" if="[[hasPrivilege('I18n', 'Get')]]">
+                    <paper-item id="i18n-editor" class="menu-item">[[localize('i18n-editor')]]</paper-item>
+                </template>
+
+            </template>
 
         </paper-menu>
 
+        <template is="dom-if" if="[[authTokenValid]]" restamp>
+            <template is="dom-if" if="[[hasRole('StrolchAdmin')]]">
         <strolch-wc-inspector-menu selected-page="[[page]]"
                                    on-menu-tap="onInspectorMenuTap"></strolch-wc-inspector-menu>
+            </template>
+        </template>
 
         <paper-menu on-tap="onMenuTap">
             <paper-item id="logout" class="menu-item">Logout</paper-item>
@@ -94,6 +108,7 @@
                 <paper-listbox class="dropdown-content" selected="{{userLocale}}" attr-for-selected="data">
                     <paper-item data="de">Deutsch</paper-item>
                     <paper-item data="en">English</paper-item>
+                    <paper-item data="fr">Français</paper-item>
                 </paper-listbox>
             </paper-dropdown-menu>
         </paper-material>
@@ -123,6 +138,9 @@
                 userLocale: {
                     type: String,
                     notify: true
+                },
+                authTokenValid: {
+                    type: Boolean
                 }
             },
 
diff --git a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app.html b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app.html
index f0cbf66d3..b2c39820a 100644
--- a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app.html
+++ b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app.html
@@ -21,6 +21,7 @@
 <link rel="import" href="../bower_components/paper-styles/typography.html">
 
 <link rel="import" href="../bower_components/strolch-wc-localize-behavior/strolch-wc-localize-behavior.html">
+<link rel="import" href="../bower_components/strolch-wc-debounced-input/strolch-wc-debounced-input.html">
 <link rel="import" href="../bower_components/strolch-wc-styles/strolch-wc-styles.html">
 <link rel="import" href="../bower_components/strolch-wc-auth/strolch-wc-auth.html">
 <link rel="import" href="../bower_components/strolch-wc-inspector/strolch-wc-inspector.html">
@@ -82,6 +83,14 @@
                 max-width: 500px !important;
             }
 
+            strolch-wc-debounced-input {
+                max-width: 200px;
+                display: inline-flex;
+
+                --regular-color: var(--app-light-highlight-bg-color);
+                --focus-color: var(--app-regular-highlight-fg-color);
+            }
+
         </style>
 
         <!-- Routing -->
@@ -104,6 +113,7 @@
                                 version="[[appVersion]]"
                                 user-config="[[userConfig]]"
                                 user-locale="{{userLocale}}"
+                                auth-token-valid="[[authTokenValid]]"
                                 on-menu-tap="onMenuTap"></c-app-menu>
 
                 </div>
@@ -120,6 +130,11 @@
                             <app-toolbar hidden="[[!authTokenValid]]">
                                 <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
                                 <div main-title>[[localize(page)]]</div>
+                                <template is="dom-if" if="[[viewOptions.hasSearchTerm]]">
+                                    <strolch-wc-debounced-input id="debouncedInput"
+                                                                class="g-pull-right"
+                                                                debounced-input="{{searchTerm}}"></strolch-wc-debounced-input>
+                                </template>
                             </app-toolbar>
                         </app-header>
 
@@ -132,6 +147,7 @@
 
                             <strolch-wc-auth id="login"
                                              app-title="[[localize('appTitle')]]"
+                                             view-options="{{viewOptions}}"
                                              base-path="../"
                                              show-version
                                              show-keep-alive
@@ -139,12 +155,14 @@
 
                             <template is="dom-if" if="[[equal(page, 'inspector')]]" restamp>
                                 <strolch-wc-inspector id="inspector"
+                                                      view-options="{{viewOptions}}"
                                                       base-path="../"
                                                       route="{{subroute}}"></strolch-wc-inspector>
                             </template>
 
                             <template is="dom-if" if="[[equal(page, 'i18n-editor')]]" restamp>
                                 <strolch-wc-i18n-editor id="i18n-editor"
+                                                        view-options="{{viewOptions}}"
                                                         base-path="../"
                                                         base-rest-path="[[baseRestPath]]"
                                                         route="{{subroute}}"></strolch-wc-i18n-editor>
@@ -152,16 +170,21 @@
 
                             <template is="dom-if" if="[[equal(page, 'operations-log')]]" restamp>
                                 <strolch-wc-operations-log id="operations-log"
+                                                           view-options="{{viewOptions}}"
                                                            base-path="../"
                                                            route="{{subroute}}"></strolch-wc-operations-log>
                             </template>
 
                             <template is="dom-if" if="[[equal(page, 'jobs')]]" restamp>
-                                <strolch-wc-jobs id="jobs" base-path="../" route="{{subroute}}"></strolch-wc-jobs>
+                                <strolch-wc-jobs id="jobs"
+                                                 view-options="{{viewOptions}}"
+                                                 base-path="../"
+                                                 route="{{subroute}}"></strolch-wc-jobs>
                             </template>
 
                             <template is="dom-if" if="[[equal(page, 'reports')]]" restamp>
                                 <strolch-wc-reports id="reports"
+                                                    view-options="{{viewOptions}}"
                                                     base-path="../"
                                                     base-rest-path="[[baseRestPath]]"
                                                     locales-path="../../../locales.json"
@@ -171,15 +194,22 @@
                             </template>
 
                             <template is="dom-if" if="[[equal(page, 'users')]]" restamp>
-                                <strolch-wc-users id="users" base-path="../" route="{{subroute}}"></strolch-wc-users>
+                                <strolch-wc-users id="users"
+                                                  view-options="{{viewOptions}}"
+                                                  base-path="../"
+                                                  route="{{subroute}}"></strolch-wc-users>
                             </template>
 
                             <template is="dom-if" if="[[equal(page, 'roles')]]" restamp>
-                                <strolch-wc-roles id="roles" base-path="../" route="{{subroute}}"></strolch-wc-roles>
+                                <strolch-wc-roles id="roles"
+                                                  view-options="{{viewOptions}}"
+                                                  base-path="../"
+                                                  route="{{subroute}}"></strolch-wc-roles>
                             </template>
 
                             <template is="dom-if" if="[[equal(page, 'sessions')]]" restamp>
                                 <strolch-wc-sessions id="sessions"
+                                                     view-options="{{viewOptions}}"
                                                      base-path="../"
                                                      route="{{subroute}}"></strolch-wc-sessions>
                             </template>
@@ -267,6 +297,9 @@
                     type: String,
                     value: '../../locales.json'
                 },
+                viewOptions: {
+                    type: Object
+                },
                 page: {
                     type: String,
                     observer: 'observePage'
@@ -352,6 +385,7 @@
                     var pageName = event.detail.page;
 
                     // set the next page
+                    document.title = this.localize == null ? pageName : this.localize(pageName);
                     this.$.appRouting.pushNextPage(pageName, event.detail.keepQueryParams);
                 } else {
                     console.log("received page change without new value");
diff --git a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/styles/c-app-style.html b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/styles/c-app-style.html
index 43c49260e..688ec35c1 100644
--- a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/styles/c-app-style.html
+++ b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/styles/c-app-style.html
@@ -73,6 +73,35 @@
                 --paper-toggle-button-checked-button-color: var(--app-primary-color);
             }
 
+            paper-button {
+                background: var(--paper-grey-100);
+                color: var(--app-secondary-color);
+                height: 35px;
+            }
+
+            paper-checkbox {
+                padding: 8px;
+            }
+
+            paper-input.readonly {
+                --paper-input-container: {
+                    padding: 4px 0;
+                };
+                --paper-input-container-underline: {
+                    display: none;
+                };
+                --paper-input-container-underline-focus: {
+                    display: none;
+                };
+                --paper-input-container-underline-disabled: {
+                    display: none;
+                };
+            }
+
+            h3 {
+                margin-bottom: 0;
+            }
+
         </style>
     </template>
 </dom-module>
\ No newline at end of file
diff --git a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/views/c-view404.html b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/views/c-view404.html
index c4cf4d568..7b6eb7137 100644
--- a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/views/c-view404.html
+++ b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/views/c-view404.html
@@ -19,7 +19,25 @@
 
     <script>
         Polymer({
-            is: 'c-view404'
+            is: 'c-view404',
+
+            behaviors: [
+                CustomComputeBehavior, StrolchLocalizeBehavior
+            ],
+
+            properties: {
+                viewOptions: {
+                    type: Object,
+                    value: {hasSearchTerm: false},
+                    notify: true
+                },
+                dataObj: {
+                    type: Object
+                },
+                messages: {
+                    type: Array
+                },
+            }
         });
     </script>
 </dom-module>
\ No newline at end of file
diff --git a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/locales.json b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/locales.json
index 48eb5defc..c9f63e510 100644
--- a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/locales.json
+++ b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/locales.json
@@ -23,16 +23,42 @@
     "sessionInvalid": "Sitzung ungültig",
     "sessionInvalidConfirmNavToLogin": "Die Sitzung ist abgelaufen oder ungültig. Bitte neu anmelden.",
     "sessionInvalidLoggingBackIn": "Die Sitzung ist ungültig oder abgelaufen, automatische Anmeldung wird ausgeführt...",
-    "errorOccurred": "Ein Fehler ist aufgetreten"
+    "errorOccurred": "Ein Fehler ist aufgetreten",
+    "login": "Login",
+    "i18n-editor": "Internationalisierungs Editor",
+    "user": "Benutzer",
+    "mode": "Modus",
+    "enable": "Aktivieren",
+    "disable": "Deaktivieren",
+    "status": "Status",
+    "id": "ID",
+    "deleted": "Gelöscht",
+    "date": "Datum",
+    "Created": "Erstellt",
+    "Planning": "In Planung",
+    "Planned": "Geplant",
+    "Execution": "In Ausführung",
+    "Warning": "Warnung",
+    "Error": "Fehler",
+    "Executed": "Ausgeführt",
+    "Closed": "Geschlossen",
+    "keepAlive": "Eingeloggt bleiben",
+    "systemAction.failed": "Systembefehl {action} fehlgeschlagen: {reason}",
+    "enabled": "Aktiv",
+    "severity": "Schweregrad",
+    "true": "Ja",
+    "false": "Nein",
+    "Info": "Information",
+    "Exception": "Ausnahme",
+    "clearInactiveMessages": "Inaktive Meldungen entfernen",
+    "clearInactiveMessagesConfirm": "Sollen alle inaktive Meldungen entfernt werden?",
+    "executionDate": "Ausführungsdatum",
+    "orderDate": "Auftragsdatum",
+    "info": "Information"
   },
   "en": {
-    "errorOccurred": "An error occurred",
-    "sessionInvalid": "Session Invalid",
-    "sessionInvalidConfirmNavToLogin": "The session has expired or is invalid. Please logon again.",
-    "sessionInvalidLoggingBackIn": "The session is invalid or has expired, automatic logon has commenced...",
-    "privilegeDenied": "Action denied",
-    "privilegeDeniedText": "The action has been denied",
-    "appTitle": "${appName}",
+    "info": "Information",
+    "appTitle": "MFS",
     "language": "Language",
     "reports": "Reports",
     "operations-log": "Operation Logs",
@@ -49,6 +75,39 @@
     "ok": "Ok",
     "reconnect": "Reconnect",
     "serverNotAvailable": "Server not available",
-    "serverNotAvailableMsg": "The connection to the server is currently not available"
+    "serverNotAvailableMsg": "The connection to the server is currently not available",
+    "privilegeDenied": "Action denied",
+    "privilegeDeniedText": "The action has been denied",
+    "sessionInvalid": "Session Invalid",
+    "sessionInvalidConfirmNavToLogin": "The session has expired or is invalid. Please logon again.",
+    "sessionInvalidLoggingBackIn": "The session is invalid or has expired, automatic logon has commenced...",
+    "enabled": "Active",
+    "severity": "Severity",
+    "true": "Yes",
+    "false": "No",
+    "Info": "Information",
+    "Exception": "Exception",
+    "clearInactiveMessages": "Remove inactive messages",
+    "clearInactiveMessagesConfirm": "Should all inactive messages be removed?",
+    "errorOccurred": "An error occurred",
+    "systemAction.failed": "SystemAction {action} failed: {reason}",
+    "Created": "Created",
+    "Planning": "Planning",
+    "Planned": "Planned",
+    "Execution": "Execution",
+    "Warning": "Warning",
+    "Error": "Error",
+    "Executed": "Executed",
+    "Closed": "Closed",
+    "date": "Date",
+    "deleted": "Deleted",
+    "id": "ID",
+    "status": "Status",
+    "enable": "Enable",
+    "disable": "Disable",
+    "mode": "Mode",
+    "user": "User",
+    "i18n-editor": "Internationalization editor",
+    "login": "Login"
   }
 }
\ No newline at end of file