passphrase validation

src/App.vue

@@ -37,14 +37,12 @@ watch(
 )
 
 const passphrase = ref('')
+const passphraseValid = ref<boolean>()
 
 const submitPassphrase = (close: () => void) => {
-  const passphraseValid = setClientKey(passphrase.value)
-  if (!passphraseValid) {
-    console.log('passphrase is invalid')
-  } else {
-    close()
-  }
+  const setClientKeyResult = setClientKey(passphrase.value)
+  passphraseValid.value = setClientKeyResult
+  if (passphraseValid.value) close()
 }
 
 const loading = computed(() => notes.value.length === 0 || passphraseRequired.value)
@@ -138,12 +136,25 @@ provide('loading', loading)
   </div>
   <Modal :open="passphraseRequired" :persistent="true">
     <template #title>Enter your passphrase</template>
-    <template #default>
+    <template #default="{ close }">
       <p>
         Your notes are encrypted. Please enter your encryption key passphrase to decrypt your cloud
         notes.
       </p>
-      <input type="password" class="input-bordered input mt-4 w-full" v-model="passphrase" />
+      <form @submit.prevent="submitPassphrase(close)">
+        <input
+          type="password"
+          class="input-bordered input mt-4 w-full"
+          :class="passphraseValid === false && 'input-error'"
+          v-model="passphrase"
+        />
+      </form>
+      <div class="alert alert-error mt-4 flex-row" v-if="passphraseValid === false">
+        <div>
+          <i class="fa-solid fa-triangle-exclamation"></i>
+          The passphrase you entered is incorrect.
+        </div>
+      </div>
     </template>
     <template #actions="{ close }">
       <button class="btn-primary btn-sm btn" @click="submitPassphrase(close)">Submit</button>

src/composables/useEncryption.ts

@@ -21,7 +21,7 @@ export const getClientKey = () => {
 export const setClientKey = (passphrase: string) => {
   const calculatedClientKey = calculateClientKey(passphrase)
   const verified = verifyClientKey(calculatedClientKey)
-  if (!user.value || !verified) return
+  if (!user.value || !verified) return false
   const clientKeys = getClientKeysFromLocalStorage()
   clientKeys[user.value.uid] = calculatedClientKey
   localStorage.setItem('clientKeys', JSON.stringify(clientKeys))