Update UI

src/_locales/en/messages.json

@@ -886,20 +886,32 @@
     "message": "Enable Auto-fill On Page Load"
   },
   "enableAutoFillOnPageLoadDesc": {
-    "message": "If a login form is detected, automatically perform an auto-fill when the web page loads. This is a global setting which may be overridden by individual logins."
+    "message": "If a login form is detected, automatically perform an auto-fill when the web page loads."
-  },
-  "autoFillOnPageLoadUseGlobalSettings": {
-    "message": "Use Global Settings"
-  },
-  "autoFillOnPageLoadAlways": {
-    "message": "Always"
-  },
-  "autoFillOnPageLoadNever": {
-    "message": "Never"
   },
   "experimentalFeature": {
     "message": "This is currently an experimental feature. Use at your own risk."
   },
+  "defaultAutoFillOnPageLoad": {
+    "message": "Default auto-fill on page load setting"
+  },
+  "globalAutoFillOnPageLoadAlways": {
+    "message": "Always auto-fill"
+  },
+  "globalAutoFillOnPageLoadNever": {
+    "message": "Never auto-fill"
+  },
+  "itemAutoFillOnPageLoad": {
+    "message": "Auto-fill On Page Load (if enabled)"
+  },
+  "itemAutoFillOnPageLoadUseGlobal": {
+    "message": "Use default setting"
+  },
+  "itemAutoFillOnPageLoadAlways": {
+    "message": "Always auto-fill this login"
+  },
+  "itemAutoFillOnPageLoadNever": {
+    "message": "Never auto-fill this login"
+  },
   "commandOpenPopup": {
     "message": "Open vault popup"
   },

src/popup/scss/box.scss

@@ -77,6 +77,21 @@
         @include themify($themes) {
             color: themed('mutedColor');
         }
+
+        .sub-option {
+            margin-right: 5px;
+            margin-top: 10px;
+            display: flex;
+            justify-content: space-between;
+
+            select {
+                border: 1px solid #000000;
+                border-radius: $border-radius;
+                @include themify($themes) {
+                    border-color: themed('boxBackgroundColor');
+                }
+            }
+        }
     }
 
     &.list {

src/popup/settings/options.component.html

@@ -22,6 +22,13 @@
         <div class="box-footer">
             {{'enableAutoFillOnPageLoadDesc' | i18n}}
             <b>{{'warning' | i18n}}</b>: {{'experimentalFeature' | i18n}}
+            <div class="sub-option">
+                <label for="defaultAutofill">{{'defaultAutoFillOnPageLoad' | i18n}}</label>
+                <select id="defaultAutofill" name="DefaultAutofill" [(ngModel)]="autoFillOnPageLoadDefault"
+                    [disabled]="!enableAutoFillOnPageLoad">
+                    <option *ngFor="let o of autoFillOnPageLoadOptions" [ngValue]="o.value">{{o.name}}</option>
+                </select>
+            </div>
         </div>
     </div>
     <div class="box">

src/popup/settings/options.component.ts

@@ -23,6 +23,8 @@ import { ConstantsService } from 'jslib/services/constants.service';
 export class OptionsComponent implements OnInit {
     disableFavicon = false;
     enableAutoFillOnPageLoad = false;
+    autoFillOnPageLoadDefault = false;
+    autoFillOnPageLoadOptions: any[];
     disableAutoTotpCopy = false;
     disableContextMenuItem = false;
     disableAddLoginNotification = false;
@@ -64,6 +66,10 @@ export class OptionsComponent implements OnInit {
             { name: i18nService.t('twoMinutes'), value: 120 },
             { name: i18nService.t('fiveMinutes'), value: 300 },
         ];
+        this.autoFillOnPageLoadOptions = [
+            { name: i18nService.t('globalAutoFillOnPageLoadAlways'), value: true },
+            { name: i18nService.t('globalAutoFillOnPageLoadNever'), value: false },
+        ]
     }
 
     async ngOnInit() {

src/popup/vault/add-edit.component.html

@@ -259,18 +259,15 @@
                 </a>
             </div>
         </div>
-        <div class="box">
+        <div class="box" *ngIf="cipher.type === cipherType.Login">
             <div class="box-content">
                 <div class="box-content-row" appBoxRow>
-                    <label for="autofillOnPageLoad">{{'enableAutoFillOnPageLoad' | i18n}} </label>
+                    <label for="autofillOnPageLoad">{{'itemAutoFillOnPageLoad' | i18n}} </label>
                     <select id="autofillOnPageLoad" name="AutofillOnPageLoad" [(ngModel)]="cipher.login.autofillOnPageLoad">
                         <option *ngFor="let o of autofillOnPageLoadOptions" [ngValue]="o.value">{{o.name}}</option>
                     </select>
                 </div>
             </div>
-            <div class="box-footer">
-                <b>{{'warning' | i18n}}</b>: {{'experimentalFeature' | i18n}}
-            </div>
         </div>
         <div class="box">
             <div class="box-content">