feat(encryption): add password confirmation

src/main/frontend/components/encryption.cljs

@@ -8,7 +8,8 @@
             [clojure.string :as string]
             [frontend.state :as state]
             [frontend.handler.metadata :as metadata-handler]
-            [frontend.ui :as ui]))
+            [frontend.ui :as ui]
+            [frontend.handler.notification :as notification]))
 
 (rum/defcs encryption-dialog-inner <
   (rum/local false ::reveal-secret-phrase?)
@@ -52,9 +53,11 @@
 
 (rum/defcs input-password-inner <
   (rum/local "" ::password)
+  (rum/local "" ::password-confirm)
   [state repo-url close-fn]
   (rum/with-context [[t] i18n/*tongue-context*]
-    (let [password (get state ::password)]
+    (let [password (get state ::password)
+          password-confirm (get state ::password-confirm)]
       [:div
        [:div.sm:flex.sm:items-start
         [:div.mt-3.text-center.sm:mt-0.sm:text-left
@@ -64,12 +67,21 @@
        (ui/admonition
         :warning
         [:div.text-gray-700
-         "If you lose your password, all the data can't be decrypted!! Make sure keeping a secure backup of your password."])
+         "Choose a strong and hard to guess password.\nIf you lose your password, all the data can't be decrypted!! Please make sure you remember the password you have set, or you can keep a secure backup of the password."])
        [:input.form-input.block.w-full.sm:text-sm.sm:leading-5.my-2
-        {:auto-focus true
+        {:type "password"
+         :placeholder "Password"
+         :auto-focus true
          :style {:color "#000"}
          :on-change (fn [e]
                       (reset! password (util/evalue e)))}]
+       [:input.form-input.block.w-full.sm:text-sm.sm:leading-5.my-2
+        {:type "password"
+         :placeholder "Re-enter the password"
+         :auto-focus true
+         :style {:color "#000"}
+         :on-change (fn [e]
+                      (reset! password-confirm (util/evalue e)))}]
 
        [:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse
         [:span.flex.w-full.rounded-md.shadow-sm.sm:ml-3.sm:w-auto
@@ -77,7 +89,14 @@
           {:type "button"
            :on-click (fn []
                        (let [value @password]
-                         (when-not (string/blank? value)
+                         (cond
+                           (string/blank? value)
+                           nil
+
+                           (not= @password @password-confirm)
+                           (notification/show! "The passwords are not matched." :error)
+
+                           :else
                            (p/let [keys (e/generate-key-pair-and-save! repo-url)
                                    db-encrypted-secret (e/encrypt-with-passphrase value keys)]
                              (metadata-handler/set-db-encrypted-secret! db-encrypted-secret)
@@ -96,7 +115,7 @@
      [:div.sm:flex.sm:items-start
       [:div.mt-3.text-center.sm:mt-0.sm:text-left
        [:h3#modal-headline.text-lg.leading-6.font-medium.text-gray-900
-        "Create encrypted graph?"]]]
+        "Do you want to create an encrypted graph?"]]]
 
      [:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse
       [:span.flex.w-full.rounded-md.shadow-sm.sm:ml-3.sm:w-auto

src/main/frontend/components/settings.cljs

@@ -354,14 +354,14 @@
                                         (user-handler/set-cors! server)
                                         (notification/show! "Custom CORS proxy updated successfully!" :success)))))}]]]]])
 
-         [:hr]
-
          (when logged?
-           [:div.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start.sm:pt-5
-            [:label.block.text-sm.font-medium.leading-5.sm:mt-px.sm:pt-2.opacity-70.text-red-600
-             {:for "delete account"}
-             (t :user/delete-account)]
-            [:div.mt-1.sm:mt-0.sm:col-span-2
-             [:div.max-w-lg.rounded-md.shadow-sm.sm:max-w-xs
-              (ui/button (t :user/delete-your-account)
-                :on-click #(state/set-modal! delete-account-confirm))]]])]]])))
+           [:div
+            [:hr]
+            [:div.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start.sm:pt-5
+             [:label.block.text-sm.font-medium.leading-5.sm:mt-px.sm:pt-2.opacity-70.text-red-600
+              {:for "delete account"}
+              (t :user/delete-account)]
+             [:div.mt-1.sm:mt-0.sm:col-span-2
+              [:div.max-w-lg.rounded-md.shadow-sm.sm:max-w-xs
+               (ui/button (t :user/delete-your-account)
+                 :on-click #(state/set-modal! delete-account-confirm))]]]])]]])))

src/main/frontend/db.cljs

@@ -67,10 +67,12 @@
 (defn persist! [repo]
   (let [file-key (datascript-files-db repo)
         non-file-key (datascript-db repo)
-        file-db (d/db (get-files-conn repo))
-        non-file-db (d/db (get-conn repo false))
-        file-db-str (db->string file-db)
-        non-file-db-str (db->string non-file-db)]
+        files-conn (get-files-conn repo)
+        file-db (when files-conn (d/db files-conn))
+        non-file-conn (get-conn repo false)
+        non-file-db (d/db non-file-conn)
+        file-db-str (if file-db (db->string file-db) "")
+        non-file-db-str (if non-file-db (db->string non-file-db) "")]
     (p/let [_ (idb/set-batch! [{:key file-key :value file-db-str}
                                {:key non-file-key :value non-file-db-str}])]
       (state/set-last-persist-transact-id! repo true (get-max-tx-id file-db))

src/main/frontend/search.cljs

@@ -68,8 +68,8 @@
 
 (defn reset-indice!
   [repo]
-  (swap! indices assoc repo {:pages #js []
-                             :blocks #js []}))
+  (swap! indices assoc repo {:pages nil
+                             :blocks nil}))
 
 ;; Copied from https://gist.github.com/vaughnd/5099299
 (defn str-len-distance