feat: Improve Vault UI

HugoRCD · Jan 28, 2025 · 24c5e2e · 24c5e2e
1 parent e35ef75
commit 24c5e2e
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 608 deletions.
diff --git a/apps/base/nuxt.config.ts b/apps/base/nuxt.config.ts
@@ -89,4 +89,4 @@ export default defineNuxtConfig({
   },
 
   css: ['./assets/css/base.css'],
-})
+})
diff --git a/apps/vault/app/app.vue b/apps/vault/app/app.vue
@@ -60,7 +60,7 @@ const items = [
       <UApp>
         <div class="flex flex-col items-center justify-center py-4 sm:py-20">
           <div class="w-full border-y border-neutral-500/20">
-            <div class="mx-auto flex max-w-2xl justify-center px-5 sm:px-0">
+            <div class="mx-auto flex max-w-4xl justify-center px-5 sm:px-0">
               <EncryptDiv encrypted-text class="w-full border-x border-neutral-500/20">
                 <div>
                   <h1 class="main-gradient cursor-pointer text-3xl">
@@ -73,39 +73,41 @@ const items = [
               </EncryptDiv>
             </div>
           </div>
-          <Encrypt v-if="!sealMode" />
-          <Decrypt v-else />
-        </div>
-        <div class="mt-8 max-w-2xl flex w-full mx-auto flex-col gap-4 px-5">
-          <div class="flex flex-col items-center justify-center">
-            <h3 class="main-gradient text-2xl">
-              <ScrambleText label="FAQ" />
-            </h3>
-            <p class="max-w-lg text-center text-sm text-neutral-500 sm:text-base">
-              Frequently asked questions about Vault.
-            </p>
+          <div class="max-w-4xl w-full mx-auto">
+            <Encrypt v-if="!sealMode" />
+            <Decrypt v-else />
+            <div class="mt-32 flex flex-col gap-4 px-5">
+              <div class="flex flex-col items-center justify-center">
+                <h3 class="main-gradient text-2xl">
+                  <ScrambleText label="FAQ" />
+                </h3>
+                <p class="max-w-lg text-center text-sm text-neutral-500 sm:text-base">
+                  Frequently asked questions about Vault.
+                </p>
+              </div>
+              <UAccordion
+                variant="ghost"
+                size="sm"
+                :items
+              />
+            </div>
+            <footer class="mt-20 flex flex-col gap-4 px-5">
+              <USeparator />
+              <div class="flex items-center justify-between">
+                <span class="text-xs font-mono italic tracking-tight text-neutral-500">
+                  © {{ new Date().getFullYear() }} - Made by <NuxtLink to="https://hrcd.fr/" class="text-neutral-400 hover:text-neutral-200">
+                    HugoRCD
+                  </NuxtLink>
+                </span>
+                <span class="text-xs font-mono italic tracking-tight text-neutral-500">
+                  <NuxtLink to="https://dub.sh/shelve" target="_blank" class="text-neutral-400 hover:text-neutral-200">
+                    Powered by Shelve <UIcon name="custom:shelve" />
+                  </NuxtLink>
+                </span>
+              </div>
+            </footer>
           </div>
-          <UAccordion
-            variant="ghost"
-            size="sm"
-            :items
-          />
         </div>
-        <footer class="mt-15 flex w-full mx-auto max-w-2xl flex-col gap-4 px-5">
-          <USeparator />
-          <div class="flex max-w-2xl items-center justify-between">
-            <span class="text-xs font-mono italic tracking-tight text-neutral-500">
-              © {{ new Date().getFullYear() }} - Made by <NuxtLink to="https://hrcd.fr/" class="text-neutral-400 hover:text-neutral-200">
-                HugoRCD
-              </NuxtLink>
-            </span>
-            <span class="text-xs font-mono italic tracking-tight text-neutral-500">
-              <NuxtLink to="https://dub.sh/shelve" target="_blank" class="text-neutral-400 hover:text-neutral-200">
-                Powered by Shelve <UIcon name="custom:shelve" />
-              </NuxtLink>
-            </span>
-          </div>
-        </footer>
         <Toaster close-button position="top-center" />
       </UApp>
     </Body>

diff --git a/apps/vault/app/assets/css/index.css b/apps/vault/app/assets/css/index.css
@@ -1,2 +1,20 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
+
+:root {
+  --ui-bg: white;
+
+  ::selection {
+    color: #282a30;
+    background-color: #c8c8c8;
+  }
+}
+
+.dark {
+  --ui-bg: #070707;
+
+  ::selection {
+    color: #ffffff;
+    background-color: #474747;
+  }
+}
diff --git a/apps/vault/app/components/Decrypt.vue b/apps/vault/app/components/Decrypt.vue
@@ -31,7 +31,7 @@ async function decryptEnvFile() {
 </script>
 
 <template>
-  <form class="mx-auto mt-8 flex w-full max-w-2xl flex-col justify-center gap-2 px-5 sm:px-0" @submit.prevent="decryptEnvFile">
+  <form class="mx-auto mt-8 flex w-full flex-col justify-center gap-2 px-5 sm:px-0" @submit.prevent="decryptEnvFile">
     <template v-if="!value">
       <div class="relative flex w-full flex-col gap-2">
         <UFormField label="Share ID">

diff --git a/apps/vault/app/components/Encrypt.vue b/apps/vault/app/components/Encrypt.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const value = ref('')
+const state = ref({
+  value: '',
+})
 const reads = ref(1)
 const ttl = ref([
   '1d',
@@ -81,10 +83,10 @@ function handleDrop(event: DragEvent) {
 </script>
 
 <template>
-  <form class="mx-auto mt-8 flex w-full max-w-2xl flex-col justify-center gap-2 px-5 sm:px-0" @submit.prevent="saveEnvFile">
-    <div class="relative w-full">
+  <UForm :state class="mx-auto mt-8 flex w-full flex-col justify-center gap-2 px-5 sm:px-0" @submit.prevent="saveEnvFile">
+    <UFormField class="relative w-full" name="value">
       <UTextarea
-        v-model="value"
+        v-model="state.value"
         autoresize
         autofocus
         required
@@ -98,7 +100,7 @@ function handleDrop(event: DragEvent) {
         @drop.prevent="handleDrop"
       />
       <input type="file" accept="text" style="display: none;" @change="handleFileUpload">
-    </div>
+    </UFormField>
     <div class="mt-2 flex w-full items-end justify-between gap-2">
       <UTooltip
         :content="{
@@ -107,11 +109,10 @@ function handleDrop(event: DragEvent) {
         text="Reads are used to limit the number of times a secret can be read."
       >
         <UFormField label="Reads">
-          <UInput
+          <UInputNumber
             v-model="reads"
             label="Reads"
-            type="number"
-            min="1"
+            :min="1"
           />
         </UFormField>
       </UTooltip>
@@ -137,7 +138,6 @@ function handleDrop(event: DragEvent) {
         block
         label="Encrypt"
         type="submit"
-
         :loading
       />
     </div>
@@ -156,5 +156,5 @@ function handleDrop(event: DragEvent) {
         />
       </div>
     </div>
-  </form>
+  </UForm>
 </template>
diff --git a/apps/vault/nuxt.config.ts b/apps/vault/nuxt.config.ts
@@ -11,7 +11,7 @@ export default defineNuxtConfig({
 
   runtimeConfig: {
     private: {
-      encryptionKey: process.env.NUXT_PRIVATE_ENCRYPTION_KEY,
+      encryptionKey: '',
     },
   },
 

diff --git a/apps/vault/package.json b/apps/vault/package.json
@@ -16,7 +16,8 @@
   "dependencies": {
     "@nuxthub/core": "0.8.14",
     "nuxt": "^3.15.3",
-    "vue": "latest"
+    "vue": "latest",
+    "zod": "3.24.1"
   },
   "devDependencies": {
     "wrangler": "^3.105.1"

diff --git a/apps/vault/server/services/vault.service.ts b/apps/vault/server/services/vault.service.ts
@@ -14,7 +14,7 @@ export class VaultService {
   }
 
   constructor(event: H3Event) {
-    const config = useRuntimeConfig()
+    const config = useRuntimeConfig(event)
     const url = getRequestURL(event)
     this.encryptionKey = config.private.encryptionKey
     this.siteUrl = url.origin
-Original file line number
+Diff line change
@@ Expand Up / @@ -89,4 +89,4 @@ export default defineNuxtConfig({ @@
       },
       css: ['./assets/css/base.css'],
-    })
+    })