[bug] Display language and services correctly in provider wizard

2 files changed, 71 insertions, 2 deletions

diff --git a/ui/app/components/wizard/provider_select_stage.js b/ui/app/components/wizard/provider_select_stage.js
index 19799f86..e33310b2 100644
--- a/ui/app/components/wizard/provider_select_stage.js
+++ b/ui/app/components/wizard/provider_select_stage.js
@@ -3,6 +3,7 @@ import {Button, ButtonGroup, ButtonToolbar, Glyphicon} from 'react-bootstrap'
 
 import App from 'app'
 import Provider from 'models/provider'
+import Language from 'lib/language'
 
 import ListEditor from 'components/list_editor'
 import {HorizontalLayout, Column} from 'components/layout'
@@ -10,6 +11,12 @@ import {HorizontalLayout, Column} from 'components/layout'
 import StageLayout from './stage_layout'
 import AddProviderModal from './add_provider_modal'
 
+const SERVICE_MAP = {
+  mx: "Mail",
+  openvpn: "VPN",
+  chat: "Chat"
+}
+
 export default class ProviderSelectStage extends React.Component {
 
   static get defaultProps() {return{
@@ -131,14 +138,16 @@ export default class ProviderSelectStage extends React.Component {
     let modal = null
     let info = null
     if (this.state.provider) {
+      let languages = this.state.provider.languages.map(code => Language.find(code).name)
+      let services = this.state.provider.services.map(code => SERVICE_MAP[code] || '????')
       info = (
         <div>
           <h1 className="first">{this.state.provider.name}</h1>
           <h3>{this.state.provider.domain}</h3>
           <p>{this.state.provider.description}</p>
           <p><b>Enrollment Policy:</b> {this.state.provider.enrollment_policy}</p>
-          <p><b>Services</b>: {this.state.provider.services}</p>
-          <p><b>Languages</b>: {this.state.provider.languages.join(', ')}</p>
+          <p><b>Services</b>: {services}</p>
+          <p><b>Languages</b>: {languages.join(', ')}</p>
         </div>
       )
     } else if (this.state.error) {
diff --git a/ui/app/lib/language.js b/ui/app/lib/language.js
new file mode 100644
index 00000000..17e00fd8
--- /dev/null
+++ b/ui/app/lib/language.js
@@ -0,0 +1,60 @@
+//
+// Language data, sorted by number of native speakers
+// https://en.wikipedia.org/wiki/List_of_languages_by_number_of_native_speakers
+// fields: code, name, english name, right to left?
+//
+
+const DATA = {
+  zh: ['zh', '中文', 'Chinese'],
+  es: ['es', 'Español', 'Spanish'],
+  en: ['en', 'English'],
+  hi: ['hi', 'हिन्दी', 'Hindi'],
+  ar: ['ar', 'العربية', 'Arabic', true],
+  pt: ['pt', 'Português', 'Portugues'],
+  bn: ['bn', 'বাংলা', 'Bengali'],
+  ru: ['ru', 'Pyccĸий', 'Russian'],
+  ja: ['ja', '日本語', 'Japanese'],
+  pa: ['pa', 'ਪੰਜਾਬੀ', 'Punjabi'],
+  de: ['de', 'Deutsch', 'German'],
+  ms: ['ms', 'بهاس ملايو', 'Malay'],
+  te: ['te', 'తెలుగు', 'Telugu'],
+  vi: ['vi', 'Tiếng Việt', 'Vietnamese'],
+  ko: ['ko', '한국어', 'Korean'],
+  fr: ['fr', 'Français', 'French'],
+  mr: ['mr', 'मराठी', 'Marathi'],
+  ta: ['ta', 'தமிழ்', 'Tamil'],
+  ur: ['ur', 'اُردُو', 'Urdu'],
+  fa: ['fa', 'فارسی', 'Farsi'],
+  tr: ['tr', 'Türkçe', 'Turkish'],
+  it: ['it', 'Italiano', 'Italian'],
+  th: ['th', 'ภาษาไทย', 'Thai'],
+  gu: ['gu', 'Gujarati'],
+  pl: ['pl', 'Polski', 'Polish'],
+  ml: ['ml', 'Malayalam'],
+  uk: ['uk', 'Ukrainian'],
+  sw: ['sw', 'Swahili'],
+  uz: ['uz', 'Uzbek'],
+  ro: ['ro', 'Romanian'],
+  nl: ['nl', 'Nederlands', 'Dutch'],
+  sr: ['sr', 'Serbian'],
+  el: ['el', 'Ελληνικά', 'Greek'],
+  ca: ['ca', 'Català', 'Catalan'],
+  he: ['he', 'עברית', 'Hebrew', true],
+  sl: ['sl', 'Slovenščina', 'Slovenian'],
+  lt: ['lt', 'Lietuvių kalba', 'Lithuanian']
+}
+
+export default class Language {
+
+  constructor(data_entry) {
+    this.code = data_entry[0] || 'xx'
+    this.name = data_entry[1]  || '????'
+    this.en_name = data_entry[2] || '????'
+    this.rtl = data_entry[3]
+  }
+
+  static find(code) {
+    return new Language(DATA[code])
+  }
+
+}