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

Support password generation when creating new password records

Browse Source
This commit is contained in:
RainSun 2020-03-05 11:54:57 +08:00
parent 13f4025c29
commit 620cf998d9
2 changed files with 199 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/utils/language.js
View File

@ -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',

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

@ -4,40 +4,92 @@
<md-app-toolbar class="md-primary toolbar">
<div class="md-toolbar-section-start">
<md-button class="md-icon-button" @click="back()"><md-icon>arrow_back</md-icon></md-button>
<h3 class="md-title" style="flex: 1">{{id_cache?lang.title[1]:lang.title[0]}}</h3>
<h3 class="md-title" style="flex: 1">{{ id_cache ? lang.title[1] : lang.title[0] }}</h3>
</div>
</md-app-toolbar>
<md-app-content>
<div style="height: 54px;"></div>
<md-field :class="title_verify? '':'md-invalid'">
<label>{{lang.subheader[0]}}</label>
<md-field :class="title_verify ? '' : 'md-invalid'">
<label>{{ lang.subheader[0] }}</label>
<md-input v-model="title" required></md-input>
<span class="md-error">{{lang.empty_error[0]}}</span>
<span class="md-error">{{ lang.empty_error[0] }}</span>
</md-field>
<md-field :class="user_name_verify? '':'md-invalid'">
<label>{{lang.subheader[1]}}</label>
<md-field :class="user_name_verify ? '' : 'md-invalid'">
<label>{{ lang.subheader[1] }}</label>
<md-input v-model="user_name" required></md-input>
<span class="md-error">{{lang.empty_error[1]}}</span>
<span class="md-error">{{ lang.empty_error[1] }}</span>
</md-field>
<md-field :class="password_verify? '':'md-invalid'">
<label>{{lang.subheader[2]}}</label>
<md-field :class="password_verify ? '' : 'md-invalid'">
<label>{{ lang.subheader[2] }}</label>
<md-input v-model="password" required></md-input>
<span class="md-error">{{lang.empty_error[2]}}</span>
<span class="md-error">{{ lang.empty_error[2] }}</span>
<span class="md-caption" style="color:#448AFF;" @click="show_dialog = true">生成密码</span>
</md-field>
<md-field>
<label>{{lang.subheader[3]}}</label>
<label>{{ lang.subheader[3] }}</label>
<md-input v-model="web_address"></md-input>
</md-field>
<md-field>
<label>{{lang.subheader[4]}}</label>
<label>{{ lang.subheader[4] }}</label>
<md-textarea v-model="node"></md-textarea>
</md-field>
<md-button class="md-raised md-primary expand" @click="judgeContent()">{{lang.enter}}</md-button>
<md-button class="md-raised md-primary expand" @click="judgeContent()">{{ lang.enter }}</md-button>
<md-dialog :md-active.sync="show_dialog" style="min-width: 50%;">
<md-dialog-title>生成密码</md-dialog-title>
<md-list>
<!-- 生成结果 -->
<md-subheader class="md-primary">{{lang.generator.subheader[0]}}</md-subheader>
<md-list-item>
<p>{{password ? password : lang.generator.code_res_empty}}</p>
</md-list-item>
<!-- settings -->
<md-subheader class="md-primary">{{lang.generator.subheader[1]}}</md-subheader>
<!-- 长度设置 -->
<md-list-item>
<md-field>
<label for="expired_time">{{lang.generator.length_setter.label}}</label>
<md-select v-model="code_length" name="code_length" id="code_length">
<md-option value="6">{{lang.generator.length_setter.options[0]}}</md-option>
<md-option value="12">{{lang.generator.length_setter.options[1]}}</md-option>
<md-option value="18">{{lang.generator.length_setter.options[2]}}</md-option>
<md-option value="24">{{lang.generator.length_setter.options[3]}}</md-option>
<md-option value="32">{{lang.generator.length_setter.options[4]}}</md-option>
</md-select>
</md-field>
</md-list-item>
<!-- 大写字母 -->
<md-list-item>
<span class="md-list-item-text">{{lang.generator.settings[0]}}</span>
<md-switch v-model="have_upper" class="md-primary"></md-switch>
</md-list-item>
<!-- 小写字母 -->
<md-list-item>
<span class="md-list-item-text">{{lang.generator.settings[1]}}</span>
<md-switch v-model="have_lower" class="md-primary"></md-switch>
</md-list-item>
<!-- 数字 -->
<md-list-item>
<span class="md-list-item-text">{{lang.generator.settings[2]}}</span>
<md-switch v-model="have_num" class="md-primary"></md-switch>
</md-list-item>
<!-- 符号 -->
<md-list-item>
<span class="md-list-item-text">{{lang.generator.settings[3]}}</span>
<md-switch v-model="have_symbol" class="md-primary"></md-switch>
</md-list-item>
</md-list>
<md-dialog-actions>
<md-button class="md-primary" @click="generateStart()">{{lang.generator.actions[0]}}</md-button>
<md-button class="md-primary" @click="show_dialog = false">{{lang.generator.actions[1]}}</md-button>
</md-dialog-actions>
</md-dialog>
</md-app-content>
</md-app>
</div>
@ -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: {}