feat(locale): store in db (#413)

* feat(locale): store in db

* fix

client/src/components/UserSettings.vue

@@ -10,7 +10,10 @@
 
       <div class="select-language">
         {{ $t("settings.language-option") }}
-        <select v-model="$i18n.locale">
+        <select :value="user.locale" @change="setLocale">
+          <option :value="null">
+            {{ $t("settings.browser-language") }}
+          </option>
           <option
             v-for="(locale, i) in locales"
             :key="`locale-${i}`"
@@ -32,8 +35,9 @@
 </template>
 
 <script>
-import { mapMutations } from "vuex";
+import { mapState, mapMutations } from "vuex";
 import { api } from "@/utils";
+import i18n from "@/plugins/i18n";
 import { languages } from "../locales";
 
 export default {
@@ -42,8 +46,22 @@ export default {
       locales: languages || []
     };
   },
+  computed: {
+    ...mapState("user", ["user"])
+  },
   methods: {
     ...mapMutations("user", ["setAuth"]),
+    async setLocale(event) {
+      const locale = event.target.value || null;
+      if (locale) {
+        i18n.locale = locale;
+      } else {
+        i18n.locale = navigator.language.split("-")[0];
+      }
+      await api.put("/api/user", {
+        body: JSON.stringify({ locale })
+      });
+    },
     async deleteMe() {
       this.$store.commit("popup/setPopup", {
         title: "Delete account",

client/src/locales/en.json

@@ -59,6 +59,7 @@
   "settings": {
     "delete-account-option": "Delete account",
     "help-option": "Help",
+    "browser-language": "Browser language",
     "language-option": "Language",
     "logout-option": "Log out",
     "title": "Settings"

client/src/locales/sv.json

@@ -59,6 +59,7 @@
   "settings": {
     "delete-account-option": "Avsluta konto",
     "help-option": "Hjälp",
+    "browser-language": "Webbläsarens språk",
     "language-option": "Språk",
     "logout-option": "Logga  ut",
     "title": "Inställningar"

client/src/plugins/i18n.ts

@@ -1,5 +1,7 @@
+import { EVENT_TYPE } from "@/constants";
 import Vue from "vue";
 import VueI18n, { LocaleMessages } from "vue-i18n";
+import EventBus from "./event-bus";
 
 Vue.use(VueI18n);
 
@@ -20,8 +22,16 @@ function loadLocaleMessages(): LocaleMessages {
   return messages;
 }
 
-export default new VueI18n({
-  locale: "en",
-  fallbackLocale: "sv",
+const i18n = new VueI18n({
+  locale: navigator.language.split("-")[0],
+  fallbackLocale: "en",
   messages: loadLocaleMessages()
 });
+
+EventBus.$on(EVENT_TYPE.AUTH_CHANGE, ({ isAuthenticated, locale }) => {
+  if (isAuthenticated && locale) {
+    i18n.locale = locale;
+  }
+});
+
+export default i18n;

server/migrations/20221106-user-locale.sql

@@ -0,0 +1,2 @@
+ALTER TABLE users
+ADD COLUMN locale VARCHAR(2);

server/schema.sql

@@ -6,6 +6,7 @@ CREATE TABLE users (
   username  VARCHAR(50)   NOT NULL,
   email     VARCHAR(255)  NOT NULL UNIQUE,
   photo     VARCHAR(255),
+  locale    VARCHAR(2),
   is_admin  BOOLEAN       NOT NULL DEFAULT FALSE,
 
   created_at TIMESTAMP DEFAULT NOW(),

server/src/user/user-model.js

@@ -17,6 +17,8 @@
  *           type: string
  */
 
+const { keyValuePairs } = require("../utils");
+
 const SELECT_QR_SHARDS_SQL = where => `
   SELECT users.id, CAST(COUNT(qrshards.*) AS int) AS qrshards_score
   FROM users
@@ -57,7 +59,7 @@ const SELECT_STREAK_SQL = () => `
 `;
 
 const SELECT_USERS_SQL = args => `
-  SELECT id, username, name, email, photo, is_admin, created_at ${args}
+  SELECT id, username, name, email, photo, locale, is_admin, created_at ${args}
   FROM users
 `;
 
@@ -110,11 +112,14 @@ module.exports = db => ({
     return { user: rows[0], err };
   },
 
-  update: async (id, { name, photo }) => {
+  update: async (id, user) => {
+    const valid = ["name", "photo", "locale"];
+    const { keyIndices, values } = keyValuePairs(valid, user);
     const sql = `
-        UPDATE users SET (name, photo) = ($2, $3)
-        WHERE id = $1 RETURNING *`;
-    const { rows, err } = await db.query(sql, [id, name, photo]);
+        UPDATE users SET ${keyIndices}
+        WHERE id = ${id} RETURNING *`;
+
+    const { rows, err } = await db.query(sql, values);
     return { user: rows[0], err };
   },
 

server/src/user/user-route.js

@@ -49,6 +49,29 @@ module.exports = ({ app, db, isLoggedIn }) => {
     );
   });
 
+  /**
+   * @swagger
+   * /user:
+   *   put:
+   *     summary: Update your user
+   *     tags:
+   *       - User
+   *     responses:
+   *       200:
+   *         content:
+   *           application/json:
+   *             schema:
+   *               $ref: '#/components/schemas/User'
+   */
+
+  app.put("/api/user", async (req, res, next) => {
+    const { user: req_user = {}, body } = req;
+    const { user, err } = await User.update(req_user.id, body);
+    if (err) return next(err);
+    if (!user) return res.sendStatus(404);
+    return res.send(user);
+  });
+
   /**
    * @swagger
    * /user: