From 471084ff23a6e388268c911b00bc0a823e00e93a Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Thu, 29 Feb 2024 05:45:03 +0800
Subject: [PATCH] =?UTF-8?q?perf(theme):=20=E4=BC=98=E5=8C=96=20=E5=8A=A0?=
 =?UTF-8?q?=E5=AF=86=E7=BB=84=E4=BB=B6=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/src/client/components/EncryptForm.vue   | 108 ++++++++++++++++++
 theme/src/client/components/EncryptGlobal.vue |  96 +---------------
 theme/src/client/components/EncryptPage.vue   |  96 +---------------
 3 files changed, 113 insertions(+), 187 deletions(-)
 create mode 100644 theme/src/client/components/EncryptForm.vue

diff --git a/theme/src/client/components/EncryptForm.vue b/theme/src/client/components/EncryptForm.vue
new file mode 100644
index 00000000..629c7e19
--- /dev/null
+++ b/theme/src/client/components/EncryptForm.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useThemeLocaleData } from '../composables/index.js'
+import IconLock from './icons/IconLock.vue'
+
+const props = defineProps<{
+  compare: (password: string) => boolean
+  info?: string
+}>()
+
+const theme = useThemeLocaleData()
+
+const password = ref('')
+const errorCode = ref(0) // 0: no error, 1: wrong password
+
+function onSubmit() {
+  const result = props.compare(password.value)
+
+  if (!result) {
+    errorCode.value = 1
+  }
+  else {
+    errorCode.value = 0
+    password.value = ''
+  }
+}
+</script>
+
+<template>
+  <div class="encrypt-form">
+    <p class="encrypt-text" v-html="info ?? 'Only Password can access this site'" />
+    <p class="encrypt-input-wrapper">
+      <IconLock class="icon icon-lock" />
+      <input
+        v-model="password"
+        class="encrypt-input"
+        :class="{ error: errorCode === 1 }"
+        type="password"
+        :placeholder="theme.encryptPlaceholder ?? 'Enter Password'"
+        @keyup.enter="onSubmit"
+        @input="password && (errorCode = 0)"
+      >
+    </p>
+    <button class="encrypt-button" @click="onSubmit">
+      {{ theme.encryptButtonText ?? 'Confirm' }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.encrypt-form {
+  margin-top: 20px;
+}
+
+.encrypt-text {
+  margin-top: 40px;
+  margin-bottom: 30px;
+  color: var(--vp-c-text-1);
+  text-align: center;
+}
+
+.encrypt-input-wrapper {
+  position: relative;
+}
+
+.icon-lock {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  color: var(--vp-c-border);
+}
+
+.encrypt-input {
+  width: 100%;
+  padding: 8px 12px 8px 32px;
+  background-color: transparent;
+  border: 1px solid var(--vp-c-border);
+  border-radius: 4px;
+  outline: none;
+  transition: border-color var(--t-color), background-color var(--t-color);
+}
+
+.encrypt-input:focus {
+  border-color: var(--vp-c-brand-1);
+}
+
+.encrypt-input.error {
+  border-color: var(--vp-c-danger-3);
+}
+
+.encrypt-button {
+  width: 100%;
+  padding: 8px 12px;
+  margin-top: 20px;
+  font-weight: 500;
+  color: var(--vp-c-white);
+  cursor: pointer;
+  background-color: var(--vp-c-brand-1);
+  border: none;
+  border-radius: 4px;
+  outline: none;
+  transition: background-color var(--t-color);
+}
+
+.encrypt-button:hover {
+  background-color: var(--vp-c-brand-2);
+}
+</style>
diff --git a/theme/src/client/components/EncryptGlobal.vue b/theme/src/client/components/EncryptGlobal.vue
index 2b8a26b6..f5342387 100644
--- a/theme/src/client/components/EncryptGlobal.vue
+++ b/theme/src/client/components/EncryptGlobal.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { useSiteLocaleData } from 'vuepress/client'
 import { useThemeLocaleData } from '../composables/index.js'
 import { useGlobalEncrypt } from '../composables/encrypt.js'
-import IconLock from './icons/IconLock.vue'
 import VFooter from './VFooter.vue'
+import EncryptForm from './EncryptForm.vue'
 
 const theme = useThemeLocaleData()
 const siteData = useSiteLocaleData()
@@ -12,21 +12,6 @@ const { compareGlobal } = useGlobalEncrypt()
 
 const avatar = computed(() => theme.value.avatar)
 const title = computed(() => avatar.value?.name || siteData.value.title)
-
-const password = ref('')
-const errorCode = ref(0) // 0: no error, 1: wrong password
-
-function compare() {
-  const result = compareGlobal(password.value)
-
-  if (!result) {
-    errorCode.value = 1
-  }
-  else {
-    errorCode.value = 0
-    password.value = ''
-  }
-}
 </script>
 
 <template>
@@ -40,24 +25,7 @@ function compare() {
           {{ title }}
         </h3>
       </div>
-      <div class="encrypt">
-        <p class="encrypt-text" v-html="theme.encryptGlobalText ?? 'Only Password can access this site'" />
-        <p class="encrypt-input-wrapper">
-          <IconLock class="icon icon-lock" />
-          <input
-            v-model="password"
-            class="encrypt-input"
-            :class="{ error: errorCode === 1 }"
-            type="password"
-            :placeholder="theme.encryptPlaceholder ?? 'Enter Password'"
-            @keyup.enter="compare"
-            @input="password && (errorCode = 0)"
-          >
-        </p>
-        <button class="encrypt-button" @click="compare">
-          {{ theme.encryptButtonText ?? 'Confirm' }}
-        </button>
-      </div>
+      <EncryptForm :compare="compareGlobal" :info="theme.encryptGlobalText" />
     </div>
   </div>
   <VFooter />
@@ -131,62 +99,4 @@ function compare() {
   text-align: center;
   transition: color var(--t-color);
 }
-
-.encrypt {
-  margin-top: 20px;
-}
-
-.encrypt-text {
-  margin-top: 40px;
-  margin-bottom: 30px;
-  color: var(--vp-c-text-1);
-  text-align: center;
-}
-
-.encrypt-input-wrapper {
-  position: relative;
-}
-
-.icon-lock {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  color: var(--vp-c-border);
-}
-
-.encrypt-input {
-  width: 100%;
-  padding: 8px 12px 8px 32px;
-  background-color: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-border);
-  border-radius: 4px;
-  outline: none;
-  transition: border-color var(--t-color), background-color var(--t-color);
-}
-
-.encrypt-input:focus {
-  border-color: var(--vp-c-brand-1);
-}
-
-.encrypt-input.error {
-  border-color: var(--vp-c-danger-3);
-}
-
-.encrypt-button {
-  width: 100%;
-  padding: 8px 12px;
-  margin-top: 20px;
-  font-weight: 500;
-  color: var(--vp-c-white);
-  cursor: pointer;
-  background-color: var(--vp-c-brand-1);
-  border: none;
-  border-radius: 4px;
-  outline: none;
-  transition: background-color var(--t-color);
-}
-
-.encrypt-button:hover {
-  background-color: var(--vp-c-brand-2);
-}
 </style>
diff --git a/theme/src/client/components/EncryptPage.vue b/theme/src/client/components/EncryptPage.vue
index 5464a54d..83b7069b 100644
--- a/theme/src/client/components/EncryptPage.vue
+++ b/theme/src/client/components/EncryptPage.vue
@@ -1,26 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { usePageEncrypt } from '../composables/encrypt.js'
 import { useThemeLocaleData } from '../composables/index.js'
 import IconLock from './icons/IconLock.vue'
+import EncryptForm from './EncryptForm.vue'
 
 const theme = useThemeLocaleData()
 const { comparePage } = usePageEncrypt()
-
-const password = ref('')
-const errorCode = ref(0) // 0: no error, 1: wrong password
-
-function compare() {
-  const result = comparePage(password.value)
-
-  if (!result) {
-    errorCode.value = 1
-  }
-  else {
-    errorCode.value = 0
-    password.value = ''
-  }
-}
 </script>
 
 <template>
@@ -28,24 +13,7 @@ function compare() {
     <div class="logo">
       <IconLock class="icon icon-lock-head" />
     </div>
-    <div class="encrypt">
-      <p class="encrypt-text" v-html="theme.encryptPageText ?? 'Only Password can access this page'" />
-      <p class="encrypt-input-wrapper">
-        <IconLock class="icon icon-lock" />
-        <input
-          v-model="password"
-          class="encrypt-input"
-          :class="{ error: errorCode === 1 }"
-          type="password"
-          :placeholder="theme.encryptPlaceholder ?? 'Enter Password'"
-          @keyup.enter="compare"
-          @input="password && (errorCode = 0)"
-        >
-      </p>
-      <button class="encrypt-button" @click="compare">
-        {{ theme.encryptButtonText ?? 'Confirm' }}
-      </button>
-    </div>
+    <EncryptForm :compare="comparePage" :info="theme.encryptPageText" />
   </div>
 </template>
 
@@ -68,64 +36,4 @@ function compare() {
     transition-property: box-shadow, background-color;
   }
 }
-
-.encrypt {
-  margin-top: 20px;
-}
-
-.encrypt-text {
-  margin-top: 20px;
-  margin-bottom: 30px;
-  color: var(--vp-c-text-1);
-  text-align: center;
-  transition: color var(--t-color);
-}
-
-.encrypt-input-wrapper {
-  position: relative;
-}
-
-.icon-lock {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  color: var(--vp-c-border);
-  transition: color var(--t-color);
-}
-
-.encrypt-input {
-  width: 100%;
-  padding: 8px 12px 8px 32px;
-  background-color: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-border);
-  border-radius: 4px;
-  outline: none;
-  transition: border-color var(--t-color), background-color var(--t-color);
-}
-
-.encrypt-input:focus {
-  border-color: var(--vp-c-brand-1);
-}
-
-.encrypt-input.error {
-  border-color: var(--vp-c-danger-3);
-}
-
-.encrypt-button {
-  width: 100%;
-  padding: 8px 12px;
-  margin-top: 20px;
-  font-weight: 500;
-  color: var(--vp-c-white);
-  cursor: pointer;
-  background-color: var(--vp-c-brand-1);
-  border: none;
-  border-radius: 4px;
-  outline: none;
-  transition: background-color var(--t-color);
-}
-
-.encrypt-button:hover {
-  background-color: var(--vp-c-brand-2);
-}
 </style>