Adding custom language setting.

- Fixes #319

4 files changed, 71 insertions, 7 deletions

diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index 0aba995f..bf77d4b7 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -27,6 +27,7 @@ import {
   capitalizeFirstLetter,
   themes,
   setTheme,
+  languages,
 } from '../utils';
 import { PostListing } from './post-listing';
 import { SortSelect } from './sort-select';
@@ -94,6 +95,7 @@ export class User extends Component<any, UserState> {
       theme: null,
       default_sort_type: null,
       default_listing_type: null,
+      lang: null,
       auth: null,
     },
     userSettingsLoading: null,
@@ -423,6 +425,32 @@ export class User extends Component<any, UserState> {
               <div class="form-group">
                 <div class="col-12">
                   <label>
+                    <T i18nKey="language">#</T>
+                  </label>
+                  <select
+                    value={this.state.userSettingsForm.lang}
+                    onChange={linkEvent(
+                      this,
+                      this.handleUserSettingsLangChange
+                    )}
+                    class="ml-2 custom-select custom-select-sm w-auto"
+                  >
+                    <option disabled>
+                      <T i18nKey="language">#</T>
+                    </option>
+                    <option value="browser">
+                      <T i18nKey="browser_default">#</T>
+                    </option>
+                    <option disabled>──</option>
+                    {languages.map(lang => (
+                      <option value={lang.code}>{lang.name}</option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+              <div class="form-group">
+                <div class="col-12">
+                  <label>
                     <T i18nKey="theme">#</T>
                   </label>
                   <select
@@ -693,6 +721,12 @@ export class User extends Component<any, UserState> {
     i.setState(i.state);
   }
 
+  handleUserSettingsLangChange(i: User, event: any) {
+    i.state.userSettingsForm.lang = event.target.value;
+    i18n.changeLanguage(i.state.userSettingsForm.lang);
+    i.setState(i.state);
+  }
+
   handleUserSettingsSortTypeChange(val: SortType) {
     this.state.userSettingsForm.default_sort_type = val;
     this.setState(this.state);
@@ -762,6 +796,7 @@ export class User extends Component<any, UserState> {
           UserService.Instance.user.default_sort_type;
         this.state.userSettingsForm.default_listing_type =
           UserService.Instance.user.default_listing_type;
+        this.state.userSettingsForm.lang = UserService.Instance.user.lang;
       }
       document.title = `/u/${this.state.user.name} - ${WebSocketService.Instance.site.name}`;
       window.scrollTo(0, 0);
diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts
index 9cd9bef4..f327202a 100644
--- a/ui/src/interfaces.ts
+++ b/ui/src/interfaces.ts
@@ -79,6 +79,7 @@ export interface User {
   theme: string;
   default_sort_type: SortType;
   default_listing_type: ListingType;
+  lang: string;
 }
 
 export interface UserView {
@@ -469,6 +470,7 @@ export interface UserSettingsForm {
   theme: string;
   default_sort_type: SortType;
   default_listing_type: ListingType;
+  lang: string;
   auth: string;
 }
 
diff --git a/ui/src/translations/en.ts b/ui/src/translations/en.ts
index e20ba40a..ce5fcdcc 100644
--- a/ui/src/translations/en.ts
+++ b/ui/src/translations/en.ts
@@ -125,6 +125,8 @@ export const en = {
     email: 'Email',
     optional: 'Optional',
     expires: 'Expires',
+    language: 'Language',
+    browser_default: 'Browser Default',
     url: 'URL',
     body: 'Body',
     copy_suggested_title: 'copy suggested title: {{title}}',
diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index 2cf80d14..1bbda3aa 100644
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -16,6 +16,7 @@ import {
   ListingType,
   SearchType,
 } from './interfaces';
+import { UserService } from './services/UserService';
 import * as markdown_it from 'markdown-it';
 import * as markdownitEmoji from 'markdown-it-emoji/light';
 import * as markdown_it_container from 'markdown-it-container';
@@ -240,16 +241,32 @@ export function debounce(
   };
 }
 
+export const languages = [
+  { code: 'en', name: 'English' },
+  { code: 'eo', name: 'Esperanto' },
+  { code: 'es', name: 'Español' },
+  { code: 'de', name: 'Deutsch' },
+  { code: 'zh', name: '中文' },
+  { code: 'fr', name: 'Français' },
+  { code: 'sv', name: 'Svenska' },
+  { code: 'ru', name: 'Русский' },
+  { code: 'nl', name: 'Nederlands' },
+  { code: 'it', name: 'Italiano' },
+];
+
 export function getLanguage(): string {
-  return navigator.language || navigator.userLanguage;
+  let user = UserService.Instance.user;
+  let lang = user && user.lang ? user.lang : 'browser';
+
+  if (lang == 'browser') {
+    return getBrowserLanguage();
+  } else {
+    return lang;
+  }
 }
 
-export function objectFlip(obj: any) {
-  const ret = {};
-  Object.keys(obj).forEach(key => {
-    ret[obj[key]] = key;
-  });
-  return ret;
+export function getBrowserLanguage(): string {
+  return navigator.language || navigator.userLanguage;
 }
 
 export function getMomentLanguage(): string {
@@ -313,3 +330,11 @@ export function setTheme(theme: string = 'darkly') {
   }
   document.getElementById(theme).removeAttribute('disabled');
 }
+
+export function objectFlip(obj: any) {
+  const ret = {};
+  Object.keys(obj).forEach(key => {
+    ret[obj[key]] = key;
+  });
+  return ret;
+}