Allow language selection (#191)

* Add dropdown for language

* Use vue-i18n to translate strings

* Tweak header styling

* Add Chinese languages in

* Typo

* Get language from browser (#193)

* adaptive system language

* Modify the adaptive system language

* Remove dead code

* Delete lang default values

* Move browser language detection to util

* Remove todos

* Fix global PHP dropdown

Co-authored-by: 墨娘 <61287199+moniang@users.noreply.github.com>

src/nginxconfig/templates/global.vue

@@ -29,7 +29,7 @@ THE SOFTWARE.
         <div class="tabs">
             <ul>
                 <li v-for="tab in tabs" :class="tabClass(tab.key)">
-                    <a @click="active = tab.key">{{ tab.display }}{{ changes(tab.key) }}</a>
+                    <a @click="active = tab.key">{{ $t(tab.display) }}{{ changes(tab.key) }}</a>
                 </li>
             </ul>
         </div>
@@ -44,17 +44,16 @@ THE SOFTWARE.
 
         <div class="navigation-buttons">
             <a v-if="previousTab !== false" class="button is-mini" @click="active = previousTab">
-                <i class="fas fa-long-arrow-alt-left"></i> <span>{{ i18n.common.back }}</span>
+                <i class="fas fa-long-arrow-alt-left"></i> <span>{{ $t('common.back') }}</span>
             </a>
             <a v-if="nextTab !== false" class="button is-primary is-mini" @click="active = nextTab">
-                <span>{{ i18n.common.next }}</span> <i class="fas fa-long-arrow-alt-right"></i>
+                <span>{{ $t('common.next') }}</span> <i class="fas fa-long-arrow-alt-right"></i>
             </a>
         </div>
     </div>
 </template>
 
 <script>
-    import i18n from '../i18n';
     import isChanged from '../util/is_changed';
     import * as Sections from './global_sections';
 
@@ -72,7 +71,6 @@ THE SOFTWARE.
         },
         data() {
             return {
-                i18n,
                 active: tabs[0].key,
                 tabs,
             };