zhaoyingbo/canary_fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add page back gesture & format code

Browse Source
This commit is contained in:
RainSun 2020-03-06 10:57:59 +08:00
parent 620cf998d9
commit aca6b2dc89
9 changed files with 676 additions and 623 deletions
src
utils
language.js
views
Account
Account.vue
Add
Add.vue
Detail
Detail.vue
Generator
Generator.vue
Home
Home.vue
Settings
Settings.vue
Unlock
Unlock.vue
UpdateLog
UpdateLog.vue

16
src/utils/language.js

@ -278,6 +278,14 @@ export function lang() {
CHS:{
title: '更新日志',
timeline: [
{
label: '新增页面返回手势',
tag:'功能更新',
content: [
'所有子页面支持右滑返回上一页面',
'2020-03-06'
]
},
{
label: '新建密码记录时支持生成密码',
tag:'功能更新',
@ -347,6 +355,14 @@ export function lang() {
EN:{
title: 'Update Log',
timeline: [
{
label: 'Add page back gesture',
tag:'Feature update',
content: [
'All subpages support swiping right to return to the previous page',
'2020-03-06'
]
},
{
label: 'Support password generation when creating new password records',
tag:'Feature update',

491
src/views/Account/Account.vue

@ -4,77 +4,77 @@
<md-app-toolbar class="md-primary toolbar">
<div class="md-toolbar-section-start">
<md-button class="md-icon-button" @click="back()"><md-icon>arrow_back</md-icon></md-button>
<h3 class="md-title" style="flex: 1">{{lang.title}}</h3>
<h3 class="md-title" style="flex: 1">{{ lang.title }}</h3>
</div>
</md-app-toolbar>
<md-app-content>
<div style="height: 54px;"></div>
<icon class="logo" name="canary"></icon>
<template v-if="page_type == 'login'">
<md-field :class="mail_addr_verify ? '' : 'md-invalid'">
<label>{{lang.login.input_placeholder[0]}}</label>
<md-input v-model="mail_addr" required></md-input>
<span class="md-error">{{mail_addr_errmsg}}</span>
</md-field>
<v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
<div ref="list_placeholder" style="height: 54px;"></div>
<icon class="logo" name="canary"></icon>
<template v-if="page_type == 'login'">
<md-field :class="mail_addr_verify ? '' : 'md-invalid'">
<label>{{ lang.login.input_placeholder[0] }}</label>
<md-input v-model="mail_addr" required></md-input>
<span class="md-error">{{ mail_addr_errmsg }}</span>
</md-field>
<md-field :class="password_verify ? '' : 'md-invalid'">
<label>{{lang.login.input_placeholder[1]}}</label>
<md-input v-model="password" required></md-input>
<span class="md-error">{{lang.login.password_errmsg}}</span>
</md-field>
<md-button class="md-raised md-primary expand" @click="judgeLogin()" :disabled="login_loading">{{lang.login.submit}}
<div class="loading-box">
<md-progress-spinner v-if="login_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
</div>
</md-button>
</template>
<md-field :class="password_verify ? '' : 'md-invalid'">
<label>{{ lang.login.input_placeholder[1] }}</label>
<md-input v-model="password" required></md-input>
<span class="md-error">{{ lang.login.password_errmsg }}</span>
</md-field>
<md-button class="md-raised md-primary expand" @click="judgeLogin()" :disabled="login_loading">
{{ lang.login.submit }}
<div class="loading-box"><md-progress-spinner v-if="login_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner></div>
</md-button>
</template>
<template v-if="page_type == 'activation'">
<p class="md-caption">{{lang.activation.title}}</p>
<md-field :class="activation_code_verify ? '' : 'md-invalid'">
<label>{{lang.activation.subheader}}</label>
<md-input v-model="activation_code" required></md-input>
<span class="md-error">{{lang.activation.input_errmsg}}</span>
</md-field>
<md-button class="md-raised md-primary expand" :disabled="activation_loading" @click="judgeActivation()">{{lang.activation.submit}}
<div class="loading-box">
<md-progress-spinner v-if="activation_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
</div>
</md-button>
</template>
<template v-if="page_type == 'activation'">
<p class="md-caption">{{ lang.activation.title }}</p>
<md-field :class="activation_code_verify ? '' : 'md-invalid'">
<label>{{ lang.activation.subheader }}</label>
<md-input v-model="activation_code" required></md-input>
<span class="md-error">{{ lang.activation.input_errmsg }}</span>
</md-field>
<md-button class="md-raised md-primary expand" :disabled="activation_loading" @click="judgeActivation()">
{{ lang.activation.submit }}
<div class="loading-box"><md-progress-spinner v-if="activation_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner></div>
</md-button>
</template>
<template v-if="page_type == 'account'">
<md-list>
<md-list-item>
<span class="md-list-item-text">{{user_infos.mail_addr}}</span>
</md-list-item>
<md-divider></md-divider>
<template v-if="page_type == 'account'">
<md-list>
<md-list-item>
<span class="md-list-item-text">{{ user_infos.mail_addr }}</span>
</md-list-item>
<md-list-item>
<span class="md-list-item-text">{{lang.account.label[0]}}</span>
<span class="time-content">{{update_time}}</span>
</md-list-item>
<md-list-item>
<span class="md-list-item-text">{{lang.account.label[1]}}</span>
<md-button @click="syncCloudStart()" v-if="!sync_cloud_loading" class="md-icon-button md-list-action"><md-icon>cloud_upload</md-icon></md-button>
<md-progress-spinner v-else :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
</md-list-item>
<md-list-item>
<span class="md-list-item-text">{{lang.account.label[2]}}</span>
<md-button @click="syncLocalStart()" v-if="!sync_local_loading" class="md-icon-button md-list-action"><md-icon>cloud_download</md-icon></md-button>
<md-progress-spinner v-else :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
</md-list-item>
<md-button @click="startLogout()" class="md-raised md-primary expand" :disabled="sync_local_loading || sync_cloud_loading">{{lang.account.logout}}</md-button>
</md-list>
</template>
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
<span>{{ snakebar_msg }}</span>
</md-snackbar>
<md-divider></md-divider>
<md-list-item>
<span class="md-list-item-text">{{ lang.account.label[0] }}</span>
<span class="time-content">{{ update_time }}</span>
</md-list-item>
<md-list-item>
<span class="md-list-item-text">{{ lang.account.label[1] }}</span>
<md-button @click="syncCloudStart()" v-if="!sync_cloud_loading" class="md-icon-button md-list-action"><md-icon>cloud_upload</md-icon></md-button>
<md-progress-spinner v-else :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
</md-list-item>
<md-list-item>
<span class="md-list-item-text">{{ lang.account.label[2] }}</span>
<md-button @click="syncLocalStart()" v-if="!sync_local_loading" class="md-icon-button md-list-action"><md-icon>cloud_download</md-icon></md-button>
<md-progress-spinner v-else :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
</md-list-item>
<md-button @click="startLogout()" class="md-raised md-primary expand" :disabled="sync_local_loading || sync_cloud_loading">{{ lang.account.logout }}</md-button>
</md-list>
</template>
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
<span>{{ snakebar_msg }}</span>
</md-snackbar>
</v-touch>
</md-app-content>
</md-app>
</div>
@ -84,9 +84,9 @@
// @ is an alias to /src
import { mapState, mapActions } from 'vuex';
import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
import { login, activation, syncLocal, syncCloud } from '@/axios/api.js'
import { lang } from '@/utils/language.js'
import { setHtmlFontSize } from '@/utils/px2rem.js'
import { login, activation, syncLocal, syncCloud } from '@/axios/api.js';
import { lang } from '@/utils/language.js';
import { setHtmlFontSize } from '@/utils/px2rem.js';
export default {
name: 'Add',
@ -105,16 +105,16 @@ export default {
login_loading: false,
activation_loading: false,
show_snackbar: false,
snakebar_msg:'',
lang:'',
clientHeight:''
snakebar_msg: '',
lang: '',
clientHeight: ''
};
},
computed: {
...mapState(['user_infos', 'row_data', 'row_pwd','settings']),
update_time:function() {
...mapState(['user_infos', 'row_data', 'row_pwd', 'settings']),
update_time: function() {
return this.formatDateTime(new Date(parseInt(this.user_infos.update_time)));
},
}
},
methods: {
...mapActions(['setUserInfo', 'setRowData', 'setRowPwd']),
@ -122,41 +122,43 @@ export default {
changeFixed(clientHeight) {
//动态修改样式
// console.log(clientHeight);
window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
// window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight = clientHeight + 'px';
this.$refs.list_placeholder.parentNode.style.minHeight = clientHeight - 32 + 'px';
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
},
// 初始化
init() {
// 刷新vuex
this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
this.initLanguage()
this.initLanguage();
// 判断页面类型
if(this.user_infos.has_login) {
if (this.user_infos.has_login) {
// 已经登录
if(this.user_infos.activation) {
if (this.user_infos.activation) {
// 已经激活用户
this.page_type = 'account'
this.page_type = 'account';
} else {
// 登录但是没激活
this.page_type = 'activation'
this.page_type = 'activation';
}
} else {
// 还没登录
this.page_type = 'login'
this.page_type = 'login';
}
console.log('当前用户状态为'+ this.page_type)
console.log('当前用户状态为' + this.page_type);
},
// 配置语言
initLanguage() {
if(this.settings.is_chinese) {
this.lang = lang().account.CHS
if (this.settings.is_chinese) {
this.lang = lang().account.CHS;
} else {
this.lang = lang().account.EN
this.lang = lang().account.EN;
}
console.log('语言配置完成')
console.log('语言配置完成');
},
//返回上一页
back() {
this.$router.go(-1);
@ -167,55 +169,57 @@ export default {
console.log(msg);
this.$router.replace('/');
},
// 点击上传
judgeLogin() {
// 设置flag
let can_continue = true
let can_continue = true;
// 处理mail_addr
if(!(this.mail_addr = this.mail_addr.trim())) {
can_continue = false
this.mail_addr_verify = false
this.mail_addr_errmsg = this.lang.mail_addr_errmsg[0]
}
let reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
if(!reg.test(this.mail_addr)) {
can_continue = false
this.mail_addr_verify = false
this.mail_addr_errmsg = this.lang.mail_addr_errmsg[1]
if (!(this.mail_addr = this.mail_addr.trim())) {
can_continue = false;
this.mail_addr_verify = false;
this.mail_addr_errmsg = this.lang.mail_addr_errmsg[0];
}
let reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if (!reg.test(this.mail_addr)) {
can_continue = false;
this.mail_addr_verify = false;
this.mail_addr_errmsg = this.lang.mail_addr_errmsg[1];
}
// 处理password
if(!(this.password = this.password.trim())) {
can_continue = false
this.password_verify = false
if (!(this.password = this.password.trim())) {
can_continue = false;
this.password_verify = false;
}
// 根据flag判断是否提交
if(can_continue) this.startLogin()
if (can_continue) this.startLogin();
},
// 开始上传信息
startLogin() {
this.login_loading = true
this.login_loading = true;
let data = {
mail_addr: this.mail_addr,
password: encryptMainCode(this.password),
update_time: new Date().getTime()
}
login(data).then(res => {
// console.log(res.data)
this.manageLoginRes(res.data)
}).catch(err => {
console.log(err)
this.login_loading = false
this.snakebar_msg = this.lang.snakebar_msg[0]
this.show_snackbar = true
})
};
login(data)
.then(res => {
// console.log(res.data)
this.manageLoginRes(res.data);
})
.catch(err => {
console.log(err);
this.login_loading = false;
this.snakebar_msg = this.lang.snakebar_msg[0];
this.show_snackbar = true;
});
},
// 处理登录后端返回的信息
manageLoginRes(data) {
if(data.errcode == 200 ) {
if (data.errcode == 200) {
// 登录成功，正常用户
let user_infos = {
mail_addr: this.mail_addr,
@ -223,13 +227,13 @@ export default {
activation: true,
row_login_pwd: encryptMainCode(this.password),
update_time: data.update_time
}
};
this.setUserInfo([user_infos, this]);
console.log('正常用户登录，用户信息覆写完成');
this.snakebar_msg = this.lang.snakebar_msg[1]
this.show_snackbar = true
this.page_type = 'account'
} else if(data.errcode == 107 || data.errcode == 108 || data.errcode == 105) {
this.snakebar_msg = this.lang.snakebar_msg[1];
this.show_snackbar = true;
this.page_type = 'account';
} else if (data.errcode == 107 || data.errcode == 108 || data.errcode == 105) {
// 注册成功等待验证
let user_infos = {
mail_addr: this.mail_addr,
@ -237,60 +241,62 @@ export default {
activation: false,
row_login_pwd: encryptMainCode(this.password),
update_time: this.user_infos.update_time
}
};
this.setUserInfo([user_infos, this]);
console.log('用户注册成功，验证码已下发，用户信息覆写完成');
this.snakebar_msg = this.lang.snakebar_msg[2]
this.show_snackbar = true
this.page_type = 'activation'
this.snakebar_msg = this.lang.snakebar_msg[2];
this.show_snackbar = true;
this.page_type = 'activation';
} else if (data.errcode == 106) {
this.password = ''
this.password = '';
console.log('用户密码错误');
this.snakebar_msg = this.lang.snakebar_msg[3]
this.show_snackbar = true
this.snakebar_msg = this.lang.snakebar_msg[3];
this.show_snackbar = true;
} else {
console.log('请求出错');
console.log(data)
this.snakebar_msg = this.lang.snakebar_msg[4] + data.errcode
this.show_snackbar = true
console.log(data);
this.snakebar_msg = this.lang.snakebar_msg[4] + data.errcode;
this.show_snackbar = true;
}
this.login_loading = false
this.login_loading = false;
},
// 点击激活
judgeActivation() {
// 设置flag
let can_continue = true
let can_continue = true;
// 处理password
if(!(this.activation_code = this.activation_code.trim())) {
can_continue = false
this.activation_code_verify = false
if (!(this.activation_code = this.activation_code.trim())) {
can_continue = false;
this.activation_code_verify = false;
}
// 根据flag判断是否提交
if(can_continue) this.startActivation()
if (can_continue) this.startActivation();
},
// 开始激活
startActivation() {
this.activation_loading = true
this.activation_loading = true;
let data = {
mail_addr: this.user_infos.mail_addr,
uuid: this.activation_code
}
activation(data).then(res => {
// console.log(res.data)
this.manageActivation(res.data)
}).catch(err => {
console.log(err)
this.activation_loading = false
this.snakebar_msg = this.lang.snakebar_msg[0]
this.show_snackbar = true
})
};
activation(data)
.then(res => {
// console.log(res.data)
this.manageActivation(res.data);
})
.catch(err => {
console.log(err);
this.activation_loading = false;
this.snakebar_msg = this.lang.snakebar_msg[0];
this.show_snackbar = true;
});
},
// 处理激活后端返回的信息
manageActivation(data) {
if(data.errcode == 200) {
if (data.errcode == 200) {
// 激活成功
let user_infos = {
mail_addr: this.user_infos.mail_addr,
@ -298,116 +304,126 @@ export default {
activation: true,
row_login_pwd: this.user_infos.row_login_pwd,
update_time: data.update_time
}
};
this.setUserInfo([user_infos, this]);
console.log('验证成功，用户信息覆写完成');
this.snakebar_msg = this.lang.snakebar_msg[5]
this.show_snackbar = true
this.page_type = 'account'
} else if(data.errcode == 401 || data.errcode == 404 || data.errcode == 407) {
this.snakebar_msg = this.lang.snakebar_msg[5];
this.show_snackbar = true;
this.page_type = 'account';
} else if (data.errcode == 401 || data.errcode == 404 || data.errcode == 407) {
// 验证码输入的问题
this.activation_code = ''
this.activation_code = '';
console.log('验证码错误');
console.log(data)
this.snakebar_msg = this.lang.snakebar_msg[6]
this.show_snackbar = true
console.log(data);
this.snakebar_msg = this.lang.snakebar_msg[6];
this.show_snackbar = true;
} else {
console.log('请求出错');
console.log(data)
this.snakebar_msg = this.lang.snakebar_msg[4] + data.errcode
this.show_snackbar = true
console.log(data);
this.snakebar_msg = this.lang.snakebar_msg[4] + data.errcode;
this.show_snackbar = true;
}
this.activation_loading = false
this.activation_loading = false;
},
// 处理时间
formatDateTime(inputTime) {
var date = new Date(inputTime);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? "0" + m : m;
m = m < 10 ? '0' + m : m;
var d = date.getDate();
d = d < 10 ? "0" + d : d;
d = d < 10 ? '0' + d : d;
var h = date.getHours();
h = h < 10 ? "0" + h : h;
h = h < 10 ? '0' + h : h;
var minute = date.getMinutes();
var second = date.getSeconds();
minute = minute < 10 ? "0" + minute : minute;
second = second < 10 ? "0" + second : second;
return y + "-" + m + "-" + d + " " + h + ":" + minute;
minute = minute < 10 ? '0' + minute : minute;
second = second < 10 ? '0' + second : second;
return y + '-' + m + '-' + d + ' ' + h + ':' + minute;
// return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
// return y + "-" + m + "-" + d;
},
// 更新本地密码本
syncLocalStart() {
this.sync_local_loading = true
this.sync_local_loading = true;
let data = {
mail_addr: this.user_infos.mail_addr,
password: this.user_infos.row_login_pwd
}
syncLocal(data).then(res => {
// console.log(res.data)
if(res.data.errcode == 200) {
// 获取成功
this.setRowData([res.data.codebook, this])
console.log('数据获取成功，密码本覆写成功')
this.snakebar_msg = this.lang.snakebar_msg[7]
this.show_snackbar = true
} else {
// 获取失败
console.log('数据获取失败')
console.log(res.data)
this.snakebar_msg = this.lang.snakebar_msg[4] + res.data.errcode
this.show_snackbar = true
}
setTimeout(function(){
this.sync_local_loading = false
}.bind(this), 1000)
}).catch(err => {
console.log(err)
this.sync_local_loading = false
this.snakebar_msg = this.lang.snakebar_msg[0]
this.show_snackbar = true
})
};
syncLocal(data)
.then(res => {
// console.log(res.data)
if (res.data.errcode == 200) {
// 获取成功
this.setRowData([res.data.codebook, this]);
console.log('数据获取成功，密码本覆写成功');
this.snakebar_msg = this.lang.snakebar_msg[7];
this.show_snackbar = true;
} else {
// 获取失败
console.log('数据获取失败');
console.log(res.data);
this.snakebar_msg = this.lang.snakebar_msg[4] + res.data.errcode;
this.show_snackbar = true;
}
setTimeout(
function() {
this.sync_local_loading = false;
}.bind(this),
1000
);
})
.catch(err => {
console.log(err);
this.sync_local_loading = false;
this.snakebar_msg = this.lang.snakebar_msg[0];
this.show_snackbar = true;
});
},
// 更新云端密码本
syncCloudStart() {
this.sync_cloud_loading = true
this.sync_cloud_loading = true;
let data = {
mail_addr: this.user_infos.mail_addr,
password: this.user_infos.row_login_pwd,
codebook: this.row_data,
update_time: new Date().getTime()
}
syncCloud(data).then(res => {
// console.log(res.data)
if(res.data.errcode == 200) {
// 获取成功
let user_infos = this.user_infos
user_infos.update_time = res.data.update_time
this.setUserInfo([user_infos, this]);
console.log('数据获取成功，用户信息覆写成功')
this.snakebar_msg = this.lang.snakebar_msg[8]
this.show_snackbar = true
} else {
// 获取失败
console.log('数据获取失败')
console.log(res.data)
this.snakebar_msg = this.lang.snakebar_msg[4] + res.data.errcode
this.show_snackbar = true
}
setTimeout(function(){
this.sync_cloud_loading = false
}.bind(this), 1000)
}).catch(err => {
console.log(err)
this.sync_cloud_loading = false
this.snakebar_msg = this.lang.snakebar_msg[0]
this.show_snackbar = true
})
};
syncCloud(data)
.then(res => {
// console.log(res.data)
if (res.data.errcode == 200) {
// 获取成功
let user_infos = this.user_infos;
user_infos.update_time = res.data.update_time;
this.setUserInfo([user_infos, this]);
console.log('数据获取成功，用户信息覆写成功');
this.snakebar_msg = this.lang.snakebar_msg[8];
this.show_snackbar = true;
} else {
// 获取失败
console.log('数据获取失败');
console.log(res.data);
this.snakebar_msg = this.lang.snakebar_msg[4] + res.data.errcode;
this.show_snackbar = true;
}
setTimeout(
function() {
this.sync_cloud_loading = false;
}.bind(this),
1000
);
})
.catch(err => {
console.log(err);
this.sync_cloud_loading = false;
this.snakebar_msg = this.lang.snakebar_msg[0];
this.show_snackbar = true;
});
},
// 退出登录
startLogout() {
// 初始化用户信息
@ -419,14 +435,13 @@ export default {
};
this.setUserInfo([user_infos, this]);
console.log('用户信息覆写完成');
this.back()
this.back();
}
},
created() {
this.lang = lang().account.CHS
console.log('临时语言系统加载完成')
this.init()
this.lang = lang().account.CHS;
console.log('临时语言系统加载完成');
this.init();
},
mounted() {
// 获取浏览器可视区域高度
@ -444,16 +459,16 @@ export default {
},
// 如果 `mail_addr` 发生改变，就会清空错误状态
mail_addr: function() {
this.mail_addr_verify = true
this.mail_addr_verify = true;
},
// 如果 `password` 发生改变，就会清空错误状态
password: function() {
this.password_verify = true
this.password_verify = true;
},
// 如果 `activation_code` 发生改变，就会清空错误状态
activation_code: function() {
this.activation_code_verify = true
},
this.activation_code_verify = true;
}
},
beforeDestroy() {},
components: {}
@ -479,7 +494,7 @@ export default {
width: 5rem;
}
.time-content {
text-align: right!important;
text-align: right !important;
}
.loading-box {
position: absolute;

170
src/views/Add/Add.vue

@ -8,88 +8,90 @@
</div>
</md-app-toolbar>
<md-app-content>
<div style="height: 54px;"></div>
<md-field :class="title_verify ? '' : 'md-invalid'">
<label>{{ lang.subheader[0] }}</label>
<md-input v-model="title" required></md-input>
<span class="md-error">{{ lang.empty_error[0] }}</span>
</md-field>
<v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
<div ref="list_placeholder" style="height: 54px;"></div>
<md-field :class="title_verify ? '' : 'md-invalid'">
<label>{{ lang.subheader[0] }}</label>
<md-input v-model="title" required></md-input>
<span class="md-error">{{ lang.empty_error[0] }}</span>
</md-field>
<md-field :class="user_name_verify ? '' : 'md-invalid'">
<label>{{ lang.subheader[1] }}</label>
<md-input v-model="user_name" required></md-input>
<span class="md-error">{{ lang.empty_error[1] }}</span>
</md-field>
<md-field :class="user_name_verify ? '' : 'md-invalid'">
<label>{{ lang.subheader[1] }}</label>
<md-input v-model="user_name" required></md-input>
<span class="md-error">{{ lang.empty_error[1] }}</span>
</md-field>
<md-field :class="password_verify ? '' : 'md-invalid'">
<label>{{ lang.subheader[2] }}</label>
<md-input v-model="password" required></md-input>
<span class="md-error">{{ lang.empty_error[2] }}</span>
<span class="md-caption" style="color:#448AFF;" @click="show_dialog = true">生成密码</span>
</md-field>
<md-field :class="password_verify ? '' : 'md-invalid'">
<label>{{ lang.subheader[2] }}</label>
<md-input v-model="password" required></md-input>
<span class="md-error">{{ lang.empty_error[2] }}</span>
<span class="md-caption" style="color:#448AFF;" @click="show_dialog = true">生成密码</span>
</md-field>
<md-field>
<label>{{ lang.subheader[3] }}</label>
<md-input v-model="web_address"></md-input>
</md-field>
<md-field>
<label>{{ lang.subheader[3] }}</label>
<md-input v-model="web_address"></md-input>
</md-field>
<md-field>
<label>{{ lang.subheader[4] }}</label>
<md-textarea v-model="node"></md-textarea>
</md-field>
<md-field>
<label>{{ lang.subheader[4] }}</label>
<md-textarea v-model="node"></md-textarea>
</md-field>
<md-button class="md-raised md-primary expand" @click="judgeContent()">{{ lang.enter }}</md-button>
<md-button class="md-raised md-primary expand" @click="judgeContent()">{{ lang.enter }}</md-button>
<md-dialog :md-active.sync="show_dialog" style="min-width: 50%;">
<md-dialog-title>生成密码</md-dialog-title>
<md-list>
<!-- 生成结果 -->
<md-subheader class="md-primary">{{lang.generator.subheader[0]}}</md-subheader>
<md-list-item>
<p>{{password ? password : lang.generator.code_res_empty}}</p>
</md-list-item>
<!-- settings -->
<md-subheader class="md-primary">{{lang.generator.subheader[1]}}</md-subheader>
<!-- 长度设置 -->
<md-list-item>
<md-field>
<label for="expired_time">{{lang.generator.length_setter.label}}</label>
<md-select v-model="code_length" name="code_length" id="code_length">
<md-option value="6">{{lang.generator.length_setter.options[0]}}</md-option>
<md-option value="12">{{lang.generator.length_setter.options[1]}}</md-option>
<md-option value="18">{{lang.generator.length_setter.options[2]}}</md-option>
<md-option value="24">{{lang.generator.length_setter.options[3]}}</md-option>
<md-option value="32">{{lang.generator.length_setter.options[4]}}</md-option>
</md-select>
</md-field>
</md-list-item>
<!-- 大写字母 -->
<md-list-item>
<span class="md-list-item-text">{{lang.generator.settings[0]}}</span>
<md-switch v-model="have_upper" class="md-primary"></md-switch>
</md-list-item>
<!-- 小写字母 -->
<md-list-item>
<span class="md-list-item-text">{{lang.generator.settings[1]}}</span>
<md-switch v-model="have_lower" class="md-primary"></md-switch>
</md-list-item>
<!-- 数字 -->
<md-list-item>
<span class="md-list-item-text">{{lang.generator.settings[2]}}</span>
<md-switch v-model="have_num" class="md-primary"></md-switch>
</md-list-item>
<!-- 符号 -->
<md-list-item>
<span class="md-list-item-text">{{lang.generator.settings[3]}}</span>
<md-switch v-model="have_symbol" class="md-primary"></md-switch>
</md-list-item>
</md-list>
<md-dialog-actions>
<md-button class="md-primary" @click="generateStart()">{{lang.generator.actions[0]}}</md-button>
<md-button class="md-primary" @click="show_dialog = false">{{lang.generator.actions[1]}}</md-button>
</md-dialog-actions>
</md-dialog>
<md-dialog :md-active.sync="show_dialog" style="min-width: 50%;">
<md-dialog-title>生成密码</md-dialog-title>
<md-list>
<!-- 生成结果 -->
<md-subheader class="md-primary">{{ lang.generator.subheader[0] }}</md-subheader>
<md-list-item>
<p>{{ password ? password : lang.generator.code_res_empty }}</p>
</md-list-item>
<!-- settings -->
<md-subheader class="md-primary">{{ lang.generator.subheader[1] }}</md-subheader>
<!-- 长度设置 -->
<md-list-item>
<md-field>
<label for="expired_time">{{ lang.generator.length_setter.label }}</label>
<md-select v-model="code_length" name="code_length" id="code_length">
<md-option value="6">{{ lang.generator.length_setter.options[0] }}</md-option>
<md-option value="12">{{ lang.generator.length_setter.options[1] }}</md-option>
<md-option value="18">{{ lang.generator.length_setter.options[2] }}</md-option>
<md-option value="24">{{ lang.generator.length_setter.options[3] }}</md-option>
<md-option value="32">{{ lang.generator.length_setter.options[4] }}</md-option>
</md-select>
</md-field>
</md-list-item>
<!-- 大写字母 -->
<md-list-item>
<span class="md-list-item-text">{{ lang.generator.settings[0] }}</span>
<md-switch v-model="have_upper" class="md-primary"></md-switch>
</md-list-item>
<!-- 小写字母 -->
<md-list-item>
<span class="md-list-item-text">{{ lang.generator.settings[1] }}</span>
<md-switch v-model="have_lower" class="md-primary"></md-switch>
</md-list-item>
<!-- 数字 -->
<md-list-item>
<span class="md-list-item-text">{{ lang.generator.settings[2] }}</span>
<md-switch v-model="have_num" class="md-primary"></md-switch>
</md-list-item>
<!-- 符号 -->
<md-list-item>
<span class="md-list-item-text">{{ lang.generator.settings[3] }}</span>
<md-switch v-model="have_symbol" class="md-primary"></md-switch>
</md-list-item>
</md-list>
<md-dialog-actions>
<md-button class="md-primary" @click="generateStart()">{{ lang.generator.actions[0] }}</md-button>
<md-button class="md-primary" @click="show_dialog = false">{{ lang.generator.actions[1] }}</md-button>
</md-dialog-actions>
</md-dialog>
</v-touch>
</md-app-content>
</md-app>
</div>
@ -101,7 +103,7 @@ import { mapState, mapActions } from 'vuex';
import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
import { lang } from '@/utils/language.js';
import { setHtmlFontSize } from '@/utils/px2rem.js';
import { generatePassword } from '@/utils/generator.js'
import { generatePassword } from '@/utils/generator.js';
export default {
name: 'Add',
data() {
@ -124,11 +126,11 @@ export default {
// 小写字母
have_lower: true,
// 数字
have_num:true,
have_num: true,
// 符号
have_symbol: false,
// 密码长度
code_length: 12,
code_length: 12
};
},
computed: {
@ -140,7 +142,9 @@ export default {
changeFixed(clientHeight) {
//动态修改样式
// console.log(clientHeight);
window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
// window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight = clientHeight + 'px';
this.$refs.list_placeholder.parentNode.style.minHeight = clientHeight - 32 + 'px';
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
},
// 初始化
@ -304,11 +308,11 @@ export default {
let id = time.toString() + random;
return id;
},
// 开始生成
generateStart() {
this.password = generatePassword(this.code_length, this.have_lower, this.have_upper, this.have_num, this.have_symbol)
},
this.password = generatePassword(this.code_length, this.have_lower, this.have_upper, this.have_num, this.have_symbol);
}
},
created() {
this.lang = lang().add.CHS;

204
src/views/Detail/Detail.vue

@ -4,7 +4,7 @@
<md-app-toolbar class="md-primary toolbar">
<div class="md-toolbar-section-start">
<md-button class="md-icon-button" @click="back()"><md-icon>arrow_back</md-icon></md-button>
<h3 class="md-title" style="flex: 1">{{content.title}}</h3>
<h3 class="md-title" style="flex: 1">{{ content.title }}</h3>
</div>
<div class="md-toolbar-section-end">
<md-button class="md-icon-button" @click="turnToEdit()"><md-icon>edit</md-icon></md-button>
@ -13,49 +13,55 @@
</md-app-toolbar>
<md-app-content>
<div style="height: 54px;"></div>
<md-list class="md-double-line">
<md-list-item>
<label class="md-caption">{{lang.label[0]}}</label>
<div class="msg-box">
<p>{{content.user_name}}</p>
<md-button class="md-icon-button" v-clipboard:copy="content.user_name" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl"><icon class="icon" name="file_copy" :class="settings.is_dark_mode? 'dark-theme-icon': ''"></icon></md-button>
</div>
</md-list-item>
<md-list-item>
<label class="md-caption">{{lang.label[1]}}</label>
<div class="msg-box">
<p class="password">{{show_password? content.password : doitPassword}}</p>
<md-button class="md-icon-button" @click="show_password = !show_password"><md-icon>remove_red_eye</md-icon></md-button>
<md-button class="md-icon-button" v-clipboard:copy="content.password" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl"><icon class="icon" name="file_copy" :class="settings.is_dark_mode? 'dark-theme-icon': ''"></icon></md-button>
</div>
</md-list-item>
<md-list-item>
<label class="md-caption">{{lang.label[2]}}</label>
<div class="msg-box">
<p>{{content.web_address? content.web_address : lang.empty_placeholder}}</p>
<md-button class="md-icon-button" @click="openUrl()"><md-icon>open_in_new</md-icon></md-button>
</div>
</md-list-item>
<md-list-item>
<label class="md-caption">{{lang.label[3]}}</label>
<div class="msg-box">
<p class="node">{{content.node ? content.node : lang.empty_placeholder}}</p>
</div>
</md-list-item>
</md-list>
<md-dialog-confirm
:md-active.sync="show_dialog"
:md-title="lang.dialog.title"
:md-content="lang.dialog.content"
:md-confirm-text="lang.dialog.confirm"
:md-cancel-text="lang.dialog.cancel"
@md-cancel="onCancel"
@md-confirm="delCode"
/>
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
<span>{{ snakebar_msg }}</span>
</md-snackbar>
<v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
<div ref="list_placeholder" style="height: 54px;"></div>
<md-list class="md-double-line">
<md-list-item>
<label class="md-caption">{{ lang.label[0] }}</label>
<div class="msg-box">
<p>{{ content.user_name }}</p>
<md-button class="md-icon-button" v-clipboard:copy="content.user_name" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl">
<icon class="icon" name="file_copy" :class="settings.is_dark_mode ? 'dark-theme-icon' : ''"></icon>
</md-button>
</div>
</md-list-item>
<md-list-item>
<label class="md-caption">{{ lang.label[1] }}</label>
<div class="msg-box">
<p class="password">{{ show_password ? content.password : doitPassword }}</p>
<md-button class="md-icon-button" @click="show_password = !show_password"><md-icon>remove_red_eye</md-icon></md-button>
<md-button class="md-icon-button" v-clipboard:copy="content.password" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl">
<icon class="icon" name="file_copy" :class="settings.is_dark_mode ? 'dark-theme-icon' : ''"></icon>
</md-button>
</div>
</md-list-item>
<md-list-item>
<label class="md-caption">{{ lang.label[2] }}</label>
<div class="msg-box">
<p>{{ content.web_address ? content.web_address : lang.empty_placeholder }}</p>
<md-button class="md-icon-button" @click="openUrl()"><md-icon>open_in_new</md-icon></md-button>
</div>
</md-list-item>
<md-list-item>
<label class="md-caption">{{ lang.label[3] }}</label>
<div class="msg-box">
<p class="node">{{ content.node ? content.node : lang.empty_placeholder }}</p>
</div>
</md-list-item>
</md-list>
<md-dialog-confirm
:md-active.sync="show_dialog"
:md-title="lang.dialog.title"
:md-content="lang.dialog.content"
:md-confirm-text="lang.dialog.confirm"
:md-cancel-text="lang.dialog.cancel"
@md-cancel="onCancel"
@md-confirm="delCode"
/>
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
<span>{{ snakebar_msg }}</span>
</md-snackbar>
</v-touch>
</md-app-content>
</md-app>
</div>
@ -65,8 +71,8 @@
// @ is an alias to /src
import { mapState, mapActions } from 'vuex';
import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
import { lang } from '@/utils/language.js'
import { setHtmlFontSize } from '@/utils/px2rem.js'
import { lang } from '@/utils/language.js';
import { setHtmlFontSize } from '@/utils/px2rem.js';
export default {
name: 'Add',
@ -77,19 +83,19 @@ export default {
content: {},
show_password: false,
show_dialog: false,
lang:'',
clientHeight:''
lang: '',
clientHeight: ''
};
},
computed: {
...mapState(['row_data', 'row_pwd', 'settings']),
doitPassword() {
if(this.content.password) {
let doit = ''
for(let i = 0;i < this.content.password.length ; i++) {
doit += '*'
if (this.content.password) {
let doit = '';
for (let i = 0; i < this.content.password.length; i++) {
doit += '*';
}
return doit
return doit;
}
}
},
@ -98,7 +104,9 @@ export default {
// 修改md-app的最小高度
changeFixed(clientHeight) {
//动态修改样式
window.document.getElementsByClassName('md-app-content')[0].style.minHeight = clientHeight + 'px';
// window.document.getElementsByClassName('md-app-content')[0].style.minHeight = clientHeight + 'px';
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight = clientHeight + 'px';
this.$refs.list_placeholder.parentNode.style.minHeight = clientHeight - 32 + 'px';
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
},
// 初始化
@ -114,9 +122,9 @@ export default {
if (now - this.row_pwd.create_time < this.settings.expired_time) {
// 上次写入时间距离现在在（默认五分钟）之内
// 刷新重置数据
this.initLanguage()
this.content = this.$route.params.code_content
this.addCount()
this.initLanguage();
this.content = this.$route.params.code_content;
this.addCount();
} else {
// 密码超时
this.turnToHome('密码超时');
@ -130,49 +138,49 @@ export default {
this.turnToHome('无参跳转');
}
},
// 配置语言
initLanguage() {
if(this.settings.is_chinese) {
this.lang = lang().detail.CHS
if (this.settings.is_chinese) {
this.lang = lang().detail.CHS;
} else {
this.lang = lang().detail.EN
this.lang = lang().detail.EN;
}
console.log('语言配置完成')
console.log('语言配置完成');
},
//返回上一页
back() {
this.$router.go(-1)
this.$router.go(-1);
},
// 强制返回Home
turnToHome(msg) {
console.log(msg)
this.$router.replace('/')
console.log(msg);
this.$router.replace('/');
},
// 跳转至编辑
turnToEdit() {
this.$router.push({name: 'Add', params:{modify_content: this.content}})
this.$router.push({ name: 'Add', params: { modify_content: this.content } });
},
// 复制成功
onCopyUrl(e) {
this.snakebar_msg = this.lang.copy.successful;
this.show_snackbar = true;
},
// 复制失败
onErrorUrl(e) {
this.snakebar_msg = this.lang.copy.failed;
this.show_snackbar = true;
},
// 打开链接
openUrl() {
if(this.content.web_address) {
window.open(this.content.web_address)
if (this.content.web_address) {
window.open(this.content.web_address);
} else {
this.snakebar_msg = this.lang.snakebar_msg_empty;
this.show_snackbar = true;
@ -187,26 +195,24 @@ export default {
// json化
let data_list = JSON.parse(data_decrypt);
// 遍历所有密码
for(let i in data_list) {
for (let i in data_list) {
// 找到该密码
if(data_list[i].id == this.content.id) {
if (data_list[i].id == this.content.id) {
// 覆写
data_list[i].open_count++
data_list[i].open_count++;
}
}
let data_list_aes = encrypt(main_code_decrpt, data_list)
this.setRowData([data_list_aes, this])
let data_list_aes = encrypt(main_code_decrpt, data_list);
this.setRowData([data_list_aes, this]);
console.log('新加密信息覆写成功,增加点击完成');
},
// 点击取消
onCancel() {
},
onCancel() {},
// 打开删除模态框
openDelDialog() {
this.show_dialog = true
this.show_dialog = true;
},
// 删除该密码
delCode() {
@ -217,25 +223,25 @@ export default {
// json化
let data_list = JSON.parse(data_decrypt);
// 暂存表
let data_cache = []
let data_cache = [];
// 遍历所有密码
for(let i in data_list) {
for (let i in data_list) {
// 找到该密码
if(data_list[i].id != this.content.id) {
if (data_list[i].id != this.content.id) {
// 覆写
data_cache.push(data_list[i])
data_cache.push(data_list[i]);
}
}
let data_list_aes = encrypt(main_code_decrpt, data_cache)
this.setRowData([data_list_aes, this])
let data_list_aes = encrypt(main_code_decrpt, data_cache);
this.setRowData([data_list_aes, this]);
console.log('新加密信息覆写成功,密码删除完成');
this.back()
this.back();
}
},
created() {
this.lang = lang().detail.CHS
console.log('临时语言系统加载完成')
this.init()
this.lang = lang().detail.CHS;
console.log('临时语言系统加载完成');
this.init();
},
mounted() {
// 获取浏览器可视区域高度
@ -250,7 +256,7 @@ export default {
// 如果 `clientHeight` 发生改变，这个函数就会运行
clientHeight: function() {
this.changeFixed(this.clientHeight);
},
}
},
beforeDestroy() {},
components: {}
@ -270,11 +276,11 @@ export default {
position: relative;
label {
position: absolute;
top:.2rem;
top: 0.2rem;
left: 16px;
}
.msg-box {
margin-top: .5rem;
margin-top: 0.5rem;
display: flex;
align-items: center;
justify-content: space-between;
@ -285,7 +291,7 @@ export default {
word-break: normal;
white-space: normal;
width: 80%;
margin: .2rem 0;
margin: 0.2rem 0;
}
.icon {
height: 24px;

159
src/views/Generator/Generator.vue

@ -4,58 +4,60 @@
<md-app-toolbar class="md-primary toolbar">
<div class="md-toolbar-section-start">
<md-button class="md-icon-button" @click="back()"><md-icon>arrow_back</md-icon></md-button>
<h3 class="md-title" style="flex: 1">{{lang.title}}</h3>
<h3 class="md-title" style="flex: 1">{{ lang.title }}</h3>
</div>
</md-app-toolbar>
<md-app-content>
<div style="height: 54px;"></div>
<md-list>
<!-- 生成结果 -->
<md-subheader class="md-primary">{{lang.subheader[0]}}</md-subheader>
<md-list-item>
<p v-clipboard:copy="code_res" v-clipboard:success="onCopyCode" v-clipboard:error="onErrorCode">{{code_res ? code_res : lang.code_res_empty}}</p>
</md-list-item>
<!-- settings -->
<md-subheader class="md-primary">{{lang.subheader[1]}}</md-subheader>
<!-- 长度设置 -->
<md-list-item>
<md-field>
<label for="expired_time">{{lang.length_setter.label}}</label>
<md-select v-model="code_length" name="code_length" id="code_length">
<md-option value="6">{{lang.length_setter.options[0]}}</md-option>
<md-option value="12">{{lang.length_setter.options[1]}}</md-option>
<md-option value="18">{{lang.length_setter.options[2]}}</md-option>
<md-option value="24">{{lang.length_setter.options[3]}}</md-option>
<md-option value="32">{{lang.length_setter.options[4]}}</md-option>
</md-select>
</md-field>
</md-list-item>
<!-- 大写字母 -->
<md-list-item>
<span class="md-list-item-text">{{lang.settings[0]}}</span>
<md-switch v-model="have_upper" class="md-primary"></md-switch>
</md-list-item>
<!-- 小写字母 -->
<md-list-item>
<span class="md-list-item-text">{{lang.settings[1]}}</span>
<md-switch v-model="have_lower" class="md-primary"></md-switch>
</md-list-item>
<!-- 数字 -->
<md-list-item>
<span class="md-list-item-text">{{lang.settings[2]}}</span>
<md-switch v-model="have_num" class="md-primary"></md-switch>
</md-list-item>
<!-- 符号 -->
<md-list-item>
<span class="md-list-item-text">{{lang.settings[3]}}</span>
<md-switch v-model="have_symbol" class="md-primary"></md-switch>
</md-list-item>
<md-button class="md-raised md-primary expand" @click="generateStart()">{{lang.submit}}</md-button>
</md-list>
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
<span>{{ snakebar_msg }}</span>
</md-snackbar>
<v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
<div ref="list_placeholder" style="height: 54px;"></div>
<md-list>
<!-- 生成结果 -->
<md-subheader class="md-primary">{{ lang.subheader[0] }}</md-subheader>
<md-list-item>
<p v-clipboard:copy="code_res" v-clipboard:success="onCopyCode" v-clipboard:error="onErrorCode">{{ code_res ? code_res : lang.code_res_empty }}</p>
</md-list-item>
<!-- settings -->
<md-subheader class="md-primary">{{ lang.subheader[1] }}</md-subheader>
<!-- 长度设置 -->
<md-list-item>
<md-field>
<label for="expired_time">{{ lang.length_setter.label }}</label>
<md-select v-model="code_length" name="code_length" id="code_length">
<md-option value="6">{{ lang.length_setter.options[0] }}</md-option>
<md-option value="12">{{ lang.length_setter.options[1] }}</md-option>
<md-option value="18">{{ lang.length_setter.options[2] }}</md-option>
<md-option value="24">{{ lang.length_setter.options[3] }}</md-option>
<md-option value="32">{{ lang.length_setter.options[4] }}</md-option>
</md-select>
</md-field>
</md-list-item>
<!-- 大写字母 -->
<md-list-item>
<span class="md-list-item-text">{{ lang.settings[0] }}</span>
<md-switch v-model="have_upper" class="md-primary"></md-switch>
</md-list-item>
<!-- 小写字母 -->
<md-list-item>
<span class="md-list-item-text">{{ lang.settings[1] }}</span>
<md-switch v-model="have_lower" class="md-primary"></md-switch>
</md-list-item>
<!-- 数字 -->
<md-list-item>
<span class="md-list-item-text">{{ lang.settings[2] }}</span>
<md-switch v-model="have_num" class="md-primary"></md-switch>
</md-list-item>
<!-- 符号 -->
<md-list-item>
<span class="md-list-item-text">{{ lang.settings[3] }}</span>
<md-switch v-model="have_symbol" class="md-primary"></md-switch>
</md-list-item>
<md-button class="md-raised md-primary expand" @click="generateStart()">{{ lang.submit }}</md-button>
</md-list>
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
<span>{{ snakebar_msg }}</span>
</md-snackbar>
</v-touch>
</md-app-content>
</md-app>
</div>
@ -64,9 +66,9 @@
<script>
// @ is an alias to /src
import { mapState, mapActions } from 'vuex';
import { lang } from '@/utils/language.js'
import { generatePassword } from '@/utils/generator.js'
import { setHtmlFontSize } from '@/utils/px2rem.js'
import { lang } from '@/utils/language.js';
import { generatePassword } from '@/utils/generator.js';
import { setHtmlFontSize } from '@/utils/px2rem.js';
export default {
name: 'Add',
@ -78,19 +80,19 @@ export default {
// 语言
lang: '',
// 页面高度
clientHeight:'',
clientHeight: '',
// 大写字母
have_upper: true,
// 小写字母
have_lower: true,
// 数字
have_num:true,
have_num: true,
// 符号
have_symbol: false,
// 密码长度
code_length: 12,
// 生成密码结果
code_res: '',
code_res: ''
};
},
computed: {
@ -98,12 +100,15 @@ export default {
},
methods: {
...mapActions(['setUserInfo', 'setRowData', 'setRowPwd', 'setSettings']),
// 修改md-app的最小高度
changeFixed(clientHeight) {
//动态修改样式
// console.log(clientHeight);
window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
// window.document.getElementsByClassName("md-content")[0].style.minHeight =
// clientHeight + "px";
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight = clientHeight + 'px';
this.$refs.list_placeholder.parentNode.style.minHeight = clientHeight - 32 + 'px';
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
},
// 初始化
@ -117,7 +122,7 @@ export default {
if (now - this.row_pwd.create_time < this.settings.expired_time) {
// 上次写入时间距离现在在（默认五分钟）之内
// 初始化本页信息
this.initLanguage()
this.initLanguage();
} else {
// 密码超时
this.turnToHome('密码超时');
@ -127,15 +132,15 @@ export default {
this.turnToHome('无密码');
}
},
// 配置语言
initLanguage() {
if(this.settings.is_chinese) {
this.lang = lang().generator.CHS
if (this.settings.is_chinese) {
this.lang = lang().generator.CHS;
} else {
this.lang = lang().generator.EN
this.lang = lang().generator.EN;
}
console.log('语言配置完成')
console.log('语言配置完成');
},
//返回上一页
@ -148,29 +153,29 @@ export default {
console.log(msg);
this.$router.replace('/');
},
// 开始生成
generateStart() {
this.code_res = generatePassword(this.code_length, this.have_lower, this.have_upper, this.have_num, this.have_symbol)
this.snakebar_msg = this.lang.generate_successful
this.show_snackbar = true
this.code_res = generatePassword(this.code_length, this.have_lower, this.have_upper, this.have_num, this.have_symbol);
this.snakebar_msg = this.lang.generate_successful;
this.show_snackbar = true;
},
// 复制成功
onCopyCode() {
this.snakebar_msg = this.lang.copy_successful
this.show_snackbar = true
this.snakebar_msg = this.lang.copy_successful;
this.show_snackbar = true;
},
// 复制失败
onErrorCode() {
this.snakebar_msg = this.lang.copy_failed
this.show_snackbar = true
},
this.snakebar_msg = this.lang.copy_failed;
this.show_snackbar = true;
}
},
created() {
this.lang = lang().generator.CHS
console.log('临时语言系统加载完成')
this.lang = lang().generator.CHS;
console.log('临时语言系统加载完成');
this.init();
},
mounted() {
@ -186,7 +191,7 @@ export default {
// 如果 `clientHeight` 发生改变，这个函数就会运行
clientHeight: function() {
this.changeFixed(this.clientHeight);
},
}
},
beforeDestroy() {},
components: {}
@ -219,4 +224,4 @@ export default {
position: fixed !important;
}
}
</style>
</style>

8
src/views/Home/Home.vue

@ -363,7 +363,7 @@ export default {
});
console.log('一键回顶成功');
},
// 判断是否有class
hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
@ -466,11 +466,11 @@ export default {
}
}
.code-card {
p:first-of-type{
margin-top: .3rem;
p:first-of-type {
margin-top: 0.3rem;
}
p:last-of-type {
margin-bottom: .3rem;
margin-bottom: 0.3rem;
}
// padding: 0.3rem 0;
// border-bottom: 1px #eee solid;

170
src/views/Settings/Settings.vue

@ -4,79 +4,81 @@
<md-app-toolbar class="md-primary toolbar">
<div class="md-toolbar-section-start">
<md-button class="md-icon-button" @click="back()"><md-icon>arrow_back</md-icon></md-button>
<h3 class="md-title" style="flex: 1">{{lang.title}}</h3>
<h3 class="md-title" style="flex: 1">{{ lang.title }}</h3>
</div>
</md-app-toolbar>
<md-app-content>
<div style="height: 54px;"></div>
<md-list>
<md-subheader class="md-primary">{{lang.subheader[0]}}</md-subheader>
<md-list-item @click="resetAccount()">
<md-icon>person</md-icon>
<span class="md-list-item-text">{{lang.reset_list[0]}}</span>
<md-progress-spinner v-if="account_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
</md-list-item>
<v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
<div ref="list_placeholder" style="height: 54px;"></div>
<md-list>
<md-subheader class="md-primary">{{ lang.subheader[0] }}</md-subheader>
<md-list-item @click="resetAccount()">
<md-icon>person</md-icon>
<span class="md-list-item-text">{{ lang.reset_list[0] }}</span>
<md-progress-spinner v-if="account_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
</md-list-item>
<md-list-item @click="resetCodebook()">
<md-icon>format_align_left</md-icon>
<span class="md-list-item-text">{{lang.reset_list[1]}}</span>
<md-progress-spinner v-if="codebook_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
</md-list-item>
<md-list-item @click="resetCodebook()">
<md-icon>format_align_left</md-icon>
<span class="md-list-item-text">{{ lang.reset_list[1] }}</span>
<md-progress-spinner v-if="codebook_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
</md-list-item>
<md-list-item @click="resetApplication()">
<md-icon>layers</md-icon>
<span class="md-list-item-text">{{lang.reset_list[2]}}</span>
<md-progress-spinner v-if="application_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
</md-list-item>
<md-list-item @click="resetApplication()">
<md-icon>layers</md-icon>
<span class="md-list-item-text">{{ lang.reset_list[2] }}</span>
<md-progress-spinner v-if="application_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
</md-list-item>
<md-list-item @click="open_dialog">
<md-icon>vpn_key</md-icon>
<span class="md-list-item-text">{{lang.reset_list[3]}}</span>
</md-list-item>
<md-list-item @click="open_dialog">
<md-icon>vpn_key</md-icon>
<span class="md-list-item-text">{{ lang.reset_list[3] }}</span>
</md-list-item>
<md-divider></md-divider>
<md-divider></md-divider>
<md-subheader class="md-primary">{{lang.subheader[1]}}</md-subheader>
<md-list-item>
<md-icon>format_color_text</md-icon>
<span class="md-list-item-text">{{lang.option_list[0]}}</span>
<md-switch v-model="is_chinese" class="md-primary"></md-switch>
</md-list-item>
<md-list-item>
<md-icon>brightness_6</md-icon>
<span class="md-list-item-text">{{lang.option_list[1]}}</span>
<md-switch v-model="is_dark_mode" class="md-primary"></md-switch>
</md-list-item>
<md-subheader class="md-primary">{{ lang.subheader[1] }}</md-subheader>
<md-list-item>
<md-icon>format_color_text</md-icon>
<span class="md-list-item-text">{{ lang.option_list[0] }}</span>
<md-switch v-model="is_chinese" class="md-primary"></md-switch>
</md-list-item>
<md-list-item>
<md-icon>brightness_6</md-icon>
<span class="md-list-item-text">{{ lang.option_list[1] }}</span>
<md-switch v-model="is_dark_mode" class="md-primary"></md-switch>
</md-list-item>
<md-list-item>
<md-icon>update</md-icon>
<md-field>
<label for="expired_time">{{lang.option_list[2]}}</label>
<md-select v-model="expired_time" name="expired_time" id="expired_time">
<md-option value="300000">5 min</md-option>
<md-option value="600000">10 min</md-option>
<md-option value="900000">15 min</md-option>
<md-option :value="Number.MAX_SAFE_INTEGER">{{lang.expired_time}}</md-option>
</md-select>
</md-field>
</md-list-item>
</md-list>
<md-list-item>
<md-icon>update</md-icon>
<md-field>
<label for="expired_time">{{ lang.option_list[2] }}</label>
<md-select v-model="expired_time" name="expired_time" id="expired_time">
<md-option value="300000">5 min</md-option>
<md-option value="600000">10 min</md-option>
<md-option value="900000">15 min</md-option>
<md-option :value="Number.MAX_SAFE_INTEGER">{{ lang.expired_time }}</md-option>
</md-select>
</md-field>
</md-list-item>
</md-list>
<md-dialog-prompt
:md-active.sync="reset_main_pwd_active"
v-model="new_main_pwd"
:md-title="lang.dialog.title"
md-input-maxlength="30"
:md-input-placeholder="lang.dialog.placeholder"
:md-confirm-text="lang.dialog.confirm"
:md-cancel-text="lang.dialog.cancel"
@md-confirm="resetPwd"
/>
<md-dialog-prompt
:md-active.sync="reset_main_pwd_active"
v-model="new_main_pwd"
:md-title="lang.dialog.title"
md-input-maxlength="30"
:md-input-placeholder="lang.dialog.placeholder"
:md-confirm-text="lang.dialog.confirm"
:md-cancel-text="lang.dialog.cancel"
@md-confirm="resetPwd"
/>
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
<span>{{ snakebar_msg }}</span>
</md-snackbar>
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
<span>{{ snakebar_msg }}</span>
</md-snackbar>
</v-touch>
</md-app-content>
</md-app>
</div>
@ -87,8 +89,8 @@
import { mapState, mapActions } from 'vuex';
import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
import { login, activation, syncLocal, syncCloud } from '@/axios/api.js';
import { lang } from '@/utils/language.js'
import { setHtmlFontSize } from '@/utils/px2rem.js'
import { lang } from '@/utils/language.js';
import { setHtmlFontSize } from '@/utils/px2rem.js';
export default {
name: 'Add',
@ -99,7 +101,7 @@ export default {
codebook_loading: false,
application_loading: false,
reset_main_pwd_active: false,
new_main_pwd:'',
new_main_pwd: '',
reset_active: false,
// 设置状态
is_chinese: false,
@ -112,7 +114,7 @@ export default {
// 初始化完成状态
has_init: false,
lang: '',
clientHeight:''
clientHeight: ''
};
},
computed: {
@ -120,12 +122,14 @@ export default {
},
methods: {
...mapActions(['setUserInfo', 'setRowData', 'setRowPwd', 'setSettings']),
// 修改md-app的最小高度
changeFixed(clientHeight) {
//动态修改样式
// console.log(clientHeight);
window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
// window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight = clientHeight + 'px';
this.$refs.list_placeholder.parentNode.style.minHeight = clientHeight - 32 + 'px';
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
},
// 初始化
@ -142,7 +146,7 @@ export default {
this.is_chinese = this.settings.is_chinese;
this.is_dark_mode = this.settings.is_dark_mode;
this.expired_time = this.settings.expired_time;
this.initLanguage()
this.initLanguage();
// 设置flag
setTimeout(
function() {
@ -160,15 +164,15 @@ export default {
this.turnToHome('无密码');
}
},
// 配置语言
initLanguage() {
if(this.settings.is_chinese) {
this.lang = lang().settings.CHS
if (this.settings.is_chinese) {
this.lang = lang().settings.CHS;
} else {
this.lang = lang().settings.EN
this.lang = lang().settings.EN;
}
console.log('语言配置完成')
console.log('语言配置完成');
},
//返回上一页
@ -260,24 +264,24 @@ export default {
};
this.setSettings([settings, this]);
console.log('个性化设置覆写完成');
if(this.settings.is_chinese) {
this.lang = lang().settings.CHS
if (this.settings.is_chinese) {
this.lang = lang().settings.CHS;
} else {
this.lang = lang().settings.EN
this.lang = lang().settings.EN;
}
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
console.log('语言配置完成')
console.log('语言配置完成');
this.snakebar_msg = this.lang.snakebar_msg.reset_settings;
this.show_snackbar = true;
},
open_dialog() {
this.reset_main_pwd_active = true
this.reset_main_pwd_active = true;
},
resetPwd(new_main_pwd) {
// 空内容拦截器
if(!new_main_pwd.trim()) {
if (!new_main_pwd.trim()) {
this.snakebar_msg = this.lang.snakebar_msg.reset_pwd_failed;
this.show_snackbar = true;
}
@ -292,8 +296,8 @@ export default {
}
},
created() {
this.lang = lang().settings.CHS
console.log('临时语言系统加载完成')
this.lang = lang().settings.CHS;
console.log('临时语言系统加载完成');
this.init();
},
mounted() {

30
src/views/Unlock/Unlock.vue

@ -1,5 +1,5 @@
<template>
<div class="unlock" :class="settings.is_dark_mode? 'dark-theme-unlock':''">
<div class="unlock" :class="settings.is_dark_mode ? 'dark-theme-unlock' : ''">
<md-toolbar class="md-primary">
<h3 class="md-title" style="flex: 1">{{ is_create ? lang.title[0] : lang.title[1] }}</h3>
</md-toolbar>
@ -15,12 +15,12 @@
</md-field>
<md-field class="input-box" :class="messageClass" v-if="is_create">
<label>{{lang.repeat_pwd}}</label>
<label>{{ lang.repeat_pwd }}</label>
<md-input v-model="repeat" type="password"></md-input>
<span class="md-error">{{ err_msg }}</span>
</md-field>
<md-button class="md-raised md-primary center" @click="judgePwd()">{{lang.enter}}</md-button>
<md-button class="md-raised md-primary center" @click="judgePwd()">{{ lang.enter }}</md-button>
<md-dialog-confirm
:md-active.sync="show_dialog"
@ -42,7 +42,7 @@
// @ is an alias to /src
import { mapState, mapActions } from 'vuex';
import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
import { lang } from '@/utils/language.js'
import { lang } from '@/utils/language.js';
export default {
name: 'Unlock',
@ -56,11 +56,11 @@ export default {
is_create: false,
show_snackbar: false,
snakebar_msg: '',
lang:''
lang: ''
};
},
computed: {
...mapState(['row_data','settings']),
...mapState(['row_data', 'settings']),
messageClass() {
return {
'md-invalid': this.is_err
@ -74,21 +74,21 @@ export default {
init() {
// 刷新vuex
this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
this.initLanguage()
this.initLanguage();
// 判断是创建密码还是输入密码
this.is_create = this.row_data ? false : true;
},
// 配置语言
initLanguage() {
if(this.settings.is_chinese) {
this.lang = lang().unlock.CHS
if (this.settings.is_chinese) {
this.lang = lang().unlock.CHS;
} else {
this.lang = lang().unlock.EN
this.lang = lang().unlock.EN;
}
console.log('语言配置完成')
console.log('语言配置完成');
},
// 点击提交判断密码
judgePwd() {
// 空密码拦截器
@ -144,8 +144,8 @@ export default {
}
},
created() {
this.lang = lang().unlock.CHS
console.log('临时语言系统加载完成')
this.lang = lang().unlock.CHS;
console.log('临时语言系统加载完成');
this.init();
},
mounted() {

51
src/views/UpdateLog/UpdateLog.vue

@ -4,17 +4,19 @@
<md-app-toolbar class="md-primary toolbar">
<div class="md-toolbar-section-start">
<md-button class="md-icon-button" @click="back()"><md-icon>arrow_back</md-icon></md-button>
<h3 class="md-title" style="flex: 1">{{lang.title}}</h3>
<h3 class="md-title" style="flex: 1">{{ lang.title }}</h3>
</div>
</md-app-toolbar>
<md-app-content>
<div style="height: 54px;"></div>
<md-steppers md-vertical>
<md-step v-for="(item, index) in lang.timeline" :key="index" :id="index.toString()" :md-label="item.label" :md-description="item.tag">
<p v-for="(content, content_index) in item.content" :key="content_index">{{content}}</p>
</md-step>
</md-steppers>
<v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
<div ref="list_placeholder" style="height: 54px;"></div>
<md-steppers md-vertical>
<md-step v-for="(item, index) in lang.timeline" :key="index" :id="index.toString()" :md-label="item.label" :md-description="item.tag">
<p v-for="(content, content_index) in item.content" :key="content_index">{{ content }}</p>
</md-step>
</md-steppers>
</v-touch>
</md-app-content>
</md-app>
</div>
@ -23,8 +25,8 @@
<script>
// @ is an alias to /src
import { mapState } from 'vuex';
import { lang } from '@/utils/language.js'
import { setHtmlFontSize } from '@/utils/px2rem.js'
import { lang } from '@/utils/language.js';
import { setHtmlFontSize } from '@/utils/px2rem.js';
export default {
name: 'UpdateLog',
@ -33,22 +35,23 @@ export default {
// 语言
lang: '',
// 页面高度
clientHeight:'',
clientHeight: ''
};
},
computed: {
...mapState(['row_pwd', 'settings'])
},
methods: {
// 修改md-app的最小高度
changeFixed(clientHeight) {
//动态修改样式
// console.log(clientHeight);
window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
// window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight = clientHeight + 'px';
this.$refs.list_placeholder.parentNode.style.minHeight = clientHeight - 32 + 'px';
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
},
// 初始化
init() {
// 刷新vuex
@ -60,7 +63,7 @@ export default {
if (now - this.row_pwd.create_time < this.settings.expired_time) {
// 上次写入时间距离现在在（默认五分钟）之内
// 初始化本页信息
this.initLanguage()
this.initLanguage();
} else {
// 密码超时
this.turnToHome('密码超时');
@ -70,15 +73,15 @@ export default {
this.turnToHome('无密码');
}
},
// 配置语言
initLanguage() {
if(this.settings.is_chinese) {
this.lang = lang().update_log.CHS
if (this.settings.is_chinese) {
this.lang = lang().update_log.CHS;
} else {
this.lang = lang().update_log.EN
this.lang = lang().update_log.EN;
}
console.log('语言配置完成')
console.log('语言配置完成');
},
//返回上一页
@ -90,11 +93,11 @@ export default {
turnToHome(msg) {
console.log(msg);
this.$router.replace('/');
},
}
},
created() {
this.lang = lang().update_log.CHS
console.log('临时语言系统加载完成')
this.lang = lang().update_log.CHS;
console.log('临时语言系统加载完成');
this.init();
},
mounted() {
@ -110,7 +113,7 @@ export default {
// 如果 `clientHeight` 发生改变，这个函数就会运行
clientHeight: function() {
this.changeFixed(this.clientHeight);
},
}
},
beforeDestroy() {},
components: {}
@ -143,4 +146,4 @@ export default {
position: fixed !important;
}
}
</style>
</style>