QoL frontend improvements (#267)

* refactor: add space for language title * feat: add overflow-break to text-wrap class * feat: add public key text wrapping for interfaces * refactor: get rid of getlang function and set locale during initialization fix: show english flag when locale does not match * refactor: bind header logo alt attribute to companyName * refactor: add language name to german * refactor: add language name to russian * refactor: add language name to english
h44z · Jul 4, 2024 · 58294a3 · 58294a3
1 parent 6f52cb2
commit 58294a3
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 18 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -42,6 +42,9 @@ const switchLanguage = function (lang) {
 const languageFlag = computed(() => {
   // `this` points to the component instance
   let lang = appGlobal.$i18n.locale.toLowerCase();
+  if (!appGlobal.$i18n.availableLocales.includes(lang)) {
+    lang = appGlobal.$i18n.fallbackLocale;
+  }
   if (lang === "en") {
     lang = "us";
   }
@@ -59,7 +62,7 @@ const currentYear = ref(new Date().getFullYear())
 
   <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
     <div class="container-fluid">
-      <a class="navbar-brand" href="/"><img alt="WireGuard Portal" src="/img/header-logo.png" /></a>
+      <a class="navbar-brand" href="/"><img :alt="companyName" src="/img/header-logo.png" /></a>
       <button aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
         data-bs-target="#navbarTop" data-bs-toggle="collapse" type="button">
         <span class="navbar-toggler-icon"></span>
@@ -110,9 +113,9 @@ const currentYear = ref(new Date().getFullYear())
               <button aria-expanded="false" aria-haspopup="true" class="btn btn btn-secondary pe-0"
                 data-bs-toggle="dropdown" type="button"><span :class="languageFlag" class="fi"></span></button>
               <div aria-labelledby="btnGroupDrop3" class="dropdown-menu" style="">
-                <a class="dropdown-item" href="#" @click.prevent="switchLanguage('en')"><span class="fi fi-us"></span>English</a>
-                <a class="dropdown-item" href="#" @click.prevent="switchLanguage('de')"><span class="fi fi-de"></span>Deutsch</a>
-                <a class="dropdown-item" href="#" @click.prevent="switchLanguage('ru')"><span class="fi fi-ru"></span>Русский</a>
+                <a class="dropdown-item" href="#" @click.prevent="switchLanguage('en')"><span class="fi fi-us"></span> English</a>
+                <a class="dropdown-item" href="#" @click.prevent="switchLanguage('de')"><span class="fi fi-de"></span> Deutsch</a>
+                <a class="dropdown-item" href="#" @click.prevent="switchLanguage('ru')"><span class="fi fi-ru"></span> Русский</a>
               </div>
             </div>
           </div>

diff --git a/frontend/src/assets/base.css b/frontend/src/assets/base.css
@@ -2,4 +2,8 @@ a.disabled {
     pointer-events: none;
     cursor: default;
     color: #888888;
-}
+}
+
+.text-wrap {
+    overflow-break: anywhere;
+}
diff --git a/frontend/src/lang/index.js b/frontend/src/lang/index.js
@@ -4,20 +4,16 @@ import ru from './translations/ru.json';
 import en from './translations/en.json';
 import {createI18n} from "vue-i18n";
 
-function getStoredLanguage() {
-  let initialLang = localStorage.getItem('wgLang');
-  if (!initialLang) {
-    initialLang = "en"
-  }
-  return initialLang
-}
-
 // Create i18n instance with options
 const i18n = createI18n({
   legacy: false,
   globalInjection: true,
   allowComposition: true,
-  locale: getStoredLanguage(), // set locale
+  locale: (
+    localStorage.getItem('wgLang')
+    || (window && window.navigator && (window.navigator.userLanguage || window.navigator.language).split('-')[0])
+    || 'en'
+  ), // set locale
   fallbackLocale: "en", // set fallback locale
   messages: {
     "de": de,
@@ -26,4 +22,4 @@ const i18n = createI18n({
   }
 });
 
-export default i18n
+export default i18n
diff --git a/frontend/src/lang/translations/de.json b/frontend/src/lang/translations/de.json
@@ -1,4 +1,7 @@
 {
+  "languages": {
+    "de": "Deutsch"
+  },
   "general": {
     "pagination": {
       "size": "Anzahl an Elementen",

diff --git a/frontend/src/lang/translations/en.json b/frontend/src/lang/translations/en.json
@@ -1,4 +1,7 @@
 {
+  "languages": {
+    "en": "English"
+  },
   "general": {
     "pagination": {
       "size": "Number of Elements",

diff --git a/frontend/src/lang/translations/ru.json b/frontend/src/lang/translations/ru.json
@@ -1,4 +1,7 @@
 {
+  "languages": {
+    "ru": "Русский"
+  },
   "general": {
     "pagination": {
       "size": "Количество элементов",

diff --git a/frontend/src/views/InterfaceView.vue b/frontend/src/views/InterfaceView.vue
@@ -138,7 +138,7 @@ onMounted(async () => {
                 <tbody>
                 <tr>
                   <td>{{ $t('interfaces.interface.key') }}:</td>
-                  <td>{{interfaces.GetSelected.PublicKey}}</td>
+                  <td class="text-wrap">{{interfaces.GetSelected.PublicKey}}</td>
                 </tr>
                 <tr>
                   <td>{{ $t('interfaces.interface.endpoint') }}:</td>
@@ -192,7 +192,7 @@ onMounted(async () => {
                 <tbody>
                 <tr>
                   <td>{{ $t('interfaces.interface.key') }}:</td>
-                  <td>{{interfaces.GetSelected.PublicKey}}</td>
+                  <td class="text-wrap">{{interfaces.GetSelected.PublicKey}}</td>
                 </tr>
                 <tr>
                   <td>{{ $t('interfaces.interface.endpoints') }}:</td>
@@ -230,7 +230,7 @@ onMounted(async () => {
                 <tbody>
                 <tr>
                   <td>{{ $t('interfaces.interface.key') }}:</td>
-                  <td>{{interfaces.GetSelected.PublicKey}}</td>
+                  <td class="text-wrap">{{interfaces.GetSelected.PublicKey}}</td>
                 </tr>
                 <tr>
                   <td>{{ $t('interfaces.interface.endpoint') }}:</td>