Header part done in userpage

dist/css/Login.css

@@ -19,3 +19,15 @@
 #funnyimg {
     border:2px solid black;
 }
+
+#page-wrapper {
+    margin-top : 56px;
+}
+
+#user-page-header {
+    border-bottom : 1px solid black;
+}
+
+#user-page-info {
+    margin-top : 38px;
+}
\ No newline at end of file

src/Navigation.purs

@@ -21,6 +21,7 @@ import React.DOM.Props (_data, _id, aria, className, href, role, src, style, tab
 import Thermite (PerformAction, Render, Spec, _render, defaultRender, focus, modifyState, simpleSpec, withState)
 import DocView as DV
 import SearchForm as S
+import UserPage as UP
 
 type E e = (dom :: DOM, ajax :: AJAX, console :: CONSOLE | e)
 
@@ -31,6 +32,7 @@ type AppState =
   , addCorpusState :: AC.State
   , docViewState :: DV.State
   , searchState :: S.State
+  , userPage :: UP.State
   }
 
 initAppState :: AppState
@@ -41,6 +43,7 @@ initAppState =
   , addCorpusState : AC.initialState
   , docViewState : DV.tdata
   , searchState : S.initialState
+  , userPage : UP.initialState
   }
 
 
@@ -52,6 +55,7 @@ data Action
   | AddCorpusA AC.Action
   | DocViewA DV.Action
   | SearchA S.Action
+  | UserPageA UP.Action
 
 
 performAction :: forall eff props. PerformAction (dom :: DOM |eff) AppState props Action
@@ -122,6 +126,17 @@ _searchAction = prism SearchA \action ->
     _-> Left action
 
 
+_userPageState:: Lens' AppState UP.State
+_userPageState = lens (\s -> s.userPage) (\s ss -> s{userPage = ss})
+
+
+_userPageAction :: Prism' Action UP.Action
+_userPageAction = prism UserPageA \action ->
+  case action of
+    UserPageA caction -> Right caction
+    _-> Left action
+
+
 
 pagesComponent :: forall props eff. AppState -> Spec (E eff) AppState props Action
 pagesComponent s =
@@ -137,6 +152,7 @@ pagesComponent s =
     selectSpec AddCorpus   = wrap $ focus _addCorpusState _addCorpusAction AC.addcorpusviewSpec
     selectSpec DocView   = wrap $ focus _docViewState _docViewAction DV.spec
     selectSpec SearchView   = wrap $ focus _searchState _searchAction S.searchSpec
+    selectSpec UserPage   = wrap $ focus _userPageState _userPageAction UP.userPageSpec
 
 routingSpec :: forall props eff. Spec (dom :: DOM |eff) AppState props Action
 routingSpec = simpleSpec performAction defaultRender
@@ -284,3 +300,9 @@ dispatchAction dispatcher _ SearchView = do
   _ <- dispatcher $ SetRoute $ SearchView
   _ <- dispatcher $ SearchA $ S.NoOp
   pure unit
+
+
+dispatchAction dispatcher _ UserPage = do
+  _ <- dispatcher $ SetRoute $ UserPage
+  _ <- dispatcher $ UserPageA $ UP.NoOp
+  pure unit

src/PageRouter.purs

@@ -21,6 +21,8 @@ data Routes
   | AddCorpus
   | DocView
   | SearchView
+  | UserPage
+
 
 instance showRoutes :: Show Routes where
   show Home = "Home"
@@ -28,18 +30,22 @@ instance showRoutes :: Show Routes where
   show AddCorpus = "AddCorpus"
   show DocView = "DocView"
   show SearchView = "SearchView"
+  show UserPage = "UserPage"
 
 int :: Match Int
 int = floor <$> num
 
+
 routing :: Match Routes
 routing =
       loginRoute
-   <|> searchRoute
+  <|> userPageRoute
+  <|> searchRoute
   <|> docviewRoute
   <|> addcorpusRoute
   <|> home
   where
+    userPageRoute = UserPage <$ route "userPage"
     searchRoute = SearchView <$ route "search"
     docviewRoute = DocView <$ route "docView"
     addcorpusRoute = AddCorpus <$ route "addCorpus"

src/UserPage.purs

 module UserPage where
 
 import Prelude hiding (div)
+
+import Control.Monad.Eff.Console (CONSOLE)
+import DOM (DOM)
+import Network.HTTP.Affjax (AJAX)
+import React.DOM (a, div, h3, h5, img, span, text)
+import React.DOM.Props (_id, className, src)
+import Thermite (PerformAction, Render, Spec, modifyState, simpleSpec)
+
+
+type State = String
+
+
+
+initialState :: State
+initialState =""
+
+data Action
+  = NoOp
+
+
+performAction :: forall eff props. PerformAction (console :: CONSOLE, ajax :: AJAX,dom::DOM | eff) State props Action
+performAction NoOp _ _ = void do
+  modifyState id
+
+
+
+userPageSpec :: forall props eff . Spec (console::CONSOLE, ajax::AJAX, dom::DOM | eff) State props Action
+userPageSpec = simpleSpec performAction render
+  where
+    render :: Render State props Action
+    render dispatch _ state _ =
+      [ div [className "container-fluid"]
+        [ div [className "row", _id "user-page-header"]
+          [ div [className "col-md-2"]
+            [ h3 [] [text "UserName"]
+            ]
+          , div [className "col-md-8"] []
+          , div [className "col-md-2"]
+            [ span [] [text "X"]
+            ]
+          ]
+        , div [className "row", _id "user-page-info"]
+          [
+            div [className "col-md-12"]
+            [ div [className "row"]
+              [ div [className "col-md-2"]
+                [ img [src "/images/corporate.jpg"] []
+                ]
+              , div [className "col-md-8"]
+                [
+                  div [className "list-group"]
+                  [
+                    a [className "list-group-item list-group-item-action flex-column align-items-start"]
+                    [ div [className "d-flex w-100 justify-content-between"]
+                      [ h5 [className "mb-1"] [ text "fonction"]
+                      , h5 [] [text "Enseignent checheur"]
+                      ]
+                    ]
+                  ]
+                ]
+              ]
+            ]
+          ]
+        , div [className "row",_id "user-page-footer"]
+          [
+          ]
+        ]
+      ]