support changing language in login page, add local verification in login page, modify text in login page, add tips when requesting backend api too slow
This commit is contained in:
MaysWind
+97
-6
@@ -1,11 +1,102 @@
|
||||
import en from './langs/en.js'
|
||||
import zhHans from './langs/zh_Hans.js'
|
||||
|
||||
export default {
|
||||
locale: 'en',
|
||||
fallbackLocale: 'en',
|
||||
messages: {
|
||||
'en': en,
|
||||
'zh_Hans': zhHans
|
||||
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() {
|
||||
return allLanguages;
|
||||
}
|
||||
|
||||
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() {
|
||||
if (!window || !window.navigator) {
|
||||
return defaultLanguage;
|
||||
}
|
||||
|
||||
let browserLocale = window.navigator.browserLanguage || window.navigator.language;
|
||||
|
||||
if (!browserLocale) {
|
||||
return defaultLanguage;
|
||||
}
|
||||
|
||||
if (!allLanguages[browserLocale]) {
|
||||
const locale = getLocaleFromLanguageAlias(browserLocale);
|
||||
|
||||
if (locale) {
|
||||
browserLocale = locale;
|
||||
}
|
||||
}
|
||||
|
||||
if (!allLanguages[browserLocale]) {
|
||||
return defaultLanguage;
|
||||
}
|
||||
|
||||
return browserLocale;
|
||||
}
|
||||
|
||||
export default {
|
||||
i18nOptions,
|
||||
getAllLanguages,
|
||||
getLanguage,
|
||||
getDefaultLanguage
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export default {
|
||||
'global': {
|
||||
'app': {
|
||||
'title': 'lightweight account book'
|
||||
'title': 'lab app'
|
||||
}
|
||||
},
|
||||
'error': {
|
||||
@@ -28,9 +28,10 @@ export default {
|
||||
'Password': 'Password',
|
||||
'Log In': 'Log In',
|
||||
'Don\'t have an account?': 'Don\'t have an account?',
|
||||
'Sign up': 'Sign up',
|
||||
'Have problem with login?': 'Have problem with login?',
|
||||
'Forget Password': 'Forget Password',
|
||||
'Create an account': 'Create an account',
|
||||
'Forget Password?': 'Forget Password?',
|
||||
'Please input username': 'Please input username',
|
||||
'Please input password': 'Please input password',
|
||||
'Unable to login': 'Unable to login',
|
||||
'Logout': 'Logout'
|
||||
};
|
||||
|
||||
@@ -28,9 +28,10 @@ export default {
|
||||
'Password': '密码',
|
||||
'Log In': '登录',
|
||||
'Don\'t have an account?': '还没有账号？',
|
||||
'Sign up': '注册',
|
||||
'Have problem with login?': '登录遇到问题？',
|
||||
'Forget Password': '找回密码',
|
||||
'Create an account': '创建新账号',
|
||||
'Forget Password?': '找回密码?',
|
||||
'Please input username': '请输入用户名',
|
||||
'Please input password': '请输入密码',
|
||||
'Unable to login': '无法登录',
|
||||
'Logout': '退出登录'
|
||||
};
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
const settingsLocalStorageKey = 'lab_user_settings';
|
||||
const defaultSettings = {
|
||||
lang: 'en'
|
||||
};
|
||||
|
||||
function getOriginalSettings() {
|
||||
try {
|
||||
const storageData = localStorage.getItem(settingsLocalStorageKey) || '{}';
|
||||
return JSON.parse(storageData);
|
||||
} catch (ex) {
|
||||
console.warn('settings in local storage is invalid', ex);
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function getFinalSettings() {
|
||||
return Object.assign({}, defaultSettings, getOriginalSettings());
|
||||
}
|
||||
|
||||
function setSettings(settings) {
|
||||
const storageData = JSON.stringify(settings);
|
||||
return localStorage.setItem(settingsLocalStorageKey, storageData);
|
||||
}
|
||||
|
||||
function getOriginalOption(key) {
|
||||
return getOriginalSettings()[key];
|
||||
}
|
||||
|
||||
function setOption(key, value) {
|
||||
if (!Object.prototype.hasOwnProperty.call(defaultSettings, key)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const settings = getFinalSettings();
|
||||
settings[key] = value;
|
||||
|
||||
return setSettings(settings);
|
||||
}
|
||||
|
||||
export default {
|
||||
getLanguage: () => getOriginalOption('lang'),
|
||||
setLanguage: value => setOption('lang', value)
|
||||
};
|
||||
@@ -27,51 +27,103 @@
|
||||
<f7-list-button @click="login">{{ $t('Log In') }}</f7-list-button>
|
||||
<f7-block-footer>
|
||||
<span v-t="'Don\'t have an account?'"></span>
|
||||
<f7-link href="/signup">{{ $t('Sign up') }}</f7-link>
|
||||
<f7-link href="/signup">{{ $t('Create an account') }}</f7-link>
|
||||
<br/>
|
||||
<span v-t="'Have problem with login?'"></span>
|
||||
<f7-link href="/forget-pwd">{{ $t('Forget Password') }}</f7-link>
|
||||
<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>
|
||||
import services from '../../common/services.js'
|
||||
import userState from '../../common/userstate.js'
|
||||
import i18n from '../../common/i18n.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: ''
|
||||
password: '',
|
||||
allLanguages: i18n.getAllLanguages()
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentLanguageName() {
|
||||
const currentLocale = this.$i18n.locale;
|
||||
let lang = i18n.getLanguage(currentLocale);
|
||||
|
||||
if (!lang) {
|
||||
lang = i18n.getLanguage(i18n.getDefaultLanguage());
|
||||
}
|
||||
|
||||
return lang.displayName;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
const self = this
|
||||
const app = self.$f7
|
||||
const router = self.$f7router
|
||||
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);
|
||||
|
||||
services.authorize({
|
||||
loginName: self.username,
|
||||
password: self.password
|
||||
}).then(response => {
|
||||
const data = response.data
|
||||
hasResponse = true;
|
||||
self.$f7.preloader.hide();
|
||||
const data = response.data;
|
||||
|
||||
if (data && data.success && data.result && typeof(data.result) === 'string') {
|
||||
userState.updateToken(data.result)
|
||||
router.navigate('/')
|
||||
userState.updateToken(data.result);
|
||||
router.navigate('/');
|
||||
} else {
|
||||
app.dialog.alert(self.$i18n.t('Unable to login'))
|
||||
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}`))
|
||||
app.dialog.alert(self.$i18n.t(`error.${error.response.data.errorMessage}`));
|
||||
} else {
|
||||
app.dialog.alert(self.$i18n.t('Unable to login'))
|
||||
app.dialog.alert(self.$i18n.t('Unable to login'));
|
||||
}
|
||||
})
|
||||
},
|
||||
changeLanguage(locale) {
|
||||
this.$setLanguage(locale);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
+14
-9
@@ -9,25 +9,30 @@ import 'framework7-icons';
|
||||
|
||||
import './assets/css/custom.css';
|
||||
|
||||
import i18nOptions from '../common/i18n.js';
|
||||
import i18n from '../common/i18n.js';
|
||||
import settings from '../common/settings.js';
|
||||
import App from './App.vue';
|
||||
|
||||
Vue.use(VueI18n);
|
||||
Framework7.use(Framework7Vue);
|
||||
|
||||
const i18n = new VueI18n(i18nOptions);
|
||||
const i18nInstance = new VueI18n(i18n.i18nOptions);
|
||||
|
||||
Vue.prototype.languages = {
|
||||
setI18nLanguage: lang => {
|
||||
i18n.locale = lang;
|
||||
axios.defaults.headers.common['Accept-Language'] = lang;
|
||||
document.querySelector('html').setAttribute('lang', lang);
|
||||
return lang;
|
||||
Vue.prototype.$setLanguage = function (locale) {
|
||||
if (settings.getLanguage() !== locale) {
|
||||
settings.setLanguage(locale);
|
||||
}
|
||||
|
||||
i18nInstance.locale = locale;
|
||||
axios.defaults.headers.common['Accept-Language'] = locale;
|
||||
document.querySelector('html').setAttribute('lang', locale);
|
||||
return locale;
|
||||
}
|
||||
|
||||
Vue.prototype.$setLanguage(settings.getLanguage() || i18n.getDefaultLanguage());
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
i18n: i18n,
|
||||
i18n: i18nInstance,
|
||||
render: h => h(App),
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user