UI Modified and jwt token half done

bower.json

@@ -11,9 +11,48 @@
     "purescript-console": "^3.0.0",
     "purescript-thermite": "^5.0.0",
     "purescript-affjax": "^5.0.0",
-    "purescript-routing": "^6.1.2"
+    "purescript-routing": "^6.1.2",
+    "purescript-argonaut-codecs": "^2.0.0",
+    "purescript-argonaut-traversals": "^2.0.0",
+    "purescript-argonaut": "^3.1.0"
   },
   "devDependencies": {
     "purescript-psci-support": "^3.0.0"
+  },
+  "resolutions": {
+    "purescript-maybe": "^3.0.0",
+    "purescript-monoid": "^3.0.0",
+    "purescript-invariant": "^3.0.0",
+    "purescript-functions": "^3.0.0",
+    "purescript-functors": "^2.0.0",
+    "purescript-const": "^3.0.0",
+    "purescript-contravariant": "^3.0.0",
+    "purescript-tuples": "^4.0.0",
+    "purescript-distributive": "^3.0.0",
+    "purescript-identity": "^3.0.0",
+    "purescript-transformers": "^3.0.0",
+    "purescript-arrays": "^4.0.1",
+    "purescript-nonempty": "^4.0.0",
+    "purescript-unfoldable": "^3.0.0",
+    "purescript-lazy": "^3.0.0",
+    "purescript-unsafe-coerce": "^3.0.0",
+    "purescript-strings": "^3.0.0",
+    "purescript-generics": "^4.0.0",
+    "purescript-tailrec": "^3.0.0",
+    "purescript-proxy": "^2.0.0",
+    "purescript-integers": "^3.0.0",
+    "purescript-globals": "^3.0.0",
+    "purescript-maps": "^3.0.0",
+    "purescript-st": "^3.0.0",
+    "purescript-eff": "^3.0.0",
+    "purescript-profunctor": "^3.0.0",
+    "purescript-enums": "^3.1.0",
+    "purescript-profunctor-lenses": "^3.0.0",
+    "purescript-sets": "^3.0.0",
+    "purescript-argonaut-core": "^3.1.0",
+    "purescript-lists": "^4.0.0",
+    "purescript-argonaut-codecs": "^3.0.0",
+    "purescript-argonaut-traversals": "^3.0.0",
+    "purescript-argonaut": "^3.1.0"
   }
 }

src/Login.purs

 module Login where
 
+import Control.Monad.Aff (Aff, attempt)
+import Control.Monad.Aff.Class (liftAff)
+import Control.Monad.Aff.Console (log)
+import Control.Monad.Cont.Trans (lift)
+import Control.Monad.Eff (Eff)
+import Control.Monad.Eff.Class (liftEff)
 import Control.Monad.Eff.Console (CONSOLE)
 import DOM (DOM)
-import Network.HTTP.Affjax (AJAX)
+import DOM.HTML (window)
+import DOM.HTML.Window (localStorage)
+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.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, footer, form, h1, h2, h3, h4, hr, i, img, input, li, p, span, text, ul)
-import React.DOM.Props (_data, _id, _type, aria, className, href, maxLength, name, placeholder, role, src, style, tabIndex, target, title, value)
-import Thermite (PerformAction, Render, Spec, simpleSpec)
-import Thermite as T
+import React.DOM (a, button, div, form, h2, h4, i, input, label, p, span, text)
+import React.DOM.Props (_id, _type, className, href, maxLength, name, onClick, placeholder, target, value)
+import Routing.Hash.Aff (setHash)
+import Thermite (PerformAction, Render, Spec, modifyState, simpleSpec)
+
 
 newtype State = State
-  { userName :: String
+  { username :: String
   , password :: String
+  , response :: LoginRes
+  , errorMessage :: String
   }
 
 
 initialState :: State
 initialState = State
-  {userName : ""
+  {username : ""
  , password : ""
+ , response : LoginRes {token : ""}
+ , errorMessage : ""
   }
 
 data Action
@@ -26,12 +46,19 @@ data Action
   | Login
 
 
-performAction :: forall eff props.PerformAction (console :: CONSOLE, ajax :: AJAX,dom::DOM | eff) State props Action
+performAction :: forall eff props. PerformAction (console :: CONSOLE, ajax :: AJAX,dom::DOM | eff) State props Action
 performAction NoOp _ _ = void do
-  T.modifyState \state -> state
+  modifyState id
 
-performAction Login _ _ = void do
-  T.modifyState \state -> state
+performAction Login _ (State state) = void do
+  res <- lift $ loginReq $ LoginReq { username : state.username, password : state.password }
+  case res of
+    Left e -> do
+      lift $ log $ show e
+      modifyState \(State s) ->  State $ s { errorMessage = e}
+    Right r@(LoginRes response) -> do
+      lift $ setHash "/"
+      modifyState \(State s) ->  State $ s {response = r, errorMessage = ""}
 
 
 
@@ -39,7 +66,7 @@ renderSpec :: forall props eff . Spec (console::CONSOLE, ajax::AJAX, dom::DOM |
 renderSpec = simpleSpec performAction render
   where
     render :: Render State props Action
-    render dispatch _ state _ =
+    render dispatch _ (State state) _ =
       [
         div [className "row"]
         [
@@ -55,7 +82,6 @@ renderSpec = simpleSpec performAction render
               [
                 div [className "card-block"]
                 [
-
                   div [className "center"]
                   [ h4 [className "m-b-0"]
                     [ span [className "icon-text"] [ text "Connexion"]
@@ -65,30 +91,31 @@ renderSpec = simpleSpec performAction render
                       a [ target "blank",href "https://iscpif.fr/services/applyforourservices/"] [text "ask to get an access"]
                     ]
                   ]
-                , form []
+                , div []
                   [ input [_type "hidden",
                            name "csrfmiddlewaretoken",
                            value "Wy52D2nor8kC1r1Y4GrsrSIxQ2eqW8UwkdiQQshMoRwobzU4uldknRUhP0j4WcEM" ]
                     []
                   , div [className "form-group"]
                     [
-                      input [className "form-control", _id "id_username",maxLength "254", name "username", placeholder "username", _type "text"] []
+                      input [className "form-control", _id "id_username",maxLength "254", name "username", placeholder "username", _type "text",value state.username] []
                     ]
                   , div [className "form-group"]
-                    [ input [className "form-control", _id "id_password", name "password", placeholder "password", _type "password"] []
+                    [ input [className "form-control", _id "id_password", name "password", placeholder "password", _type "password",value state.password] []
                     , div [className "clearfix"] []
                     ]
                   , 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]"]
+                        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"] [text "Login"]
+                    , button [_id "login-button",className "btn btn-primary btn-rounded", _type "submit", onClick \_ -> dispatch $ Login] [text "Login hello"]
+                    ]
                     ]
                   ]
                 ]
@@ -96,7 +123,78 @@ renderSpec = simpleSpec performAction render
             ]
 
           ]
-
-
         ]
       ]
+
+
+
+getDeviseID ::  forall eff. Eff (dom :: DOM | eff) (Maybe String)
+getDeviseID = do
+  w <- window
+  ls <- localStorage w
+  i <- getItem "token" ls
+  pure $  i
+
+
+setToken :: forall e . String -> Eff (dom :: DOM | e) Unit
+setToken s = do
+  w <- window
+  ls <- localStorage w
+  liftEff $ setItem "token" s ls
+  pure unit
+
+
+
+newtype LoginRes = LoginRes
+  {token :: String
+  }
+
+
+newtype LoginReq = LoginReq
+  {  username :: String
+  , password :: String
+  }
+
+loginReq :: forall eff. LoginReq -> Aff (console :: CONSOLE, ajax :: AJAX, dom :: DOM | eff) (Either String LoginRes)
+loginReq encodeData =
+  let
+    setting =
+      defaultRequest
+        { url = "https://dev.gargantext.org/api/auth/token"
+        , method = Left POST
+        , headers =
+            [ ContentType applicationJSON
+            , Accept applicationJSON
+            ]
+        , content = Just $ encodeJson encodeData
+        }
+  in
+    do
+      affResp <- liftAff $ attempt $ affjax setting
+      case affResp of
+        Left err -> do
+          liftAff $ log $ show err
+          pure $ Left $ show err
+        Right a -> do
+          liftAff $ log $ "POST method Completed"
+          liftAff $ log $ "GET /api response: " <> show a.response
+          let res = decodeJson a.response
+          liftAff $ log $ "res: " <> show a.response
+          case res of
+            Left e ->
+              liftAff $ log $ "Error Decoding : " <> show e
+            Right (LoginRes res1) ->
+              liftEff $ setToken res1.token
+          pure res
+
+instance decodeLoginRes :: DecodeJson LoginRes where
+  decodeJson json = do
+    obj <- decodeJson json
+    token <- obj .? "token"
+    pure $ LoginRes { token}
+
+instance encodeLoginReq :: EncodeJson LoginReq where
+  encodeJson (LoginReq obj) =
+       "username"          := obj.username
+    ~> "password"          := obj.password
+    ~> jsonEmptyObject