bcryp #121

src/i18n/locales/en/bcrypt.i18n.json5

+{
+    "generate": "Generate",
+    "password": "String",
+    "hash_password": "Hash",
+    "rounds": "Rounds",
+    "generate_submit": "Generate",
+    "check": "check",
+    "check_submit": "Check",
+    "check_result_success": "Right",
+    "check_result_error": "Wrong",
+    "rounds_range": "Rounds range [{0} - {1}]"
+}

src/i18n/locales/zh_CN/bcrypt.i18n.json5

+{
+    "generate": "生成",
+    "password": "明文(String)",
+    "hash_password": "哈希(Hash)",
+    "rounds": "Rounds",
+    "generate_submit": "生成",
+    "check": "校验",
+    "check_submit": "校验",
+    "check_result_success": "正确",
+    "check_result_error": "错误",
+    "rounds_range": "Rounds 范围 [{0} - {1}]"
+}

src/views/tool/bcrypt.vue

 <template>
     <Tabs v-model="current.operation">
         <TabPane :label="$t('bcrypt_generate')" name="generate">
-            <div class="tool-bcrypt-generate-top" style="margin-bottom: 10px">
-                <input-block bottom="8px" right="8px" style="margin-bottom: 10px">
-                    <Input v-model="current.generate.password">
-                        <span slot="prepend"></span>
-                    </Input>
-                    <template slot="extra">
-                        {{ $t('bcrypt_password') }}
-                    </template>
-                </input-block>
-                <input-block bottom="8px" right="8px" style="margin-bottom: 10px">
-                    <Input v-model="current.generate.rounds">
-                        <span slot="prepend"></span>
-                    </Input>
-                    <template slot="extra">
-                        {{ $t('bcrypt_rounds') }}
-                    </template>
-                </input-block>
-                <Button long type="primary" @click="generate">{{ $t('bcrypt_generate') }}</Button>
-            </div>
-            <heightResize :append="['.tool-bcrypt-generate-top']" :reduce="52" ignore>
-                <autoHeightTextarea :value="generateError ? generateError : current.generate.hash"
-                                    :placeholder="$t('bcrypt_result')"/>
-            </heightResize>
+            <Input size="large" v-model="current.generate.password">
+                <span slot="prepend">{{ $t('bcrypt_password') }}</span>
+            </Input>
+            <Input size="large" v-model="current.generate.rounds" style="margin-top: 10px">
+                <span slot="prepend">{{ $t('bcrypt_rounds') }}</span>
+            </Input>
+            <Button :disabled="inOperation" long size="large" type="primary" @click="generate" style="margin: 10px 0">
+                {{ $t('bcrypt_generate_submit') }}
+            </Button>
+            <input-block right="8px" top="8px">
+                <Input size="large" :value="generateError ? generateError : current.generate.hash">
+                    <span slot="prepend">{{ $t('bcrypt_hash_password') }}</span>
+                </Input>
+                <template slot="extra">
+                    <Icon style="cursor:pointer" size="24" v-if="!generateError" type="md-copy"
+                          @click="$copy(current.generate.hash)"/>
+                </template>
+            </input-block>
         </TabPane>
         <TabPane :label="$t('bcrypt_check')" name="check">
-            <div class="tool-bcrypt-check-top">
-                <input-block bottom="8px" right="8px" style="margin-bottom: 10px">
-                    <Input v-model="current.check.password">
-                        <span slot="prepend"></span>
-                    </Input>
-                    <template slot="extra">
-                        {{ $t('bcrypt_password') }}
+            <Input size="large" v-model="current.check.password" style="margin-bottom: 10px">
+                <span slot="prepend">{{ $t('bcrypt_password') }}</span>
+            </Input>
+            <Input size="large" v-model="current.check.hash">
+                <span slot="prepend">{{ $t('bcrypt_hash_password') }}</span>
+            </Input>
+            <Button :disabled="inOperation" long size="large" type="primary" @click="check" style="margin: 10px 0">{{
+                    $t('bcrypt_check_submit')
+                }}
+            </Button>
+            <div style="margin-top: 20px;text-align: center">
+                <Tag v-if="this.current.check.result !== ''"
+                     :color="this.current.check.result === true ? 'success' : 'error'">
+                    <template v-if="this.current.check.result === true">
+                        {{ $t('bcrypt_check_result_success') }}
                     </template>
-                </input-block>
-            </div>
-            <heightResize :append="['.tool-bcrypt-check-top']" :reduce="52" ignore>
-                <input-block bottom="8px" right="8px">
-                    <autoHeightTextarea :value="current.check.hash" :placeholder="$t('bcrypt_hash_password')"/>
-                    <template slot="extra">
-                        <Tag v-if="checkResult !== 0" :color="checkResult ===1 ? 'success' : 'error'">
-                            <template v-if="checkResult ===1">
-                                {{ $t('check_result_success') }}
-                            </template>
-                            <template v-if="checkResult ===-1">
-                                {{ $t('check_result_error') }}
-                            </template>
-                        </Tag>
+                    <template v-else>
+                        {{ $t('bcrypt_check_result_error') }}
                     </template>
-                </input-block>
-            </heightResize>
+                </Tag>
+            </div>
         </TabPane>
     </Tabs>
 </template>
 <script>
-import heightResize from "./components/heightResize";
 import bcrypt from "bcryptjs";
-import autoHeightTextarea from "./components/autoHeightTextarea";
 
 export default {
-    components: {
-        heightResize,
-        autoHeightTextarea
-    },
     created() {
         this.$initToolData()
     },
-    computed: {
-        checkResult() {
-            if (!this.current.password || !this.current.hash) {
-                return 0;
+    methods: {
+        check() {
+            this.current.check.result = "";
+            if (!this.current.check.password || !this.current.check.hash) {
+                return;
             }
-            return bcrypt.compareSync(this.current.password, this.current.hash) ? 1 : -1
+            this.inOperation = true
+            setTimeout(() => {
+                bcrypt.compare(this.current.check.password, this.current.check.hash, (err, res) => {
+                    this.current.check.result = !!res
+                    this.inOperation = false
+                    this.saveToolData();
+                });
+            }, 300)
         },
-        check() {
-            return this.current.check
-        }
-    },
-    watch: {
-        check: {
-            handler() {
-                this.saveToolData()
-            },
-            deep: true
-        }
-    },
-    methods: {
         generate() {
-            if (this.current.generate.password || !this.current.generate.rounds) {
+            this.generateError = "";
+            if (!this.current.generate.password || !this.current.generate.rounds) {
                 return;
             }
-            this.current.generate.hash = bcrypt.hashSync(this.current.generate.password, this.current.generate.rounds)
-            this.saveToolData();
+            this.inOperation = true
+            setTimeout(() => {
+                try {
+                    const rounds = parseInt(this.current.generate.rounds)
+                    if (rounds < 1 || rounds > 30) {
+                        throw new Error(this.$t('bcrypt_rounds_range', [4, 30]).toString())
+                    }
+                    bcrypt.hash(this.current.generate.password, rounds, (err, hash) => {
+                        if (err) {
+                            this.generateError = err.message
+                            return;
+                        }
+                        this.current.generate.hash = hash
+                        this.saveToolData();
+                        this.inOperation = false
+                    });
+                } catch (e) {
+                    this.generateError = e.message
+                    this.inOperation = false
+                }
+            }, 300)
         },
         saveToolData() {
             this.$saveToolData(this.current)
@@ -103,16 +103,18 @@ export default {
             current: {
                 generate: {
                     password: '',
-                    rounds: '',
+                    rounds: '10',
                     hash: '',
                 },
                 check: {
                     hash: '',
                     password: '',
+                    result: "",
                 },
                 operation: 'generate',
             },
-            generateError: ""
+            inOperation: false,
+            generateError: "",
         }
     },
 }