add genertor code and fix resize problem

src/axios/fetch.js

@@ -1,12 +1,13 @@
 import axios from 'axios'
 
 export const api = axios.create({
-  baseURL: 'https://ccb.canary.moe/api/',
-  // baseURL: window.location.origin + '/api/',
+  // baseURL: 'https://ccb.canary.moe/api/',
+  baseURL: window.location.origin + '/api/',
   // baseURL: 'http://152.136.99.231:8001' + '/api/',
   headers: {
     'Content-Type': 'application/x-www-form-urlencoded',
     'Accept': 'application/json'
+		// 'Access-Control-Allow-Origin': '*'
   },
   timeout: 10 * 1000
 })

src/main.js

@@ -3,7 +3,7 @@ import App from './App.vue'
 import './registerServiceWorker'
 import router from './router'
 import store from './store'
-
+import { setHtmlFontSize } from  './utils/px2rem.js'
 // icon-loader
 import Icon from 'vue-svg-icon/Icon.vue'
 Vue.component('icon', Icon);
@@ -17,13 +17,6 @@ import 'material-design-icons/iconfont/material-icons.css'
 Vue.use(VueMaterial)
 
 //px2rem
-window.onresize = setHtmlFontSize
-function setHtmlFontSize() {
-  const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
-  const htmlDom = document.getElementsByTagName('html')[0]
-  if (htmlWidth >= 500) htmlDom.style.fontSize = 500 / 10 + 'px'
-  else htmlDom.style.fontSize = htmlWidth / 10 + 'px'
-}
 setHtmlFontSize();
 
 // 剪切板

src/router/index.js

@@ -44,6 +44,11 @@ const routes = [
 	  name: 'Detail',
 	  component: () => import(/* webpackChunkName: "detail" */ '../views/Detail/Detail.vue')
 	},
+	{
+	  path: '/generator',
+	  name: 'Generator',
+	  component: () => import(/* webpackChunkName: "generator" */ '../views/Generator/Generator.vue')
+	},
 	{
 		path: '*', // 页面不存在的情况下会跳到home
 		redirect: '/',

src/utils/generator.js

@@ -0,0 +1,40 @@
+// Object of all the function names that we will use to create random letters of password
+const randomFunc = {
+	lower: getRandomLower,
+	upper: getRandomUpper,
+	number: getRandomNumber,
+	symbol: getRandomSymbol,
+};
+
+// Generator Functions
+// All the functions that are responsible to return a random value taht we will use to create password.
+function getRandomLower() {
+	return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
+}
+function getRandomUpper() {
+	return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
+}
+function getRandomNumber() {
+	return String.fromCharCode(Math.floor(Math.random() * 10) + 48);
+}
+function getRandomSymbol() {
+	const symbols = '~!@#$%^&*()_+{}":?><;.,';
+	return symbols[Math.floor(Math.random() * symbols.length)];
+}
+
+// Function responsible to generate password and then returning it.
+export function generatePassword(length, lower, upper, number, symbol) {
+	let generatedPassword = "";
+	const typesCount = lower + upper + number + symbol;
+	const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(item => Object.values(item)[0]);
+	if (typesCount === 0) {
+		return "";
+	}
+	for (let i = 0; i < length; i++) {
+		typesArr.forEach(type => {
+			const funcName = Object.keys(type)[0];
+			generatedPassword += randomFunc[funcName]();
+		});
+	}
+	return generatedPassword.slice(0, length);
+}

src/utils/language.js

@@ -5,7 +5,7 @@ export function lang() {
 				title: '密码本',
 				search: '搜索...',
 				menu: ['按首字母', '按最常使用'],
-				drawer: ['账户', '设置', '分享链接', '下载apk', '立即锁定'],
+				drawer: ['账户', '设置', '生成密码' ,'分享链接', '下载apk', '立即锁定'],
 				empty_state: {
 					label: '创建你的第一个密码',
 					description: '创建密码后，您就可以将信息上载到服务器并保存',
@@ -24,7 +24,7 @@ export function lang() {
 				title: 'Codebook',
 				search: 'Search...',
 				menu: ['Alphabetically', 'Recently Used'],
-				drawer: ['Account', 'Settings', 'Share', 'Download apk', 'Lock Now'],
+				drawer: ['Account', 'Settings', 'Generate Password', 'Share', 'Download apk', 'Lock Now'],
 				empty_state: {
 					label: 'Create your first code',
 					description: "Creating code, you'll be able to upload your information to the server and save it.",
@@ -221,6 +221,36 @@ export function lang() {
 				wrong_pwd_error: 'Wrong password',
 				match_pwd_error: 'The two passwords do not match'
 			}
+		},
+		generator: {
+			CHS:{
+				title: '生成密码',
+				subheader: ['结果(点击复制)', '设置'],
+				length_setter:{
+					label: '密码长度',
+					options:['6 位', '12 位', '18 位', '24 位', '32 位']
+				},
+				settings:['包含大写', '包含小写', '包含数字', '包含符号'],
+				submit: '生成',
+				generate_successful: '生成成功',
+				copy_successful: '复制成功',
+				copy_failed: '抱歉，复制失败。夸克等浏览器复制成功也会报错，请试着粘贴看看',
+				code_res_empty: '未生成'
+			},
+			EN:{
+				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'],
+				submit: 'Generate',
+				generate_successful: 'Generated successfully',
+				copy_successful: 'Copy successful',
+				copy_failed: 'Failed to copy, but failed in some cases. Try to paste',
+				code_res_empty: 'Not generated'
+			}
 		}
 	}
 }

src/utils/px2rem.js

@@ -0,0 +1,7 @@
+//px2rem
+export function setHtmlFontSize() {
+  const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
+  const htmlDom = document.getElementsByTagName('html')[0]
+  if (htmlWidth >= 500) htmlDom.style.fontSize = 500 / 10 + 'px'
+  else htmlDom.style.fontSize = htmlWidth / 10 + 'px'
+}

src/views/Account/Account.vue

@@ -86,6 +86,7 @@ import { mapState, mapActions } from 'vuex';
 import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
 import { login, activation, syncLocal, syncCloud } from '@/axios/api.js'
 import { lang } from '@/utils/language.js'
+import { setHtmlFontSize } from  '@/utils/px2rem.js'
 
 export default {
 	name: 'Add',
@@ -433,7 +434,8 @@ export default {
 		//document.body.clientWidth;
 		window.onresize = function temp() {
 			this.clientHeight = `${document.documentElement.clientHeight}`;
-		};
+			setHtmlFontSize();
+		}.bind(this);
 	},
 	watch: {
 		// 如果 `clientHeight` 发生改变，这个函数就会运行

src/views/Add/Add.vue

@@ -48,6 +48,7 @@
 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'
 
 export default {
 	name: 'Add',
@@ -252,7 +253,8 @@ export default {
 		//document.body.clientWidth;
 		window.onresize = function temp() {
 			this.clientHeight = `${document.documentElement.clientHeight}`;
-		};
+			setHtmlFontSize();
+		}.bind(this);
 	},
 	watch: {
 		// 如果 `clientHeight` 发生改变，这个函数就会运行

src/views/Detail/Detail.vue

@@ -66,6 +66,7 @@
 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'
 
 export default {
 	name: 'Add',
@@ -242,7 +243,8 @@ export default {
 		//document.body.clientWidth;
 		window.onresize = function temp() {
 			this.clientHeight = `${document.documentElement.clientHeight}`;
-		};
+			setHtmlFontSize();
+		}.bind(this);
 	},
 	watch: {
 		// 如果 `clientHeight` 发生改变，这个函数就会运行

src/views/FAQ/FAQ.vue

@@ -86,6 +86,7 @@
 <script>
 // @ is an alias to /src
 import { mapState, mapActions } from "vuex";
+import { setHtmlFontSize } from  '@/utils/px2rem.js'
 
 export default {
   name: "Home",
@@ -141,7 +142,8 @@ export default {
     //document.body.clientWidth;
     window.onresize = function temp() {
       this.clientHeight = `${document.documentElement.clientHeight}`;
-    };
+      setHtmlFontSize();
+    }.bind(this);
   },
   watch: {
     // 如果 `clientHeight` 发生改变，这个函数就会运行

src/views/Feedback/Feedback.vue

@@ -86,6 +86,7 @@
 <script>
 // @ is an alias to /src
 import { mapState, mapActions } from "vuex";
+import { setHtmlFontSize } from  '@/utils/px2rem.js'
 
 export default {
   name: "Home",
@@ -141,7 +142,8 @@ export default {
     //document.body.clientWidth;
     window.onresize = function temp() {
       this.clientHeight = `${document.documentElement.clientHeight}`;
-    };
+      setHtmlFontSize();
+    }.bind(this);
   },
   watch: {
     // 如果 `clientHeight` 发生改变，这个函数就会运行

src/views/Generator/Generator.vue

@@ -0,0 +1,222 @@
+<template>
+	<div class="account">
+		<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">{{lang.title}}</h3>
+				</div>
+			</md-app-toolbar>
+
+			<md-app-content>
+				<div style="height: 54px;"></div>
+				<md-list>
+					<!-- 生成结果 -->
+					<md-subheader class="md-primary">{{lang.subheader[0]}}</md-subheader>
+					<md-list-item>
+						<p  v-clipboard:copy="code_res" v-clipboard:success="onCopyCode" v-clipboard:error="onErrorCode">{{code_res ? code_res : lang.code_res_empty}}</p>
+					</md-list-item>				
+					<!-- settings -->
+					<md-subheader class="md-primary">{{lang.subheader[1]}}</md-subheader>
+					<!-- 长度设置 -->
+					<md-list-item>
+						<md-field>
+							<label for="expired_time">{{lang.length_setter.label}}</label>
+							<md-select v-model="code_length" name="code_length" id="code_length">
+								<md-option value="6">{{lang.length_setter.options[0]}}</md-option>
+								<md-option value="12">{{lang.length_setter.options[1]}}</md-option>
+								<md-option value="18">{{lang.length_setter.options[2]}}</md-option>
+								<md-option value="24">{{lang.length_setter.options[3]}}</md-option>
+								<md-option value="32">{{lang.length_setter.options[4]}}</md-option>
+							</md-select>
+						</md-field>
+					</md-list-item>
+					<!-- 大写字母 -->
+					<md-list-item>
+						<span class="md-list-item-text">{{lang.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.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.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.settings[3]}}</span>
+						<md-switch v-model="have_symbol" class="md-primary"></md-switch>
+					</md-list-item>
+					<md-button class="md-raised md-primary expand" @click="generateStart()">{{lang.submit}}</md-button>
+				</md-list>
+				<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
+					<span>{{ snakebar_msg }}</span>
+				</md-snackbar>
+			</md-app-content>
+		</md-app>
+	</div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { mapState, mapActions } from 'vuex';
+import { lang } from '@/utils/language.js'
+import { generatePassword } from '@/utils/generator.js'
+import { setHtmlFontSize } from  '@/utils/px2rem.js'
+
+export default {
+	name: 'Add',
+	data() {
+		return {
+			// snackbar
+			show_snackbar: false,
+			snakebar_msg: '',
+			// 语言
+			lang: '',
+			// 页面高度
+			clientHeight:'',
+			// 大写字母
+			have_upper: true,
+			// 小写字母
+			have_lower: true,
+			// 数字
+			have_num:true,
+			// 符号
+			have_symbol: false,
+			// 密码长度
+			code_length: 12,
+			// 生成密码结果
+			code_res: '',
+		};
+	},
+	computed: {
+		...mapState(['user_infos', 'row_data', 'row_pwd', 'settings'])
+	},
+	methods: {
+		...mapActions(['setUserInfo', 'setRowData', 'setRowPwd', 'setSettings']),
+		
+		// 修改md-app的最小高度
+		changeFixed(clientHeight) {
+			//动态修改样式
+			// console.log(clientHeight);
+			window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
+			window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
+		},
+		// 初始化
+		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 < this.settings.expired_time) {
+					// 上次写入时间距离现在在（默认五分钟）之内
+					// 初始化本页信息
+					this.initLanguage()
+				} else {
+					// 密码超时
+					this.turnToHome('密码超时');
+				}
+			} else {
+				// 没有密码
+				this.turnToHome('无密码');
+			}
+		},
+		
+		// 配置语言
+		initLanguage() {
+			if(this.settings.is_chinese) {
+				this.lang = lang().generator.CHS
+			} else {
+				this.lang = lang().generator.EN
+			}
+			console.log('语言配置完成')
+		},
+
+		//返回上一页
+		back() {
+			this.$router.go(-1);
+		},
+
+		// 强制返回Home
+		turnToHome(msg) {
+			console.log(msg);
+			this.$router.replace('/');
+		},
+		
+		// 开始生成
+		generateStart() {
+			this.code_res = generatePassword(this.code_length, this.have_lower, this.have_upper, this.have_num, this.have_symbol)
+			this.snakebar_msg = this.lang.generate_successful
+			this.show_snackbar = true
+		},
+		
+		// 复制成功
+		onCopyCode() {
+			this.snakebar_msg = this.lang.copy_successful
+			this.show_snackbar = true
+		},
+		
+		// 复制失败
+		onErrorCode() {
+			this.snakebar_msg = this.lang.copy_failed
+			this.show_snackbar = true
+		},
+	},
+	created() {
+		this.lang = lang().generator.CHS
+		console.log('临时语言系统加载完成')
+		this.init();
+	},
+	mounted() {
+		// 获取浏览器可视区域高度
+		this.clientHeight = `${document.documentElement.clientHeight}`;
+		//document.body.clientWidth;
+		window.onresize = function temp() {
+			this.clientHeight = `${document.documentElement.clientHeight}`;
+			setHtmlFontSize();
+		}.bind(this);
+	},
+	watch: {
+		// 如果 `clientHeight` 发生改变，这个函数就会运行
+		clientHeight: function() {
+			this.changeFixed(this.clientHeight);
+		},
+	},
+	beforeDestroy() {},
+	components: {}
+};
+</script>
+
+<style scoped lang="scss" type="text/scss">
+@import '../../style/main';
+.account {
+	width: 100%;
+	min-height: 100%;
+	background: #fff;
+	.expand {
+		width: 100%;
+		margin: 0 !important;
+		min-height: 1.2rem !important;
+		margin-top: 0.5rem !important;
+	}
+	.time-content {
+		text-align: right !important;
+	}
+	.loading-box {
+		position: absolute;
+		right: 50%;
+		top: 50%;
+		margin-right: -11px;
+		margin-top: -11px;
+	}
+	.toolbar {
+		position: fixed !important;
+	}
+}
+</style>

src/views/Home/Home.vue

@@ -50,27 +50,32 @@
 							<md-icon>settings</md-icon>
 							<span class="md-list-item-text">{{ lang.drawer[1] }}</span>
 						</md-list-item>
+						
+						<md-list-item @click="turnToPage('/generator')">
+							<md-icon>extension</md-icon>
+							<span class="md-list-item-text">{{ lang.drawer[2] }}</span>
+						</md-list-item>
 
 						<md-list-item v-clipboard:copy="web_addr" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl">
 							<md-icon>reply</md-icon>
-							<span class="md-list-item-text">{{ lang.drawer[2] }}</span>
+							<span class="md-list-item-text">{{ lang.drawer[3] }}</span>
 						</md-list-item>
 
 						<md-list-item @click="downloadApk()">
 							<md-icon>file_download</md-icon>
-							<span class="md-list-item-text">{{ lang.drawer[3] }}</span>
+							<span class="md-list-item-text">{{ lang.drawer[4] }}</span>
 						</md-list-item>
 
 						<md-list-item @click="turnToUnlock('用户点击锁定')">
 							<md-icon>beenhere</md-icon>
-							<span class="md-list-item-text">{{ lang.drawer[4] }}</span>
+							<span class="md-list-item-text">{{ lang.drawer[5] }}</span>
 						</md-list-item>
 					</md-list>
 
 			</md-app-drawer>
 
 			<md-app-content>
-				<v-touch @swiperight="menuVisible = true">
+				<v-touch @swiperight="menuVisible = true" :swipe-options="{direction: 'horizontal'}">
 					<div ref="list_placeholder" :style="`height:${search_start ? '86' : '40'}px`"></div>
 					<md-empty-state md-icon="devices_other" :md-label="lang.empty_state.label" :md-description="lang.empty_state.description" v-if="show_list.length == 0 && !search_start">
 						<md-button class="md-primary md-raised" @click="turnToAdd()">{{ lang.empty_state.button }}</md-button>
@@ -99,6 +104,8 @@
 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'
+
 export default {
 	name: 'Home',
 	data() {
@@ -133,6 +140,7 @@ export default {
 			// console.log(clientHeight);
 			this.$refs.home.children[0].style.minHeight = clientHeight + 'px';
 			this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight = clientHeight + 'px';
+			this.$refs.list_placeholder.parentNode.style.minHeight = (clientHeight - 32) + 'px';
 			window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
 		},
 
@@ -348,7 +356,8 @@ export default {
 		//document.body.clientWidth;
 		window.onresize = function temp() {
 			this.clientHeight = `${document.documentElement.clientHeight}`;
-		};
+			setHtmlFontSize();
+		}.bind(this);
 	},
 	watch: {
 		// 如果 `clientHeight` 发生改变，这个函数就会运行

src/views/Settings/Settings.vue

@@ -88,6 +88,7 @@ import { mapState, mapActions } from 'vuex';
 import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
 import { login, activation, syncLocal, syncCloud } from '@/axios/api.js';
 import { lang } from '@/utils/language.js'
+import { setHtmlFontSize } from  '@/utils/px2rem.js'
 
 export default {
 	name: 'Add',
@@ -301,7 +302,8 @@ export default {
 		//document.body.clientWidth;
 		window.onresize = function temp() {
 			this.clientHeight = `${document.documentElement.clientHeight}`;
-		};
+			setHtmlFontSize();
+		}.bind(this);
 	},
 	watch: {
 		// 如果 `clientHeight` 发生改变，这个函数就会运行