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

add settings and manage warn pwd situation

Browse Source
This commit is contained in:
RainSun 2020-02-23 20:14:35 +08:00
parent a142a9431b
commit d16d997531
7 changed files with 357 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/router/index.js
View File

@ -29,11 +29,11 @@ const routes = [
// name: 'Feedback', // name: 'Feedback',
// component: () => import(/* webpackChunkName: "feedback" */ '../views/Feedback/Feedback.vue') // component: () => import(/* webpackChunkName: "feedback" */ '../views/Feedback/Feedback.vue')
// }, // },
// { {
// path: '/settings', path: '/settings',
// name: 'Settings', name: 'Settings',
// component: () => import(/* webpackChunkName: "settings" */ '../views/Settings/Settings.vue') component: () => import(/* webpackChunkName: "settings" */ '../views/Settings/Settings.vue')
// }, },
{ {
path: '/unlock', path: '/unlock',
name: 'Unlock', name: 'Unlock',

13
src/store/index.js
View File

@ -11,6 +11,8 @@ export default new Vuex.Store({
row_data: '', row_data: '',
// aes化的用户主密码 // aes化的用户主密码
row_pwd: '', row_pwd: '',
// 配置信息
settings: '',
}, },
mutations: { mutations: {
// 设置用户信息 // 设置用户信息
@ -25,6 +27,10 @@ export default new Vuex.Store({
SET_ROWPWD(state, row_pwd) { SET_ROWPWD(state, row_pwd) {
state.row_pwd = row_pwd; state.row_pwd = row_pwd;
}, },
// 设置配置信息
SET_SETTINGS(state, settings) {
state.settings = settings;
},
}, },
actions: { actions: {
// 设置用户信息 // 设置用户信息
@ -48,6 +54,13 @@ export default new Vuex.Store({
commit('SET_ROWPWD', arg[0]); commit('SET_ROWPWD', arg[0]);
localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state)); localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
}, },
// 设置配置信息
setSettings({
commit
}, arg) {
commit('SET_SETTINGS', arg[0]);
localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
},
}, },
modules: {} modules: {}
}) })

3
src/views/Account/Account.vue
View File

@ -311,8 +311,9 @@ export default {
var second = date.getSeconds(); var second = date.getSeconds();
minute = minute < 10 ? "0" + minute : minute; minute = minute < 10 ? "0" + minute : minute;
second = second < 10 ? "0" + second : second; second = second < 10 ? "0" + second : second;
return y + "-" + m + "-" + d + " " + h + ":" + minute;
// return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second; // return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
return y + "-" + m + "-" + d; // return y + "-" + m + "-" + d;
}, },
// 更新本地密码本 // 更新本地密码本

6
src/views/Add/Add.vue
View File

@ -65,7 +65,7 @@ export default {
}; };
}, },
computed: { computed: {
...mapState(['row_data', 'row_pwd']) ...mapState(['row_data', 'row_pwd', 'settings'])
}, },
methods: { methods: {
...mapActions(['setRowData', 'setRowPwd']), ...mapActions(['setRowData', 'setRowPwd']),
@ -78,8 +78,8 @@ export default {
if (Object.keys(this.row_pwd).length != 0) { if (Object.keys(this.row_pwd).length != 0) {
// 有密码，已经输入过了 // 有密码，已经输入过了
let now = new Date().getTime(); let now = new Date().getTime();
if (now - this.row_pwd.create_time < 1000 * 60 * 5) { if (now - this.row_pwd.create_time < this.settings.expired_time) {
// 上次写入时间距离现在在五分钟之内 // 上次写入时间距离现在在（默认五分钟）之内
// 判断是否是更新 // 判断是否是更新
if (this.$route.params.modify_content) { if (this.$route.params.modify_content) {
// 刷新重置数据 // 刷新重置数据

6
src/views/Detail/Detail.vue
View File

@ -77,7 +77,7 @@ export default {
}; };
}, },
computed: { computed: {
...mapState(['row_data', 'row_pwd']), ...mapState(['row_data', 'row_pwd', 'settings']),
doitPassword() { doitPassword() {
if(this.content.password) { if(this.content.password) {
let doit = '' let doit = ''
@ -101,8 +101,8 @@ export default {
if (Object.keys(this.row_pwd).length != 0) { if (Object.keys(this.row_pwd).length != 0) {
// 有密码，已经输入过了 // 有密码，已经输入过了
let now = new Date().getTime(); let now = new Date().getTime();
if (now - this.row_pwd.create_time < 1000 * 60 * 5) { if (now - this.row_pwd.create_time < this.settings.expired_time) {
// 上次写入时间距离现在在五分钟之内 // 上次写入时间距离现在在（默认五分钟）之内
// 刷新重置数据 // 刷新重置数据
this.content = this.$route.params.code_content this.content = this.$route.params.code_content
this.addCount() this.addCount()

39
src/views/Home/Home.vue
View File

@ -44,10 +44,10 @@
<span class="md-list-item-text">Provide Feedback</span> <span class="md-list-item-text">Provide Feedback</span>
</md-list-item> --> </md-list-item> -->
<!-- <md-list-item @click="turnToPage('/settings')"> <md-list-item @click="turnToPage('/settings')">
<md-icon>settings</md-icon> <md-icon>settings</md-icon>
<span class="md-list-item-text">Settings</span> <span class="md-list-item-text">Settings</span>
</md-list-item> --> </md-list-item>
<md-list-item v-clipboard:copy="web_addr" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl"> <md-list-item v-clipboard:copy="web_addr" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl">
<md-icon>reply</md-icon> <md-icon>reply</md-icon>
@ -78,7 +78,7 @@
</div> </div>
<md-speed-dial class="md-bottom-right" v-if="show_list.length != 0"> <md-speed-dial class="md-bottom-right" v-if="show_list.length != 0">
<md-speed-dial-target @click="turnToAdd()"><md-icon>add</md-icon></md-speed-dial-target> <md-speed-dial-target class="md-primary" @click="turnToAdd()"><md-icon>add</md-icon></md-speed-dial-target>
</md-speed-dial> </md-speed-dial>
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent> <md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
<span>{{ snakebar_msg }}</span> <span>{{ snakebar_msg }}</span>
@ -114,10 +114,10 @@ export default {
}; };
}, },
computed: { computed: {
...mapState(['user_infos', 'row_data', 'row_pwd']) ...mapState(['user_infos', 'row_data', 'row_pwd', 'settings'])
}, },
methods: { methods: {
...mapActions(['setUserInfo', 'setRowData', 'setRowPwd']), ...mapActions(['setUserInfo', 'setRowData', 'setRowPwd', 'setSettings']),
// 修改md-app的最小高度 // 修改md-app的最小高度
changeFixed(clientHeight) { changeFixed(clientHeight) {
@ -133,19 +133,29 @@ export default {
this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState')))); this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
// 初始化 // 初始化
this.initUserInfo(); this.initUserInfo();
this.initSettings();
// 判断有无用户密码 // 判断有无用户密码
if (Object.keys(this.row_pwd).length != 0) { if (Object.keys(this.row_pwd).length != 0) {
// 有密码，已经输入过了 // 有密码，已经输入过了
let now = new Date().getTime(); let now = new Date().getTime();
if (now - this.row_pwd.create_time < 1000 * 60 * 5) { if (now - this.row_pwd.create_time < this.settings.expired_time) {
// 上次写入时间距离现在在五分钟之内 // 上次写入时间距离现在在（默认五分钟）之内
this.unlock = true; this.unlock = true;
// 判断有无密码本 // 判断有无密码本
if (this.row_data) { if (this.row_data) {
// 解密主密码 // 解密主密码
let main_code_decrpt = decryptMainCode(this.row_pwd.main_code); let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
let data_decrypt
// 解密密码本 // 解密密码本
let data_decrypt = decrypt(main_code_decrpt, this.row_data); try{
data_decrypt = decrypt(main_code_decrpt, this.row_data);
} catch(e) {
// 不正确
// 跳转到解锁界面
console.log(e)
this.turnToUnlock('密码错误');
return
}
// 判断密码是否正确 // 判断密码是否正确
if(!data_decrypt) { if(!data_decrypt) {
// 不正确 // 不正确
@ -189,6 +199,19 @@ export default {
} }
console.log('用户信息初始化完成'); console.log('用户信息初始化完成');
}, },
// 初始化配置信息
initSettings(){
if (Object.keys(this.settings).length == 0) {
// 初始化配置信息
let settings = {
expired_time: 1000 * 60 * 5, // 5分钟
};
this.setSettings([settings, this]);
console.log('配置信息覆写完成');
}
console.log('配置信息初始化完成');
},
// 修改排序 // 修改排序
changeSortType(type) { changeSortType(type) {

468
src/views/Settings/Settings.vue
View File

@ -1,188 +1,320 @@
<template> <template>
<div class="home" ref="home"> <div class="account">
<md-app md-waterfall md-mode="fixed"> <md-app md-waterfall md-mode="fixed">
<md-app-toolbar class="md-primary"> <md-app-toolbar class="md-primary toolbar">
<div class="md-toolbar-section-start"> <div class="md-toolbar-section-start">
<md-button class="md-icon-button" @click="menuVisible = !menuVisible"> <md-button class="md-icon-button" @click="back()"><md-icon>arrow_back</md-icon></md-button>
<md-icon>menu</md-icon> <h3 class="md-title" style="flex: 1">Settings</h3>
</md-button> </div>
<span class="md-title">Codebook</span> </md-app-toolbar>
</div>
<div class="md-toolbar-section-end">
<md-button class="md-icon-button">
<md-icon>search</md-icon>
</md-button>
<md-menu md-align-trigger>
<md-button md-menu-trigger class="md-icon-button">
<md-icon>more_vert</md-icon>
</md-button>
<md-menu-content>
<md-menu-item>Alphabetically</md-menu-item>
<md-menu-item>Recently Used</md-menu-item>
</md-menu-content>
</md-menu>
</div>
</md-app-toolbar>
<md-app-drawer :md-active.sync="menuVisible"> <md-app-content>
<div class="drawer-banner"> <md-list>
<md-icon class="default-avatar md-size-2x">face</md-icon> <md-subheader class="md-primary">Reset</md-subheader>
<p class="md-title">Canary Codebook</p> <md-list-item @click="resetAccount()">
<p class="md-caption">zhaoyingbo@live.cn</p> <md-icon>person</md-icon>
</div> <span class="md-list-item-text">Account</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> <md-list-item @click="resetCodebook()">
<md-list-item> <md-icon>format_align_left</md-icon>
<md-icon>person</md-icon> <span class="md-list-item-text">Codebook</span>
<span class="md-list-item-text">Account</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>
<md-list-item> <md-list-item @click="resetApplication()">
<md-icon>help</md-icon> <md-icon>layers</md-icon>
<span class="md-list-item-text">FAQ</span> <span class="md-list-item-text">Application</span>
</md-list-item> <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> <md-list-item @click="open_dialog">
<md-icon>question_answer</md-icon> <md-icon>vpn_key</md-icon>
<span class="md-list-item-text">Provide Feedback</span> <span class="md-list-item-text">Main password</span>
</md-list-item> </md-list-item>
<md-list-item> <md-divider></md-divider>
<md-icon>settings</md-icon>
<span class="md-list-item-text">Settings</span>
</md-list-item>
<md-list-item>
<md-icon>reply</md-icon>
<span class="md-list-item-text">Share</span>
</md-list-item>
</md-list>
</md-app-drawer>
<md-app-content> <md-subheader class="md-primary">settings</md-subheader>
<md-empty-state <md-list-item>
md-icon="devices_other" <md-icon>format_color_text</md-icon>
md-label="Create your first code" <span class="md-list-item-text">Language</span>
md-description="Creating code, you'll be able to upload your information to the server and save it." <md-switch v-model="is_chinese" class="md-primary" disabled></md-switch>
v-if="test_data.length == 0" </md-list-item>
> <md-list-item>
<md-button class="md-primary md-raised">Create first code</md-button> <md-icon>brightness_6</md-icon>
</md-empty-state> <span class="md-list-item-text">Dark mode</span>
<md-switch v-model="is_dark_mode" class="md-primary" disabled></md-switch>
</md-list-item>
<div class="code-card" v-for="(code, index) in test_data" :key="index"> <md-list-item>
<p class="md-title">{{code.title}}</p> <md-icon>update</md-icon>
<p class="md-caption">{{code.user_name}}</p> <md-field>
</div> <label for="expired_time">Expired time</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-select>
</md-field>
</md-list-item>
</md-list>
<md-speed-dial class="md-bottom-right" v-if="test_data.length != 0"> <md-dialog-prompt
<md-speed-dial-target> :md-active.sync="reset_main_pwd_active"
<md-icon>add</md-icon> v-model="new_main_pwd"
</md-speed-dial-target> md-title="Enter new password"
</md-speed-dial> md-input-maxlength="30"
</md-app-content> md-input-placeholder="Enter here..."
</md-app> md-confirm-text="Done"
</div> @md-confirm="resetPwd"
/>
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
<span>{{ snakebar_msg }}</span>
</md-snackbar>
</md-app-content>
</md-app>
</div>
</template> </template>
<script> <script>
// @ is an alias to /src // @ is an alias to /src
import { mapState, mapActions } from "vuex"; import { mapState, mapActions } from 'vuex';
import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
import { login, activation, syncLocal, syncCloud } from '@/axios/api.js';
export default { export default {
name: "Home", name: 'Add',
data() { data() {
return { return {
menuVisible: false, // 重置loading
has_data: false, account_loading: false,
clientHeight: "", codebook_loading: false,
test_data: [ application_loading: false,
{ reset_main_pwd_active: false,
open_count:0, new_main_pwd:'',
title:'QQ', reset_active: false,
user_name:'1144131090', // 设置状态
password:'test', is_chinese: false,
node:'测试用', is_dark_mode: false,
},{ // 过期时间 300000 5分钟
open_count:0, expired_time: 300000,
title:'微信', // snackbar
user_name:'15143211127', show_snackbar: false,
password:'test', snakebar_msg: '',
node:'测试用', // 初始化完成状态
},{ has_init: false
open_count:0, };
title:'QQ', },
user_name:'1144131090', computed: {
password:'test', ...mapState(['user_infos', 'row_data', 'row_pwd', 'settings'])
node:'测试用', },
},{ methods: {
open_count:0, ...mapActions(['setUserInfo', 'setRowData', 'setRowPwd', 'setSettings']),
title:'QQ',
user_name:'1144131090', // 初始化
password:'test', init() {
node:'测试用', // 刷新vuex
}, this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
] // 判断有无用户密码
}; if (Object.keys(this.row_pwd).length != 0) {
}, // 有密码，已经输入过了
computed: { let now = new Date().getTime();
...mapState([]) if (now - this.row_pwd.create_time < this.settings.expired_time) {
}, // 上次写入时间距离现在在（默认五分钟）之内
methods: { // 初始化本页信息
...mapActions([]), this.is_chinese = this.settings.is_chinese;
changeFixed(clientHeight) { this.is_dark_mode = this.settings.is_dark_mode;
//动态修改样式 this.expired_time = this.settings.expired_time;
// console.log(clientHeight); // 设置flag
this.$refs.home.children[0].style.minHeight = clientHeight + "px"; setTimeout(
} function() {
}, this.has_init = true;
created() {}, console.log('本页信息覆写完成');
mounted() { }.bind(this),
// 获取浏览器可视区域高度 10
this.clientHeight = `${document.documentElement.clientHeight}`; );
//document.body.clientWidth; } else {
window.onresize = function temp() { // 密码超时
this.clientHeight = `${document.documentElement.clientHeight}`; this.turnToHome('密码超时');
}; }
}, } else {
watch: { // 没有密码
// 如果 `clientHeight` 发生改变，这个函数就会运行 this.turnToHome('无密码');
clientHeight: function() { }
this.changeFixed(this.clientHeight); },
}
}, //返回上一页
beforeDestroy() {}, back() {
components: {} // 重置处理拦截器
if (this.reset_active) {
return;
}
this.$router.go(-1);
},
// 强制返回Home
turnToHome(msg) {
console.log(msg);
this.$router.replace('/');
},
// 重置账户
resetAccount(need_loading = true) {
this.reset_active = true;
if (need_loading) {
this.account_loading = true;
setTimeout(
function() {
this.account_loading = false;
this.snakebar_msg = 'Congratulations! Reset account completed!';
this.show_snackbar = true;
}.bind(this),
1000
);
}
// 初始化用户信息
let user_infos = {
mail_addr: 'A Little Canary',
has_login: false,
activation: false,
update_time: '1582282494434'
};
this.setUserInfo([user_infos, this]);
console.log('用户信息覆写完成');
this.reset_active = false;
},
// 重置密码本
resetCodebook(need_loading = true) {
this.reset_active = true;
if (need_loading) {
this.codebook_loading = true;
setTimeout(
function() {
this.codebook_loading = false;
this.snakebar_msg = 'Congratulations! Reset codebook completed!';
this.show_snackbar = true;
}.bind(this),
1000
);
}
this.setRowData(['', this]);
console.log('密码本覆写完成');
this.reset_active = false;
},
// 重置整个项目
resetApplication() {
this.application_loading = true;
this.reset_active = true;
this.resetAccount(false);
this.resetCodebook(false);
this.setRowPwd(['', this]);
console.log('主密码覆写完成');
let settings = {
is_chinese: false,
is_dark_mode: false,
expired_time: 300000
};
this.setSettings([settings, this]);
console.log('个性化设置覆写完成');
this.reset_active = false;
this.application_loading = false;
this.turnToHome('项目重置完成');
},
//覆写个性化设置
resetSettings() {
let settings = {
is_chinese: this.is_chinese,
is_dark_mode: this.is_dark_mode,
expired_time: this.expired_time
};
this.setSettings([settings, this]);
console.log('个性化设置覆写完成');
this.snakebar_msg = 'Congratulations! Reset settings completed!';
this.show_snackbar = true;
},
open_dialog() {
this.reset_main_pwd_active = true
},
resetPwd(new_main_pwd) {
// 空内容拦截器
if(!new_main_pwd.trim()) {
this.snakebar_msg = 'Password can not be none.';
this.show_snackbar = true;
}
let main_code_aes = encryptMainCode(new_main_pwd);
let row_pwd = {
main_code: main_code_aes,
create_time: new Date().getTime()
};
this.setRowPwd([row_pwd, this]);
this.snakebar_msg = 'Congratulations! New password set up successfully!';
this.show_snackbar = true;
}
},
created() {
this.init();
},
mounted() {},
watch: {
// 如果 `is_chinese` 发生改变，就会执行设置函数
is_chinese: function() {
if (this.has_init) this.resetSettings();
},
// 如果 `is_dark_mode` 发生改变，就会执行设置函数
is_dark_mode: function() {
if (this.has_init) this.resetSettings();
},
// 如果 `expired_time` 发生改变，就会执行设置函数
expired_time: function() {
if (this.has_init) this.resetSettings();
}
},
beforeDestroy() {},
components: {}
}; };
</script> </script>
<style scoped lang="scss" type="text/scss"> <style scoped lang="scss" type="text/scss">
@import "../../style/main"; @import '../../style/main';
.home { .account {
width: 100%; width: 100%;
// max-width: 500px; min-height: 100%;
min-height: 100%; background: #fff;
background: #fff; .expand {
// margin: 0 auto; width: 100%;
.drawer-banner { margin: 0 !important;
padding: 1rem 0.3rem 0.3rem 0.3rem; min-height: 1.2rem !important;
box-sizing: border-box; margin-top: 0.5rem !important;
background: $main-color; }
color: #fff; .time-content {
.default-avatar { text-align: right !important;
color: #fff; }
margin-bottom: 0.3rem; .loading-box {
} position: absolute;
.md-caption { right: 50%;
color: #fbfbfb; top: 50%;
} margin-right: -11px;
} margin-top: -11px;
.code-card { }
padding: .3rem 0;
border-bottom: 1px #eee solid;
}
} }
// Demo purposes only </style>
.md-drawer { <!--
width: 240px; 本页计划内容
max-width: calc(100vw - 125px);
} 重置账户
</style> 重置密码本
重置应用
修改密码本解密密码
-----------
设置语言
设置过期时间
黑暗模式（再议
-->