This commit is contained in:
Jesse-Ma
2022-05-27 14:29:30 +08:00
parent af75777b4e
commit 0d10a1802a
32 changed files with 1909 additions and 1 deletions

478
src/views/EditNote.vue Normal file
View 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 &copy; 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>

17
src/views/ErrorView.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<div class="home">
error
</div>
</template>
<script>
export default {
name: 'ErrorView',
components: {},
data() {
return {}
},
created() {
}
}
</script>

19
src/views/HomeView.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<div class="home">
home
</div>
</template>
<script>
export default {
name: 'HomeView',
components: {
},
data() {
return {
}
},
created() {
}
}
</script>

327
src/views/ViewNote.vue Normal file
View File

@@ -0,0 +1,327 @@
<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;
}
.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;*/
font-size: 14px;
}
#noteText::selection {
background: firebrick;
color: white;
}
#noteText::-moz-selection {
background: firebrick;
color: white;
}
#noteText br::selection {
background: firebrick;
color: white;
}
#noteText br::-moz-selection {
background: firebrick;
color: white;
}
</style>
<template>
<div class="layout" onkeydown="keydown">
<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-cloud-done" 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" style="margin-left:5px; border-radius: 0px;font-size: 24px;"
@click="deleteNote()" icon="md-trash"></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">
<div style="border-left: 3px solid #FF3366;">
<div id="noteText" style="text-align: left;min-height: 650px;" class="monoFt"
v-html="this.noteForm.escapeText">
view2
</div>
</div>
</Card>
</Col>
</Row>
</div>
</Content>
</Layout>
</div>
</template>
<script>
import { aesDecrypt, md5, unzip } from "@/libs/secret";
import Jquery from "jquery";
import { getSecretKey, getStoreKey } from "@/api/lock";
import storage from "@/libs/storage";
import { getEscapeText } from "@/libs/noteStorage";
export default {
name: 'ViewNote',
components: {},
props: {},
data() {
return {
noteForm: {
url: '',
text: '',
escapeText: '',
key: '',
md5: '',
lock: '0',
},
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 noteMeta = storage.session.getObject(storeKey + '.noteMeta');
if (noteMeta) {
this.state.lock = noteMeta.lock;
this.secret.cipher = noteMeta.cipher;
this.noteForm.md5 = noteMeta.md5;
this.loadText();
}
this.bindEvent();
},
methods: {
decryptNote() {
// let password = "123456";
// let secretKey = getSecretKey(this.noteForm.key, password);
// this.loadText(secretKey);
},
createNote() {
window.open("/");
},
loadText() {
let password;
if (this.noteForm.lock == "1") {
password = "123456"
}
if (!password) {
password = "";
}
let secretKey = getSecretKey(this.secret.cipher, password);
let storeText = storage.local.getText(this.secret.storeKey + '.text');
if (!storeText || md5(storeText.substring(35)) != this.noteForm.md5) {
let note = this.getNote(this.noteForm.key);
storeText = this.noteForm.lock + '|' + this.secret.cipher + '|' + note.text;
storage.local.setText(this.secret.storeKey + '.text', storeText);
}
if (storeText) {
storeText = unzip(storeText.substring(35));
let plainText = aesDecrypt(storeText, secretKey);
if (plainText.startsWith("FLAGNOTE#")) {
this.noteForm.text = plainText.substring(9);
let escapeText = getEscapeText(this.noteForm.text);
this.noteForm.escapeText = escapeText;
}
}
},
getNote(key) {
let noteObject;
Jquery.ajax({
url: '/note/' + key,
async: false,
success: function (data) {
noteObject = data;
}
});
return noteObject;
},
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");
let range = document.body.createTextRange();
range.moveToElementText(element);
range.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");
let selection = window.getSelection();
let range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}
});
} else {
//alert('none');
}
}
}
}
</script>