From 0ab66cb81510cca1649297a0192e8811c9f5e765 Mon Sep 17 00:00:00 2001
From: RainSun <zhaoyingbo@live.cn>
Date: Fri, 21 Feb 2020 11:06:49 +0800
Subject: [PATCH] finish detail

---
 src/svg/file_copy.svg       |   1 +
 src/views/Add/Add.vue       |   2 +-
 src/views/Detail/Detail.vue | 363 +++++++++++++++++++-----------------
 src/views/Home/Home.vue     |  10 +-
 4 files changed, 199 insertions(+), 177 deletions(-)
 create mode 100644 src/svg/file_copy.svg

diff --git a/src/svg/file_copy.svg b/src/svg/file_copy.svg
new file mode 100644
index 0000000..5efb561
--- /dev/null
+++ b/src/svg/file_copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"/></svg>
\ No newline at end of file
diff --git a/src/views/Add/Add.vue b/src/views/Add/Add.vue
index 05fb06e..1547e06 100644
--- a/src/views/Add/Add.vue
+++ b/src/views/Add/Add.vue
@@ -208,7 +208,7 @@ export default {
 			this.$router.replace('/')
 		},
 		
-		// 创建唯一失败码
+		// 创建唯一识别码
 		createId() {
 			// 获取时间戳
 			let time = new Date().getTime()
diff --git a/src/views/Detail/Detail.vue b/src/views/Detail/Detail.vue
index 2dc8f12..320bb0a 100644
--- a/src/views/Detail/Detail.vue
+++ b/src/views/Detail/Detail.vue
@@ -1,46 +1,60 @@
 <template>
-	<div class="add">
+	<div class="detail">
 		<md-app md-waterfall md-mode="fixed">
 			<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">Detail</h3>
+					<h3 class="md-title" style="flex: 1">{{content.title}}</h3>
 				</div>
 				<div class="md-toolbar-section-end">
-					<md-button class="md-icon-button" @click="back()"><md-icon>arrow_back</md-icon></md-button>
+					<md-button class="md-icon-button" @click="turnToEdit()"><md-icon>edit</md-icon></md-button>
+					<md-button class="md-icon-button" @click="openDelDialog()"><md-icon>delete</md-icon></md-button>
 				</div>
 			</md-app-toolbar>
 
 			<md-app-content>
-				<md-field :class="title_verify? '':'md-invalid'">
-					<label>Code Title</label>
-					<md-input v-model="title" required></md-input>
-					<span class="md-error">Title can not be none.</span>
-				</md-field>
-
-				<md-field :class="user_name_verify? '':'md-invalid'">
-					<label>Username</label>
-					<md-input v-model="user_name" required></md-input>
-					<span class="md-error">Username can not be none.</span>
-				</md-field>
-
-				<md-field :class="password_verify? '':'md-invalid'">
-					<label>Password</label>
-					<md-input v-model="password" required></md-input>
-					<span class="md-error">Password can not be none.</span>
-				</md-field>
-
-				<md-field>
-					<label>Web address</label>
-					<md-input v-model="web_address"></md-input>
-				</md-field>
-
-				<md-field>
-					<label>Node</label>
-					<md-textarea v-model="node"></md-textarea>
-				</md-field>
-
-				<md-button class="md-raised md-primary expand" @click="judgeContent()">Enter</md-button>
+				<md-list class="md-double-line">
+					<md-list-item>
+						<label class="md-caption">Username</label>
+						<div class="msg-box">
+							<p>{{content.user_name}}</p>
+							<md-button class="md-icon-button" v-clipboard:copy="content.user_name" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl"><icon class="icon" name="file_copy"></icon></md-button>
+						</div>
+					</md-list-item>
+					<md-list-item>
+						<label class="md-caption">Password</label>
+						<div class="msg-box">
+							<p class="password">{{show_password? content.password : doitPassword}}</p>
+							<md-button class="md-icon-button" @click="show_password = !show_password"><md-icon>remove_red_eye</md-icon></md-button>
+							<md-button class="md-icon-button" v-clipboard:copy="content.password" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl"><icon class="icon" name="file_copy"></icon></md-button>
+						</div>
+					</md-list-item>
+					<md-list-item>
+						<label class="md-caption">Web address</label>
+						<div class="msg-box">
+							<p>{{content.web_address? content.web_address : 'Empty'}}</p>
+							<md-button class="md-icon-button" @click="openUrl()"><md-icon>open_in_new</md-icon></md-button>
+						</div>
+					</md-list-item>
+					<md-list-item>
+						<label class="md-caption">Node</label>
+						<div class="msg-box">
+							<p class="node">{{content.node ? content.node : 'Empty'}}</p>
+						</div>
+					</md-list-item>
+				</md-list>
+				<md-dialog-confirm
+					:md-active.sync="show_dialog"
+					md-title="Delete this password?"
+					md-content="This operation cannot be resumed. Are you sure to continue?"
+					md-confirm-text="Continue"
+					md-cancel-text="Cancel"
+					@md-cancel="onCancel"
+					@md-confirm="delCode"
+				/>
+				<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
+					<span>{{ snakebar_msg }}</span>
+				</md-snackbar>
 			</md-app-content>
 		</md-app>
 	</div>
@@ -55,20 +69,24 @@ export default {
 	name: 'Add',
 	data() {
 		return {
-			title: '',
-			user_name: '',
-			password: '',
-			node: '',
-			web_address: '',
-			id_cache: '',
-			open_count_cache:'',
-			title_verify: true,
-			user_name_verify: true,
-			password_verify: true
+			show_snackbar: false,
+			snakebar_msg: '',
+			content: {},
+			show_password: false,
+			show_dialog: false
 		};
 	},
 	computed: {
-		...mapState(['row_data', 'row_pwd'])
+		...mapState(['row_data', 'row_pwd']),
+		doitPassword() {
+			if(this.content.password) {
+				let doit = ''
+				for(let i = 0;i < this.content.password.length ; i++) {
+					doit += '*'
+				}
+				return doit
+			}
+		}
 	},
 	methods: {
 		...mapActions(['setRowData', 'setRowPwd']),
@@ -77,129 +95,32 @@ export default {
 		init() {
 			// 刷新vuex
 			this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
-			// 判断有无用户密码
-			if (Object.keys(this.row_pwd).length != 0) {
-				// 有密码，已经输入过了
-				let now = new Date().getTime();
-				if (now - this.row_pwd.create_time < 1000 * 60 * 5) {
-					// 上次写入时间距离现在在五分钟之内
-					// 判断是否是更新
-					if (this.$route.params.modify_content) {
+			// 判断是否有参数
+			if (this.$route.params.code_content) {
+				// 判断有无用户密码
+				if (Object.keys(this.row_pwd).length != 0) {
+					// 有密码，已经输入过了
+					let now = new Date().getTime();
+					if (now - this.row_pwd.create_time < 1000 * 60 * 5) {
+						// 上次写入时间距离现在在五分钟之内
 						// 刷新重置数据
-						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
+						this.content = this.$route.params.code_content
+						this.addCount()
+					} else {
+						// 密码超时
+						this.turnToHome('密码超时');
 					}
-					return
 				} else {
-					// 密码超时
-					this.turnToHome('密码超时');
+					// 没有密码
+					this.turnToHome('无密码');
 				}
 			} else {
-				// 没有密码
-				this.turnToHome('无密码');
+				// 无参跳转
+				this.turnToHome('无参跳转');
 			}
 		},
 		
-		// 对输入框里边的内容进行判断
-		judgeContent() {
-			// 设置flag
-			let can_continue = true
-			// 处理title
-			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
-			}
-			// 处理password
-			if(!(this.password = this.password.trim())) {
-				can_continue = false
-				this.password_verify = false
-			}
-			// 根据flag判断是否提交
-			if(can_continue) this.submit()
-		},
-
-		// 校验通过进行提交
-		submit() {
-			// 覆写拦截器
-			if(this.id_cache) {
-				console.log('覆写拦截器生效')
-				this.reWrite()
-				return
-			}
-			// 正常提交
-			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,
-				web_address: this.web_address
-			}
-			// 解密主密码
-			let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
-			// 判断是不是第一个
-			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)
-			} else {
-				// 是第一个
-				data_list = [code]
-			}
-			let data_list_aes = encrypt(main_code_decrpt, data_list)
-			this.setRowData([data_list_aes, this])
-			console.log('新加密信息保存成功,返回Home');
-			this.back()
-		},
 		
-		reWrite() {
-			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,
-				web_address: this.web_address
-			}
-			// 解密主密码
-			let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
-			// 解密密码本
-			let data_decrypt = decrypt(main_code_decrpt, this.row_data);
-			// json化
-			data_list = JSON.parse(data_decrypt);
-			// 遍历所有密码
-			for(let i in data_list) {
-				// 找到该密码
-				if(data_list[i].id == code.id) {
-					// 覆写
-					data_list[i] = code
-				}
-			}
-			let data_list_aes = encrypt(main_code_decrpt, data_list)
-			this.setRowData([data_list_aes, this])
-			console.log('新加密信息覆写成功,返回详情');
-			this.back()
-		},
 		//返回上一页
 		back() {
 			this.$router.go(-1)
@@ -211,17 +132,84 @@ export default {
 			this.$router.replace('/')
 		},
 		
-		// 创建唯一失败码
-		createId() {
-			// 获取时间戳
-			let time = new Date().getTime()
-			// 获取随机数
-			let random = Math.floor(Math.random()*100);
-			// 小于10填0
-			random < 10 ? random = '0' + random.toString() : random = random.toString()
-			// 拼接
-			let id = time.toString() + random
-			return id
+		// 跳转至编辑
+		turnToEdit() {
+			this.$router.push({name: 'Add', params:{modify_content: this.content}})
+		},
+		
+		// 复制成功
+		onCopyUrl(e) {
+			this.snakebar_msg = 'Copy successful';
+			this.show_snackbar = true;
+		},
+		
+		// 复制失败
+		onErrorUrl(e) {
+			this.snakebar_msg = 'Failed to copy, but failed in some cases. Try to paste';
+			this.show_snackbar = true;
+		},
+		
+		// 打开链接
+		openUrl() {
+			if(this.content.web_address) {
+				window.open(this.content.web_address)
+			} else {
+				this.snakebar_msg = 'Web address is empty.';
+				this.show_snackbar = true;
+			}
+		},
+		// 增加点击
+		addCount() {
+			// 解密主密码
+			let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
+			// 解密密码本
+			let data_decrypt = decrypt(main_code_decrpt, this.row_data);
+			// json化
+			let data_list = JSON.parse(data_decrypt);
+			// 遍历所有密码
+			for(let i in data_list) {
+				// 找到该密码
+				if(data_list[i].id == this.content.id) {
+					// 覆写
+					data_list[i].open_count++
+				}
+			}
+			let data_list_aes = encrypt(main_code_decrpt, data_list)
+			this.setRowData([data_list_aes, this])
+			console.log('新加密信息覆写成功,增加点击完成');
+		},
+		
+		// 点击取消
+		onCancel() {
+			
+		},
+		
+		// 打开删除模态框
+		openDelDialog() {
+			this.show_dialog = true
+		},
+		// 删除该密码
+		delCode() {
+			// 解密主密码
+			let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
+			// 解密密码本
+			let data_decrypt = decrypt(main_code_decrpt, this.row_data);
+			// json化
+			let data_list = JSON.parse(data_decrypt);
+			// 暂存表
+			let data_cache = []
+			// 遍历所有密码
+			for(let i in data_list) {
+				// 找到该密码
+				if(data_list[i].id != this.content.id) {
+					// 覆写
+					data_cache.push(data_list[i])
+				}
+			}
+			let data_list_aes = encrypt(main_code_decrpt, data_cache)
+			this.setRowData([data_list_aes, this])
+			console.log('新加密信息覆写成功,密码删除完成');
+			this.back()
 		}
 	},
 	created() {
@@ -236,14 +224,43 @@ export default {
 
 <style scoped lang="scss" type="text/scss">
 @import '../../style/main';
-.add {
+.detail {
 	width: 100%;
 	min-height: 100%;
 	background: #fff;
-	.expand {
-		width: 100%;
-		margin: 0 !important;
-		min-height: 1.2rem !important;
+	.md-list-item-content {
+		position: relative;
+		label {
+			position: absolute;
+			top:.2rem;
+			left: 16px;
+		}
+		.msg-box {
+			margin-top: .5rem;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			width: 100%;
+			border-bottom: 1px #eee solid;
+			p {
+				word-wrap: break-word;
+				word-break: normal;
+				white-space: normal;
+				width: 80%;
+				margin: .2rem 0;
+			}
+			.icon {
+				height: 24px;
+				width: 24px;
+				color: grey;
+			}
+			.node {
+				width: 100%;
+			}
+			.password {
+				width: 70%;
+			}
+		}
 	}
 }
 </style>
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index 9966fd8..2a92b73 100644
--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@@ -72,7 +72,7 @@
 					<md-button class="md-primary md-raised" @click="turnToAdd()">Create first code</md-button>
 				</md-empty-state>
 
-				<div class="code-card" v-for="(code, index) in show_list" :key="index">
+				<div class="code-card" v-for="(code, index) in show_list" :key="index" @click="turnToDetail(code)">
 					<p class="md-title">{{ code.title }}</p>
 					<p class="md-caption">{{ code.user_name }}</p>
 				</div>
@@ -193,7 +193,7 @@ export default {
 				this.show_list = this.show_list.sort((a, b) => a['title'].localeCompare(b['title']));
 			} else {
 				// 按使用频率排序
-				this.show_list = this.show_list.sort((a, b) => a['open_count'] - b['open_count']);
+				this.show_list = this.show_list.sort((a, b) => b['open_count'] - a['open_count']);
 			}
 		},
 
@@ -233,7 +233,11 @@ export default {
 			}
 			this.$router.push('/add');
 		},
-
+		
+		turnToDetail(content) {
+			this.$router.push({name: 'Detail', params:{code_content: content}})
+		},
+		
 		// 跳转到某页面
 		turnToPage(url) {
 			this.$router.push(url);