Login modal added

src/Login.purs

@@ -14,15 +14,16 @@ import DOM.WebStorage.Storage (getItem, setItem)
 import Data.Argonaut (class DecodeJson, class EncodeJson, decodeJson, encodeJson, jsonEmptyObject, (.?), (:=), (~>))
 import Data.Either (Either(..))
 import Data.HTTP.Method (Method(..))
+import Data.Lens (over)
 import Data.Maybe (Maybe(..))
 import Data.MediaType.Common (applicationJSON)
 import Network.HTTP.Affjax (AJAX, affjax, defaultRequest)
 import Network.HTTP.RequestHeader (RequestHeader(..))
 import Prelude hiding (div)
-import React.DOM (a, button, div, h2, h4, i, input, label, p, span, text)
-import React.DOM.Props (_id, _type, className, href, maxLength, name, onClick, onInput, placeholder, target, value)
+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)
-import Thermite (PerformAction, Render, Spec, modifyState, simpleSpec)
+import Thermite (PerformAction, Render, Spec, _render, modifyState, simpleSpec)
 import Unsafe.Coerce (unsafeCoerce)
 
 
@@ -84,6 +85,36 @@ performAction Login _ (State state) = void do
   --     modifyState \(State s) ->  State $ s {response = r, errorMessage = ""}
 
 
+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"
+            , role "dialog"
+            , _data {show : true}
+            ][ div [ className "modal-dialog"
+                   , role "document"
+                   ] [ div [ className "modal-content"]
+                       [ div [ className "modal-header"]
+                         [ h5 [ className "modal-title"
+                              ]
+                           [ text $ t
+                           ]
+                         , button [ _type "button"
+                                  , className "close"
+                                  , _data { dismiss : "modal"}
+                                  ] [ span [ aria {hidden : true}]
+                                      [ text "X"]
+                                    ]
+                         ]
+
+                       , div [ className "modal-body"]
+                         (render d p s c)
+                       ]
+                     ]
+             ]
+  ]
+
+spec' :: forall eff props. Spec (console:: CONSOLE, ajax :: AJAX, dom :: DOM | eff) State props Action
+spec' = modalSpec true "Login" renderSpec
 
 renderSpec :: forall props eff . Spec (console::CONSOLE, ajax::AJAX, dom::DOM | eff) State props Action
 renderSpec = simpleSpec performAction render
@@ -121,7 +152,7 @@ renderSpec = simpleSpec performAction render
                     []
                   , div [className "form-group"]
                     [ p [] [text state.errorMessage]
-                     , input [className "form-control", _id "id_username",maxLength "254", name "username", placeholder "username", _type "text",value state.username,  onInput \e -> dispatch (SetUserName (unsafeEventValue e))] []
+                    , input [className "form-control", _id "id_username",maxLength "254", name "username", placeholder "username", _type "text",value state.username,  onInput \e -> dispatch (SetUserName (unsafeEventValue e))] []
                     ]
                   , div [className "form-group"]
                     [ input [className "form-control", _id "id_password", name "password", placeholder "password", _type "password",value state.password,onInput \e -> dispatch (SetPassword (unsafeEventValue e))] []
@@ -130,29 +161,26 @@ renderSpec = simpleSpec performAction render
                   , div [className "center"]
                     [
                       label [] [
-                      div [className "checkbox"]
-                      [ input [_id "terms-accept", _type "checkbox", value "", className "checkbox"]
-                        [
-                        ]
-                      , text "I accept the terms of uses ",
-                        a [href "http://gitlab.iscpif.fr/humanities/tofu/tree/master"] [text "[Read the terms of use]"]
-                      ]
-                    , button [_id "login-button",className "btn btn-primary btn-rounded", _type "submit", onClick \_ -> dispatch $ Login] [text "Login"]
-                    ]
+                         div [className "checkbox"]
+                         [ input [_id "terms-accept", _type "checkbox", value "", className "checkbox"]
+                           [
+                           ]
+                         , text "I accept the terms of uses ",
+                           a [href "http://gitlab.iscpif.fr/humanities/tofu/tree/master"] [text "[Read the terms of use]"]
+                         ]
+                         , button [_id "login-button",className "btn btn-primary btn-rounded", _type "submit", onClick \_ -> dispatch $ Login] [text "Login"]
+                         ]
                     ]
                   ]
                 ]
               ]
             ]
-
           ]
         ]
       ]
 
-
-
--- div [ className "modal fade myModal"
---                    , role "dialog"
+      -- div [ className "modal fade myModal"
+      --                    , role "dialog"
 --                    , _data {show : true}
 --                    ][ div [ className "modal-dialog"
 --                           , role "document"

src/Navigation.purs

@@ -48,6 +48,7 @@ type AppState =
   , tabview :: TV.State
   , search :: String
   , corpusAnalysis :: CA.State
+  , showLogin :: Boolean
   }
 
 initAppState :: AppState
@@ -64,6 +65,7 @@ initAppState =
   , tabview : TV.initialState
   , search : ""
   , corpusAnalysis : CA.initialState
+  , showLogin : false
   }
 
 data Action
@@ -81,6 +83,7 @@ data Action
   | Search String
   | Go
   | CorpusAnalysisA CA.Action
+  | ShowLogin
 
 
 performAction :: forall eff props. PerformAction ( dom :: DOM
@@ -93,6 +96,10 @@ performAction (Search s)  _ _ = void do
   modifyState $ _ {search = s}
 
 
+performAction (ShowLogin)  _ _ = void do
+  modifyState $ _ {showLogin = true}
+
+
 performAction Go  _ _ = void do
   _ <- lift $ setHash "/addCorpus"
   modifyState id
@@ -229,7 +236,7 @@ pagesComponent s =
                                  | eff
                                  ) AppState props Action
     selectSpec CorpusAnalysis = layout0 $ focus _corpusState  _corpusAction CA.spec'
-    selectSpec Login      = focus _loginState _loginAction LN.renderSpec
+    -- selectSpec Login      = focus _loginState _loginAction LN.renderSpec
     selectSpec Home        = layout0 $ focus _landingState   _landingAction   (L.layoutLanding EN)
     selectSpec AddCorpus  = layout0 $ focus _addCorpusState _addCorpusAction AC.layoutAddcorpus
     selectSpec DocView    = layout0 $ focus _docViewState   _docViewAction   DV.layoutDocview
@@ -238,8 +245,7 @@ pagesComponent s =
     selectSpec Tabview   = layout0 $ focus _tabviewState  _tabviewAction  TV.tab1
     -- To be removed
     selectSpec SearchView = layout0 $ focus _searchState _searchAction  S.searchSpec
-
-
+    selectSpec _ = simpleSpec defaultPerformAction defaultRender
 
 routingSpec :: forall props eff. Spec (dom :: DOM |eff) AppState props Action
 routingSpec = simpleSpec performAction defaultRender
@@ -295,7 +301,7 @@ layoutSidebar = over _render \render d p s c ->
                           ,  div [ className "collapse navbar-collapse"]
                              $ [ divDropdownLeft]
                              <> render d p s c <>
-                             [ divDropdownRight ]
+                             [ divDropdownRight d]
                           ]
                     ]
               ]
@@ -305,7 +311,7 @@ layoutSidebar = over _render \render d p s c ->
 
 divLogo :: ReactElement
 divLogo = a [ className "navbar-brand logoSmall"
-            , href "/index.html"
+            , href "#/"
             ] [ img [ src "images/logoSmall.png"
                     , title "Back to home."
                     ] []
@@ -448,8 +454,8 @@ divSearchBar = simpleSpec performAction render
                   ]
 
 --divDropdownRight :: Render AppState props Action
-divDropdownRight :: ReactElement
-divDropdownRight =
+divDropdownRight :: _ -> ReactElement
+divDropdownRight d =
   ul [className "nav navbar-nav pull-right"]
      [
        -- TODO if logged in : enable dropdown to logout
@@ -457,7 +463,8 @@ divDropdownRight =
        [
          a [ aria {hidden : true}
            , className "glyphicon glyphicon-log-in"
-           , href "#/login"
+           , --href "#/login"
+             onClick $ \e -> d ShowLogin
            , style {color:"white"}
            , title "Log in and save your time"
            -- TODO hover: bold
@@ -498,12 +505,13 @@ layoutFooter = simpleSpec performAction render
                             ]
 
 
-
 layoutSpec :: forall eff props. Spec (E eff) AppState props Action
 layoutSpec =
   fold
   [ routingSpec
   , container $ withState pagesComponent
+  , withState \st ->
+      focus _loginState _loginAction (LN.modalSpec st.showLogin "Login" LN.renderSpec)
   ]
   where
     container :: Spec (E eff) AppState props Action -> Spec (E eff) AppState props Action