finish unlock
This commit is contained in:
parent
b77dab7f08
commit
909fd6ae6a
@ -16,6 +16,7 @@
|
||||
"vue-clipboard2": "^0.3.1",
|
||||
"vue-material": "^1.0.0-beta-11",
|
||||
"vue-router": "^3.1.5",
|
||||
"vue-svg-icon": "^1.2.9",
|
||||
"vuex": "^3.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
18
src/App.vue
18
src/App.vue
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div class="bg"></div>
|
||||
<icon class="bg" name="canary"></icon>
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
@ -126,15 +126,13 @@ button {
|
||||
user-select: none;
|
||||
}
|
||||
.bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: -100;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
background-image: linear-gradient(to bottom, #eaeaea, #ababab);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
margin-top: -2.5rem;
|
||||
margin-left: -2.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
src/assets/canary.png
Normal file
BIN
src/assets/canary.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
@ -4,6 +4,10 @@ import './registerServiceWorker'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
|
||||
// icon-loader
|
||||
import Icon from 'vue-svg-icon/Icon.vue'
|
||||
Vue.component('icon', Icon);
|
||||
|
||||
// material
|
||||
import VueMaterial from 'vue-material'
|
||||
import 'vue-material/dist/vue-material.min.css'
|
||||
|
||||
1
src/svg/canary.svg
Normal file
1
src/svg/canary.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1582191167349" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3270" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M921.6 716.75904L415.46752 210.66752a136.25344 136.25344 0 0 0-96.54272-39.99744c-70.93248 0-128.53248 54.272-135.19872 123.43296L102.4 375.43936h86.12864C210.59584 506.39872 294.57408 616.09984 409.6 673.49504v179.84512h68.27008V700.34432a405.18656 405.18656 0 0 0 68.25984 13.70112v139.30496H614.4V716.75904h307.2zM448.93184 340.6336L620.2368 511.95904h-39.95648c-75.27424 0-136.54016-61.22496-136.54016-136.52992-0.01024-12.12416 2.12992-23.63392 5.19168-34.79552z m-198.26688-33.46432a68.32128 68.32128 0 0 1 68.25984-68.22912c18.19648 0 35.36896 7.09632 48.27136 19.99872l28.4672 28.4672a202.37312 202.37312 0 0 0-20.20352 88.03328c0 112.92672 91.86304 204.8 204.8 204.8h108.22656l68.27008 68.25984H592.00512c-188.20096 0-341.34016-153.1392-341.34016-341.32992z" p-id="3271" fill="#bbdefb"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -45,10 +45,16 @@
|
||||
<md-icon>settings</md-icon>
|
||||
<span class="md-list-item-text">Settings</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item v-clipboard:copy="web_addr" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl">
|
||||
<md-icon>reply</md-icon>
|
||||
<span class="md-list-item-text">Share</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>beenhere</md-icon>
|
||||
<span class="md-list-item-text">Lock Now</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-app-drawer>
|
||||
|
||||
@ -72,7 +78,6 @@
|
||||
</md-speed-dial>
|
||||
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
|
||||
<span>{{ snakebar_msg }}</span>
|
||||
<md-button class="md-primary" @click="show_snackbar = false" v-if="snakebar_msg=='复制失败'">重试</md-button>
|
||||
</md-snackbar>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
@ -142,12 +147,12 @@ export default {
|
||||
this.turnToUnlock('密码超时');
|
||||
}
|
||||
} else {
|
||||
// 没有密码，留存本页
|
||||
this.show_list = [];
|
||||
this.unlock = false;
|
||||
// 没有密码，跳转到解锁界面创建密码
|
||||
this.turnToUnlock('无密码');
|
||||
}
|
||||
console.log(this.show_list.length != 0 ? '密码本存在' : '空密码本');
|
||||
console.log(this.unlock ? '已解锁' : '未解锁');
|
||||
|
||||
},
|
||||
|
||||
// 初始化用户信息
|
||||
@ -184,15 +189,17 @@ export default {
|
||||
// 跳转到解锁界面
|
||||
turnToUnlock(type) {
|
||||
console.log(type);
|
||||
let main_code = '10aeff';
|
||||
let main_code_aes = encryptMainCode(main_code);
|
||||
let row_pwd = {
|
||||
main_code: main_code_aes,
|
||||
create_time: new Date().getTime()
|
||||
};
|
||||
this.setRowPwd([row_pwd, this]);
|
||||
console.log('主密码设置完成，返回init');
|
||||
this.init();
|
||||
// let main_code = '10aeff';
|
||||
// let main_code_aes = encryptMainCode(main_code);
|
||||
// let row_pwd = {
|
||||
// main_code: main_code_aes,
|
||||
// create_time: new Date().getTime()
|
||||
// };
|
||||
// this.setRowPwd([row_pwd, this]);
|
||||
// console.log('主密码设置完成，返回init');
|
||||
// this.init();
|
||||
if(type == '密码超时') this.$router.push({ name: "Unlock", params: { msg: 'Password validity period has expired, please re-enter' } })
|
||||
else this.$router.push('/unlock')
|
||||
},
|
||||
|
||||
// 跳转到搜索界面
|
||||
@ -228,7 +235,7 @@ export default {
|
||||
|
||||
// 复制失败
|
||||
onErrorUrl(e) {
|
||||
this.snakebar_msg = '复制失败';
|
||||
this.snakebar_msg = '复制失败，夸克等浏览器复制成功仍会显示失败';
|
||||
this.show_snackbar = true;
|
||||
}
|
||||
},
|
||||
|
||||
@ -1,188 +1,179 @@
|
||||
<template>
|
||||
<div class="home" ref="home">
|
||||
<md-app md-waterfall md-mode="fixed">
|
||||
<md-app-toolbar class="md-primary">
|
||||
<div class="md-toolbar-section-start">
|
||||
<md-button class="md-icon-button" @click="menuVisible = !menuVisible">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
<span class="md-title">Codebook</span>
|
||||
</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">
|
||||
<div class="drawer-banner">
|
||||
<md-icon class="default-avatar md-size-2x">face</md-icon>
|
||||
<p class="md-title">Canary Codebook</p>
|
||||
<p class="md-caption">zhaoyingbo@live.cn</p>
|
||||
</div>
|
||||
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<md-icon>person</md-icon>
|
||||
<span class="md-list-item-text">Account</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>help</md-icon>
|
||||
<span class="md-list-item-text">FAQ</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>question_answer</md-icon>
|
||||
<span class="md-list-item-text">Provide Feedback</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<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-empty-state
|
||||
md-icon="devices_other"
|
||||
md-label="Create your first code"
|
||||
md-description="Creating code, you'll be able to upload your information to the server and save it."
|
||||
v-if="test_data.length == 0"
|
||||
>
|
||||
<md-button class="md-primary md-raised">Create first code</md-button>
|
||||
</md-empty-state>
|
||||
|
||||
<div class="code-card" v-for="(code, index) in test_data" :key="index">
|
||||
<p class="md-title">{{code.title}}</p>
|
||||
<p class="md-caption">{{code.user_name}}</p>
|
||||
</div>
|
||||
|
||||
<md-speed-dial class="md-bottom-right" v-if="test_data.length != 0">
|
||||
<md-speed-dial-target>
|
||||
<md-icon>add</md-icon>
|
||||
</md-speed-dial-target>
|
||||
</md-speed-dial>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
<div class="unlock">
|
||||
<md-toolbar class="md-primary">
|
||||
<h3 class="md-title" style="flex: 1">{{ is_create ? 'Create Password' : 'Unlock' }}</h3>
|
||||
</md-toolbar>
|
||||
<icon class="logo" name="canary"></icon>
|
||||
<p class="md-title center">{{ is_create ? 'Create New Password' : 'Unlock Canary Codebook' }}</p>
|
||||
<md-field class="input-box" :class="messageClass">
|
||||
<label>{{ is_create ? 'New Password' : 'Unlock Password' }}</label>
|
||||
<md-input v-model="pwd" type="password"></md-input>
|
||||
<span class="md-error">{{ err_msg }}</span>
|
||||
</md-field>
|
||||
<md-field class="input-box" :class="messageClass" v-if="is_create">
|
||||
<label>Repeat Password</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()">Enter</md-button>
|
||||
<md-dialog-confirm
|
||||
:md-active.sync="show_dialog"
|
||||
md-title="Confirm you new password?"
|
||||
md-content="The password will not be modified after submission, please make sure you don’t tell anyone this password."
|
||||
md-confirm-text="Agree"
|
||||
md-cancel-text="Disagree"
|
||||
@md-cancel="onCancel"
|
||||
@md-confirm="submit"
|
||||
/>
|
||||
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
|
||||
<span>{{ snakebar_msg }}</span>
|
||||
</md-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from "vuex";
|
||||
import { mapState, mapActions } from 'vuex';
|
||||
import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
data() {
|
||||
return {
|
||||
menuVisible: false,
|
||||
has_data: false,
|
||||
clientHeight: "",
|
||||
test_data: [
|
||||
{
|
||||
open_count:0,
|
||||
title:'QQ',
|
||||
user_name:'1144131090',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},{
|
||||
open_count:0,
|
||||
title:'微信',
|
||||
user_name:'15143211127',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},{
|
||||
open_count:0,
|
||||
title:'QQ',
|
||||
user_name:'1144131090',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},{
|
||||
open_count:0,
|
||||
title:'QQ',
|
||||
user_name:'1144131090',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState([])
|
||||
},
|
||||
methods: {
|
||||
...mapActions([]),
|
||||
changeFixed(clientHeight) {
|
||||
//动态修改样式
|
||||
// console.log(clientHeight);
|
||||
this.$refs.home.children[0].style.minHeight = clientHeight + "px";
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
// 获取浏览器可视区域高度
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
//document.body.clientWidth;
|
||||
window.onresize = function temp() {
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 如果 `clientHeight` 发生改变，这个函数就会运行
|
||||
clientHeight: function() {
|
||||
this.changeFixed(this.clientHeight);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {},
|
||||
components: {}
|
||||
name: 'Unlock',
|
||||
data() {
|
||||
return {
|
||||
pwd: '',
|
||||
repeat: '',
|
||||
is_err: false,
|
||||
err_msg: '',
|
||||
show_dialog: false,
|
||||
is_create: false,
|
||||
show_snackbar: false,
|
||||
snakebar_msg:''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['row_data']),
|
||||
messageClass() {
|
||||
return {
|
||||
'md-invalid': this.is_err
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setRowPwd']),
|
||||
|
||||
// 初始化
|
||||
init() {
|
||||
// 刷新vuex
|
||||
this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
|
||||
// 判断是创建密码还是输入密码
|
||||
this.is_create = this.row_data ? false : true;
|
||||
// 判断是否显示SnakeBar
|
||||
if (this.$route.params.msg) {
|
||||
// 密码过期
|
||||
this.snakebar_msg = this.$route.params.msg
|
||||
this.show_snackbar = true
|
||||
}
|
||||
},
|
||||
|
||||
// 点击提交判断密码
|
||||
judgePwd() {
|
||||
// 空密码拦截器
|
||||
if (this.pwd.trim().length == 0) {
|
||||
this.is_err = true;
|
||||
this.err_msg = 'Password can not be none';
|
||||
console.log('密码为空拦截');
|
||||
return;
|
||||
}
|
||||
// 判断是否有密码本
|
||||
if (this.row_data) {
|
||||
// 有密码本
|
||||
let test_decode = decrypt(this.pwd, this.row_data);
|
||||
// 解码成功这里边就是密码本，失败就是空字符串
|
||||
if (test_decode) {
|
||||
// 正确,将密码加密放进locolstorage
|
||||
this.submit();
|
||||
} else {
|
||||
// 错误
|
||||
this.is_err = true;
|
||||
this.err_msg = 'Wrong password';
|
||||
console.log('密码输入错误拦截');
|
||||
}
|
||||
} else {
|
||||
// 空密码本，不论输入什么都是对的，但是需要比较两个输入的是不是一样的
|
||||
if (this.pwd == this.repeat) {
|
||||
// 两次一致，弹窗警告不可更改
|
||||
this.show_dialog = true;
|
||||
} else {
|
||||
// 两次不一致
|
||||
this.is_err = true;
|
||||
this.err_msg = 'The two passwords do not match';
|
||||
console.log('密码两次输入不一致拦截');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 用户点击取消
|
||||
onCancel() {
|
||||
console.log('用户点击取消');
|
||||
},
|
||||
|
||||
// 提交然后返回主页
|
||||
submit() {
|
||||
let main_code_aes = encryptMainCode(this.pwd);
|
||||
let row_pwd = {
|
||||
main_code: main_code_aes,
|
||||
create_time: new Date().getTime()
|
||||
};
|
||||
this.setRowPwd([row_pwd, this]);
|
||||
console.log('主密码设置完成，返回Home');
|
||||
this.$router.replace('/');
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
mounted() {},
|
||||
watch: {
|
||||
// 如果 `pwd` 发生改变，就会清空错误状态
|
||||
pwd: function() {
|
||||
this.is_err = false;
|
||||
this.err_msg = '';
|
||||
},
|
||||
// 如果 `repeat` 发生改变，就会清空错误状态
|
||||
repeat: function() {
|
||||
this.is_err = false;
|
||||
this.err_msg = '';
|
||||
}
|
||||
},
|
||||
beforeDestroy() {},
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" type="text/scss">
|
||||
@import "../../style/main";
|
||||
.home {
|
||||
width: 100%;
|
||||
// max-width: 500px;
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
// margin: 0 auto;
|
||||
.drawer-banner {
|
||||
padding: 1rem 0.3rem 0.3rem 0.3rem;
|
||||
box-sizing: border-box;
|
||||
background: $main-color;
|
||||
color: #fff;
|
||||
.default-avatar {
|
||||
color: #fff;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.md-caption {
|
||||
color: #fbfbfb;
|
||||
}
|
||||
}
|
||||
.code-card {
|
||||
padding: .3rem 0;
|
||||
border-bottom: 1px #eee solid;
|
||||
}
|
||||
@import '../../style/main';
|
||||
.unlock {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
.logo {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
}
|
||||
.center {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
.input-box {
|
||||
width: 70%;
|
||||
max-width: 350px;
|
||||
margin: 0.5rem auto;
|
||||
}
|
||||
.md-raised {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
// Demo purposes only
|
||||
.md-drawer {
|
||||
width: 240px;
|
||||
max-width: calc(100vw - 125px);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,41 +1,47 @@
|
||||
this.show_list = [
|
||||
{
|
||||
open_count: 1,
|
||||
title: 'QQ',
|
||||
user_name: '1144131090',
|
||||
password: 'test',
|
||||
node: '测试用'
|
||||
},
|
||||
{
|
||||
open_count: 2,
|
||||
title: '微信',
|
||||
user_name: '15143211127',
|
||||
password: 'test',
|
||||
node: '测试用'
|
||||
},
|
||||
{
|
||||
open_count: 3,
|
||||
title: 'WIFI',
|
||||
user_name: 'admin',
|
||||
password: 'test',
|
||||
node: '测试用'
|
||||
},
|
||||
{
|
||||
open_count: 4,
|
||||
title: 'WeGame',
|
||||
user_name: '1144131090',
|
||||
password: 'test',
|
||||
node: '测试用'
|
||||
}
|
||||
];
|
||||
test() {
|
||||
//
|
||||
// let main_code = '10aeff'
|
||||
// let data_aes = encrypt(main_code, this.show_list);
|
||||
// if(!this.row_data) this.setRowData([data_aes, this])
|
||||
// let main_code_aes = encryptMainCode(main_code)
|
||||
// if(!this.row_pwd) this.setRowPwd([main_code_aes, this])
|
||||
// let main_code_decrpt = decryptMainCode(main_code_aes)
|
||||
// let data_decrpt = decrypt(main_code_decrpt, data_aes)
|
||||
// console.log(data_aes, main_code_aes, main_code_decrpt,data_decrpt)
|
||||
},
|
||||
this.show_list = [{
|
||||
open_count: 1,
|
||||
title: 'QQ',
|
||||
user_name: '1144131090',
|
||||
password: 'test',
|
||||
node: '测试用'
|
||||
},
|
||||
{
|
||||
open_count: 2,
|
||||
title: '微信',
|
||||
user_name: '15143211127',
|
||||
password: 'test',
|
||||
node: '测试用'
|
||||
},
|
||||
{
|
||||
open_count: 3,
|
||||
title: 'WIFI',
|
||||
user_name: 'admin',
|
||||
password: 'test',
|
||||
node: '测试用'
|
||||
},
|
||||
{
|
||||
open_count: 4,
|
||||
title: 'WeGame',
|
||||
user_name: '1144131090',
|
||||
password: 'test',
|
||||
node: '测试用'
|
||||
}
|
||||
];
|
||||
|
||||
function test() {
|
||||
//
|
||||
// let main_code = '10aeff'
|
||||
// let data_aes = encrypt(main_code, this.show_list);
|
||||
// if(!this.row_data) this.setRowData([data_aes, this])
|
||||
// let main_code_aes = encryptMainCode(main_code)
|
||||
// if(!this.row_pwd) this.setRowPwd([main_code_aes, this])
|
||||
// let main_code_decrpt = decryptMainCode(main_code_aes)
|
||||
// let data_decrpt = decrypt(main_code_decrpt, data_aes)
|
||||
// console.log(data_aes, main_code_aes, main_code_decrpt,data_decrpt)
|
||||
}
|
||||
|
||||
let test_encode = encrypt('10aeff', '这是一段测试文本');
|
||||
console.log('加密后', test_encode)
|
||||
let test_decode = decrypt('10aefs', test_encode)
|
||||
console.log('解密后', test_decode)
|
||||
console.log('类型', typeof(test_decode)) // 密码错误就是空字符串
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user