Merge pull request #26 from cjkas/scz/fix-login-pass

fix the version number in UI. Enable the remember username/password functionality in browser.

Author: cjkas

data-src/index.html

@@ -1026,21 +1026,23 @@ <h1 style="text-align: center;"><img src="icon.png" style="width:127px;margin-le
                     <label for="fldPinEntry" style="margin-top:7px;">Enter Pin</label>
                 </div>
             </div>
-            <div id="divLoginPassword" style="display:none;" onkeyup="if (event.code === 'Enter') security.login();">
+            <form id="frmUnauthLogin" action="/login" method="post" onsubmit="security.login(event); return false;">
+            <div id="divLoginPassword" style="display:none;">
                 <div class="field-group">
-                    <input id="fldLoginUsername" name="username" type="text" data-bind="login.username" length=32 placeholder="Username" />
+                    <input id="fldLoginUsername" name="username" type="text" autocomplete="username" data-bind="login.username" length=32 placeholder="Username" />
                     <label for="fldLoginUsername">Username</label>
                 </div>
                 <div class="field-group">
-                    <input id="fldLoginPassword" name="password" type="password" data-bind="login.password" length=32 placeholder="Password" />
+                    <input id="fldLoginPassword" name="password" type="password" autocomplete="current-password" data-bind="login.password" length=32 placeholder="Password" />
                     <label for="fldLoginPassword">Password</label>
                 </div>
             </div>
             <div style="text-align:center;"><span id="spanLoginMessage" style="color:red"></span></div>
             <div id="loginButtons" class="button-container" style="display:none;text-align:center;">
-                <button id="btnLogin" type="button" onclick="security.login();" style="display:inline-block;width:42%;">Login</button>
+                <button id="btnLogin" type="submit" style="display:inline-block;width:42%;">Login</button>
                 <button id="btnCancelLogin" type="button" onclick="security.cancelLogin();" style="display:none;width:42%;">Cancel</button>
             </div>
+            </form>
         </div>
     </div>
     <script type="text/javascript">

data-src/index.js

@@ -1228,7 +1228,8 @@ class Security {
         document.getElementById('divUnauthenticated').style.display = 'none';
         document.getElementById('divContainer').dispatchEvent(evt);
     }
-    login() {
+    login(evt) {
+        if (evt && evt.preventDefault) evt.preventDefault();
         console.log('Logging in...');
         let pnl = document.getElementById('divUnauthenticated');
         let msg = pnl.querySelector('#spanLoginMessage');
@@ -1241,7 +1242,7 @@ class Security {
                 for (let i = 0; i < 4; i++) {
                     pin += sec.pin[`d${i}`];
                 }
-                if (pin.length !== 4) return;
+                if (pin.length !== 4) return false;
                 break;
             case 2:
                 break;
@@ -1252,6 +1253,16 @@ class Security {
             else {
                 console.log(log);
                 if (log.success) {
+                    if (sec.type === 2 && window.PasswordCredential && navigator.credentials) {
+                        try {
+                            const cred = new PasswordCredential({
+                                id: sec.username,
+                                password: sec.password,
+                                name: sec.username
+                            });
+                            navigator.credentials.store(cred);
+                        } catch (e) { /* ignore; browsers without support fall back to the form-submit heuristic */ }
+                    }
                     if (typeof socket === 'undefined' || !socket) (async () => { await initSockets(); })();
                     //ui.setMode(mode);
 
@@ -1260,21 +1271,22 @@ class Security {
                     document.getElementById('divContainer').setAttribute('data-auth', true);
                     this.apiKey = log.apiKey;
                     this.authenticated = true;
-                    let evt = new CustomEvent('afterlogin', { detail: { authenticated: true } });
-                    document.getElementById('divContainer').dispatchEvent(evt);
+                    let evt2 = new CustomEvent('afterlogin', { detail: { authenticated: true } });
+                    document.getElementById('divContainer').dispatchEvent(evt2);
                 }
                 else
                     msg.innerHTML = log.msg;
             }
         });
+        return false;
     }
 }
 var security = new Security();
 
 // let appVersion = 'v3.0.12'; // Default placeholder
 async function getAppVersion() {
     try {
-        const response = await fetch('/appversion');
+        const response = await fetch('/appversion?v='+Date.now());
         if (!response.ok) throw new Error('File not found');
 
         const data = await response.text();
@@ -1290,8 +1302,8 @@ async function getAppVersion() {
 }
 
 class General {
-    initialized = false; 
-    appVersion = getAppVersion();
+    initialized = false;
+    appVersion = '';
     reloadApp = false;
     init() {
         if (this.initialized) return;
@@ -1468,7 +1480,10 @@ class General {
             }
         });
     }
-    setAppVersion() { document.getElementById('spanAppVersion').innerText = this.appVersion; }
+    async setAppVersion() {
+        this.appVersion = await getAppVersion();
+        document.getElementById('spanAppVersion').innerText = this.appVersion;
+    }
     setTimeZones() {
         let dd = document.getElementById('selTimeZone');
         dd.length = 0;

data-src/login.html

@@ -14,7 +14,7 @@
         <h1 style="text-align: center;"><img src="icon.png" style="width:127px;margin-left:1px;margin-top:-10px;" /></h1>
         <div id="divLoginPnl" class="login-content" style="position:relative;">
             <div style="max-width:270px;margin:0px auto;">
-                <form id="frmLogin" action="/login" method="post" class="login-form">
+                <form id="frmLogin" action="/login" method="post" class="login-form" onsubmit="general.login(event); return false;">
                     <input id="fldPin" type="hidden" name="pin">
                     <div id="divPinSecurity" style="display:none;">
                         <div class="field-group" style="text-align:center;">
@@ -29,17 +29,17 @@ <h1 style="text-align: center;"><img src="icon.png" style="width:127px;margin-le
                     </div>
                     <div id="divPasswordSecurity" style="display:none;">
                         <div class="field-group">
-                            <input id="fldUsername" name="username" type="text" data-bind="security.username" length=32 placeholder="Username">
+                            <input id="fldUsername" name="username" type="text" autocomplete="username" data-bind="security.username" length=32 placeholder="Username">
                             <label for="fldUsername">Username</label>
                         </div>
                         <div class="field-group">
-                            <input id="fldPassword" name="password" type="password" data-bind="security.password" length=32 placeholder="Password">
+                            <input id="fldPassword" name="password" type="password" autocomplete="current-password" data-bind="security.password" length=32 placeholder="Password">
                             <label for="fldPassword">Password</label>
                         </div>
                     </div>
                     <div style="text-align:center;"><span id="spanLoginMessage" style="color:red"></span></div>
                     <div class="button-container">
-                        <button id="btnLogin" type="button" value="Submit" onclick="general.login();">
+                        <button id="btnLogin" type="submit" value="Submit">
                             Login
                         </button>
                     </div>