diff --git a/src/Gargantext/Components/Bootstrap/Floaty/BaseModal.purs b/src/Gargantext/Components/Bootstrap/Floaty/BaseModal.purs
index 7128d843546af0cd817af8d1b12daab21a8af707..937baa0ca764ff5927d052b84d41bbec8bd5acb4 100644
--- a/src/Gargantext/Components/Bootstrap/Floaty/BaseModal.purs
+++ b/src/Gargantext/Components/Bootstrap/Floaty/BaseModal.purs
@@ -78,14 +78,14 @@ componentName = "b-modal"
-- | - a FFI fix has been added to remove left elements
-- | - an overlay has been added to synchronise the close button
-- | - the keyboard shortcut has been removed
--- | @https://stackoverflow.com/questions/50168312/bootstrap-4-close-modal-backdrop-doesnt-disappear
+-- | @link https://stackoverflow.com/questions/50168312/bootstrap-4-close-modal-backdrop-doesnt-disappear
-- |
--- | https://getbootstrap.com/docs/4.6/components/modal/
+-- | @link https://getbootstrap.com/docs/4.6/components/modal/
baseModal :: forall r. R2.OptComponent Options Props r
baseModal = R2.optComponent component options
-component :: R.Component Props
-component = R.hooksComponent componentName cpt where
+component :: R.Memo Props
+component = R.memo' $ R.hooksComponent componentName cpt where
cpt props@{ isVisibleBox
, title
, hasCollapsibleBackground
diff --git a/src/Gargantext/Components/Login.purs b/src/Gargantext/Components/Login.purs
index 110d75dca8ed5c1f81c8e9369a40d5834cd95dfd..95505ce11d8bd7e6344b80efe3f4bf22e7fe8182 100644
--- a/src/Gargantext/Components/Login.purs
+++ b/src/Gargantext/Components/Login.purs
@@ -5,9 +5,11 @@ module Gargantext.Components.Login where
import Gargantext.Prelude
+import DOM.Simple.Event as DE
import Data.Array (head)
import Data.Maybe (Maybe(..), fromMaybe)
import Data.String as DST
+import Effect (Effect)
import Effect.Aff (launchAff_)
import Effect.Class (liftEffect)
import Gargantext.Components.Bootstrap as B
@@ -23,6 +25,7 @@ import Gargantext.Sessions as Sessions
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
+import Reactix.SyntheticEvent as RE
import Toestand as T
here :: R2.Here
@@ -44,6 +47,27 @@ login :: R2.Leaf Props
login = R2.leaf loginCpt
loginCpt :: R.Component Props
loginCpt = here.component "login" cpt where
+ cpt props@{ visible } _ = do
+ -- Render
+ pure $
+
+ B.baseModal
+ { isVisibleBox: visible
+ , title: Just "GarganText ecosystem explorer"
+ , size: ExtraLargeModalSize
+ }
+ [
+ loginContainer
+ props
+ ]
+
+-- | @XXX React re-rendering issue with `React.Portal`
+-- | @link https://github.com/facebook/react/issues/12247
+loginContainer :: R2.Leaf Props
+loginContainer = R2.leaf loginContainerCpt
+
+loginContainerCpt :: R.Component Props
+loginContainerCpt = here.component "container" cpt where
cpt props@{ sessions, visible } _ = do
-- States
mBackend <- R2.useLive' props.backend
@@ -53,54 +77,101 @@ loginCpt = here.component "login" cpt where
-- Render
pure $
- B.baseModal
- { isVisibleBox: visible
- , title: Just "GarganText ecosystem explorer"
- , size: ExtraLargeModalSize
- }
+ H.div
+ {}
[
case mBackend of
Nothing -> chooser props
Just backend -> case formType' of
- Login -> form { backend, formType, sessions, visible }
- ForgotPassword -> forgotPassword { backend, sessions }
+ Login ->
+ form
+ { backend
+ , formType
+ , sessions
+ , visible
+ }
+ ForgotPassword ->
+ forgotPassword
+ { backend
+ , sessions
+ }
]
chooser :: R2.Leaf Props
-chooser = R2.leafComponent chooserCpt
+chooser = R2.leaf chooserCpt
chooserCpt :: R.Component Props
chooserCpt = here.component "chooser" cpt where
cpt { backend, backends, sessions } _ = do
sessions' <- T.useLive T.unequal sessions
pure $
- R.fragment $
- [ H.h2 { className: "mx-auto" } [ H.text "Workspace manager" ]]
- <> activeConnections sessions sessions' <>
- [ H.h3 {} [ H.text "Existing places (click to login)" ]
- , H.table { className : "table" }
- [ H.thead { className: "thead-light" }
- [ H.tr {} (map header headers) ]
- , H.tbody {} (map (renderBackend backend) backends)
- ]
- , H.input { className: "form-control", type:"text", placeholder } ]
- placeholder = "Search for your institute"
+ H.div
+ {} $
+ [
+ H.h2
+ { className: "mx-auto" }
+ [ H.text "Workspace manager" ]
+ ]
+ <>
+ activeConnections sessions sessions'
+ <>
+ [
+ H.h3
+ {}
+ [ H.text "Existing places (click to login)" ]
+ ,
+ H.table
+ { className : "table" }
+ [
+ H.thead
+ { className: "thead-light" }
+ [
+ H.tr
+ {}
+ (map header headers)
+ ]
+ ,
+ H.tbody
+ {}
+ (map (renderBackend backend) backends)
+ ]
+ ,
+ H.input
+ { className: "form-control"
+ , type:"text"
+ , placeholder: "Search for your institute"
+ }
+ ]
headers = [ "", "GarganText places", "Fonction", "Garg protocol url" ]
header label = H.th {} [ H.text label ]
-- Shown in the chooser
activeConnections :: forall s. T.ReadWrite s Sessions => s -> Sessions -> Array R.Element
-activeConnections _ sessions' | Sessions.null sessions' = []
-activeConnections sessions sessions' =
- [ H.h3 {} [ H.text "Active place(s)" ]
- , H.table { className : "table" }
- [ H.thead { className: "thead-light" }
- [ H.tr {} (map header headers) ]
- , H.tbody {} [renderSessions sessions sessions']
- ]
+activeConnections _ sessions' | Sessions.null sessions' = mempty
+activeConnections sessions sessions' =
+ [
+ H.h3
+ {}
+ [ H.text "Active place(s)" ]
+ ,
+ H.table
+ { className : "table" }
+ [
+ H.thead
+ { className: "thead-light" }
+ [
+ H.tr
+ {}
+ (map header headers)
+ ]
+ ,
+ H.tbody
+ {}
+ [ renderSessions sessions sessions' ]
+ ]
]
- where
- headers = [ "", "Active(s) connection(s)", "Fonction", "Clear data/Logout"]
- header label = H.th {} [ H.text label ]
+ where
+ headers = [ "", "Active(s) connection(s)", "Fonction", "Clear data/Logout"]
+ header label = H.th {} [ H.text label ]
@@ -144,7 +215,11 @@ renderBackend cursor backend@(Backend {name, baseUrl, backendType}) =
]
where
className = "fa fa-hand-o-right" -- "glyphitem fa fa-log-in"
- click _ = T.write_ (Just backend) cursor
+
+ click :: RE.SyntheticEvent DE.Event -> Effect Unit
+ click e = do
+ RE.preventDefault e
+ T.write_ (Just backend) cursor
backendLabel :: String -> String
backendLabel =
diff --git a/src/Gargantext/Components/Login/Form.purs b/src/Gargantext/Components/Login/Form.purs
index 0eb10d38779210fc7dde5c30e5691f2cfc95eadb..1a59009ac8c030a49c5b8c8dd56dea429887e8e4 100644
--- a/src/Gargantext/Components/Login/Form.purs
+++ b/src/Gargantext/Components/Login/Form.purs
@@ -98,7 +98,7 @@ submitButtonCpt = here.component "submitButton" cpt where
let isValid = agreed && (username `notEq` "") && (password `notEq` "")
pure $ H.div { className: "text-center" }
[ loginSubmit isValid $ submitForm { backend, formType, sessions, visible } cell ]
-
+
-- Attempts to submit the form
submitForm :: forall s v. T.ReadWrite s Sessions => T.Write v Boolean
=> Record (Props s v) -> T.Box Form -> ChangeEvent -> Effect Unit
diff --git a/src/Gargantext/Components/Router.purs b/src/Gargantext/Components/Router.purs
index 5ca749d02a5689c336683e2e1d0b6d7d1bd4a928..e104b91f23872a749915c59acfa2601637642c53 100644
--- a/src/Gargantext/Components/Router.purs
+++ b/src/Gargantext/Components/Router.purs
@@ -575,10 +575,12 @@ listsCpt = here.component "lists" cpt where
login' :: Boxes -> R.Element
login' { backend, sessions, showLogin: visible } =
- login { backend
- , backends: A.fromFoldable defaultBackends
- , sessions
- , visible }
+ login
+ { backend
+ , backends: A.fromFoldable defaultBackends
+ , sessions
+ , visible
+ }
--------------------------------------------------------------