enhance(capacitor): add login modal page

gulpfile.js

@@ -119,6 +119,7 @@ const common = {
         'node_modules/react-dom/umd/react-dom.development.js',
         'node_modules/prop-types/prop-types.min.js',
         'node_modules/interactjs/dist/interact.min.js',
+        'packages/amplify/dist/amplify.js',
         'packages/ui/dist/ui.js',
       ]).pipe(gulp.dest(path.join(outputPath, 'capacitor', 'js'))),
       () => gulp.src([

resources/capacitor/index.html

@@ -20,6 +20,7 @@
 <script defer src="./js/tabler-icons-react.min.js"></script>
 <script defer src="./js/tabler.ext.js"></script>
 <script defer src="./js/ui.js"></script>
+<script defer src="./js/amplify.js"></script>
 <script defer src="./shared.js"></script>
 <script defer src="./main.js"></script>
 <script>

src/main/capacitor/components/app.cljs

@@ -192,7 +192,7 @@
      (ion/tab
       {:tab "settings"}
       (ion/content
-       (settings)))
+       (settings/page)))
      (bottom-tabs)
 
      (keep-keyboard-open)
@@ -221,6 +221,9 @@
                  (seq (ui/get-modal))
                  (ui/close-modal!)
 
+                 (seq (shui-dialog/get-modal (shui-dialog/get-first-modal-id)))
+                 (shui-dialog/close!)
+
                  (seq (fstate/get-selection-blocks))
                  (fstate/clear-selection!)
 

src/main/capacitor/components/app.css

@@ -10,11 +10,13 @@ html.plt-capacitor.plt-android {
     margin-top: 0;
   }
 
-  ion-nav {
-    .header-md {
-      box-shadow: 0 2px 8px #eee;
-      border-bottom: .5px solid rgba(0, 0, 0, .15);
-    }
+  .header-md {
+    box-shadow: 0 2px 8px #eee;
+    border-bottom: .5px solid rgba(0, 0, 0, .15);
+  }
+
+  .searchbar-input.sc-ion-searchbar-md {
+    @apply shadow-none;
   }
 }
 
@@ -46,6 +48,10 @@ ion-buttons {
   }
 }
 
+.app-login-modal {
+  @apply mx-8 p-0;
+}
+
 .ui__notifications {
   @apply fixed top-8 pointer-events-none w-full;
 

src/main/capacitor/components/settings.cljs

@@ -1,6 +1,8 @@
 (ns capacitor.components.settings
   (:require [capacitor.ionic :as ion]
             [capacitor.state :as state]
+            [frontend.components.user.login :as login]
+            [logseq.shui.ui :as shui]
             [rum.core :as rum]))
 
 (rum/defc all-pages
@@ -10,30 +12,29 @@
   []
   (let [[^js nav] (state/use-nav-root)]
     (ion/page
-     (ion/header
-      (ion/toolbar
-       (ion/buttons {:slot "start"}
-                    (ion/button {:fill "clear"
-                                 :on-click #(.pop nav)}
-                                (ion/tabler-icon "arrow-left" {:size 26})))
+      (ion/header
+        (ion/toolbar
+          (ion/title "Settings")
+          (ion/buttons {:slot "end"}
+            (ion/button {:fill "clear"
+                         :on-click #(.pop nav)}
+              (ion/tabler-icon "help" {:size 26})))))
 
-       (ion/buttons {:slot "end"}
-                    (ion/button {:fill "clear"
-                                 :on-click #(.pop nav)}
-                                (ion/tabler-icon "share" {:size 26})))
+      (ion/content {:class "ion-padding"}
+        (ion/refresher
+          {:slot "fixed"
+           :pull-factor 0.5
+           :pull-min 100
+           :pull-max 200
+           :on-ion-refresh (fn [^js e]
+                             (js/setTimeout
+                               #(.complete (.-detail e))
+                               3000))}
+          (ion/refresher-content))
 
-       (ion/title "Settings")))
-
-     (ion/content {:class "ion-padding"}
-                  (ion/refresher
-                   {:slot "fixed"
-                    :pull-factor 0.5
-                    :pull-min 100
-                    :pull-max 200
-                    :on-ion-refresh (fn [^js e]
-                                      (js/setTimeout
-                                       #(.complete (.-detail e))
-                                       3000))}
-                   (ion/refresher-content))
-
-                  (all-pages)))))
+        [:h1.text-3xl.font-bold.underline
+         [:a {:on-click #(shui/dialog-open! login/page-impl
+                           {:close-btn? false
+                            :align :top
+                            :content-props {:class "app-login-modal"}})} "login"]]
+        ))))

tailwind.capacitor.css

@@ -9,6 +9,7 @@
 @import "codemirror/lib/codemirror.css";
 @import "codemirror/theme/solarized.css";
 
+@import "packages/amplify/dist/amplify.css";
 @import "src/main/frontend/common.css";
 @import "src/main/frontend/ui.css";
 @import "src/main/frontend/components/icon.css";
@@ -22,5 +23,6 @@
 @import "src/main/frontend/components/views.css";
 @import "src/main/frontend/components/block/views.css";
 @import "src/main/frontend/components/journal.css";
+@import "src/main/frontend/components/user/login.css";
 
 @import-glob "src/main/capacitor/**/[!_]*.css";