enhance(ux): prompt user to input encryption password when creating

the first sync graph

src/main/frontend/components/repo.cljs

@@ -484,74 +484,86 @@
   (let [[creating-db? set-creating-db?] (hooks/use-state false)
         [cloud? set-cloud?] (hooks/use-state false)
         [e2ee-rsa-key-ensured? set-e2ee-rsa-key-ensured?] (hooks/use-state nil)
-        input-ref (hooks/create-ref)]
+        input-ref (hooks/create-ref)
+        new-db-f (fn new-db-f
+                   [graph-name]
+                   (when-not (or (string/blank? graph-name)
+                                 creating-db?)
+                     (if (invalid-graph-name? graph-name)
+                       (invalid-graph-name-warning)
+                       (do
+                         (set-creating-db? true)
+                         (p/let [repo (repo-handler/new-db! graph-name)]
+                           (when cloud?
+                             (->
+                              (p/do
+                                (state/set-state! :rtc/uploading? true)
+                                (rtc-handler/<rtc-create-graph! repo)
+                                (rtc-flows/trigger-rtc-start repo)
+                                (rtc-handler/<get-remote-graphs))
+                              (p/catch (fn [error]
+                                         (log/error :create-db-failed error)))
+                              (p/finally (fn []
+                                           (state/set-state! :rtc/uploading? false)
+                                           (set-creating-db? false)))))
+                           (shui/dialog-close!))))))
+        submit! (fn submit!
+                  [^js e click?]
+                  (when-let [value (and (or click? (= (gobj/get e "key") "Enter"))
+                                        (util/trim-safe (.-value (rum/deref input-ref))))]
+                    (new-db-f value)))]
     (hooks/use-effect!
      (fn []
        (when-let [^js input (hooks/deref input-ref)]
          (js/setTimeout #(.focus input) 32)))
      [])
-    (letfn [(new-db-f [graph-name]
-              (when-not (or (string/blank? graph-name)
-                            creating-db?)
-                (if (invalid-graph-name? graph-name)
-                  (invalid-graph-name-warning)
-                  (do
-                    (set-creating-db? true)
-                    (p/let [repo (repo-handler/new-db! graph-name)]
-                      (when cloud?
-                        (->
-                         (p/do
-                           (state/set-state! :rtc/uploading? true)
-                           (rtc-handler/<rtc-create-graph! repo)
-                           (rtc-flows/trigger-rtc-start repo)
-                           (rtc-handler/<get-remote-graphs))
-                         (p/catch (fn [error]
-                                    (log/error :create-db-failed error)))
-                         (p/finally (fn []
-                                      (state/set-state! :rtc/uploading? false)
-                                      (set-creating-db? false)))))
-                      (shui/dialog-close!))))))
-            (submit! [^js e click?]
-              (when-let [value (and (or click? (= (gobj/get e "key") "Enter"))
-                                    (util/trim-safe (.-value (rum/deref input-ref))))]
-                (new-db-f value)))]
-      [:div.new-graph.flex.flex-col.gap-4.p-1.pt-2
-       (shui/input
-        {:disabled creating-db?
-         :ref input-ref
-         :placeholder "your graph name"
-         :on-key-down submit!
-         :autoComplete "off"})
-       (when (user-handler/rtc-group?)
-         [:div.flex.flex-col
-          [:div.flex.flex-row.items-center.gap-1
-           (shui/checkbox
-            {:id "rtc-sync"
-             :value cloud?
-             :on-checked-change
-             (fn []
-               (let [v (boolean (not cloud?))
-                     token (state/get-auth-id-token)
-                     user-uuid (user-handler/user-uuid)]
-                 (set-cloud? v)
-                 (when (and (true? v) (not e2ee-rsa-key-ensured?))
-                   (when (and token user-uuid)
-                     (-> (p/let [rsa-key-pair (state/<invoke-db-worker :thread-api/get-user-rsa-key-pair token user-uuid)]
-                           (set-e2ee-rsa-key-ensured? (some? rsa-key-pair)))
-                         (p/catch (fn [e]
-                                    (log/error :get-user-rsa-key-pair e)
-                                    e)))))))})
-           [:label.opacity-70.text-sm
-            {:for "rtc-sync"}
-            "Use Logseq Sync?"]]
-          (when (false? e2ee-rsa-key-ensured?)
-            [:label.opacity-70.text-sm
-             {:for "rtc-sync"}
-             "Need to init E2EE settings first, Settings > Encryption"])])
-       (shui/button
-        {:disabled (and cloud? (not e2ee-rsa-key-ensured?))
-         :on-click #(submit! % true)
-         :on-key-down submit!}
-        (if creating-db?
-          (ui/loading "Creating graph")
-          "Submit"))])))
+
+    (hooks/use-effect!
+     (fn []
+       (let [token (state/get-auth-id-token)
+             user-uuid (user-handler/user-uuid)
+             refresh-token (str (state/get-auth-refresh-token))
+             db-name (util/trim-safe (.-value (rum/deref input-ref)))]
+         (when (and cloud? refresh-token token user-uuid
+                    (not e2ee-rsa-key-ensured?))
+           (p/do!
+            (state/<invoke-db-worker :thread-api/init-user-rsa-key-pair
+                                     token
+                                     refresh-token
+                                     user-uuid))
+           (-> (p/let [rsa-key-pair (state/<invoke-db-worker :thread-api/get-user-rsa-key-pair token user-uuid)]
+                 (set-e2ee-rsa-key-ensured? (some? rsa-key-pair))
+                 (when rsa-key-pair
+                   (when db-name (new-db-f db-name))))
+               (p/catch (fn [e]
+                          (log/error :get-user-rsa-key-pair e)
+                          e))))))
+     [cloud?])
+
+    [:div.new-graph.flex.flex-col.gap-4.p-1.pt-2
+     (shui/input
+      {:disabled creating-db?
+       :ref input-ref
+       :placeholder "your graph name"
+       :on-key-down submit!
+       :autoComplete "off"})
+     (when (user-handler/rtc-group?)
+       [:div.flex.flex-col
+        [:div.flex.flex-row.items-center.gap-1
+         (shui/checkbox
+          {:id "rtc-sync"
+           :value cloud?
+           :on-checked-change
+           (fn []
+             (let [v (boolean (not cloud?))]
+               (set-cloud? v)))})
+         [:label.opacity-70.text-sm
+          {:for "rtc-sync"}
+          "Use Logseq Sync?"]]])
+     (shui/button
+      {:disabled (and cloud? (not e2ee-rsa-key-ensured?))
+       :on-click #(submit! % true)
+       :on-key-down submit!}
+      (if creating-db?
+        (ui/loading "Creating graph")
+        "Submit"))]))