login modal

src/DocView.purs

@@ -29,7 +29,7 @@ import React as R
 import React.DOM (a, b, b', br', div, h3, i, input, li, option, select, span, table, tbody, td, text, thead, th, tr, ul, nav)
 import React.DOM.Props (Props, _type, className, href, onChange, onClick, selected, value, scope, _id, role, _data, aria)
 import ReactDOM as RDOM
-import Thermite (PerformAction, Render, Spec, cotransform, createReactSpec, modifyState, simpleSpec)
+import Thermite (PerformAction, Render, Spec, cotransform, createReactSpec, defaultPerformAction, modifyState, simpleSpec)
 import Unsafe.Coerce (unsafeCoerce)
 
 main :: forall e. Eff (dom:: DOM, console :: CONSOLE, ajax :: AJAX | e) Unit
@@ -94,8 +94,12 @@ instance decodeResponse :: DecodeJson Response where
     hyperdata  <- obj .? "hyperdata"
     pure $ Response { cid, created, favorite, ngramCount, hyperdata }
 
-
-
+filterSpec :: forall eff props. Spec eff State props Action
+filterSpec = simpleSpec defaultPerformAction render
+  where
+    render d p s c = [div [] [ text "    Filter "
+                     , input [] []
+                     ]]
 
 layoutDocview :: Spec _ State _ Action
 layoutDocview = simpleSpec performAction render
@@ -107,13 +111,12 @@ layoutDocview = simpleSpec performAction render
           [
            div [className "col-md-12"]
             [ p''
+            , div [] [ text "    Filter ", input [] []]
             , h3 [] [text "Chart Title"]
             , histogram
             , p''
             , br' []
             , div [] [ b [] [text d.title]
-                     , text "    Filter "
-                     , input [] []
                      , sizeDD d.pageSize dispatch
                      , textDescription d.currentPage d.pageSize d.totalRecords
                      , pagination dispatch d.totalPages d.currentPage

src/Login.purs

 module Login where
 
+import Prelude hiding (div)
+
 import Control.Monad.Aff (Aff, attempt)
 import Control.Monad.Aff.Class (liftAff)
 import Control.Monad.Aff.Console (log)
@@ -17,9 +19,9 @@ import Data.HTTP.Method (Method(..))
 import Data.Lens (over)
 import Data.Maybe (Maybe(..))
 import Data.MediaType.Common (applicationJSON)
+import Modal (modalHide)
 import Network.HTTP.Affjax (AJAX, affjax, defaultRequest)
 import Network.HTTP.RequestHeader (RequestHeader(..))
-import Prelude hiding (div)
 import React.DOM (a, button, div, h2, h4, h5, i, input, label, p, span, text)
 import React.DOM.Props (_data, _id, _type, aria, className, href, maxLength, name, onClick, onInput, placeholder, role, target, value)
 import Routing.Hash.Aff (setHash)
@@ -73,7 +75,8 @@ performAction (SetPassword pwd) _ _ = void do
 
 
 performAction Login _ (State state) = void do
-  lift $ setHash "/search"
+  --lift $ setHash "/search"
+  liftEff $ modalHide "loginModal"
   modifyState \(State state) -> State $ state {loginC = true}
   -- res <- lift $ loginReq $ LoginReq { username : state.username, password : state.password }
   -- case res of
@@ -87,7 +90,7 @@ performAction Login _ (State state) = void do
 
 modalSpec :: forall eff props. Boolean -> String -> Spec eff State props Action -> Spec eff State props Action
 modalSpec sm t = over _render \render d p s c ->
-  [ div [ className $ "modal myModal" <> if sm then "" else " fade"
+  [ div [ _id "loginModal", className $ "modal myModal" <> if sm then "" else " fade"
             , role "dialog"
             , _data {show : true}
             ][ div [ className "modal-dialog"

src/Modal.js

+'use strict';
+
+exports.modalShow = function(name) {
+    return function(){
+        var myModal = document.getElementById(name);
+        var myModalInstance = new Modal(myModal);
+        myModalInstance.show();
+    };
+};
+
+exports.modalHide = function(name){
+    return function() {
+        var myModal = document.getElementById(name);
+        var myModalInstance = new Modal(myModal);
+        myModalInstance.hide();
+    };
+};

src/Modal.purs

+module Modal where
+
+import Control.Monad.Eff (Eff)
+import Prelude (Unit)
+
+foreign import modalShow :: forall eff. String -> Eff eff Unit
+
+foreign import modalHide :: forall eff. String -> Eff eff Unit

src/Navigation.purs

@@ -2,10 +2,12 @@ module Navigation where
 
 import DOM
 import Gargantext.Data.Lang
+import Prelude hiding (div)
 
 import AddCorpusview as AC
 import AnnotationDocumentView as D
 import Control.Monad.Cont.Trans (lift)
+import Control.Monad.Eff (Eff)
 import Control.Monad.Eff.Class (liftEff)
 import Control.Monad.Eff.Console (CONSOLE)
 import CorpusAnalysis as CA
@@ -18,10 +20,10 @@ import Data.Tuple (Tuple(..))
 import DocView as DV
 import Landing as L
 import Login as LN
+import Modal (modalShow)
 import NTree as NT
 import Network.HTTP.Affjax (AJAX)
 import PageRouter (Routes(..))
-import Prelude hiding (div)
 import React (ReactElement)
 import React.DOM (a, button, div, footer, form, hr, i, img, input, li, p, span, text, ul)
 import React.DOM.Props (Props, _data, _id, _type, aria, className, href, name, onChange, onClick, placeholder, role, src, style, tabIndex, target, title)
@@ -95,11 +97,10 @@ performAction (SetRoute route)  _ _ = void do
 performAction (Search s)  _ _ = void do
   modifyState $ _ {search = s}
 
-
 performAction (ShowLogin)  _ _ = void do
+  liftEff $ modalShow "loginModal"
   modifyState $ _ {showLogin = true}
 
-
 performAction Go  _ _ = void do
   _ <- lift $ setHash "/addCorpus"
   modifyState id
@@ -108,8 +109,6 @@ performAction Go  _ _ = void do
 performAction _ _ _ = void do
   modifyState id
 
-
-
 ---- Lens and Prism
 _landingState :: Lens' AppState L.State
 _landingState = lens (\s -> s.landingState) (\s ss -> s{landingState = ss})