Add language selection in settings (#75)

* Add language selection in settings

* Removed comment

* Mapping Locale-Language saved as key-value instead of list of objects

* Remove comment

* Revert supported locales array

package-lock.json

@@ -4223,7 +4223,8 @@
         "jsbn": {
           "version": "0.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "json-schema": {
           "version": "0.2.3",

src/app/accounts/settings.component.html

@@ -42,6 +42,14 @@
                             </div>
                             <small class="help-block">{{'disableFaviconDesc' | i18n}}</small>
                         </div>
+                        <div class="form-group">
+                            <label for="locale">{{'language' | i18n}}</label>
+                            <select id="locale" name="Locale" [(ngModel)]="locale"
+                                    (change)="saveLocale()">
+                                <option *ngFor="let o of locales" [ngValue]="o.locale">{{o.language}}</option>
+                            </select>
+                            <small class="help-block">{{'languageDesc' | i18n}}</small>
+                        </div>
                     </div>
                 </div>
             </div>

src/app/accounts/settings.component.ts

@@ -15,6 +15,8 @@ import { StorageService } from 'jslib/abstractions/storage.service';
 
 import { ConstantsService } from 'jslib/services/constants.service';
 
+import { SupportedTranslationLocales } from '../../services/i18n.service';
+
 @Component({
     selector: 'app-settings',
     templateUrl: 'settings.component.html',
@@ -24,6 +26,8 @@ export class SettingsComponent implements OnInit {
     lockOption: number = null;
     disableGa: boolean = false;
     disableFavicons: boolean = false;
+    locales: any[];
+    locale: string;
 
     constructor(private analytics: Angulartics2, private toasterService: ToasterService,
         private i18nService: I18nService, private platformUtilsService: PlatformUtilsService,
@@ -43,11 +47,17 @@ export class SettingsComponent implements OnInit {
             { name: i18nService.t('onRestart'), value: -1 },
             { name: i18nService.t('never'), value: null },
         ];
+
+        this.locales = [ { locale: null, language: 'Default' } ];
+        Object.keys(SupportedTranslationLocales).forEach((localId) => {
+            this.locales.push({locale: localId, language: i18nService.t(localId)});
+        });
     }
 
     async ngOnInit() {
         this.lockOption = await this.storageService.get<number>(ConstantsService.lockOptionKey);
         this.disableFavicons = await this.storageService.get<boolean>(ConstantsService.disableFaviconKey);
+        this.locale = await this.storageService.get<string>('locale');
 
         const disableGa = await this.storageService.get<boolean>(ConstantsService.disableGaKey);
         const disableGaByDefault = this.platformUtilsService.isFirefox() || this.platformUtilsService.isMacAppStore();
@@ -79,4 +89,8 @@ export class SettingsComponent implements OnInit {
         const status = enabled ? 'Enabled' : 'Disabled';
         this.analytics.eventTrack.next({ action: `${status} ${name}` });
     }
+
+    async saveLocale() {
+        await this.storageService.save('locale', this.locale);
+    }
 }

src/app/services/services.module.ts

@@ -110,7 +110,7 @@ environmentService.setUrlsFromStorage().then(() => {
 
 export function initFactory(): Function {
     return async () => {
-        await i18nService.init();
+        await i18nService.init(await storageService.get<string>('locale'));
         await authService.init();
         const htmlEl = window.document.documentElement;
         htmlEl.classList.add('os_' + platformUtilsService.getDeviceString());

src/locales/en/messages.json

@@ -770,6 +770,12 @@
   "disableFaviconDesc": {
     "message": "Website Icons provide a recognizable image next to each login item in your vault."
   },
+  "language": {
+    "message": "Language"
+  },
+  "languageDesc": {
+    "message": "Change language. Require restart."
+  },
   "copy": {
     "message": "Copy",
     "description": "Copy to clipboard"

src/main.ts

@@ -62,15 +62,17 @@ export class Main {
     }
 
     bootstrap() {
-        this.windowMain.init().then(async () => {
+        this.storageService.get<string>('locale').then(async (locale) => {
-            await this.i18nService.init(app.getLocale());
+            this.windowMain.init().then(async () => {
-            this.messagingMain.init();
+                await this.i18nService.init(locale !== null ? locale : app.getLocale());
-            this.menuMain.init();
+                this.messagingMain.init();
-            this.powerMonitorMain.init();
+                this.menuMain.init();
-            await this.updaterMain.init();
+                this.powerMonitorMain.init();
-        }, (e: any) => {
+                await this.updaterMain.init();
-            // tslint:disable-next-line
+            }, (e: any) => {
-            console.error(e);
+                // tslint:disable-next-line
+                console.error(e);
+            });
         });
     }
 }

src/services/i18n.service.ts

@@ -4,7 +4,7 @@ import * as path from 'path';
 import { I18nService as I18nServiceAbstraction } from 'jslib/abstractions/i18n.service';
 
 // First locale is the default (English)
-const SupportedTranslationLocales = [
+export const SupportedTranslationLocales = [
     'en', 'cs', 'da', 'de', 'es', 'et', 'fi', 'fr', 'hr', 'hu', 'id', 'it', 'ja',
     'nb', 'nl', 'pl', 'pt-BR', 'pt-PT', 'ro', 'ru', 'sk', 'sv', 'tr', 'uk', 'vi',
     'zh-CN', 'zh-TW',