martiplier/src/Items/LoginView.elm

module Items.LoginView exposing (..)

{-| The Login screen allows the user to log in, as well as view a short display
of what to expect from the Matrix client.
-}

import Color exposing (Color)
import Element exposing (Element)
import Element.Background
import Element.Border
import Items.FlavorPicker as FlavorPicker
import Layout
import Material.Icons
import Matrix
import Matrix.Settings
import Theme



-- MODEL


type alias Model =
    { accessToken : String
    , loginMethod : LoginMethod
    , password : String
    , username : String
    }


type Msg
    = SetAccessToken String
    | SetPassword String
    | SetUsername String
    | SwitchMethod LoginMethod


type LoginMethod
    = AccessToken
    | Password


init : Model
init =
    { accessToken = ""
    , loginMethod = AccessToken
    , password = ""
    , username = ""
    }



-- UPDATE


update : Msg -> Model -> Model
update msg model =
    case msg of
        SetAccessToken name ->
            { model | accessToken = name }

        SetPassword name ->
            { model | password = name }

        SetUsername name ->
            { model | username = name }

        SwitchMethod method ->
            { model | loginMethod = method }



-- VIEW


view :
    { colorBackground : Color
    , colorMain : Color
    , colorMenu : Color
    , colorText : Color
    , colorTextField : Color
    , height : Int
    , flavor : Theme.Flavor
    , model : Model
    , onFlavorPick : Theme.Flavor -> msg
    , onSubmit : Matrix.Vault -> msg
    , toMsg : Msg -> msg
    , width : Int
    }
    -> Element msg
view data =
    [ viewLoginMethodPicker
        { color = data.colorMain
        , loginMethod = data.model.loginMethod
        , toMsg = SwitchMethod >> data.toMsg
        }
    , Layout.textInput
        { color = data.colorTextField
        , label = "username"
        , onChange = SetUsername >> data.toMsg
        , placeholder = Just "@alice:example.org"
        , text = data.model.username
        }
    , case data.model.loginMethod of
        AccessToken ->
            Layout.passwordInput
                { color = data.colorTextField
                , label = "access-token"
                , onChange = SetAccessToken >> data.toMsg
                , placeholder = Just "syt_p12smN_aR0KbfXxDr3RVESXNr3I_k5Ay88"
                , show = False
                , text = data.model.accessToken
                }

        Password ->
            Layout.passwordInput
                { color = data.colorTextField
                , label = "password"
                , onChange = SetPassword >> data.toMsg
                , placeholder = Just "Password"
                , show = False
                , text = data.model.password
                }
    , Layout.containedButton
        { buttonColor = data.colorMain
        , clickColor = data.colorText
        , icon = always Element.none
        , onPress =
            data.model
                |> toVault
                |> Maybe.map data.onSubmit
        , text = "LOG IN"
        }
        |> Element.el
            [ Element.centerX ]
    ]
        |> Element.column
            [ Element.Background.color (Theme.toElmUiColor data.colorMenu)
            , Element.Border.rounded 25
            , Element.centerX
            , Element.centerY
            , Element.height (Element.px 300)
            , Element.padding 30
            , Element.spaceEvenly
            , Element.width (Element.px 400)
            ]
        |> Element.el
            [ Element.Background.color (Theme.toElmUiColor data.colorBackground)
            , Element.inFront
                (FlavorPicker.view
                    { height = 30
                    , flavor = data.flavor
                    , onClick = data.onFlavorPick
                    , themeIcon = always data.colorText
                    , width = 30
                    }
                    |> Element.el [ Element.alignRight ]
                    |> Element.el [ Element.padding 10, Element.width Element.fill ]
                )
            , Element.height (Element.px data.height)
            , Element.width (Element.px data.width)
            ]


toVault : Model -> Maybe Matrix.Vault
toVault model =
    case model.loginMethod of
        AccessToken ->
            if model.accessToken == "" then
                Nothing

            else
                model.username
                    |> Matrix.fromUserId
                    |> Maybe.map (Matrix.Settings.setAccessToken model.accessToken)

        Password ->
            if model.password == "" then
                Nothing

            else
                model.username
                    |> Matrix.fromUserId
                    |> Maybe.map (Matrix.Settings.setPassword model.password)


viewLoginMethodPicker : { color : Color, loginMethod : LoginMethod, toMsg : LoginMethod -> msg } -> Element msg
viewLoginMethodPicker data =
    Layout.tab
        { color = data.color
        , content = always Element.none
        , items =
            [ { icon = Layout.iconAsIcon Material.Icons.key
              , text = "Access token"
              }
            , { icon = Layout.iconAsIcon Material.Icons.password
              , text = "Password"
              }
            ]
        , onSelect =
            \i ->
                if i == 0 then
                    data.toMsg AccessToken

                else
                    data.toMsg Password
        , selected =
            case data.loginMethod of
                AccessToken ->
                    0

                Password ->
                    1
        }