:D

2017-08-01 17:49:13 +01:00 · 2017-08-01 17:49:13 +01:00 · 100c9654e8
commit 100c9654e8
parent 4ee4732a52
10 changed files with 112 additions and 35 deletions
--- a/assets/src/components/Languages.vue
+++ b/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>
--- a/assets/src/css/dashboard.css
+++ b/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;
+}
--- a/assets/src/i18n/en.yaml
+++ b/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:
--- a/assets/src/i18n/pt.yaml
+++ b/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:
--- a/assets/src/i18n/zh-cn.yaml
+++ b/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 代码), 例如:'
--- a/assets/src/store/mutations.js
+++ b/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)),
--- a/assets/src/views/GlobalSettings.vue
+++ b/assets/src/views/GlobalSettings.vue
@ -1,12 +1,20 @@
 <template>
  <div class="dashboard">
-    <h1>{{ $t('settings.globalSettings') }}</h1>
-
-    <ul>
-      <li><router-link to="/settings/profile">{{ $t('settings.goTo') }} {{ $t('settings.profileSettings') }}</router-link></li>
-      <li><router-link to="/users">{{ $t('settings.goTo') }} {{ $t('settings.userManagement') }}</router-link></li>
+    <ul id="nav">
+      <li>
+        <router-link to="/settings/profile">
+          <i class="material-icons">keyboard_arrow_left</i> {{ $t('settings.profileSettings') }}
+        </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>
--- a/assets/src/views/ProfileSettings.vue
+++ b/assets/src/views/ProfileSettings.vue
@ -1,21 +1,27 @@
 <template>
  <div class="dashboard">
-    <h1>{{ $t('settings.profileSettings') }}</h1>
-
-    <ul v-if="user.admin">
-      <li><router-link to="/settings/global">{{ $t('settings.goTo') }} {{ $t('settings.globalSettings') }}</router-link></li>
+    <ul id="nav" v-if="user.admin">
+      <li>
+        <router-link to="/settings/global">
+          {{ $t('settings.globalSettings') }} <i class="material-icons">keyboard_arrow_right</i>
+        </router-link>
+      </li>
    </ul>

-    <form @submit="updatePassword">
-      <h2>{{ $t('settings.changePassword') }}</h2>
-      <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>
+    <h1>{{ $t('settings.profileSettings') }}</h1>
+
+    <form @submit="updateSettings">
+      <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">
-      <h2>{{ $t('settings.customStylesheet') }}</h2>
-      <textarea v-model="css" name="css"></textarea>
+    <form @submit="updatePassword">
+      <h3>{{ $t('settings.changePassword') }}</h3>
+      <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 = {
-        ID: this.$store.state.user.ID,
-        css: this.css
-      }
+      let user = {...this.$store.state.user}
+      user.css = this.css
+      user.locale = this.locale

-      updateUser(user, 'css').then(location => {
-        this.$store.commit('setUserCSS', this.css)
+      updateUser(user, 'partial').then(location => {
+        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)
      })
--- a/assets/src/views/User.vue
+++ b/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: []
      }
--- a/users.go
+++ b/users.go
@ -256,14 +256,20 @@ func usersPutHandler(c *RequestContext, w http.ResponseWriter, r *http.Request)
 		return http.StatusBadRequest, err
 	}

-	// Updates the CSS.
-	if which == "css" {
+	// Updates the CSS and locale.
+	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
 	}