logout menu

Author: reriksso

webui/index.html

@@ -16,6 +16,18 @@
                     <div class="title">
                         System version <span id="systemVersion"></span> Example Package Application
                     </div>
+                    <div class="flex title-left">
+                        <div class="menu-div">
+                            <div id="menu-holder">
+                                <div class="top-div" onclick="showLogout();">
+                                    <a class="menu-text"><span id="username">user</span> ▾</a>
+                                </div>
+                                <div id="logout-div" onclick="logout();">
+                                    <a class="menu-text">logout</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="content">

webui/script.js

@@ -36,14 +36,44 @@ const jsonrpc = (method, params) => {
     });
 };
 
+// show/hide logout menu
+const showLogout = () => { // eslint-disable-line no-unused-vars
+    const element = document.getElementById('logout-div');
+    const style = window.getComputedStyle(element);
+    const disp = style.getPropertyValue('display');
+
+    if (disp === 'block') {
+        document.getElementById('menu-holder').style.border = '1px solid rgb(255, 255, 255)';
+        document.getElementById('logout-div').style.display = 'none';
+    } else {
+        document.getElementById('menu-holder').style.border = '1px solid rgb(4, 159, 217)';
+        document.getElementById('logout-div').style.display = 'block';
+    }
+};
+
+// logout and direct browser to login page
+const logout = () => { // eslint-disable-line no-unused-vars
+    jsonrpc('logout', {});
+    window.location.href = '/webui-one';
+};
+
 // fetch the system version with the get_system_setting method.
 // Return request promise
 const fetchSystemVersion = () => jsonrpc('get_system_setting', { operation: 'version' });
 
+// fetch the current user with the get_system_setting method.
+// Return request promise
+const getCurrentUser = () => {
+    jsonrpc('get_system_setting', { operation: 'user' }).then((username) => {
+        document.getElementById('username').textContent = username;
+    });
+};
+
 // update the systemVersion element when the window has loaded.
 window.addEventListener('load', () => {
     fetchSystemVersion().then((version) => {
         const element = document.getElementById('systemVersion');
         element.innerText = version;
     });
+    getCurrentUser();
 });

webui/style.css

@@ -53,3 +53,35 @@ h1 {
 .content {
     margin: 4rem 2rem;
 }
+.flex {
+    display: flex;
+}
+.title-left {
+    margin-left: auto;
+}
+.menu-div {
+    margin: 0.5rem;
+    font-size: 13.8px;
+    font-family: CiscoSans;
+    color: rgb(4, 159, 217);
+    z-index: 2;
+}
+#menu-holder {
+    border: 1px solid rgb(255, 255, 255);
+    outline: none;
+    top: 9px;
+    padding: 0;
+    background-color: white;
+}
+.top-div {
+    margin: 5px;
+}
+#logout-div {
+    margin: 14px 5px 5px 5px;
+    display: none;
+}
+.menu-text {
+    cursor: pointer;
+    padding: 8px 6px;
+    white-space: nowrap;
+}