From 620cf998d9239f4273f8b9785e6d42859dd28574 Mon Sep 17 00:00:00 2001 From: RainSun Date: Thu, 5 Mar 2020 11:54:57 +0800 Subject: [PATCH] Support password generation when creating new password records --- src/utils/language.js | 42 ++++++- src/views/Add/Add.vue | 250 +++++++++++++++++++++++++++--------------- 2 files changed, 199 insertions(+), 93 deletions(-) diff --git a/src/utils/language.js b/src/utils/language.js index 339586b..fec0bdb 100644 --- a/src/utils/language.js +++ b/src/utils/language.js @@ -119,13 +119,35 @@ export function lang() { title: ['新建密码', '编辑'], subheader: ['密码标题', '用户名', '密码', '网址', '备注...'], enter: '提交', - empty_error: ['密码标题不可为空', '用户名不可为空', '密码不可为空'] + empty_error: ['密码标题不可为空', '用户名不可为空', '密码不可为空'], + generator: { + title: '生成密码', + subheader: ['结果', '设置'], + length_setter:{ + label: '密码长度', + options:['6 位', '12 位', '18 位', '24 位', '32 位'] + }, + settings:['包含大写', '包含小写', '包含数字', '包含符号'], + actions: ['生成','关闭'], + code_res_empty: '未生成', + } }, EN: { title: ['Add New Code', 'Edit'], subheader: ['Code Title', 'Username', 'Password', 'Web address', 'Node'], enter: 'Enter', - empty_error: ['Title can not be none.', 'Username can not be none.', 'Password can not be none.'] + empty_error: ['Title can not be none.', 'Username can not be none.', 'Password can not be none.'], + generator: { + title: 'Generate Password', + subheader: ['Results (click to copy)', 'Settings'], + length_setter:{ + label: 'Password Length', + options:['6 Digit', '12 Digit', '18 Digit', '24 Digit', '32 Digit'] + }, + settings:['Contain Uppercase', 'Contain Lowercase', 'Contain Number', 'Contain Symbol'], + actions: ['Generate','Close'], + code_res_empty: 'Not generated', + } } }, account: { @@ -256,6 +278,14 @@ export function lang() { CHS:{ title: '更新日志', timeline: [ + { + label: '新建密码记录时支持生成密码', + tag:'功能更新', + content: [ + '新建密码记录页的的密码输入框右侧支持打开生成密码页', + '2020-03-05' + ] + }, { label: '修复黑暗模式下主页分割线显示问题', tag:'bug修复', @@ -317,6 +347,14 @@ export function lang() { EN:{ title: 'Update Log', timeline: [ + { + label: 'Support password generation when creating new password records', + tag:'Feature update', + content: [ + 'The right side of the password input box of the new password record page supports opening a generate password page', + '2020-03-05' + ] + }, { label: 'Fixed display of homepage split line in dark mode', tag:'Bug fix', diff --git a/src/views/Add/Add.vue b/src/views/Add/Add.vue index 4a1eef0..53d0234 100644 --- a/src/views/Add/Add.vue +++ b/src/views/Add/Add.vue @@ -4,40 +4,92 @@
arrow_back -

{{id_cache?lang.title[1]:lang.title[0]}}

+

{{ id_cache ? lang.title[1] : lang.title[0] }}
- - + + - {{lang.empty_error[0]}} + {{ lang.empty_error[0] }} - - + + - {{lang.empty_error[1]}} + {{ lang.empty_error[1] }} - - + + - {{lang.empty_error[2]}} + {{ lang.empty_error[2] }} + 生成密码 - + - + - {{lang.enter}} + {{ lang.enter }} + + + 生成密码 + + + {{lang.generator.subheader[0]}} + +

{{password ? password : lang.generator.code_res_empty}}

+ + + {{lang.generator.subheader[1]}} + + + + + + {{lang.generator.length_setter.options[0]}} + {{lang.generator.length_setter.options[1]}} + {{lang.generator.length_setter.options[2]}} + {{lang.generator.length_setter.options[3]}} + {{lang.generator.length_setter.options[4]}} + + + + + + {{lang.generator.settings[0]}} + + + + + {{lang.generator.settings[1]}} + + + + + {{lang.generator.settings[2]}} + + + + + {{lang.generator.settings[3]}} + + + + + + {{lang.generator.actions[0]}} + {{lang.generator.actions[1]}} + + @@ -47,9 +99,9 @@ // @ 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'; +import { generatePassword } from '@/utils/generator.js' export default { name: 'Add', data() { @@ -61,11 +113,22 @@ export default { node: '', web_address: '', id_cache: '', - open_count_cache:'', + open_count_cache: '', title_verify: true, user_name_verify: true, password_verify: true, - lang:'' + lang: '', + show_dialog: false, + // 大写字母 + have_upper: true, + // 小写字母 + have_lower: true, + // 数字 + have_num:true, + // 符号 + have_symbol: false, + // 密码长度 + code_length: 12, }; }, computed: { @@ -91,19 +154,19 @@ export default { if (now - this.row_pwd.create_time < this.settings.expired_time) { // 上次写入时间距离现在在（默认五分钟）之内 // 判断是否是更新 - this.initLanguage() + this.initLanguage(); if (this.$route.params.modify_content) { // 刷新重置数据 - let content = this.$route.params.modify_content - this.title = content.title - this.user_name = content.user_name - this.password = content.password - this.node = content.node - this.web_address = content.web_address - this.id_cache = content.id - this.open_count_cache = content.open_count + let content = this.$route.params.modify_content; + this.title = content.title; + this.user_name = content.user_name; + this.password = content.password; + this.node = content.node; + this.web_address = content.web_address; + this.id_cache = content.id; + this.open_count_cache = content.open_count; } - return + return; } else { // 密码超时 this.turnToHome('密码超时'); @@ -113,92 +176,92 @@ export default { this.turnToHome('无密码'); } }, - + // 配置语言 initLanguage() { - if(this.settings.is_chinese) { - this.lang = lang().add.CHS + if (this.settings.is_chinese) { + this.lang = lang().add.CHS; } else { - this.lang = lang().add.EN + this.lang = lang().add.EN; } - console.log('语言配置完成') + console.log('语言配置完成'); }, - + // 对输入框里边的内容进行判断 judgeContent() { // 设置flag - let can_continue = true + let can_continue = true; // 处理title - if(!(this.title = this.title.trim())) { - can_continue = false - this.title_verify = false + if (!(this.title = this.title.trim())) { + can_continue = false; + this.title_verify = false; } // 处理user_name - if(!(this.user_name = this.user_name.trim())) { - can_continue = false - this.user_name_verify = false + if (!(this.user_name = this.user_name.trim())) { + can_continue = false; + this.user_name_verify = false; } // 处理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.submit() + if (can_continue) this.submit(); }, // 校验通过进行提交 submit() { // 覆写拦截器 - if(this.id_cache) { - console.log('覆写拦截器生效') - this.reWrite() - return + if (this.id_cache) { + console.log('覆写拦截器生效'); + this.reWrite(); + return; } // 正常提交 - let data_list + let data_list; // 组织内容 let code = { id: this.createId(), - open_count:0, - title:this.title, - user_name:this.user_name, - password:this.password, - node:this.node, + open_count: 0, + title: this.title, + user_name: this.user_name, + password: this.password, + node: this.node, web_address: this.web_address - } + }; // 解密主密码 let main_code_decrpt = decryptMainCode(this.row_pwd.main_code); // 判断是不是第一个 - if(this.row_data) { + if (this.row_data) { // 不是第一个需要进行加解密 // 解密密码本 let data_decrypt = decrypt(main_code_decrpt, this.row_data); // json化 data_list = JSON.parse(data_decrypt); - data_list.push(code) + data_list.push(code); } else { // 是第一个 - data_list = [code] + data_list = [code]; } - 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('新加密信息保存成功,返回Home'); - this.back() + this.back(); }, - + reWrite() { - let data_list + let data_list; // 组织内容 let code = { id: this.id_cache, - open_count:this.open_count_cache, - title:this.title, - user_name:this.user_name, - password:this.password, - node:this.node, + open_count: this.open_count_cache, + title: this.title, + user_name: this.user_name, + password: this.password, + node: this.node, web_address: this.web_address - } + }; // 解密主密码 let main_code_decrpt = decryptMainCode(this.row_pwd.main_code); // 解密密码本 @@ -206,46 +269,51 @@ export default { // json化 data_list = JSON.parse(data_decrypt); // 遍历所有密码 - for(let i in data_list) { + for (let i in data_list) { // 找到该密码 - if(data_list[i].id == code.id) { + if (data_list[i].id == code.id) { // 覆写 - data_list[i] = code + data_list[i] = code; } } - 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('新加密信息覆写成功,返回详情'); - this.back() + this.back(); }, //返回上一页 back() { - this.$router.go(-1) + this.$router.go(-1); }, - + // 强制返回Home turnToHome(msg) { - console.log(msg) - this.$router.replace('/') + console.log(msg); + this.$router.replace('/'); }, - + // 创建唯一识别码 createId() { // 获取时间戳 - let time = new Date().getTime() + let time = new Date().getTime(); // 获取随机数 - let random = Math.floor(Math.random()*100); + let random = Math.floor(Math.random() * 100); // 小于10填0 - random < 10 ? random = '0' + random.toString() : random = random.toString() + random < 10 ? (random = '0' + random.toString()) : (random = random.toString()); // 拼接 - let id = time.toString() + random - return id - } + 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) + }, }, created() { - this.lang = lang().add.CHS - console.log('临时语言系统加载完成') - this.init() + this.lang = lang().add.CHS; + console.log('临时语言系统加载完成'); + this.init(); }, mounted() { // 获取浏览器可视区域高度 @@ -260,7 +328,7 @@ export default { // 如果 `clientHeight` 发生改变，这个函数就会运行 clientHeight: function() { this.changeFixed(this.clientHeight); - }, + } }, beforeDestroy() {}, components: {}