code refactor

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>

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',

src/lib/i18n.js

@@ -1,74 +1,14 @@
-import en from './langs/en.js'
+import { defaultLanguage, allLanguages } from '../locales/index.js'
-import zhHans from './langs/zh_Hans.js'
 
-const defaultLanguage = 'en';
+export function getAllLanguages() {
-
-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() {
     return allLanguages;
 }
 
-function getLanguage(locale) {
+export function getLanguage(locale) {
     return allLanguages[locale];
 }
 
-function getLocaleFromLanguageAlias(alias) {
+export function getDefaultLanguage() {
-    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() {
     if (!window || !window.navigator) {
         return defaultLanguage;
     }
@@ -94,9 +34,47 @@ function getDefaultLanguage() {
     return browserLocale;
 }
 
-export default {
+export function getI18nOptions() {
-    i18nOptions,
+    return {
-    getAllLanguages,
+        locale: defaultLanguage,
-    getLanguage,
+        fallbackLocale: defaultLanguage,
-    getDefaultLanguage
+        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;
+}

src/locales/en.js

@@ -1,7 +1,7 @@
 export default {
     'global': {
         'app': {
-            'title': 'lab app'
+            'title': 'lab account book'
         }
     },
     'error': {

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
+    }
+};

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 { getAllLanguages, getLanguage, getDefaultLanguage, getI18nOptions } from './lib/i18n.js';
-
+import settings from './lib/settings.js';
-import i18n from '../common/i18n.js';
+import services from './lib/services.js';
-import settings from '../common/settings.js';
+import userstate from './lib/userstate.js';
-import App from './App.vue';
+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),
 });

src/mobile/assets/css/custom.css

@@ -1,5 +0,0 @@
-.lab-toolbar-link-with-icon i+span {
-    font-size: 11px;
-    margin-top: 3px;
-    margin-left: 0;
-}

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 MainPage from '../views/mobile/Main.vue';
-import MainPageHomeTab from './components/main/Home.vue';
+import MainPageHomeTab from '../views/mobile/main/Home.vue';
 
-import LoginPage from './components/Login.vue';
+import LoginPage from '../views/mobile/Login.vue';
-import SettingsPage from './components/Settings.vue';
+import SettingsPage from '../views/mobile/Settings.vue';
 
 function checkLogin(to, from, resolve, reject) {
     const router = this;

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'));

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>

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 = this.$f7router;
-            const router = self.$f7router;
 
-            userState.clearToken();
+            this.$user.clearToken();
             router.navigate('/');
         }
     }

vue.config.js

@@ -1,14 +1,14 @@
 module.exports = {
     pages: {
         desktop: {
-            entry: 'src/desktop/main.js',
+            entry: 'src/desktop-main.js',
-            template: 'src/desktop/public/index.html',
+            template: 'src/public/desktop.html',
             filename: 'desktop.html',
             chunks: ['vendors-common-bundle', 'vendors-desktop-bundle', 'common-bundle', 'desktop']
         },
         mobile: {
-            entry: 'src/mobile/main.js',
+            entry: 'src/mobile-main.js',
-            template: 'src/mobile/public/index.html',
+            template: 'src/public/mobile.html',
             filename: 'mobile.html',
             chunks: ['vendors-common-bundle', 'vendors-mobile-bundle', 'common-bundle', 'mobile']
         }