mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-17 16:24:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

modify ui

Browse Source
This commit is contained in:
MaysWind
2020-11-11 23:29:03 +08:00
parent c21cf9e60d
commit b5a5032bd2
9 changed files with 316 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/locales/en.js
+2
View File
@@ -235,6 +235,8 @@ export default {
'Cancel': 'Cancel', 'Cancel': 'Cancel',
'Close': 'Close', 'Close': 'Close',
'Submit': 'Submit', 'Submit': 'Submit',
'Add': 'Add',
'Save': 'Save',
'Update': 'Update', 'Update': 'Update',
'None': 'None', 'None': 'None',
'Done': 'Done', 'Done': 'Done',
src/locales/zh_Hans.js
+2
View File
@@ -235,6 +235,8 @@ export default {
'Cancel': '取消', 'Cancel': '取消',
'Close': '关闭', 'Close': '关闭',
'Submit': '提交', 'Submit': '提交',
'Add': '添加',
'Save': '保存',
'Update': '更新', 'Update': '更新',
'None': '无', 'None': '无',
'Done': '完成', 'Done': '完成',
src/views/mobile/About.vue
+10 -6
View File
@@ -2,12 +2,16 @@
<f7-page> <f7-page>
<f7-navbar :title="$t('About')" :back-link="$t('Back')"></f7-navbar> <f7-navbar :title="$t('About')" :back-link="$t('Back')"></f7-navbar>
<f7-list> <f7-card>
<f7-list-item :title="$t('Version')" :after="version"></f7-list-item> <f7-card-content :padding="false">
<f7-list-item external :title="$t('Official Website')" after="https://github.com/mayswind/lab" <f7-list>
link="https://github.com/mayswind/lab" target="_blank"></f7-list-item> <f7-list-item :title="$t('Version')" :after="version"></f7-list-item>
<f7-list-item :title="$t('License')" link="#" popup-open=".license-popup"></f7-list-item> <f7-list-item external :title="$t('Official Website')" after="https://github.com/mayswind/lab"
</f7-list> link="https://github.com/mayswind/lab" target="_blank"></f7-list-item>
<f7-list-item :title="$t('License')" link="#" popup-open=".license-popup"></f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
<f7-popup class="license-popup"> <f7-popup class="license-popup">
<f7-page> <f7-page>
src/views/mobile/Settings.vue
+53 -41
View File
@@ -1,47 +1,59 @@
<template> <template>
<f7-page :key="currentLocale"> <f7-page>
<f7-navbar :title="$t('Settings')" :back-link="$t('Back')"></f7-navbar> <f7-navbar :title="$t('Settings')" :back-link="$t('Back')"></f7-navbar>
<f7-block-title>{{ userNickName }}</f7-block-title>
<f7-list> <f7-block-title class="margin-top">{{ userNickName }}</f7-block-title>
<f7-list-item :title="$t('User Profile')" link="/user/profile"></f7-list-item> <f7-card>
<f7-list-item :title="$t('Two-Factor Authentication')" link="/user/2fa"></f7-list-item> <f7-card-content :padding="false">
<f7-list-item :title="$t('Device & Sessions')" link="/user/sessions"></f7-list-item> <f7-list>
<f7-list-button :class="{ 'disabled': logouting }" @click="logout">{{ $t('Log Out') }}</f7-list-button> <f7-list-item :title="$t('User Profile')" link="/user/profile"></f7-list-item>
</f7-list> <f7-list-item :title="$t('Two-Factor Authentication')" link="/user/2fa"></f7-list-item>
<f7-list-item :title="$t('Device & Sessions')" link="/user/sessions"></f7-list-item>
<f7-list-button :class="{ 'disabled': logouting }" @click="logout">{{ $t('Log Out') }}</f7-list-button>
</f7-list>
</f7-card-content>
</f7-card>
<f7-block-title>{{ $t('Application') }}</f7-block-title> <f7-block-title>{{ $t('Application') }}</f7-block-title>
<f7-list> <f7-card>
<f7-list-item <f7-card-content :padding="false">
:title="$t('Language')" <f7-list>
smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done') }"> <f7-list-item
<select v-model="currentLocale"> :key="currentLocale"
<option v-for="(lang, locale) in allLanguages" :title="$t('Language')"
:key="locale" smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done') }">
:value="locale">{{ lang.displayName }}</option> <select v-model="currentLocale">
</select> <option v-for="(lang, locale) in allLanguages"
</f7-list-item> :key="locale"
<f7-list-item> :value="locale">{{ lang.displayName }}</option>
<span>{{ $t('Enable Thousands Separator') }}</span> </select>
<f7-toggle :checked="isEnableThousandsSeparator" @toggle:change="isEnableThousandsSeparator = $event"></f7-toggle> </f7-list-item>
</f7-list-item> <f7-list-item>
<f7-list-item <span>{{ $t('Enable Thousands Separator') }}</span>
:title="$t('Currency Display Mode')" <f7-toggle :checked="isEnableThousandsSeparator" @toggle:change="isEnableThousandsSeparator = $event"></f7-toggle>
smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done') }"> </f7-list-item>
<select v-model="currencyDisplayMode"> <f7-list-item
<option value="none">{{ $t('None') }}</option> :key="currentLocale"
<option value="code">{{ $t('Currency Code') }}</option> :title="$t('Currency Display Mode')"
<option value="name">{{ $t('Currency Name') }}</option> smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done') }">
</select> <select v-model="currencyDisplayMode">
</f7-list-item> <option value="none">{{ $t('None') }}</option>
<f7-list-item> <option value="code">{{ $t('Currency Code') }}</option>
<span>{{ $t('Enable Animate') }}</span> <option value="name">{{ $t('Currency Name') }}</option>
<f7-toggle :checked="isEnableAnimate" @toggle:change="isEnableAnimate = $event"></f7-toggle> </select>
</f7-list-item> </f7-list-item>
<f7-list-item> <f7-list-item>
<span>{{ $t('Enable Auto Dark Mode') }}</span> <span>{{ $t('Enable Animate') }}</span>
<f7-toggle :checked="isEnableAutoDarkMode" @toggle:change="isEnableAutoDarkMode = $event"></f7-toggle> <f7-toggle :checked="isEnableAnimate" @toggle:change="isEnableAnimate = $event"></f7-toggle>
</f7-list-item> </f7-list-item>
<f7-list-item :title="$t('About')" link="/about" :after="version"></f7-list-item> <f7-list-item>
</f7-list> <span>{{ $t('Enable Auto Dark Mode') }}</span>
<f7-toggle :checked="isEnableAutoDarkMode" @toggle:change="isEnableAutoDarkMode = $event"></f7-toggle>
</f7-list-item>
<f7-list-item :title="$t('About')" link="/about" :after="version"></f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
</f7-page> </f7-page>
</template> </template>
src/views/mobile/Signup.vue
+70 -61
View File
@@ -1,67 +1,76 @@
<template> <template>
<f7-page> <f7-page>
<f7-navbar :title="$t('Sign Up')" :back-link="$t('Back')"></f7-navbar> <f7-navbar>
<f7-list no-hairlines-md> <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
<f7-list-input <f7-nav-title :title="$t('Sign Up')"></f7-nav-title>
type="text" <f7-nav-right>
clear-button <f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="$t('Submit')" @click="submit"></f7-link>
:label="$t('Username')" </f7-nav-right>
:placeholder="$t('Your username')" </f7-navbar>
:value="user.username"
@input="user.username = $event.target.value"
></f7-list-input>
<f7-list-input <f7-card>
type="password" <f7-card-content :padding="false">
clear-button <f7-list>
:label="$t('Password')" <f7-list-input
:placeholder="$t('Your password, at least 6 characters')" type="text"
:value="user.password" clear-button
@input="user.password = $event.target.value" :label="$t('Username')"
></f7-list-input> :placeholder="$t('Your username')"
:value="user.username"
@input="user.username = $event.target.value"
></f7-list-input>
<f7-list-input <f7-list-input
type="password" type="password"
clear-button clear-button
:label="$t('Confirmation Password')" :label="$t('Password')"
:placeholder="$t('Re-enter the password')" :placeholder="$t('Your password, at least 6 characters')"
:value="user.confirmPassword" :value="user.password"
@input="user.confirmPassword = $event.target.value" @input="user.password = $event.target.value"
></f7-list-input> ></f7-list-input>
<f7-list-input <f7-list-input
type="email" type="password"
clear-button clear-button
:label="$t('E-mail')" :label="$t('Confirmation Password')"
:placeholder="$t('Your email address')" :placeholder="$t('Re-enter the password')"
:value="user.email" :value="user.confirmPassword"
@input="user.email = $event.target.value" @input="user.confirmPassword = $event.target.value"
></f7-list-input> ></f7-list-input>
<f7-list-input <f7-list-input
type="text" type="email"
clear-button clear-button
:label="$t('Nickname')" :label="$t('E-mail')"
:placeholder="$t('Your nickname')" :placeholder="$t('Your email address')"
:value="user.nickname" :value="user.email"
@input="user.nickname = $event.target.value" @input="user.email = $event.target.value"
></f7-list-input> ></f7-list-input>
<f7-list-input <f7-list-input
type="select" type="text"
:label="$t('Default Currency')" clear-button
:value="user.defaultCurrency" :label="$t('Nickname')"
@input="user.defaultCurrency = $event.target.value" :placeholder="$t('Your nickname')"
> :value="user.nickname"
<option v-for="currency in allCurrencies" @input="user.nickname = $event.target.value"
:key="currency.code" ></f7-list-input>
:value="currency.code">{{ currency.displayName }}</option>
</f7-list-input>
<f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item> <f7-list-input
</f7-list> type="select"
:label="$t('Default Currency')"
:value="user.defaultCurrency"
@input="user.defaultCurrency = $event.target.value"
>
<option v-for="currency in allCurrencies"
:key="currency.code"
:value="currency.code">{{ currency.displayName }}</option>
</f7-list-input>
<f7-button large fill :class="{ 'disabled': inputIsEmpty || signuping }" :text="$t('Sign Up')" @click="signup"></f7-button> <f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
</f7-page> </f7-page>
</template> </template>
@@ -79,7 +88,7 @@ export default {
nickname: '', nickname: '',
defaultCurrency: self.$t('default.currency') defaultCurrency: self.$t('default.currency')
}, },
signuping: false submitting: false
}; };
}, },
computed: { computed: {
@@ -118,7 +127,7 @@ export default {
} }
}, },
methods: { methods: {
signup() { submit() {
const self = this; const self = this;
const router = self.$f7router; const router = self.$f7router;
@@ -129,8 +138,8 @@ export default {
return; return;
} }
self.signuping = true; self.submitting = true;
self.$showLoading(() => self.signuping); self.$showLoading(() => self.submitting);
self.$services.register({ self.$services.register({
username: self.user.username, username: self.user.username,
@@ -139,7 +148,7 @@ export default {
nickname: self.user.nickname, nickname: self.user.nickname,
defaultCurrency: self.user.defaultCurrency defaultCurrency: self.user.defaultCurrency
}).then(response => { }).then(response => {
self.signuping = false; self.submitting = false;
self.$hideLoading(); self.$hideLoading();
const data = response.data; const data = response.data;
@@ -155,7 +164,7 @@ export default {
self.$toast('You have been successfully registered'); self.$toast('You have been successfully registered');
router.navigate('/'); router.navigate('/');
}).catch(error => { }).catch(error => {
self.signuping = false; self.submitting = false;
self.$hideLoading(); self.$hideLoading();
if (error.response && error.response.data && error.response.data.errorMessage) { if (error.response && error.response.data && error.response.data.errorMessage) {
src/views/mobile/accounts/AccountAdd.vue
+61 -53
View File
@@ -1,62 +1,70 @@
<template> <template>
<f7-page> <f7-page>
<f7-navbar :title="$t('Add Account')" :back-link="$t('Back')"></f7-navbar> <f7-navbar>
<f7-nav-left :back-link="$t('Back')"></f7-nav-left>
<f7-nav-title :title="$t('Add Account')"></f7-nav-title>
<f7-nav-right>
<f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="$t('Add')" @click="add"></f7-link>
</f7-nav-right>
</f7-navbar>
<f7-list no-hairlines-md> <f7-card>
<f7-list-input <f7-card-content :padding="false">
type="select" <f7-list>
:label="$t('Account Category')" <f7-list-input
:value="account.category" type="select"
@input="account.category = $event.target.value" :label="$t('Account Category')"
> :value="account.category"
<option v-for="accountCategory in allAccountCategories" @input="account.category = $event.target.value"
:key="accountCategory.id" >
:value="accountCategory.id">{{ $t(accountCategory.name) }}</option> <option v-for="accountCategory in allAccountCategories"
</f7-list-input> :key="accountCategory.id"
:value="accountCategory.id">{{ $t(accountCategory.name) }}</option>
</f7-list-input>
<f7-list-input <f7-list-input
type="select" type="select"
disabled disabled
:label="$t('Account Type')" :label="$t('Account Type')"
:value="account.type" :value="account.type"
@input="account.type = $event.target.value" @input="account.type = $event.target.value"
> >
<option value="1">{{ $t('Single Account') }}</option> <option value="1">{{ $t('Single Account') }}</option>
<option value="2">{{ $t('Multi Sub Accounts') }}</option> <option value="2">{{ $t('Multi Sub Accounts') }}</option>
</f7-list-input> </f7-list-input>
<f7-list-input <f7-list-input
type="text" type="text"
clear-button clear-button
:label="$t('Account Name')" :label="$t('Account Name')"
:placeholder="$t('Your account name')" :placeholder="$t('Your account name')"
:value="account.name" :value="account.name"
@input="account.name = $event.target.value" @input="account.name = $event.target.value"
></f7-list-input> ></f7-list-input>
<f7-list-input <f7-list-input
type="select" type="select"
:label="$t('Currency')" :label="$t('Currency')"
:value="account.currency" :value="account.currency"
@input="account.currency = $event.target.value" @input="account.currency = $event.target.value"
> >
<option v-for="currency in allCurrencies" <option v-for="currency in allCurrencies"
:key="currency.code" :key="currency.code"
:value="currency.code">{{ currency.displayName }}</option> :value="currency.code">{{ currency.displayName }}</option>
</f7-list-input> </f7-list-input>
<f7-list-input <f7-list-input
type="textarea" type="textarea"
:label="$t('Description')" :label="$t('Description')"
:placeholder="$t('Your account description (optional)')" :placeholder="$t('Your account description (optional)')"
:value="account.comment" :value="account.comment"
@input="account.comment = $event.target.value" @input="account.comment = $event.target.value"
></f7-list-input> ></f7-list-input>
<f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item> <f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
</f7-list> </f7-list>
</f7-card-content>
<f7-button large fill :class="{ 'disabled': inputIsEmpty || submitting }" :text="$t('Submit')" @click="submit"></f7-button> </f7-card>
</f7-page> </f7-page>
</template> </template>
@@ -108,7 +116,7 @@ export default {
} }
}, },
methods: { methods: {
submit() { add() {
const self = this; const self = this;
const router = self.$f7router; const router = self.$f7router;
@@ -120,7 +128,7 @@ export default {
} }
self.submitting = true; self.submitting = true;
self.$showLoading(() => self.signuping); self.$showLoading(() => self.submitting);
self.$services.addAccount({ self.$services.addAccount({
category: parseInt(self.account.category), category: parseInt(self.account.category),
src/views/mobile/users/SessionList.vue
+19 -11
View File
@@ -2,18 +2,26 @@
<f7-page ptr @ptr:refresh="reload"> <f7-page ptr @ptr:refresh="reload">
<f7-navbar :title="$t('Device & Sessions')" :back-link="$t('Back')"></f7-navbar> <f7-navbar :title="$t('Device & Sessions')" :back-link="$t('Back')"></f7-navbar>
<f7-list media-list class="skeleton-text" v-if="loading"> <f7-card class="skeleton-text" v-if="loading">
<f7-list-item title="Token Name" after="MM/DD/YYYY HH:mm:ss" <f7-card-content :padding="false">
text="Mozilla/5.0 (OS Name & Version or Device Name; CPU Architecture ...) AppleWebKit/Version (KHTML, like Gecko) Software Name/Version Software Name/Version ..."></f7-list-item> <f7-list media-list>
</f7-list> <f7-list-item title="Token Name" after="MM/DD/YYYY HH:mm:ss"
text="Mozilla/5.0 (OS Name & Version or Device Name; CPU Architecture ...) AppleWebKit/Version (KHTML, like Gecko) Software Name/Version Software Name/Version ..."></f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
<f7-list media-list v-else-if="!loading"> <f7-card v-else-if="!loading">
<f7-list-item swipeout v-for="token in tokens" :key="token.tokenId" :id="token | tokenDomId" :title="token | tokenTitle | t" :after="token.createdAt | moment($t('format.datetime.long'))" :text="token.userAgent"> <f7-card-content :padding="false">
<f7-swipeout-actions right v-if="!token.isCurrent"> <f7-list media-list>
<f7-swipeout-button color="red" :text="$t('Log Out')" @click="revoke(token)"></f7-swipeout-button> <f7-list-item swipeout v-for="token in tokens" :key="token.tokenId" :id="token | tokenDomId" :title="token | tokenTitle | t" :after="token.createdAt | moment($t('format.datetime.long'))" :text="token.userAgent">
</f7-swipeout-actions> <f7-swipeout-actions right v-if="!token.isCurrent">
</f7-list-item> <f7-swipeout-button color="red" :text="$t('Log Out')" @click="revoke(token)"></f7-swipeout-button>
</f7-list> </f7-swipeout-actions>
</f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
</f7-page> </f7-page>
</template> </template>
src/views/mobile/users/TwoFactorAuth.vue
+25 -13
View File
@@ -2,21 +2,33 @@
<f7-page> <f7-page>
<f7-navbar :title="$t('Two-Factor Authentication')" :back-link="$t('Back')"></f7-navbar> <f7-navbar :title="$t('Two-Factor Authentication')" :back-link="$t('Back')"></f7-navbar>
<f7-list v-if="loading" class="skeleton-text"> <f7-card class="skeleton-text" v-if="loading">
<f7-list-item title="Status" after="Unknwon"></f7-list-item> <f7-card-content :padding="false">
<f7-list-button class="disabled">Operate</f7-list-button> <f7-list>
</f7-list> <f7-list-item title="Status" after="Unknown"></f7-list-item>
<f7-list-button class="disabled">Operate</f7-list-button>
</f7-list>
</f7-card-content>
</f7-card>
<f7-list v-else-if="!loading && status === true"> <f7-card v-else-if="!loading && status === true">
<f7-list-item :title="$t('Status')" :after="$t('Enabled')"></f7-list-item> <f7-card-content :padding="false">
<f7-list-button :class="{ 'disabled': regenerating }" @click="regenerateBackupCode(null)">{{ $t('Regenerate Backup Codes') }}</f7-list-button> <f7-list>
<f7-list-button :class="{ 'disabled': disabling }" @click="disable(null)">{{ $t('Disable') }}</f7-list-button> <f7-list-item :title="$t('Status')" :after="$t('Enabled')"></f7-list-item>
</f7-list> <f7-list-button :class="{ 'disabled': regenerating }" @click="regenerateBackupCode(null)">{{ $t('Regenerate Backup Codes') }}</f7-list-button>
<f7-list-button :class="{ 'disabled': disabling }" @click="disable(null)">{{ $t('Disable') }}</f7-list-button>
</f7-list>
</f7-card-content>
</f7-card>
<f7-list v-else-if="!loading && status === false"> <f7-card v-else-if="!loading && status === false">
<f7-list-item :title="$t('Status')" :after="$t('Disabled')"></f7-list-item> <f7-card-content :padding="false">
<f7-list-button :class="{ 'disabled': enabling }" @click="enable">{{ $t('Enable') }}</f7-list-button> <f7-list>
</f7-list> <f7-list-item :title="$t('Status')" :after="$t('Disabled')"></f7-list-item>
<f7-list-button :class="{ 'disabled': enabling }" @click="enable">{{ $t('Enable') }}</f7-list-button>
</f7-list>
</f7-card-content>
</f7-card>
<f7-sheet <f7-sheet
style="height:auto;" style="height:auto;"
src/views/mobile/users/UserProfile.vue
+74 -62
View File
@@ -1,67 +1,79 @@
<template> <template>
<f7-page> <f7-page>
<f7-navbar :title="$t('User Profile')" :back-link="$t('Back')"></f7-navbar> <f7-navbar>
<f7-nav-left :back-link="$t('Back')"></f7-nav-left>
<f7-nav-title :title="$t('User Profile')"></f7-nav-title>
<f7-nav-right>
<f7-link :class="{ 'disabled': inputIsNotChanged || inputIsInvalid || saving }" :text="$t('Save')" @click="save"></f7-link>
</f7-nav-right>
</f7-navbar>
<f7-list no-hairlines-md class="skeleton-text" v-if="loading"> <f7-card class="skeleton-text" v-if="loading">
<f7-list-input label="Password" placeholder="Your password"></f7-list-input> <f7-card-content :padding="false">
<f7-list-input label="Confirmation Password" placeholder="Re-enter the password"></f7-list-input> <f7-list>
<f7-list-input label="E-mail" placeholder="Your email address"></f7-list-input> <f7-list-input label="Password" placeholder="Your password"></f7-list-input>
<f7-list-input label="Nickname" placeholder="Your nickname"></f7-list-input> <f7-list-input label="Confirmation Password" placeholder="Re-enter the password"></f7-list-input>
<f7-list-input label="Default Currency" placeholder="Default Currency"></f7-list-input> <f7-list-input label="E-mail" placeholder="Your email address"></f7-list-input>
</f7-list> <f7-list-input label="Nickname" placeholder="Your nickname"></f7-list-input>
<f7-list-input label="Default Currency" placeholder="Default Currency"></f7-list-input>
</f7-list>
</f7-card-content>
</f7-card>
<f7-list no-hairlines-md v-else-if="!loading"> <f7-card v-else-if="!loading">
<f7-list-input <f7-card-content :padding="false">
type="password" <f7-list>
clear-button <f7-list-input
:label="$t('Password')" type="password"
:placeholder="$t('Your password')" clear-button
:value="newProfile.password" :label="$t('Password')"
@input="newProfile.password = $event.target.value" :placeholder="$t('Your password')"
></f7-list-input> :value="newProfile.password"
@input="newProfile.password = $event.target.value"
></f7-list-input>
<f7-list-input <f7-list-input
type="password" type="password"
clear-button clear-button
:label="$t('Confirmation Password')" :label="$t('Confirmation Password')"
:placeholder="$t('Re-enter the password')" :placeholder="$t('Re-enter the password')"
:value="newProfile.confirmPassword" :value="newProfile.confirmPassword"
@input="newProfile.confirmPassword = $event.target.value" @input="newProfile.confirmPassword = $event.target.value"
></f7-list-input> ></f7-list-input>
<f7-list-input <f7-list-input
type="email" type="email"
clear-button clear-button
:label="$t('E-mail')" :label="$t('E-mail')"
:placeholder="$t('Your email address')" :placeholder="$t('Your email address')"
:value="newProfile.email" :value="newProfile.email"
@input="newProfile.email = $event.target.value" @input="newProfile.email = $event.target.value"
></f7-list-input> ></f7-list-input>
<f7-list-input <f7-list-input
type="text" type="text"
clear-button clear-button
:label="$t('Nickname')" :label="$t('Nickname')"
:placeholder="$t('Your nickname')" :placeholder="$t('Your nickname')"
:value="newProfile.nickname" :value="newProfile.nickname"
@input="newProfile.nickname = $event.target.value" @input="newProfile.nickname = $event.target.value"
></f7-list-input> ></f7-list-input>
<f7-list-input <f7-list-input
type="select" type="select"
:label="$t('Default Currency')" :label="$t('Default Currency')"
:value="newProfile.defaultCurrency" :value="newProfile.defaultCurrency"
@input="newProfile.defaultCurrency = $event.target.value" @input="newProfile.defaultCurrency = $event.target.value"
> >
<option v-for="currency in allCurrencies" <option v-for="currency in allCurrencies"
:key="currency.code" :key="currency.code"
:value="currency.code">{{ currency.displayName }}</option> :value="currency.code">{{ currency.displayName }}</option>
</f7-list-input> </f7-list-input>
<f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item> <f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
</f7-list> </f7-list>
</f7-card-content>
<f7-button large fill :class="{ 'disabled': inputIsNotChanged || inputIsInvalid || updating }" :text="$t('Update')" @click="update"></f7-button> </f7-card>
<f7-sheet <f7-sheet
style="height:auto" style="height:auto"
@@ -83,7 +95,7 @@
@input="currentPassword = $event.target.value" @input="currentPassword = $event.target.value"
></f7-list-input> ></f7-list-input>
</f7-list> </f7-list>
<f7-button large fill :class="{ 'disabled': !currentPassword || updating }" :text="$t('Continue')" @click="update"></f7-button> <f7-button large fill :class="{ 'disabled': !currentPassword || saving }" :text="$t('Continue')" @click="save"></f7-button>
</div> </div>
</div> </div>
</f7-sheet> </f7-sheet>
@@ -108,7 +120,7 @@ export default {
}, },
currentPassword: '', currentPassword: '',
loading: true, loading: true,
updating: false, saving: false,
showInputPasswordSheet: false showInputPasswordSheet: false
}; };
}, },
@@ -191,7 +203,7 @@ export default {
}); });
}, },
methods: { methods: {
update() { save() {
const self = this; const self = this;
const router = self.$f7router; const router = self.$f7router;
@@ -209,8 +221,8 @@ export default {
return; return;
} }
self.updating = true; self.saving = true;
self.$showLoading(() => self.updating); self.$showLoading(() => self.saving);
self.$services.updateProfile({ self.$services.updateProfile({
password: self.newProfile.password, password: self.newProfile.password,
@@ -219,7 +231,7 @@ export default {
nickname: self.newProfile.nickname, nickname: self.newProfile.nickname,
defaultCurrency: self.newProfile.defaultCurrency defaultCurrency: self.newProfile.defaultCurrency
}).then(response => { }).then(response => {
self.updating = false; self.saving = false;
self.$hideLoading(); self.$hideLoading();
self.currentPassword = ''; self.currentPassword = '';
@@ -241,7 +253,7 @@ export default {
self.$toast('Your profile has been successfully updated'); self.$toast('Your profile has been successfully updated');
router.back('/settings', { force: true }); router.back('/settings', { force: true });
}).catch(error => { }).catch(error => {
self.updating = false; self.saving = false;
self.$hideLoading(); self.$hideLoading();
self.currentPassword = ''; self.currentPassword = '';