save button for options

src/app/settings/options.component.html

@@ -2,23 +2,28 @@
     <h1>{{'options' | i18n}}</h1>
 </div>
 <p>{{'optionsDesc' | i18n}}</p>
-<div class="row">
-    <div class="col-6">
-        <div class="form-group">
-            <label for="locale">{{'language' | i18n}}</label>
-            <select id="locale" name="Locale" [(ngModel)]="locale" (change)="saveLocale()" class="form-control">
-                <option *ngFor="let o of localeOptions" [ngValue]="o.value">{{o.name}}</option>
-            </select>
-            <small class="form-text text-muted">{{'languageDesc' | i18n}}</small>
+<form (ngSubmit)="submit()" ngNativeValidate>
+    <div class="row">
+        <div class="col-6">
+            <div class="form-group">
+                <label for="locale">{{'language' | i18n}}</label>
+                <select id="locale" name="Locale" [(ngModel)]="locale" class="form-control">
+                    <option *ngFor="let o of localeOptions" [ngValue]="o.value">{{o.name}}</option>
+                </select>
+                <small class="form-text text-muted">{{'languageDesc' | i18n}}</small>
+            </div>
         </div>
     </div>
-</div>
-<div class="form-group">
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="disableIcons" name="DisableIcons" [(ngModel)]="disableIcons" (change)="saveIcons()">
-        <label class="form-check-label" for="disableIcons">
-            {{'disableIcons' | i18n}}
-        </label>
+    <div class="form-group">
+        <div class="form-check">
+            <input class="form-check-input" type="checkbox" id="disableIcons" name="DisableIcons" [(ngModel)]="disableIcons">
+            <label class="form-check-label" for="disableIcons">
+                {{'disableIcons' | i18n}}
+            </label>
+        </div>
+        <small class="form-text text-muted">{{'disableIconsDesc' | i18n}}</small>
     </div>
-    <small class="form-text text-muted">{{'disableIconsDesc' | i18n}}</small>
-</div>
+    <button type="submit" class="btn btn-primary" appBlurClick>
+        {{'save' | i18n}}
+    </button>
+</form>

src/app/settings/options.component.ts

@@ -3,6 +3,7 @@ import {
     OnInit,
 } from '@angular/core';
 
+import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { I18nService } from 'jslib/abstractions/i18n.service';
@@ -20,8 +21,11 @@ export class OptionsComponent implements OnInit {
     locale: string;
     localeOptions: any[];
 
+    private startingLocale: string;
+
     constructor(private storageService: StorageService, private stateService: StateService,
-        private analytics: Angulartics2, i18nService: I18nService) {
+        private analytics: Angulartics2, private i18nService: I18nService,
+        private toasterService: ToasterService) {
         this.localeOptions = [{ name: i18nService.t('default'), value: null }];
         i18nService.supportedTranslationLocales.forEach((locale) => {
             this.localeOptions.push({ name: locale, value: locale });
@@ -30,24 +34,18 @@ export class OptionsComponent implements OnInit {
 
     async ngOnInit() {
         this.disableIcons = await this.storageService.get<boolean>(ConstantsService.disableFaviconKey);
-        this.locale = await this.storageService.get<string>(ConstantsService.localeKey);
+        this.locale = this.startingLocale = await this.storageService.get<string>(ConstantsService.localeKey);
     }
 
-    async saveIcons() {
+    async submit() {
         await this.storageService.save(ConstantsService.disableFaviconKey, this.disableIcons);
         await this.stateService.save(ConstantsService.disableFaviconKey, this.disableIcons);
-        this.callAnalytics('Website Icons', !this.disableIcons);
-    }
-
-    async saveLocale() {
         await this.storageService.save(ConstantsService.localeKey, this.locale);
-        this.analytics.eventTrack.next({ action: 'Set Locale ' + this.locale });
-        window.location.reload();
+        this.analytics.eventTrack.next({ action: 'Saved Options' });
+        if (this.locale !== this.startingLocale) {
+            window.location.reload();
+        } else {
+            this.toasterService.popAsync('success', null, this.i18nService.t('optionsUpdated'));
+        }
     }
-
-    private callAnalytics(name: string, enabled: boolean) {
-        const status = enabled ? 'Enabled' : 'Disabled';
-        this.analytics.eventTrack.next({ action: `${status} ${name}` });
-    }
-
 }

src/locales/en/messages.json

@@ -900,6 +900,9 @@
   "optionsDesc": {
     "message": "Customize your web vault experience."
   },
+  "optionsUpdated": {
+    "message": "Options updated"
+  },
   "language": {
     "message": "Language"
   },