add password setting option with password view

src/server/ui/home/main.css

@@ -84,6 +84,7 @@ html, body {
     color: var( --primary-color );
     background-color: var( --background-color );
     transition: all 0.5s;
+    font-family: Avenir, Helvetica, Arial, sans-serif;
 }
 
 body {

src/webapp/main/src/components/settings/settings.vue

@@ -35,6 +35,16 @@
                 <td v-else-if="setting.type == 'number'">
                     <input type="number" v-model="setting.value" :min="setting.restrictions.min" :max="setting.restrictions.max">
                 </td>
+                <td v-else-if="setting.type == 'password'">
+                    <div v-if="showsPW" style="position: relative;">
+                        <input type="text" v-model="setting.value">
+                        <span class="material-symbols-outlined visibility" @click="togglePasswordVisibility()">visibility_off</span>
+                    </div>
+                    <div v-else style="position: relative;">
+                        <input type="password" v-model="setting.value">
+                        <span class="material-symbols-outlined visibility" @click="togglePasswordVisibility()">visibility</span>
+                    </div>
+                </td>
                 <td v-else-if="setting.type == 'text'">
                     <input type="text" v-model="setting.value">
                 </td>
@@ -54,10 +64,18 @@
 
 <script>
     export default {
+        data () {
+            return {
+                showsPW: false,
+            };
+        },
         props: {
             settings: Object,
         },
         methods: {
+            togglePasswordVisibility () {
+                this.showsPW = !this.showsPW;
+            },
             showInfo ( box ) {
                 $( '#' + box ).stop();
                 $( '#' + box ).fadeIn( 300 );
@@ -71,6 +89,13 @@
 </script>
 
 <style scoped>
+.visibility {
+    font-size: 100%;
+    cursor: pointer;
+    position: relative;
+    margin-left: 3px;
+}
+
 .settings-wrapper {
     width: 100%;
     display: flex;

src/webapp/main/src/views/admin/SettingsView.vue

@@ -32,8 +32,9 @@
         <div class="admin-settings">
             <h2>Admin Accounts</h2>
             <button @click="createAccount()">Create new account</button>
-            <p>Before setting or editing permissions here, please read the corresponding section of the documentation <a href="https://libreevent.janishutz.com/docs/admin-panel/settings/admin-accounts#permissions" target="_blank">here</a>.
+            <p style="margin-bottom: 0;">Before setting or editing permissions here, please read the corresponding section of the documentation <a href="https://libreevent.janishutz.com/docs/admin-panel/settings/admin-accounts#permissions" target="_blank">here</a>.</p>
-            <br>Usually, the permissions automatically set by the system on account creation should be appropriate. (TIP: Right click for more options)</p>
+            <p style="margin-top: 0;">Usually, the permissions automatically set by the system on account creation should be appropriate. (TIP: Right click for more options)</p>
+            <div v-if="Object.keys( adminAccounts ).length > 0" class="account-wrapper">
                 <div v-for="account in adminAccounts" class="account" @click="showAccountSettings( account.username );" title="Edit permissions of this account (right click for more options)" @contextmenu="( e ) => { e.preventDefault(); openRightClickMenu( account.username, e ); }">
                     <div class="location-name">
                         <h3>{{ account.username }}</h3>
@@ -41,6 +42,11 @@
                     </div>
                 </div>
             </div>
+            <div v-else class="account-wrapper">
+                <p>No additional admin accounts configured yet.</p>
+                <button @click="createAccount()">Create new account</button>
+            </div>
+        </div>
         <rightClickMenu ref="rclk" @command="( command ) => { executeCommand( command ) }"></rightClickMenu>
         <popups ref="popup" size="big" @data="( data ) => { handlePopupReturns( data ); }"></popups>
         <notifications ref="notification" location="topright" size="bigger"></notifications>
@@ -179,6 +185,13 @@
                         'value': false,
                         'type': 'toggle',
                     },
+                    'pass': { 
+                        'display': 'Password', 
+                        'id': 'pass', 
+                        'tooltip':'Change the password for this user.', 
+                        'value': '',
+                        'type': 'password',
+                    },
                 }
             , 'settings' );
             },
@@ -192,7 +205,7 @@
                     } else if ( res.status === 500 ) {
                         this.$refs.notification.createNotification( 'This payment gateway does not appear to have settings', 10, 'error', 'normal' );
                     }
-                } )
+                } );
             },
             createAccount() {
                 this.currentPopup = 'createAccount';
@@ -232,6 +245,13 @@
                         'value': '',
                         'type': 'text',
                     },
+                    'pass': { 
+                        'display': 'Password', 
+                        'id': 'pass', 
+                        'tooltip':'Create a password for this user.', 
+                        'value': '',
+                        'type': 'password',
+                    },
                 }
             , 'settings' );
             },
@@ -320,6 +340,20 @@
         },
         created () {
             this.loadData();
+            fetch( '/admin/getAPI/getAdminAccounts' ).then( res => {
+                if ( res.status === 200 ) {
+                    res.json().then( json => {
+                        console.log( json );
+                        if ( json.status === 'ok' ) {
+                            for ( let account in json.data ) {
+                                this.adminAccounts[ json.data[ account ][ 'username' ] ] = json.data[ account ];
+                            }
+                        } else {
+                            this.adminAccounts = {};
+                        }
+                    } );
+                }
+            } );
         }
     };
     // TODO: Load gateways and settings for gateways from server.
@@ -327,7 +361,12 @@
 
 
 <style scoped>
-
+    .account-wrapper {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
     .gateway-settings {
         width: 70%;
         text-align: justify;