diff options
Diffstat (limited to 'elm3/User/Login.elm')
-rw-r--r-- | elm3/User/Login.elm | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/elm3/User/Login.elm b/elm3/User/Login.elm new file mode 100644 index 00000000..abfe44ec --- /dev/null +++ b/elm3/User/Login.elm @@ -0,0 +1,85 @@ +module User.Login exposing (main) + +import Html exposing (..) +import Html.Attributes exposing (..) +import Html.Events exposing (..) +import Json.Encode as JE +import Browser +import Browser.Navigation exposing (load) +import Lib.Api as Api +import Lib.Html exposing (..) + + +main : Program () Model Msg +main = Browser.element + { init = always (Model "" "" Api.Normal, Cmd.none) + , subscriptions = always Sub.none + , view = view + , update = update + } + + +encodeForm : Model -> JE.Value +encodeForm o = JE.object + [ ("username", JE.string o.username) + , ("password", JE.string o.password) ] + + +type alias Model = + { username : String + , password : String + , state : Api.State + } + + +type Msg + = Username String + | Password String + | Submit + | Submitted Api.Response + + +update : Msg -> Model -> (Model, Cmd Msg) +update msg model = + case msg of + Username n -> ({ model | username = n }, Cmd.none) + Password n -> ({ model | password = n }, Cmd.none) + + Submit -> ( { model | state = Api.Loading } + , Api.post "/u/login" (encodeForm model) Submitted + ) + + Submitted Api.Success -> (model, load "/") + Submitted e -> ({ model | state = Api.Error e }, Cmd.none) + + +view : Model -> Html Msg +view model = form_ Submit (model.state == Api.Loading) + [ div [ class "card card--white card--no-separators flex-expand small-card mb-5" ] + [ div [ class "card__header" ] [ div [ class "card__title" ] [ text "Log in" ]] + , case model.state of + Api.Error e -> + div [ class "card__section card__section--error fs-medium" ] + [ h5 [] [ text "Error" ] + , ul [] + [ li [] [ text <| Api.showResponse e ] + , li [] [ text "If you have not used this login form since October 2014, your account has likely been disabled. You can reset your password to regain access." ] + ] + ] + _ -> text "" + , div [ class "card__section fs-medium" ] + [ div [ class "form-group" ] [ inputText "username" model.username Username [placeholder "Username", required True, pattern "[a-z0-9-]{2,15}"] ] + , div [ class "form-group" ] [ inputText "password" model.password Password [placeholder "Password", required True, minlength 4, maxlength 500, type_ "password"] ] + , div [ class "d-flex jc-between" ] [ a [ href "/u/newpass" ] [ text "Forgot your password?" ] ] + ] + , div [ class "card__section" ] + [ div [ class "d-flex jc-between" ] + [ a [ class "btn btn--subtle", href "/u/register" ] [ text "Create an account" ] + , if model.state == Api.Loading + then div [ class "spinner spinner--md pull-right" ] [] + else text "" + , input [ type_ "submit", class "btn", tabindex 10, value "Log in" ] [] + ] + ] + ] + ] |