options

src/app/app-routing.module.ts

@@ -15,6 +15,7 @@ import { RegisterComponent } from './accounts/register.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 
 import { AccountComponent } from './settings/account.component';
+import { OptionsComponent } from './settings/options.component';
 import { SettingsComponent } from './settings/settings.component';
 
 import { ExportComponent } from './tools/export.component';
@@ -51,6 +52,7 @@ const routes: Routes = [
                 children: [
                     { path: '', pathMatch: 'full', redirectTo: 'account' },
                     { path: 'account', component: AccountComponent, canActivate: [AuthGuardService] },
+                    { path: 'options', component: OptionsComponent, canActivate: [AuthGuardService] },
                 ],
             },
             {

src/app/app.module.ts

@@ -36,6 +36,7 @@ import { ChangeEmailComponent } from './settings/change-email.component';
 import { ChangePasswordComponent } from './settings/change-password.component';
 import { DeauthorizeSessionsComponent } from './settings/deauthorize-sessions.component';
 import { DeleteAccountComponent } from './settings/delete-account.component';
+import { OptionsComponent } from './settings/options.component';
 import { ProfileComponent } from './settings/profile.component';
 import { PurgeVaultComponent } from './settings/purge-vault.component';
 import { SettingsComponent } from './settings/settings.component';
@@ -122,6 +123,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
         LoginComponent,
         ModalComponent,
         NavbarComponent,
+        OptionsComponent,
         OrganizationsComponent,
         OrganizationLayoutComponent,
         PasswordGeneratorComponent,

src/app/settings/options.component.html

@@ -0,0 +1,23 @@
+<div class="page-header">
+    <h1>{{'options' | i18n}}</h1>
+</div>
+<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>
+        </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>
+    <small class="form-text text-muted">{{'disableIconsDesc' | i18n}}</small>
+</div>

src/app/settings/options.component.ts

@@ -0,0 +1,53 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+
+import { Angulartics2 } from 'angulartics2';
+
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { StateService } from 'jslib/abstractions/state.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
+
+import { ConstantsService } from 'jslib/services/constants.service';
+
+@Component({
+    selector: 'app-options',
+    templateUrl: 'options.component.html',
+})
+export class OptionsComponent implements OnInit {
+    disableIcons: boolean;
+    locale: string;
+    localeOptions: any[];
+
+    constructor(private storageService: StorageService, private stateService: StateService,
+        private analytics: Angulartics2, i18nService: I18nService) {
+        this.localeOptions = [{ name: i18nService.t('default'), value: null }];
+        i18nService.supportedTranslationLocales.forEach((locale) => {
+            this.localeOptions.push({ name: locale, value: locale });
+        });
+    }
+
+    async ngOnInit() {
+        this.disableIcons = await this.storageService.get<boolean>(ConstantsService.disableFaviconKey);
+        this.locale = await this.storageService.get<string>(ConstantsService.localeKey);
+    }
+
+    async saveIcons() {
+        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();
+    }
+
+    private callAnalytics(name: string, enabled: boolean) {
+        const status = enabled ? 'Enabled' : 'Disabled';
+        this.analytics.eventTrack.next({ action: `${status} ${name}` });
+    }
+
+}

src/app/settings/settings.component.html

@@ -2,13 +2,13 @@
     <div class="row">
         <div class="col-3">
             <div class="card">
-                <div class="card-header">Settings</div>
+                <div class="card-header">{{'settings' | i18n}}</div>
                 <div class="list-group list-group-flush">
                     <a routerLink="account" class="list-group-item" routerLinkActive="active">
-                        My Account
+                        {{'myAccount' | i18n}}
                     </a>
                     <a routerLink="options" class="list-group-item" routerLinkActive="active">
-                        Options
+                        {{'options' | i18n}}
                     </a>
                     <a routerLink="organizations" class="list-group-item" routerLinkActive="active">
                         Organizations

src/locales/en/messages.json

@@ -893,5 +893,23 @@
         "example": "LastPass (csv)"
       }
     }
+  },
+  "options": {
+    "message": "Options"
+  },
+  "language": {
+    "message": "Language"
+  },
+  "languageDesc": {
+    "message": "Change the language used by the web vault."
+  },
+  "disableIcons": {
+    "message": "Disable Website Icons"
+  },
+  "disableIconsDesc": {
+    "message": "Website Icons provide a recognizable image next to each login item in your vault."
+  },
+  "default": {
+    "message": "Default"
   }
 }

src/locales/es/messages.json

@@ -1,5 +1,5 @@
 {
-  "hello": {
+  "myVault": {
-    "message": "hola mundo"
+    "message": "Mi Vault"
   }
 }