nuttycom/aftok - Change EA5BFM5GMM7KNMDLTVOSUKVKMSIDD72TAFVHDVGEOUY5VELECU3QC

Split Login component into its own module.

Created by Kris Nuttycombe on January 21, 2016

EA5BFM5GMM7KNMDLTVOSUKVKMSIDD72TAFVHDVGEOUY5VELECU3QC

Dependencies

In channels

main

Change contents

File addition: Aftok (d--x------)
[3.393]

File addition: Login.purs (----------)

[0.1]

module Aftok.Login where
import Prelude
import Control.Monad.Aff (Aff())
import Data.Maybe (Maybe(..))
import Data.Functor (($>))
import Halogen
import Halogen.HTML.Core (className)
import qualified Halogen.HTML.Indexed as H
import qualified Halogen.HTML.Events.Indexed as E
import qualified Halogen.HTML.Properties.Indexed as P
import Network.HTTP.Affjax (AJAX(), affjax)
import Network.HTTP.Method 
import Network.HTTP.StatusCode 
type LoginState = { username :: String, password :: String }
initialState :: LoginState
initialState = { username: "", password: "" }
-- | The component query algebra.
data LoginAction a
  = SetUsername String a
  | SetPassword String a
  | Login String String a
-- | The effects used in the login component.
type LoginEffects eff = HalogenEffects (ajax :: AJAX | eff)
-- | The definition for the app's main UI component.
ui :: forall eff. Component LoginState LoginAction (Aff (LoginEffects eff))
ui = component render eval
  where
  render :: LoginState -> ComponentHTML LoginAction
  render st =
    H.div 
      [ P.classes (className <$> ["panel", "panel-primary"]) ]
      [ H.div 
        [ P.classes [ className "panel-heading" ] ]
        [ H.h3 [ P.classes [ className "panel-title" ]] [ H.text "Aftok Login" ] ]
      , H.div 
        [ P.classes [ className "panel-body" ] ]
        [
          H.h2_
            [ H.text "username:" ]
        , H.p_
            [ H.input
                [ P.value st.username
                , P.inputType P.InputText
                , E.onValueInput (E.input SetUsername)
                ]
            ]
        , H.h2_
            [ H.text "password:" ]
        , H.p_
            [ H.input
                [ P.value st.password
                , P.inputType P.InputPassword
                , E.onValueInput (E.input SetPassword)
                ]
            ]
        , H.p_
            [ H.button
                [ P.classes (className <$> ["btn", "btn-primary"])
                , E.onClick (E.input_ (Login st.username st.password)) 
                ]
                [ H.text "Login" ]
            ]
        ]
      ]
  eval :: Natural LoginAction (ComponentDSL LoginState LoginAction (Aff (LoginEffects eff)))
  eval (SetUsername user next) = modify (_ { username = user }) $> next
  eval (SetPassword pass next) = modify (_ { password = pass }) $> next
  eval (Login user pass next) = do
    result <- liftAff' (login user pass)
    pure next
data LoginResponse 
  = OK 
  | Forbidden 
  | Error { status :: StatusCode, message :: String }
-- | Post credentials to the login service and interpret the response
login :: forall eff. String -> String -> Aff (ajax :: AJAX | eff) LoginResponse
login user pass = do
  result <- affjax $ { method: POST
                     , url: "/login"
                     , headers: []
                     , content: Nothing :: Maybe String
                     , username: Just user
                     , password: Just pass
                     }
  pure $ case result.status of 
    StatusCode 403 -> Forbidden
    StatusCode 200 -> OK
    other -> Error { status: other , message: result.response }

Deletion in client/src/Main.purs at line 5 [3.410]
B:BD[4.493] → [2.833:862]
∅:D[2.862] → [4.520:561]
B:BD[4.520] → [4.520:561]
```
--import Control.Alt ((<|>))
import Control.Monad.Aff (Aff(), runAff)
```

Replacement in client/src/Main.purs at line 7 [3.410]

B:BD[4.646] → [2.863:913]

import Control.Monad.Eff.Console (CONSOLE(), log)

[4.646]

import Control.Monad.Eff.Console (CONSOLE())
import Control.Monad.Aff (runAff)

Deletion in client/src/Main.purs at line 10 [3.410]
B:BD[4.647] → [2.914:978]
∅:D[2.978] → [4.679:712]
B:BD[4.679] → [4.679:712]
B:BD[4.712] → [2.979:1018]
∅:D[2.1018] → [4.749:776]
B:BD[4.749] → [4.749:776]
B:BD[4.776] → [2.1019:1053]
∅:D[2.1053] → [4.776:809]
B:BD[4.776] → [4.776:809]
```
import Data.Maybe (Maybe(..))
--import Data.Either (Either(..))
--import Data.Foldable (foldMap)
--import Data.Foreign.Class (readProp)
import Data.Functor (($>))
import Data.Functor.Eff (liftEff)
--import Data.Maybe (Maybe(..))
```

Replacement in client/src/Main.purs at line 12 [3.410]

B:BD[4.867] → [4.867:1052]

B:BD[4.1052] → [2.1054:1158]

import Halogen.HTML.Core (className)
import qualified Halogen.HTML.Indexed as H
import qualified Halogen.HTML.Events.Indexed as E
import qualified Halogen.HTML.Properties.Indexed as P
import Network.HTTP.Affjax (AJAX(), affjax)
import Network.HTTP.Method 
import Network.HTTP.StatusCode

[4.867]

[4.1094]

import Halogen.Util (appendToBody, onLoad)
import qualified Aftok.Login as L

Replacement in client/src/Main.purs at line 15 [3.410]

B:BD[4.1095] → [4.1095:1189]

-- | The state of the component.
type LoginState = { username :: String, password :: String }

[4.1095]

[4.1189]

import Network.HTTP.Affjax (AJAX())

Deletion in client/src/Main.purs at line 17 [3.410]

B:BD[4.1190] → [4.1190:1428]

initialState :: LoginState
initialState = { username: "", password: "" }
-- | The component query algebra.
data LoginAction a
  = SetUsername String a
  | SetPassword String a
  | Login String String a
-- | The effects used in the app.

Deletion in client/src/Main.purs at line 19 [3.410]

B:BD[4.1487] → [4.1487:1649]

∅:D[4.1649] → [3.429:430]

B:BD[3.429] → [3.429:430]

B:BD[3.430] → [4.1650:3061]

B:BD[4.3061] → [2.1238:1423]

∅:D[2.1423] → [4.3099:3113]

B:BD[4.3099] → [4.3099:3113]

B:BD[4.3113] → [2.1424:1522]

∅:D[2.1522] → [4.3113:3195]

B:BD[4.3113] → [4.3113:3195]

B:BD[4.3195] → [2.1523:2050]

∅:D[2.2050] → [3.463:464]

∅:D[4.3496] → [3.463:464]

B:BD[3.463] → [3.463:464]

B:BD[3.464] → [4.3497:3515]

-- | The definition for the app's main UI component.
ui :: forall eff. Component LoginState LoginAction (Aff (AppEffects eff))
ui = component render eval
  where
  render :: LoginState -> ComponentHTML LoginAction
  render st =
    H.div 
      [ P.classes (className <$> ["panel", "panel-primary"]) ]
      [ H.div 
        [ P.classes [ className "panel-heading" ] ]
        [ H.h3 [ P.classes [ className "panel-title" ]] [ H.text "Aftok Login" ] ]
      , H.div 
        [ P.classes [ className "panel-body" ] ]
        [
          H.h2_
            [ H.text "username:" ]
        , H.p_
            [ H.input
                [ P.value st.username
                , P.inputType P.InputText
                , E.onValueInput (E.input SetUsername)
                ]
            ]
        , H.h2_
            [ H.text "password:" ]
        , H.p_
            [ H.input
                [ P.value st.password
                , P.inputType P.InputPassword
                , E.onValueInput (E.input SetPassword)
                ]
            ]
        , H.p_
            [ H.button
                [ P.classes (className <$> ["btn", "btn-primary"])
                , E.onClick (E.input_ (Login st.username st.password)) 
                ]
                [ H.text "Login" ]
            ]
        ]
      ]
  eval :: Natural LoginAction (ComponentDSL LoginState LoginAction (Aff (AppEffects eff)))
  eval (SetUsername user next) = modify (_ { username = user }) $> next
  eval (SetPassword pass next) = modify (_ { password = pass }) $> next
  eval (Login user pass next) = do
    result <- liftAff' (login user pass)
    _ <- liftEff case result of
       OK -> log "Login succeeded"
       Forbidden -> log "Password incorrect"
       Error m -> log m.message
    pure next
data LoginResponse 
  = OK 
  | Forbidden 
  | Error { status :: StatusCode, message :: String }
-- | Post some PureScript code to the trypurescript API and fetch the JS result.
login :: forall eff. String -> String -> Aff (ajax :: AJAX | eff) LoginResponse
login user pass = do
  result <- affjax $ { method: POST
                     , url: "/login"
                     , headers: []
                     , content: Nothing :: Maybe String
                     , username: Just user
                     , password: Just pass
                     }
  pure $ case result.status of 
    StatusCode 403 -> Forbidden
    StatusCode 200 -> OK
    other -> Error { status: other , message: result.response }
-- | Run the app.

Replacement in client/src/Main.purs at line 21 [3.410]
B:BD[4.3602] → [4.3602:3633]
```
  app <- runUI ui initialState
```
[4.3602]
[4.3633]
```
  app <- runUI L.ui L.initialState
```