enable login, up to cors problem

src/Gargantext/Components/App.purs

@@ -47,29 +47,31 @@ appCpt = R.hooksComponent "G.C.App.app" cpt where
     showCorpus <- R.useState' false
     let tree = forestLayout frontends (fst sessions) (fst route) (snd showLogin)
     let mCurrentRoute = Just $ fst route
-    let setVisible = snd showLogin
     let backends = fromFoldable defaultBackends
-    pure $ case unSessions (fst sessions) of
-      Nothing -> tree $ homeLayout EN
-      Just session ->
-        case (fst route) of
-          Home -> tree $ homeLayout EN
-          Login -> login { sessions, backends, setVisible }
-          Folder _ -> tree $ folder {}
-          Corpus nodeId -> tree $ corpusLayout { nodeId }
-          Texts nodeId -> tree $ textsLayout { nodeId, session }
-          Lists nodeId -> tree $ listsLayout { nodeId, session }
-          Dashboard -> tree $ dashboardLayout {}
-          Annuaire annuaireId -> tree $ annuaireLayout { annuaireId, session }
-          UserPage nodeId -> tree $ userLayout { nodeId, session }
-          ContactPage nodeId -> tree $ userLayout { nodeId, session }
-          CorpusDocument corpusId listId nodeId ->
-            tree $ documentLayout { nodeId, listId, session, corpusId: Just corpusId }
-          Document listId nodeId ->
-            tree $ documentLayout { nodeId, listId, session, corpusId: Nothing }
-          PGraphExplorer graphId ->
-            simpleLayout (fst sessions) $
-              explorerLayout { graphId, mCurrentRoute, session, treeId: Nothing }
+    pure $ case fst showLogin of
+      true -> tree $ login { sessions, backends, visible: showLogin }
+      false ->
+        case unSessions (fst sessions) of
+          Nothing -> tree $ homeLayout EN
+          Just session ->
+            case (fst route) of
+              Home -> tree $ homeLayout EN
+              Login -> login { sessions, backends, visible: showLogin }
+              Folder _ -> tree $ folder {}
+              Corpus nodeId -> tree $ corpusLayout { nodeId }
+              Texts nodeId -> tree $ textsLayout { nodeId, session }
+              Lists nodeId -> tree $ listsLayout { nodeId, session }
+              Dashboard -> tree $ dashboardLayout {}
+              Annuaire annuaireId -> tree $ annuaireLayout { annuaireId, session }
+              UserPage nodeId -> tree $ userLayout { nodeId, session }
+              ContactPage nodeId -> tree $ userLayout { nodeId, session }
+              CorpusDocument corpusId listId nodeId ->
+                tree $ documentLayout { nodeId, listId, session, corpusId: Just corpusId }
+              Document listId nodeId ->
+                tree $ documentLayout { nodeId, listId, session, corpusId: Nothing }
+              PGraphExplorer graphId ->
+                simpleLayout (fst sessions) $
+                  explorerLayout { graphId, mCurrentRoute, session, treeId: Nothing }
 
 forestLayout :: Frontends -> Sessions -> AppRoute -> R2.Setter Boolean -> R.Element -> R.Element
 forestLayout frontends sessions route showLogin child =

src/Gargantext/Components/Forest.purs

 module Gargantext.Components.Forest where
 
-import Prelude (const, show)
+import Prelude (const, show, discard)
 import Data.Maybe (Maybe(..))
+import DOM.Simple.Console (log)
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Gargantext.Ends (Frontends)
@@ -33,6 +34,7 @@ forestCpt = R.staticComponent "G.C.Forest.forest" cpt where
             , treeView { root: treeId, mCurrentRoute: Just route, session: s } ]
         
 plus :: R2.Setter Boolean -> R.Element
-plus showLogin =
-  H.button {on: {click: \_ -> showLogin (const true)}}
-  [ H.text "+" ]
+plus showLogin = H.button {on: {click}} [ H.text "+" ]
+  where
+    click _ = do
+      showLogin (const true)

src/Gargantext/Components/Login.purs

@@ -3,7 +3,7 @@
   -- Select a backend and log into it
 module Gargantext.Components.Login where
 
-import Prelude (Unit, bind, const, discard, pure, ($), (<>))
+import Prelude (Unit, bind, const, discard, pure, flip, show, ($), (<>), (<$>))
 import Data.Either (Either(..))
 import Data.Maybe (Maybe(..))
 import Data.Tuple (fst, snd)
@@ -16,7 +16,7 @@ import Reactix.DOM.HTML as H
 ------------------------------------------------------------------------
 import Gargantext.Components.Forms (clearfix, card, cardBlock, cardGroup, center, formGroup)
 import Gargantext.Components.Login.Types (AuthRequest(..))
-import Gargantext.Ends (Backend)
+import Gargantext.Ends (Backend(..))
 import Gargantext.Sessions (Session, Sessions, postAuthRequest, unSessions)
 import Gargantext.Sessions as Sessions
 import Gargantext.Utils (csrfMiddlewareToken)
@@ -28,27 +28,30 @@ import Gargantext.Utils.Reactix as R2
 type Props =
   ( backends :: Array Backend
   , sessions :: R2.Reductor Sessions Sessions.Action
-  , setVisible :: R2.Setter Boolean )
+  , visible :: R.State Boolean )
 
 type ModalProps = ( visible :: Boolean )
 
-modal :: Record ModalProps -> Array R.Element -> R.Element
-modal = R.createElement modalCpt
+modal :: Record ModalProps -> R.Element -> R.Element
+modal props child = R.createElement modalCpt props [ child ]
 
 modalCpt :: R.Component ModalProps
-modalCpt = R.staticComponent "Modal" cpt where
-  cpt {visible} children =
-    H.div { id: "loginModal", className: modalClass visible
-          , role: "dialog", "data": {show: true}}
-    [ H.div { className: "modal-dialog", role: "document"}
-      [ H.div { className: "modal-content" }
-        [ H.div { className: "modal-header" }
-          [ H.h5 { className: "modal-title" } []
-          , H.button { "type": "button", className: "close"
-                     , "data": { dismiss: "modal" } }
-            [ H.span { aria: { hidden: true } } [ H.text "X" ] ]
-          , H.div { className: "modal-body" } children ] ] ] ]
-  modalClass s = "modal myModal" <> if s then "" else " fade"
+modalCpt = R.hooksComponent "Modal" cpt where
+  cpt {visible} children = do
+    R.createPortal elems <$> R2.getPortalHost
+    where
+      elems = 
+        [ H.div { id: "loginModal", className: modalClass visible
+                , role: "dialog", "data": {show: true}, style: {display: "block"}}
+          [ H.div { className: "modal-dialog", role: "document"}
+            [ H.div { className: "modal-content" }
+              [ H.div { className: "modal-header" }
+                [ H.h5 { className: "modal-title" } []
+                , H.button { "type": "button", className: "close"
+                           , "data": { dismiss: "modal" } }
+                  [ H.span { aria: { hidden: true } } [ H.text "X" ] ] ]
+              , H.div { className: "modal-body" } children ] ] ] ]
+      modalClass s = "modal myModal" <> if s then "" else " fade"
 
 login :: Record Props -> R.Element
 login props = R.createElement loginCpt props []
@@ -56,11 +59,13 @@ login props = R.createElement loginCpt props []
 loginCpt :: R.Component Props
 loginCpt = R.hooksComponent "G.C.Login.login" cpt
   where
-    cpt props@{backends, sessions, setVisible} _ = do
+    cpt props@{backends, sessions, visible} _ = do
       backend <- R.useState' Nothing
-      pure $ case (fst backend) of
-        Nothing -> chooser { backends, backend, sessions, setVisible }
-        Just b -> form { sessions, setVisible, backend: b }
+      pure $
+        modal {visible: fst visible} $
+          case fst backend of
+            Nothing -> chooser { backends, backend, sessions, visible }
+            Just b -> form { sessions, visible, backend: b }
 
 type ChooserProps = ( backend :: R.State (Maybe Backend) | Props )
 
@@ -70,28 +75,31 @@ chooser props = R.createElement chooserCpt props []
 chooserCpt :: R.Component ChooserProps
 chooserCpt = R.staticComponent "G.C.Login.chooser" cpt where
   cpt :: Record ChooserProps -> Array R.Element -> R.Element
-  cpt {backend, backends, sessions, setVisible} _ =
-    R.fragment
+  cpt {backend, backends, sessions} _ =
+    H.ul {}
     [ renderSessions sessions, renderBackends backends backend ]
   
 renderSessions :: R2.Reductor Sessions Sessions.Action -> R.Element
-renderSessions sessions = render (unSessions $ fst sessions) where
+renderSessions sessions =
+  render (unSessions $ fst sessions) where
   render Nothing = R.fragment []
   render (Just s) = renderSession s
 
 renderSession :: Session -> R.Element
-renderSession session = R.fragment []
+renderSession session = H.li {} [ H.text $ "Active session: " <> show session ]
 
 renderBackends :: Array Backend -> R.State (Maybe Backend) -> R.Element
-renderBackends backends state = R.fragment []
+renderBackends backends state = R.fragment $ (flip renderBackend $ state) <$> backends
 
 renderBackend :: Backend -> R.State (Maybe Backend) -> R.Element
-renderBackend backend state = R.fragment []
+renderBackend backend@(Backend {name}) state =
+  H.li {} [ H.a {on: {click}} [ H.text $ "Connect to " <> name ] ] where
+    click _ = (snd state) (const $ Just backend)
 
 type FormProps =
   ( backend :: Backend
   , sessions :: R2.Reductor Sessions Sessions.Action
-  , setVisible :: R2.Setter Boolean )
+  , visible :: R.State Boolean )
 
 form :: Record FormProps -> R.Element
 form props = R.createElement formCpt props []
@@ -99,7 +107,7 @@ form props = R.createElement formCpt props []
 formCpt :: R.Component FormProps
 formCpt = R.hooksComponent "G.C.Login.form" cpt where
   cpt :: Record FormProps -> Array R.Element -> R.Hooks R.Element
-  cpt props@{backend, sessions, setVisible} _ = do
+  cpt props@{backend, sessions, visible} _ = do
     error <- R.useState' ""
     username <- R.useState' ""
     password <- R.useState' ""
@@ -123,7 +131,7 @@ formCpt = R.hooksComponent "G.C.Login.form" cpt where
                     [ termsCheckbox {}, H.text "I accept the terms of use ", termsLink {} ] ]
                 , loginSubmit $
                     onClick props error username password ] ] ] ] ] ]
-  onClick {backend, sessions, setVisible} error username password e =
+  onClick {backend, sessions, visible} error username password e =
     launchAff_ $ do
       let req = AuthRequest {username: fst username, password: fst password}
       res <- postAuthRequest backend req
@@ -132,7 +140,7 @@ formCpt = R.hooksComponent "G.C.Login.form" cpt where
         Right sess -> liftEffect $ do
           (snd sessions) (Sessions.Login sess)
           (snd error) (const "")
-          setVisible (const false)
+          (snd visible) (const false)
   logo =
     H.div {className: "col-md-10 col-md-push-1"}
         [ H.h2 {className: "text-primary center m-a-2"}