code refactor

src/views/mobile/Login.vue

@@ -0,0 +1,127 @@
+<template>
+    <f7-page no-toolbar no-navbar no-swipeback login-screen>
+        <f7-login-screen-title>{{ $t('global.app.title') }}</f7-login-screen-title>
+        <f7-list form>
+            <f7-list-input
+                type="text"
+                clear-button
+                :label="$t('Username')"
+                :placeholder="$t('Username or Email')"
+                :value="username"
+                @input="username = $event.target.value"
+            ></f7-list-input>
+            <f7-list-input
+                type="password"
+                clear-button
+                :label="$t('Password')"
+                :placeholder="$t('Password')"
+                :value="password"
+                @input="password = $event.target.value"
+            ></f7-list-input>
+        </f7-list>
+        <f7-list>
+            <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>
+                <br/>
+                <f7-link href="/forget-pwd">{{ $t('Forget Password?') }}</f7-link>
+            </f7-block-footer>
+            <f7-block-footer>
+            </f7-block-footer>
+        </f7-list>
+        <f7-button small popover-open=".popover-menu">{{ currentLanguageName }}</f7-button>
+        <f7-popover class="popover-menu">
+            <f7-list>
+                <f7-list-item
+                    link="#" popover-close
+                    v-for="(lang, locale) in allLanguages" :key="locale"
+                    :title="lang.displayName"
+                    @click="changeLanguage(locale)"
+                ></f7-list-item>
+            </f7-list>
+        </f7-popover>
+    </f7-page>
+</template>
+
+<script>
+export default {
+    data() {
+        const self = this;
+
+        return {
+            username: '',
+            password: '',
+            allLanguages: self.$getAllLanguages()
+        };
+    },
+    computed: {
+        inputIsEmpty() {
+            return !this.username || !this.password;
+        },
+        currentLanguageName() {
+            const currentLocale = this.$i18n.locale;
+            let lang = this.$getLanguage(currentLocale);
+
+            if (!lang) {
+                lang = this.$getLanguage(this.$getDefaultLanguage());
+            }
+
+            return lang.displayName;
+        }
+    },
+    methods: {
+        login() {
+            const self = this;
+            const app = self.$f7;
+            const router = self.$f7router;
+
+            if (!this.username) {
+                app.dialog.alert(self.$i18n.t('Please input username'));
+                return;
+            }
+
+            if (!this.password) {
+                app.dialog.alert(self.$i18n.t('Please input password'));
+                return;
+            }
+
+            let hasResponse = false;
+
+            setTimeout(() => {
+                if (!hasResponse) {
+                    self.$f7.preloader.show();
+                }
+            }, 200);
+
+            self.$services.authorize({
+                loginName: self.username,
+                password: self.password
+            }).then(response => {
+                hasResponse = true;
+                self.$f7.preloader.hide();
+                const data = response.data;
+
+                if (data && data.success && data.result && typeof(data.result) === 'string') {
+                    self.$user.updateToken(data.result);
+                    router.navigate('/');
+                } else {
+                    app.dialog.alert(self.$i18n.t('Unable to login'));
+                }
+            }).catch(error => {
+                hasResponse = true;
+                self.$f7.preloader.hide();
+
+                if (error.response && error.response.data && error.response.data.errorMessage) {
+                    app.dialog.alert(self.$i18n.t(`error.${error.response.data.errorMessage}`));
+                } else {
+                    app.dialog.alert(self.$i18n.t('Unable to login'));
+                }
+            })
+        },
+        changeLanguage(locale) {
+            this.$setLanguage(locale);
+        }
+    }
+};
+</script>

src/views/mobile/Main.vue

@@ -0,0 +1,30 @@
+<template>
+    <f7-page name="home">
+        <f7-navbar :title="$t('global.app.title')"></f7-navbar>
+        <f7-tabs animated swipeable routable>
+            <f7-tab id="main-tab-home" class="page-content" tab-active></f7-tab>
+            <f7-tab id="main-tab-journals" class="page-content"></f7-tab>
+            <f7-tab id="main-tab-accounts" class="page-content"></f7-tab>
+            <f7-tab id="main-tab-charts" class="page-content"></f7-tab>
+        </f7-tabs>
+        <f7-toolbar tabbar bottom>
+            <f7-link route-tab-id="main-tab-home" href="/" class="lab-toolbar-link-with-icon" icon-f7="house" icon-size="24px" :text="$t('Home')" tab-link-active></f7-link>
+            <f7-link route-tab-id="main-tab-journals" href="/journals" class="lab-toolbar-link-with-icon" icon-f7="square_list" icon-size="24px" :text="$t('Journals')"></f7-link>
+            <f7-link route-tab-id="main-tab-accounts" href="/accounts" class="lab-toolbar-link-with-icon" icon-f7="creditcard" icon-size="24px" :text="$t('Accounts')"></f7-link>
+            <f7-link route-tab-id="main-tab-charts" href="/charts" class="lab-toolbar-link-with-icon" icon-f7="chart_pie" icon-size="24px" :text="$t('Charts')"></f7-link>
+            <f7-link href="/settings" class="lab-toolbar-link-with-icon" icon-f7="gear_alt" icon-size="24px" :text="$t('Settings')"></f7-link>
+        </f7-toolbar>
+    </f7-page>
+</template>
+
+<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

@@ -0,0 +1,21 @@
+<template>
+    <f7-page name="home">
+        <f7-navbar :title="$t('Settings')" :back-link="$t('Back')"></f7-navbar>
+        <f7-list>
+            <f7-list-button @click="logout">{{ $t('Logout') }}</f7-list-button>
+        </f7-list>
+    </f7-page>
+</template>
+
+<script>
+export default {
+    methods: {
+        logout() {
+            const router = this.$f7router;
+
+            this.$user.clearToken();
+            router.navigate('/');
+        }
+    }
+};
+</script>

src/views/mobile/main/Home.vue

@@ -0,0 +1,5 @@
+<template>
+    <f7-block>
+        <p>home</p>
+    </f7-block>
+</template>