[GD-3] Add a login/logout link

src/Guide/Server.hs

@@ -305,10 +305,17 @@ guideApp waiMetrics = prehook initHook $ do
         methods
       
       Spock.subcomponent "auth" $ do
+        -- plain "/auth" logs out a logged-in user and lets a logged-out user
+        -- log in (this is not the best idea, granted, and we should just
+        -- shot logged-in users a “logout” link and logged-out users a
+        -- “login” link instead)
+        Spock.get root $ do
+          user <- getLoggedInUser
+          if isJust user
+            then Spock.redirect "auth/logout"
+            else Spock.redirect "auth/login"
         Spock.getpost "login" $ authRedirect "/" $ loginAction
-
         Spock.get "logout" $ logoutAction 
-        
         Spock.getpost "register" $ authRedirect "/" $ signupAction
 
 loginAction :: GuideAction ctx ()

src/Guide/Views.hs

@@ -505,9 +505,12 @@ renderEdit globalState edit = do
 
 -- | Render the header on the </haskell> subpage: “Aelve Guide | Haskell”.
 haskellHeader :: (MonadReader Config m) => HtmlT m ()
-haskellHeader = do
+haskellHeader = div_ [id_ "header"] $ do
+  div_ $ do
     h1_ $ mkLink ("Aelve Guide " >> span_ "| Haskell") "/haskell"
     renderSubtitle
+  div_ [class_ "auth-link-container"] $ do
+    a_ [href_ "/auth"] "login/logout"
 
 -- | Render </haskell>.
 renderHaskellRoot

src/Guide/Views/Page.hs

@@ -161,12 +161,14 @@ headerDef
   => Page m
   -> HtmlT m ()
 headerDef page = do
+  div_ $ do
     let nameHtml = case _pageName page of
           Just name -> span_ (" | " >> toHtml name)
           Nothing -> mempty
     h1_ $ mkLink (toHtml (_pageTitle page) >> nameHtml) (_pageHeaderUrl page)
     (_pageSubtitle page) page
-
+  div_ [class_ "auth-link-container"] $ do
+    a_ [href_ "/auth"] "login/logout"
 
 footerDef 
   :: MonadIO m

templates/css.widget

@@ -17,21 +17,40 @@ body {
   flex-direction: column;
 }
 
-#header > h1 {
+#header h1 {
   font-size: 250%;
   font-weight: 600;
   margin-bottom: 0px;
 }
 
-#header > h1 span {
+#header h1 span {
   font-weight: 200;
 }
 
-#header > h1 a {
+#header h1 a {
   color: inherit;
   text-decoration: none;
 }
 
+#header {
+  display: flex;
+}
+
+#header > div {
+  flex: 1;
+}
+
+#header .auth-link-container {
+  flex-grow: 0;
+  position: relative;
+}
+
+#header .auth-link-container a {
+  position: absolute;
+  bottom: 32px;
+  right: 0px;
+}
+
 #main {
   flex: 1;
 }