:D

assets/src/components/Languages.vue

@@ -0,0 +1,19 @@
+<template>
+  <select v-on:change="change" :value="selected">
+    <option value="en">{{ $t('languages.en') }}</option>
+    <option value="pt">{{ $t('languages.pt') }}</option>
+    <option value="zh-cn">{{ $t('languages.zhCN') }}</option>
+  </select>
+</template>
+
+<script>
+export default {
+  name: 'languages',
+  props: [ 'selected' ],
+  methods: {
+    change (event) {
+      this.$emit('update:selected', event.target.value)
+    }
+  }
+}
+</script>

assets/src/css/dashboard.css

@@ -35,7 +35,7 @@
   width: 1em
 }
 
-.dashboard > *:first-child {
+.dashboard > h1:first-of-type {
   margin-top: 0;
 }
 
@@ -125,3 +125,27 @@ p code {
   font-size: .8em;
   line-height: 1.5;
 }
+
+.dashboard #nav {
+  list-style: none;
+  display: flex;
+  color: rgb(84, 110, 122);
+  font-weight: 500;
+  padding: 0 0 1em;
+  margin: 0 0 1em;
+  font-size: .8em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.dashboard #nav li {
+  width: 100%;
+}
+
+.dashboard #nav li:last-child {
+  text-align: right
+}
+
+.dashboard #nav i {
+  font-size: 1em;
+  vertical-align: middle;
+}

assets/src/i18n/en.yaml

@@ -103,7 +103,6 @@ settings:
   customStylesheet: Custom Stylesheet
   examples: Examples
   globalSettings: Global Settings
-  goTo: Go to
   language: Language
   newPassword: Your new password
   newPasswordConfirm: Confirm your new password
@@ -131,7 +130,7 @@ settings:
     {0} or {1}. Then you should write {2} if you are using a regular expression and
     then the expression or the path.
   scope: Scope
-  stylesUpdated: Styles updated!
+  settingsUpdated: Settings updated!
   user: User
   userCommands: Commands
   userCommandsHelp:

assets/src/i18n/pt.yaml

@@ -103,7 +103,6 @@ settings:
   customStylesheet: Estilos Personalizados
   examples: Exemplos
   globalSettings: Configurações Globais
-  goTo: Ir para
   language: Linguagem
   newPassword: Nova palavra-passe
   newPasswordConfirm: Confirme a nova palavra-passe
@@ -132,7 +131,7 @@ settings:
     caso queira utilizar uma expressão regular. Depois, escreva o caminho do ficheiro/pasta
     ou a expressão regular.
   scope: Base
-  stylesUpdated: Estilos atualizados!
+  settingsUpdated: Configurações atualizadas!
   user: Utilizador
   userCommands: Comandos
   userCommandsHelp:

assets/src/i18n/zh-cn.yaml

@@ -102,7 +102,6 @@ settings:
   customStylesheet: 自定义样式表
   examples: 例子
   globalSettings: 全局设置
-  goTo: 转到
   newPassword: 您的新密码
   newPasswordConfirm: 重输一遍新密码
   newUser: 新建用户
@@ -125,7 +124,6 @@ settings:
     每行一条规则, 必须以关键词 {0} 或 {1} 开头. 如果使用正则表达式,
     然后使用表达式或路径, 则需要在第二列单词加入 {2} .
   scope: 目录范围
-  stylesUpdated: 样式更新!
   user: 用户
   userCommands: 用户命令(Linux 代码)
   userCommandsHelp: '一个以空格分割的列表, 用于指定该用户可以执行的命令(Linux 代码), 例如:'

assets/src/store/mutations.js

@@ -28,7 +28,6 @@ const mutations = {
     i18n.locale = value.locale
     state.user = value
   },
-  setUserCSS: (state, value) => (state.user.css = value),
   setJWT: (state, value) => (state.jwt = value),
   multiple: (state, value) => (state.multiple = value),
   addSelected: (state, value) => (state.selected.push(value)),

assets/src/views/GlobalSettings.vue

@@ -1,12 +1,20 @@
 <template>
   <div class="dashboard">
-    <h1>{{ $t('settings.globalSettings') }}</h1>
+    <ul id="nav">
-
+      <li>
-    <ul>
+        <router-link to="/settings/profile">
-      <li><router-link to="/settings/profile">{{ $t('settings.goTo') }} {{ $t('settings.profileSettings') }}</router-link></li>
+          <i class="material-icons">keyboard_arrow_left</i> {{ $t('settings.profileSettings') }}
-      <li><router-link to="/users">{{ $t('settings.goTo') }} {{ $t('settings.userManagement') }}</router-link></li>
+        </router-link>
+      </li>
+      <li>
+        <router-link to="/users">
+          {{ $t('settings.userManagement') }} <i class="material-icons">keyboard_arrow_right</i>
+        </router-link>
+      </li>
     </ul>
 
+    <h1>{{ $t('settings.globalSettings') }}</h1>
+
     <form @submit="savePlugin" v-if="plugins.length > 0">
       <template v-for="plugin in plugins">
         <h2>{{ capitalize(plugin.name) }}</h2>

assets/src/views/ProfileSettings.vue

@@ -1,21 +1,27 @@
 <template>
   <div class="dashboard">
-    <h1>{{ $t('settings.profileSettings') }}</h1>
+    <ul id="nav" v-if="user.admin">
-
+      <li>
-    <ul v-if="user.admin">
+        <router-link to="/settings/global">
-      <li><router-link to="/settings/global">{{ $t('settings.goTo') }} {{ $t('settings.globalSettings') }}</router-link></li>
+          {{ $t('settings.globalSettings') }} <i class="material-icons">keyboard_arrow_right</i>
+        </router-link>
+      </li>
     </ul>
 
-    <form @submit="updatePassword">
+    <h1>{{ $t('settings.profileSettings') }}</h1>
-      <h2>{{ $t('settings.changePassword') }}</h2>
+
-      <p><input :class="passwordClass" type="password" :placeholder="$t('settings.newPassword')" v-model="password" name="password"></p>
+    <form @submit="updateSettings">
-      <p><input :class="passwordClass" type="password" :placeholder="$t('settings.newPasswordConfirm')" v-model="passwordConf" name="password"></p>
+      <h3>{{ $t('settings.language') }}</h3>
+      <p><languages id="locale" :selected.sync="locale"></languages></p>
+      <h3>{{ $t('settings.customStylesheet') }}</h3>
+      <textarea v-model="css" name="css"></textarea>
       <p><input type="submit" :value="$t('buttons.update')"></p>
     </form>
 
-    <form @submit="updateCSS">
+    <form @submit="updatePassword">
-      <h2>{{ $t('settings.customStylesheet') }}</h2>
+      <h3>{{ $t('settings.changePassword') }}</h3>
-      <textarea v-model="css" name="css"></textarea>
+      <p><input :class="passwordClass" type="password" :placeholder="$t('settings.newPassword')" v-model="password" name="password"></p>
+      <p><input :class="passwordClass" type="password" :placeholder="$t('settings.newPasswordConfirm')" v-model="passwordConf" name="password"></p>
       <p><input type="submit" :value="$t('buttons.update')"></p>
     </form>
   </div>
@@ -24,14 +30,19 @@
 <script>
 import { mapState, mapMutations } from 'vuex'
 import { updateUser } from '@/utils/api'
+import Languages from '@/components/Languages'
 
 export default {
   name: 'settings',
+  components: {
+    Languages
+  },
   data: function () {
     return {
       password: '',
       passwordConf: '',
-      css: ''
+      css: '',
+      locale: ''
     }
   },
   computed: {
@@ -50,6 +61,7 @@ export default {
   },
   created () {
     this.css = this.user.css
+    this.locale = this.user.locale
   },
   methods: {
     ...mapMutations([ 'showSuccess' ]),
@@ -71,18 +83,17 @@ export default {
         this.$store.commit('showError', e)
       })
     },
-    updateCSS (event) {
+    updateSettings (event) {
       event.preventDefault()
 
-      let user = {
+      let user = {...this.$store.state.user}
-        ID: this.$store.state.user.ID,
+      user.css = this.css
-        css: this.css
+      user.locale = this.locale
-      }
 
-      updateUser(user, 'css').then(location => {
+      updateUser(user, 'partial').then(location => {
-        this.$store.commit('setUserCSS', this.css)
+        this.$store.commit('setUser', user)
         this.$emit('css-updated')
-        this.showSuccess(this.$t('settings.stylesUpdated'))
+        this.showSuccess(this.$t('settings.settingsUpdated'))
       }).catch(e => {
         this.$store.commit('showError', e)
       })

assets/src/views/User.vue

@@ -7,6 +7,10 @@
       <p><label for="username">{{ $t('settings.username') }}</label><input type="text" v-model="username" id="username"></p>
       <p><label for="password">{{ $t('settings.password') }}</label><input type="password" :placeholder="passwordPlaceholder" v-model="password" id="password"></p>
       <p><label for="scope">{{ $t('settings.scope') }}</label><input type="text" v-model="filesystem" id="scope"></p>
+      <p>
+        <label for="locale">{{ $t('settings.language') }}</label>
+        <languages id="locale" :selected.sync="locale"></languages>
+      </p>
 
       <h2>{{ $t('settings.permissions') }}</h2>
       <p class="small">{{ $t('settings.permissionsHelp') }}</p>
@@ -69,9 +73,11 @@
 <script>
 import { mapMutations } from 'vuex'
 import { getUser, newUser, updateUser, deleteUser } from '@/utils/api'
+import Languages from '@/components/Languages'
 
 export default {
   name: 'user',
+  components: { Languages },
   data: () => {
     return {
       id: 0,
@@ -84,6 +90,7 @@ export default {
       username: '',
       filesystem: '',
       rules: '',
+      locale: '',
       css: '',
       commands: ''
     }
@@ -129,6 +136,7 @@ export default {
         this.commands = user.commands.join(' ')
         this.css = user.css
         this.permissions = user.permissions
+        this.locale = user.locale
 
         for (let rule of user.rules) {
           if (rule.allow) {
@@ -172,6 +180,7 @@ export default {
       this.username = ''
       this.filesystem = ''
       this.rules = ''
+      this.locale = ''
       this.css = ''
       this.commands = ''
     },
@@ -204,6 +213,10 @@ export default {
       }
 
       updateUser(user).then(location => {
+        if (user.ID === this.$store.state.user.ID) {
+          this.$store.commit('setUser', user)
+        }
+
         this.$store.commit('showSuccess', this.$t('settings.userUpdated'))
       }).catch(e => {
         this.$store.commit('showError', e)
@@ -221,6 +234,7 @@ export default {
         allowEdit: this.allowEdit,
         permissions: this.permissions,
         css: this.css,
+        locale: this.locale,
         commands: this.commands.split(' '),
         rules: []
       }

users.go

@@ -256,14 +256,20 @@ func usersPutHandler(c *RequestContext, w http.ResponseWriter, r *http.Request)
 		return http.StatusBadRequest, err
 	}
 
-	// Updates the CSS.
+	// Updates the CSS and locale.
-	if which == "css" {
+	if which == "partial" {
 		c.User.CSS = u.CSS
+		c.User.Locale = u.Locale
 		err = c.FM.db.UpdateField(&User{ID: c.User.ID}, "CSS", u.CSS)
 		if err != nil {
 			return http.StatusInternalServerError, err
 		}
 
+		err = c.FM.db.UpdateField(&User{ID: c.User.ID}, "Locale", u.Locale)
+		if err != nil {
+			return http.StatusInternalServerError, err
+		}
+
 		return http.StatusOK, nil
 	}