From f8f90779418a8cca2cb433f6c912f0c773c481e5 Mon Sep 17 00:00:00 2001 From: RainSun Date: Sat, 29 Feb 2020 11:25:27 +0800 Subject: [PATCH] add genertor code and fix resize problem --- src/axios/fetch.js | 5 +- src/main.js | 9 +- src/router/index.js | 5 + src/utils/generator.js | 40 ++++++ src/utils/language.js | 34 ++++- src/utils/px2rem.js | 7 + src/views/Account/Account.vue | 4 +- src/views/Add/Add.vue | 4 +- src/views/Detail/Detail.vue | 4 +- src/views/FAQ/FAQ.vue | 4 +- src/views/Feedback/Feedback.vue | 4 +- src/views/Generator/Generator.vue | 222 ++++++++++++++++++++++++++++++ src/views/Home/Home.vue | 19 ++- src/views/Settings/Settings.vue | 4 +- 14 files changed, 342 insertions(+), 23 deletions(-) create mode 100644 src/utils/generator.js create mode 100644 src/utils/px2rem.js create mode 100644 src/views/Generator/Generator.vue diff --git a/src/axios/fetch.js b/src/axios/fetch.js index 82dc914..b0e9cd1 100644 --- a/src/axios/fetch.js +++ b/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 }) diff --git a/src/main.js b/src/main.js index e91423e..19fce49 100644 --- a/src/main.js +++ b/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(); // 剪切板 diff --git a/src/router/index.js b/src/router/index.js index 877f119..68ad4d0 100644 --- a/src/router/index.js +++ b/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: '/', diff --git a/src/utils/generator.js b/src/utils/generator.js new file mode 100644 index 0000000..d8845df --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/utils/language.js b/src/utils/language.js index 8a2fc33..26fc895 100644 --- a/src/utils/language.js +++ b/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' + } } } } diff --git a/src/utils/px2rem.js b/src/utils/px2rem.js new file mode 100644 index 0000000..f30fb4d --- /dev/null +++ b/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' +} \ No newline at end of file diff --git a/src/views/Account/Account.vue b/src/views/Account/Account.vue index ad6f7d7..543ac9f 100644 --- a/src/views/Account/Account.vue +++ b/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` 发生改变，这个函数就会运行 diff --git a/src/views/Add/Add.vue b/src/views/Add/Add.vue index ffd0901..4a1eef0 100644 --- a/src/views/Add/Add.vue +++ b/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` 发生改变，这个函数就会运行 diff --git a/src/views/Detail/Detail.vue b/src/views/Detail/Detail.vue index 8a10255..66216fe 100644 --- a/src/views/Detail/Detail.vue +++ b/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` 发生改变，这个函数就会运行 diff --git a/src/views/FAQ/FAQ.vue b/src/views/FAQ/FAQ.vue index 660278f..5098259 100644 --- a/src/views/FAQ/FAQ.vue +++ b/src/views/FAQ/FAQ.vue @@ -86,6 +86,7 @@ + + \ No newline at end of file diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue index 1d470f5..a8c32a8 100644 --- a/src/views/Home/Home.vue +++ b/src/views/Home/Home.vue @@ -50,27 +50,32 @@ settings {{ lang.drawer[1] }} + + + extension + {{ lang.drawer[2] }} + reply - {{ lang.drawer[2] }} + {{ lang.drawer[3] }} file_download - {{ lang.drawer[3] }} + {{ lang.drawer[4] }} beenhere - {{ lang.drawer[4] }} + {{ lang.drawer[5] }} - +
{{ lang.empty_state.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` 发生改变，这个函数就会运行 diff --git a/src/views/Settings/Settings.vue b/src/views/Settings/Settings.vue index 41cdb5d..a2bfe6a 100644 --- a/src/views/Settings/Settings.vue +++ b/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` 发生改变，这个函数就会运行