From be8bd6b17bda814b36f1bf95b4a5c62fffdadb2b Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Tue, 20 Oct 2020 22:46:24 +0800
Subject: [PATCH] code refactor

---
 src/{desktop/App.vue => Desktop.vue}          |   0
 src/{mobile/App.vue => Mobile.vue}            |  11 +-
 src/{desktop/main.js => desktop-main.js}      |   2 +-
 src/{common => lib}/i18n.js                   | 118 +++++++-----------
 src/{common => lib}/services.js               |   0
 src/{common => lib}/settings.js               |   0
 src/{common => lib}/userstate.js              |   0
 src/{common/langs => locales}/en.js           |   2 +-
 src/locales/index.js                          |  18 +++
 src/{common/langs => locales}/zh_Hans.js      |   0
 src/{mobile/main.js => mobile-main.js}        |  24 ++--
 src/mobile/assets/css/custom.css              |   5 -
 .../public/index.html => public/desktop.html} |   0
 .../public/index.html => public/mobile.html}  |   0
 src/{mobile/router.js => router/mobile.js}    |  10 +-
 .../components => views/mobile}/Login.vue     |  25 ++--
 .../components => views/mobile}/Main.vue      |   8 ++
 .../components => views/mobile}/Settings.vue  |   7 +-
 .../components => views/mobile}/main/Home.vue |   0
 vue.config.js                                 |   8 +-
 20 files changed, 123 insertions(+), 115 deletions(-)
 rename src/{desktop/App.vue => Desktop.vue} (100%)
 rename src/{mobile/App.vue => Mobile.vue} (69%)
 rename src/{desktop/main.js => desktop-main.js} (70%)
 rename src/{common => lib}/i18n.js (51%)
 rename src/{common => lib}/services.js (100%)
 rename src/{common => lib}/settings.js (100%)
 rename src/{common => lib}/userstate.js (100%)
 rename src/{common/langs => locales}/en.js (97%)
 create mode 100644 src/locales/index.js
 rename src/{common/langs => locales}/zh_Hans.js (100%)
 rename src/{mobile/main.js => mobile-main.js} (50%)
 delete mode 100644 src/mobile/assets/css/custom.css
 rename src/{desktop/public/index.html => public/desktop.html} (100%)
 rename src/{mobile/public/index.html => public/mobile.html} (100%)
 rename src/{mobile/router.js => router/mobile.js} (74%)
 rename src/{mobile/components => views/mobile}/Login.vue (86%)
 rename src/{mobile/components => views/mobile}/Main.vue (92%)
 rename src/{mobile/components => views/mobile}/Settings.vue (70%)
 rename src/{mobile/components => views/mobile}/main/Home.vue (100%)

diff --git a/src/desktop/App.vue b/src/Desktop.vue
similarity index 100%
rename from src/desktop/App.vue
rename to src/Desktop.vue
diff --git a/src/mobile/App.vue b/src/Mobile.vue
similarity index 69%
rename from src/mobile/App.vue
rename to src/Mobile.vue
index fd8522aa..71a71160 100644
--- a/src/mobile/App.vue
+++ b/src/Mobile.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import routes from './router.js';
+import routes from './router/mobile.js';
 
 export default {
     data() {
@@ -20,3 +20,12 @@ export default {
     }
 }
 </script>
+
+<style>
+body {
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+</style>
diff --git a/src/desktop/main.js b/src/desktop-main.js
similarity index 70%
rename from src/desktop/main.js
rename to src/desktop-main.js
index d5fa58f0..c2fc5a58 100644
--- a/src/desktop/main.js
+++ b/src/desktop-main.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 
-import App from './App.vue'
+import App from './Desktop.vue'
 
 new Vue({
     el: '#app',
diff --git a/src/common/i18n.js b/src/lib/i18n.js
similarity index 51%
rename from src/common/i18n.js
rename to src/lib/i18n.js
index a52dda9a..c6ff9ae1 100644
--- a/src/common/i18n.js
+++ b/src/lib/i18n.js
@@ -1,74 +1,14 @@
-import en from './langs/en.js'
-import zhHans from './langs/zh_Hans.js'
+import { defaultLanguage, allLanguages } from '../locales/index.js'
 
-const defaultLanguage = 'en';
-
-const allLanguages = {
-    'en': {
-        name: 'English',
-        displayName: 'English',
-        content: en
-    },
-    'zh-Hans': {
-        name: 'Simplified Chinese',
-        displayName: '简体中文',
-        aliases: ['zh-CHS', 'zh-CN', 'zh-SG'],
-        content: zhHans
-    }
-};
-
-const i18nOptions = {
-    locale: defaultLanguage,
-    fallbackLocale: defaultLanguage,
-    formatFallbackMessages: true,
-    messages: (function () {
-        const messages = {};
-
-        for (let locale in allLanguages) {
-            if (!Object.prototype.hasOwnProperty.call(allLanguages, locale)) {
-                continue;
-            }
-
-            const lang = allLanguages[locale];
-            messages[locale] = lang.content;
-        }
-
-        return messages;
-    })()
-};
-
-function getAllLanguages() {
+export function getAllLanguages() {
     return allLanguages;
 }
 
-function getLanguage(locale) {
+export function getLanguage(locale) {
     return allLanguages[locale];
 }
 
-function getLocaleFromLanguageAlias(alias) {
-    for (let locale in allLanguages) {
-        if (!Object.prototype.hasOwnProperty.call(allLanguages, locale)) {
-            continue;
-        }
-
-        const lang = allLanguages[locale];
-        const aliases = lang.aliases;
-
-        if (!aliases || aliases.length < 1) {
-            continue;
-        }
-
-        for (let i = 0; i < aliases.length; i++) {
-            if (aliases[i] === alias) {
-                return locale;
-            }
-        }
-    }
-
-    return null;
-}
-
-function getDefaultLanguage() {
+export function getDefaultLanguage() {
     if (!window || !window.navigator) {
         return defaultLanguage;
     }
@@ -94,9 +34,47 @@ function getDefaultLanguage() {
     return browserLocale;
 }
 
-export default {
-    i18nOptions,
-    getAllLanguages,
-    getLanguage,
-    getDefaultLanguage
-};
+export function getI18nOptions() {
+    return {
+        locale: defaultLanguage,
+        fallbackLocale: defaultLanguage,
+        formatFallbackMessages: true,
+        messages: (function () {
+            const messages = {};
+
+            for (let locale in allLanguages) {
+                if (!Object.prototype.hasOwnProperty.call(allLanguages, locale)) {
+                    continue;
+                }
+
+                const lang = allLanguages[locale];
+                messages[locale] = lang.content;
+            }
+
+            return messages;
+        })()
+    };
+}
+
+function getLocaleFromLanguageAlias(alias) {
+    for (let locale in allLanguages) {
+        if (!Object.prototype.hasOwnProperty.call(allLanguages, locale)) {
+            continue;
+        }
+
+        const lang = allLanguages[locale];
+        const aliases = lang.aliases;
+
+        if (!aliases || aliases.length < 1) {
+            continue;
+        }
+
+        for (let i = 0; i < aliases.length; i++) {
+            if (aliases[i] === alias) {
+                return locale;
+            }
+        }
+    }
+
+    return null;
+}
diff --git a/src/common/services.js b/src/lib/services.js
similarity index 100%
rename from src/common/services.js
rename to src/lib/services.js
diff --git a/src/common/settings.js b/src/lib/settings.js
similarity index 100%
rename from src/common/settings.js
rename to src/lib/settings.js
diff --git a/src/common/userstate.js b/src/lib/userstate.js
similarity index 100%
rename from src/common/userstate.js
rename to src/lib/userstate.js
diff --git a/src/common/langs/en.js b/src/locales/en.js
similarity index 97%
rename from src/common/langs/en.js
rename to src/locales/en.js
index cefea1f4..ab5220ef 100644
--- a/src/common/langs/en.js
+++ b/src/locales/en.js
@@ -1,7 +1,7 @@
 export default {
     'global': {
         'app': {
-            'title': 'lab app'
+            'title': 'lab account book'
         }
     },
     'error': {
diff --git a/src/locales/index.js b/src/locales/index.js
new file mode 100644
index 00000000..ce09f3e3
--- /dev/null
+++ b/src/locales/index.js
@@ -0,0 +1,18 @@
+import en from './en.js'
+import zhHans from './zh_Hans.js'
+
+export const defaultLanguage = 'en';
+
+export const allLanguages = {
+    'en': {
+        name: 'English',
+        displayName: 'English',
+        content: en
+    },
+    'zh-Hans': {
+        name: 'Simplified Chinese',
+        displayName: '简体中文',
+        aliases: ['zh-CHS', 'zh-CN', 'zh-SG'],
+        content: zhHans
+    }
+};
diff --git a/src/common/langs/zh_Hans.js b/src/locales/zh_Hans.js
similarity index 100%
rename from src/common/langs/zh_Hans.js
rename to src/locales/zh_Hans.js
diff --git a/src/mobile/main.js b/src/mobile-main.js
similarity index 50%
rename from src/mobile/main.js
rename to src/mobile-main.js
index 348516a0..11477f47 100644
--- a/src/mobile/main.js
+++ b/src/mobile-main.js
@@ -7,32 +7,38 @@ import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js';
 import 'framework7/css/framework7.bundle.css';
 import 'framework7-icons';
 
-import './assets/css/custom.css';
-
-import i18n from '../common/i18n.js';
-import settings from '../common/settings.js';
-import App from './App.vue';
+import { getAllLanguages, getLanguage, getDefaultLanguage, getI18nOptions } from './lib/i18n.js';
+import settings from './lib/settings.js';
+import services from './lib/services.js';
+import userstate from './lib/userstate.js';
+import App from './Mobile.vue';
 
 Vue.use(VueI18n);
 Framework7.use(Framework7Vue);
 
-const i18nInstance = new VueI18n(i18n.i18nOptions);
+const i18n = new VueI18n(getI18nOptions());
 
+Vue.prototype.$settings = settings;
+Vue.prototype.$getDefaultLanguage = getDefaultLanguage;
+Vue.prototype.$getAllLanguages = getAllLanguages;
+Vue.prototype.$getLanguage = getLanguage;
 Vue.prototype.$setLanguage = function (locale) {
     if (settings.getLanguage() !== locale) {
         settings.setLanguage(locale);
     }
 
-    i18nInstance.locale = locale;
+    i18n.locale = locale;
     axios.defaults.headers.common['Accept-Language'] = locale;
     document.querySelector('html').setAttribute('lang', locale);
     return locale;
 }
+Vue.prototype.$services = services;
+Vue.prototype.$user = userstate;
 
-Vue.prototype.$setLanguage(settings.getLanguage() || i18n.getDefaultLanguage());
+Vue.prototype.$setLanguage(settings.getLanguage() || getDefaultLanguage());
 
 new Vue({
     el: '#app',
-    i18n: i18nInstance,
+    i18n: i18n,
     render: h => h(App),
 });
diff --git a/src/mobile/assets/css/custom.css b/src/mobile/assets/css/custom.css
deleted file mode 100644
index abc14d4e..00000000
--- a/src/mobile/assets/css/custom.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.lab-toolbar-link-with-icon i+span {
-    font-size: 11px;
-    margin-top: 3px;
-    margin-left: 0;
-}
diff --git a/src/desktop/public/index.html b/src/public/desktop.html
similarity index 100%
rename from src/desktop/public/index.html
rename to src/public/desktop.html
diff --git a/src/mobile/public/index.html b/src/public/mobile.html
similarity index 100%
rename from src/mobile/public/index.html
rename to src/public/mobile.html
diff --git a/src/mobile/router.js b/src/router/mobile.js
similarity index 74%
rename from src/mobile/router.js
rename to src/router/mobile.js
index 0a6a5bda..17c06fa7 100644
--- a/src/mobile/router.js
+++ b/src/router/mobile.js
@@ -1,10 +1,10 @@
-import userState from "../common/userstate.js";
+import userState from "../lib/userstate.js";
 
-import MainPage from './components/Main.vue';
-import MainPageHomeTab from './components/main/Home.vue';
+import MainPage from '../views/mobile/Main.vue';
+import MainPageHomeTab from '../views/mobile/main/Home.vue';
 
-import LoginPage from './components/Login.vue';
-import SettingsPage from './components/Settings.vue';
+import LoginPage from '../views/mobile/Login.vue';
+import SettingsPage from '../views/mobile/Settings.vue';
 
 function checkLogin(to, from, resolve, reject) {
     const router = this;
diff --git a/src/mobile/components/Login.vue b/src/views/mobile/Login.vue
similarity index 86%
rename from src/mobile/components/Login.vue
rename to src/views/mobile/Login.vue
index 9b487cf1..5794e510 100644
--- a/src/mobile/components/Login.vue
+++ b/src/views/mobile/Login.vue
@@ -5,8 +5,6 @@
             <f7-list-input
                 type="text"
                 clear-button
-                validate
-                required
                 :label="$t('Username')"
                 :placeholder="$t('Username or Email')"
                 :value="username"
@@ -15,8 +13,6 @@
             <f7-list-input
                 type="password"
                 clear-button
-                validate
-                required
                 :label="$t('Password')"
                 :placeholder="$t('Password')"
                 :value="password"
@@ -24,7 +20,7 @@
             ></f7-list-input>
         </f7-list>
         <f7-list>
-            <f7-list-button @click="login">{{ $t('Log In') }}</f7-list-button>
+            <f7-list-button :class="{ 'disabled': inputIsEmpty }" @click="login">{{ $t('Log In') }}</f7-list-button>
             <f7-block-footer>
                 <span v-t="'Don\'t have an account?'"></span>&nbsp;
                 <f7-link href="/signup">{{ $t('Create an account') }}</f7-link>
@@ -49,25 +45,26 @@
 </template>
 
 <script>
-import services from '../../common/services.js'
-import userState from '../../common/userstate.js'
-import i18n from '../../common/i18n.js';
-
 export default {
     data() {
+        const self = this;
+
         return {
             username: '',
             password: '',
-            allLanguages: i18n.getAllLanguages()
+            allLanguages: self.$getAllLanguages()
         };
     },
     computed: {
+        inputIsEmpty() {
+            return !this.username || !this.password;
+        },
         currentLanguageName() {
             const currentLocale = this.$i18n.locale;
-            let lang = i18n.getLanguage(currentLocale);
+            let lang = this.$getLanguage(currentLocale);
 
             if (!lang) {
-                lang = i18n.getLanguage(i18n.getDefaultLanguage());
+                lang = this.$getLanguage(this.$getDefaultLanguage());
             }
 
             return lang.displayName;
@@ -97,7 +94,7 @@ export default {
                 }
             }, 200);
 
-            services.authorize({
+            self.$services.authorize({
                 loginName: self.username,
                 password: self.password
             }).then(response => {
@@ -106,7 +103,7 @@ export default {
                 const data = response.data;
 
                 if (data && data.success && data.result && typeof(data.result) === 'string') {
-                    userState.updateToken(data.result);
+                    self.$user.updateToken(data.result);
                     router.navigate('/');
                 } else {
                     app.dialog.alert(self.$i18n.t('Unable to login'));
diff --git a/src/mobile/components/Main.vue b/src/views/mobile/Main.vue
similarity index 92%
rename from src/mobile/components/Main.vue
rename to src/views/mobile/Main.vue
index a4b148ee..7b1e3aec 100644
--- a/src/mobile/components/Main.vue
+++ b/src/views/mobile/Main.vue
@@ -20,3 +20,11 @@
 <script>
 export default {}
 </script>
+
+<style>
+.lab-toolbar-link-with-icon i+span {
+    font-size: 11px;
+    margin-top: 3px;
+    margin-left: 0;
+}
+</style>
diff --git a/src/mobile/components/Settings.vue b/src/views/mobile/Settings.vue
similarity index 70%
rename from src/mobile/components/Settings.vue
rename to src/views/mobile/Settings.vue
index 7cf39f79..6d0adc7a 100644
--- a/src/mobile/components/Settings.vue
+++ b/src/views/mobile/Settings.vue
@@ -8,15 +8,12 @@
 </template>
 
 <script>
-import userState from '../../common/userstate.js';
-
 export default {
     methods: {
         logout() {
-            const self = this;
-            const router = self.$f7router;
+            const router = this.$f7router;
 
-            userState.clearToken();
+            this.$user.clearToken();
             router.navigate('/');
         }
     }
diff --git a/src/mobile/components/main/Home.vue b/src/views/mobile/main/Home.vue
similarity index 100%
rename from src/mobile/components/main/Home.vue
rename to src/views/mobile/main/Home.vue
diff --git a/vue.config.js b/vue.config.js
index 10703aee..69c238c0 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,14 +1,14 @@
 module.exports = {
     pages: {
         desktop: {
-            entry: 'src/desktop/main.js',
-            template: 'src/desktop/public/index.html',
+            entry: 'src/desktop-main.js',
+            template: 'src/public/desktop.html',
             filename: 'desktop.html',
             chunks: ['vendors-common-bundle', 'vendors-desktop-bundle', 'common-bundle', 'desktop']
         },
         mobile: {
-            entry: 'src/mobile/main.js',
-            template: 'src/mobile/public/index.html',
+            entry: 'src/mobile-main.js',
+            template: 'src/public/mobile.html',
             filename: 'mobile.html',
             chunks: ['vendors-common-bundle', 'vendors-mobile-bundle', 'common-bundle', 'mobile']
         }