valaxy 0.14.46 → 0.14.48

package/client/components/ValaxyDecrypt.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useDecrypt, useFrontmatter } from 'valaxy'
 import type { Ref } from 'vue'
-import { defineComponent, h, inject, ref } from 'vue'
+import { defineComponent, h, inject, onMounted, ref } from 'vue'
 
 const props = defineProps<{
   encryptedContent: string
@@ -59,6 +59,12 @@ const ValaxyDeprecatedContent = defineComponent({
     })
   },
 })
+
+const hasWarning = ref(false)
+onMounted(() => {
+  if (location.protocol !== 'https:')
+    hasWarning.value = true
+})
 </script>
 
 <template>
@@ -84,6 +90,12 @@ const ValaxyDeprecatedContent = defineComponent({
           text-gray hover:text-black
           @click="decryptContent"
         />
+
+        <div v-if="hasWarning" class="-bottom-6" absolute text-xs op="50">
+          <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API" target="_blank">
+            <span>Web Crypto API</span>
+          </a> Only works in HTTPS
+        </div>
       </div>
     </div>
     <div v-else>

package/client/components/ValaxyGalleryDecrypt.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { useDecrypt } from 'valaxy'
+import { ref } from 'vue'
+
+const props = defineProps<{
+  encryptedPhotos: string
+}>()
+
+const password = ref('')
+const decryptedContent = ref('')
+
+const hasError = ref(false)
+
+const { decrypt } = useDecrypt()
+async function decryptContent() {
+  const ciphertext = props.encryptedPhotos
+  if (!ciphertext)
+    return
+  try {
+    const result = await decrypt(password.value, ciphertext)
+    decryptedContent.value = result || ''
+  }
+  catch (e) {
+    hasError.value = true
+  }
+}
+
+function encryptAgain() {
+  decryptedContent.value = ''
+  password.value = ''
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="!decryptedContent" w-full pt-14 pb-10>
+      <div
+        class="decrypt-password-container w-full sm:w-1/2"
+        flex-center m-auto relative
+      >
+        <input
+          v-model="password"
+          w-full
+          border pl-5 pr-11 py-3 rounded hover:shadow transition
+          type="password" placeholder="Enter password"
+          :class="hasError && 'border-red'"
+          @input="hasError = false"
+          @keyup.enter="decryptContent"
+        >
+        <div
+          cursor-pointer
+          absolute text-2xl
+          i-ri-arrow-right-circle-line right-3
+          text-gray hover:text-black
+          @click="decryptContent"
+        />
+      </div>
+    </div>
+    <div v-else>
+      <YunGallery :photos="JSON.parse(decryptedContent)" />
+      <div w-full text-center mt-8>
+        <button m-auto class="btn" font-bold @click="encryptAgain">
+          Encrypt Again
+        </button>
+      </div>
+    </div>
+  </div>
+</template>