tag1
This commit is contained in:
Jesse-Ma
478
src/views/EditNote.vue
Normal file
478
src/views/EditNote.vue
Normal file
@@ -0,0 +1,478 @@
|
||||
<style scoped>
|
||||
.layout {
|
||||
height: 100%;
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
.ivu-layout-header {
|
||||
line-height: normal;
|
||||
height: auto;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
.ivu-layout-content {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.layout-footer-center {
|
||||
background: #dddddd;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ivu-card-bordered {
|
||||
border: 0px solid #dcdee2;
|
||||
border-color: #e8eaec;
|
||||
}
|
||||
|
||||
.noteUrl {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
font-family: Merriweather;
|
||||
|
||||
}
|
||||
|
||||
.noteKey {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
font-family: "Bitstream Vera Sans Mono", Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
#noteText {
|
||||
color: black;
|
||||
padding: 10px;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: white;
|
||||
min-width: 200px;
|
||||
border-radius: 0px;
|
||||
overflow-y: auto;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
min-height: 400px;
|
||||
border: 0px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
#noteText::selection {
|
||||
background: firebrick;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#noteText::-moz-selection {
|
||||
background: firebrick;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Layout>
|
||||
<Affix :offset-top="0">
|
||||
|
||||
|
||||
<Header class="header">
|
||||
<div>
|
||||
<Row>
|
||||
<Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
|
||||
:lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
|
||||
|
||||
|
||||
<div style="background: white;width:100%;height:40px;">
|
||||
<img style="height:40px;float:left;" src="favicon.png">
|
||||
|
||||
<div style="height: 40px;float: left;padding-top: 15px;padding-left: 20px;">
|
||||
<Icon type="md-create" style="font-size: 22px;color:red" /><a class="noteKey">{{ noteForm.key }}</a>
|
||||
</div>
|
||||
|
||||
<div style="float:right;width:auto;">
|
||||
<Button-group size="large">
|
||||
<Button type="error" :loading="loading" style="margin-left:5px; border-radius: 0px;font-size: 24px;"
|
||||
@click="submitNote()" icon="md-cloud-upload"></Button>
|
||||
<Button type="error" style="margin-left:5px; border-radius: 0px;font-size: 24px;"
|
||||
@click="createNote()" icon="md-add"></Button>
|
||||
|
||||
</Button-group>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
<div style="float:right;width:auto;">
|
||||
<Button-group size="default">
|
||||
<Button type="error" @click="unLockNote()" icon="md-eye"></Button>
|
||||
<Button type="error" @click="lockNote()" icon="md-eye-off"></Button>
|
||||
</Button-group>
|
||||
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
<!--
|
||||
<div style="width:auto;float:right;font-size: 24px;">
|
||||
<Button-group vertical size="large" style="position:absolute;right;0px;top:0px;">
|
||||
<Button type="error" style="border-radius: 0px;font-size: 24px;" icon="md-add"
|
||||
@click="showExt = true"></Button>
|
||||
<Button type="error" v-show="showExt" style="border-radius: 0px;font-size: 24px;"
|
||||
icon="md-cloud-upload"></Button>
|
||||
<Button type="error" v-show="showExt" style="border-radius: 0px;font-size: 24px;"
|
||||
icon="logo-googleplus"></Button>
|
||||
<Button type="error" v-show="showExt" style="border-radius: 0px;font-size: 24px;"
|
||||
icon="logo-tumblr"></Button>
|
||||
</Button-group>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Header>
|
||||
</Affix>
|
||||
<Content class="content">
|
||||
<div style="min-height: 650px;">
|
||||
<Row>
|
||||
<Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
|
||||
:lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
|
||||
<Card :padding="0">
|
||||
<Form :model="noteForm" :label-width="80">
|
||||
<div id="wrapper" style="border-left: 3px solid #FF3366;">
|
||||
|
||||
<Input element-id="noteText" type="textarea" :border="false" v-model="noteForm.text"
|
||||
:autosize="{ minRows: 30, maxRows: 1024 }" placeholder="Enter something..." v-on:input="log"
|
||||
@on-keydown="down" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
</Content>
|
||||
|
||||
<Footer class="layout-footer-center">2022 © openif.com</Footer>
|
||||
</Layout>
|
||||
<Modal v-model="modal1" title="Common Modal dialog box title" @on-ok="ok" @on-cancel="cancel">
|
||||
|
||||
<p>Content of dialog</p>
|
||||
<i-switch true-color="#ff4949" @on-change="change">
|
||||
<Icon type="md-lock" slot="open"></Icon>
|
||||
<Icon type="md-unlock" slot="close"></Icon>
|
||||
</i-switch>
|
||||
<Input v-show="showPassword" maxlength="10" placeholder="Enter password..."
|
||||
style="width: 150px;margin-left:20px;" />
|
||||
<p>Content of dialog</p>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { unzip, aesDecrypt } from '../libs/secret'
|
||||
// import html2canvas from "html2canvas";
|
||||
import Jquery from "jquery";
|
||||
import { saveNote } from "@/api/note";
|
||||
import { getSecretKey, getStoreKey } from "@/api/lock";
|
||||
import storage from "@/libs/storage";
|
||||
import { setStoreText } from "@/libs/noteStorage";
|
||||
|
||||
export default {
|
||||
name: 'EditNote',
|
||||
props: {},
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
modal1: false,
|
||||
showExt: false,
|
||||
showPassword: false,
|
||||
noteForm: {
|
||||
text: '',
|
||||
key: '',
|
||||
},
|
||||
secret: {
|
||||
storeKey: '',
|
||||
secretKey: '',
|
||||
cipher: '',
|
||||
},
|
||||
state: {
|
||||
lock: '0',
|
||||
|
||||
locking: '0',
|
||||
|
||||
commited: '0'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.noteForm.key = this.$route.params.name;
|
||||
let storeKey = getStoreKey(this.noteForm.key);
|
||||
this.secret.storeKey = storeKey;
|
||||
|
||||
let keyMeta = storage.session.getObject(storeKey + '.keyMeta');
|
||||
if (keyMeta) {
|
||||
this.state.lock = '0';
|
||||
this.secret.cipher = keyMeta.cipher;
|
||||
storage.local.setText(storeKey + '.text', "0|" + this.secret.cipher);
|
||||
storage.session.setObject(storeKey + '.keyMeta', null);
|
||||
} else {
|
||||
let storeText = storage.local.getText(storeKey + '.text');
|
||||
this.state.lock = storeText.substring(0, 1);
|
||||
this.secret.cipher = storeText.substring(2, 34)
|
||||
}
|
||||
|
||||
if (this.state.lock == "1") {
|
||||
this.noteForm.text = "*****lock*****";
|
||||
return;
|
||||
} else {
|
||||
this.loadText();
|
||||
}
|
||||
|
||||
|
||||
this.bindEvent();
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
updated() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
destroyed() {
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
methods: {
|
||||
change(status) {
|
||||
this.showPassword = status;
|
||||
},
|
||||
ok() {
|
||||
|
||||
},
|
||||
cancel() {
|
||||
|
||||
},
|
||||
loadText() {
|
||||
let secretKey = getSecretKey(this.secret.cipher);
|
||||
let storeText = storage.local.getText(this.secret.storeKey + '.text');
|
||||
|
||||
if (null != storeText && '' != storeText) {
|
||||
let lock = storeText.substring(0, 1);
|
||||
if (lock == "1") {
|
||||
alert("note is encrypt!");
|
||||
return;
|
||||
}
|
||||
|
||||
//let cipher = storeText.substring(2,34)
|
||||
|
||||
storeText = storeText.substring(35);
|
||||
|
||||
storeText = unzip(storeText);
|
||||
let plainText = aesDecrypt(storeText, secretKey);
|
||||
if (plainText.startsWith("FLAGNOTE#")) {
|
||||
this.noteForm.text = plainText.substring(9);
|
||||
this.state.lock = "0";
|
||||
} else {
|
||||
if (this.state.lock == "1") {
|
||||
alert("password is wrong!")
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
log() {
|
||||
setStoreText(this.noteForm.text, this.secret);
|
||||
},
|
||||
down(event) {
|
||||
if (event.keyCode == 9) {
|
||||
let start = event.currentTarget.selectionStart, end = event.currentTarget.selectionEnd;
|
||||
let text = event.currentTarget.value;
|
||||
let tab = ' ';//\t
|
||||
text = text.substr(0, start) + tab + text.substr(start);
|
||||
event.currentTarget.value = text;
|
||||
event.currentTarget.selectionStart = start + tab.length;
|
||||
event.currentTarget.selectionEnd = end + tab.length;
|
||||
event.stopPropagation();
|
||||
if (event.preventDefault) {
|
||||
event.preventDefault();
|
||||
}
|
||||
this.noteForm.text = event.currentTarget.value;
|
||||
setStoreText(event.currentTarget.value, this.secret);
|
||||
|
||||
// html2canvas(document.body).then(function (canvas) {
|
||||
// canvas;
|
||||
// //document.body.appendChild(canvas);
|
||||
// });
|
||||
|
||||
} else if (event.ctrlKey && event.which == 13) {
|
||||
this.save().then(res => {
|
||||
if (res) {
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
save() {
|
||||
this.noteForm.cipher = this.secret.cipher;
|
||||
this.noteForm.lock = this.state.lock;
|
||||
return saveNote(this.noteForm);
|
||||
},
|
||||
submitNote() {
|
||||
if (this.state.locking == "1") {
|
||||
return;
|
||||
}
|
||||
this.state.locking = "1";
|
||||
|
||||
this.loading = true;
|
||||
|
||||
this.save().then(res => {
|
||||
if (res) {
|
||||
location.reload();
|
||||
this.state.locking = "0";
|
||||
}
|
||||
});
|
||||
},
|
||||
lockNote() {
|
||||
if (this.state.locking == "1") {
|
||||
return;
|
||||
}
|
||||
this.state.locking = "1";
|
||||
|
||||
if (this.state.lock == "1") {
|
||||
this.state.locking = "0";
|
||||
return;
|
||||
}
|
||||
|
||||
let password = '123456';
|
||||
|
||||
setStoreText(this.noteForm.text, this.secret, password);
|
||||
|
||||
this.state.lock = "1"
|
||||
|
||||
this.noteForm.text = '******lock******';
|
||||
|
||||
|
||||
var noteText = document.getElementById("noteText");
|
||||
|
||||
noteText.select();
|
||||
noteText.selectionStart = 0;
|
||||
noteText.selectionEnd = 1;
|
||||
|
||||
|
||||
this.state.locking = "0";
|
||||
|
||||
},
|
||||
unLockNote() {
|
||||
if (this.state.locking == "1") {
|
||||
return;
|
||||
}
|
||||
|
||||
this.state.locking = "1";
|
||||
|
||||
if (this.state.lock == "0") {
|
||||
this.state.locking = "0";
|
||||
return;
|
||||
}
|
||||
|
||||
let password = '123456';
|
||||
|
||||
let storeText = storage.local.getText(this.secret.storeKey + '.text');
|
||||
if (storeText) {
|
||||
let lock = storeText.substring(0, 1);
|
||||
|
||||
if (!lock) {
|
||||
alert("note is not encrypt!");
|
||||
}
|
||||
|
||||
storeText = storeText.substring(35);
|
||||
|
||||
storeText = unzip(storeText);
|
||||
|
||||
let secretKey = getSecretKey(this.secret.cipher, password);
|
||||
let plainText = aesDecrypt(storeText, secretKey);
|
||||
if (plainText.startsWith("FLAGNOTE#")) {
|
||||
lock = "0";
|
||||
} else {
|
||||
let secretKey = getSecretKey(this.secret.cipher);
|
||||
let plainText = aesDecrypt(storeText, secretKey);
|
||||
if (plainText.startsWith("FLAGNOTE#")) {
|
||||
lock = "0";
|
||||
} else {
|
||||
lock = "1";
|
||||
}
|
||||
}
|
||||
|
||||
if (lock == '0') {
|
||||
this.noteForm.text = plainText.substring(9);
|
||||
this.state.lock = "0";
|
||||
setStoreText(this.noteForm.text, this.secret);
|
||||
|
||||
this.state.locking = "0";
|
||||
} else {
|
||||
alert("password is wrong!")
|
||||
this.state.locking = "0";
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
alert("storeText is deleted!")
|
||||
this.state.locking = "0";
|
||||
}
|
||||
|
||||
},
|
||||
createNote() {
|
||||
window.open("/");
|
||||
},
|
||||
bindEvent() {
|
||||
if (document.body.createTextRange) {
|
||||
Jquery(document).keydown(function (e) {
|
||||
if ((e.ctrlKey || e.metaKey) && e.keyCode == 65) {
|
||||
e.preventDefault();
|
||||
|
||||
var element = document.getElementById("noteText");
|
||||
|
||||
element.select();
|
||||
|
||||
}
|
||||
});
|
||||
} else if (window.getSelection) {
|
||||
|
||||
Jquery(document).keydown(function (e) {
|
||||
if ((e.ctrlKey || e.metaKey) && e.keyCode == 65) {
|
||||
e.preventDefault();
|
||||
|
||||
var element = document.getElementById("noteText");
|
||||
|
||||
element.select();
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
//alert('none');
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user