Elm Modal

Home.Messages.elm

module Components.Home.Messages exposing (..)
import Components.Signup.Messages exposing (..)

type Msg
    = OpenSignupModal
    | CloseSignupModal
    | SignupMsg Components.Signup.Messages.Msg

Home.Models.elm

module Components.Home.Messages exposing (..)
import Components.Signup.Messages exposing (..)

type Msg
    = OpenSignupModal
    | CloseSignupModal
    | SignupMsg Components.Signup.Messages.Msg

Home.Page.elm

module Components.Home.Page exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)
import Html.App exposing (..)
import Components.Home.Messages exposing (..)
import Components.Home.Models exposing (..)
import Components.Signup.Page exposing (..)


view : Model -> Html Msg
view model =
    div []
        [ div [ class "container", style [ ( "margin-top", "30px" ), ( "text-align", "center" ) ] ]
            [ div [ class "row" ]
                [ div [ class "col-xs-12" ]
                    [ div [ class "jumbotron" ]
                        [ button [ class "btn btn-primary btn-lg" ]
                            [ span [] [ text "Login" ]
                            ]
                        , button [ class "btn btn-primary btn-lg", onClick OpenSignupModal ]
                            [ span [] [ text "Signup" ] ]
                        ]
                    ]
                ]
            ]
        , div
            [ classList
                [ ( "overlay", True )
                , ( "overlay-hugeinc", True )
                , ( "open", model.signupModal )
                ]
            ]
            [ button [ type' "button", class "overlay-close", onClick CloseSignupModal ] [ text "Close" ]
            , Html.App.map SignupMsg (Components.Signup.Page.view model.signupModel)
            ]
        ]

Home.Update.elm

module Components.Home.Update exposing (..)

import Components.Home.Messages exposing (..)
import Components.Home.Models exposing (..)
import Components.Signup.Update
import Components.Signup.Messages


update : Msg -> Model -> Model
update msg model =
    case msg of
        OpenSignupModal ->
            { model | signupModal = True }

        CloseSignupModal ->
            { model | signupModal = False, signupModel = Components.Signup.Update.update Components.Signup.Messages.SwitchToFacebookMode model.signupModel }

        SignupMsg signupMsg ->
            { model | signupModel = Components.Signup.Update.update signupMsg model.signupModel }

Signup.Messages.elm

module Components.Signup.Messages exposing (..)

type Msg
    = SwitchToEmailMode
    | SwitchToFacebookMode

Signup.Models.elm

module Components.Signup.Models exposing (..)


type Model
  = Facebook
  | Email

init : Model
init =
  Facebook

Signup.Page.elm

module Components.Signup.Page exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Components.Signup.Signup as Signup
import Components.Signup.SignupEmail as SignupEmail
import Components.Signup.Models exposing (..)
import Components.Signup.Messages exposing (..)


view : Model -> Html Msg
view model =
    div [ class "container" ]
        [ div [ class "row" ]
            [ signupMode model
            ]
        ]

signupMode : Model -> Html Msg
signupMode model =
    case model of
        Facebook ->
            Signup.view

        Email ->
            SignupEmail.view

Signup.Signup.elm

module Components.Signup.Signup exposing (..)

import Components.Signup.Messages exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)


view : Html Msg
view =
    div [ class "col-sm-6 col-md-5 col-md-offset-4 col-sm-offset-4" ]
        [ div [ class "signup-modal" ]
            [ div [ class "signup-modal-header" ]
                [ img [ src "images/decora-signup.png" ] []
                , h1 [] [ text "The best of Home Decor." ]
                , div [ class "signup-subtitle" ] [ text "Join Decora.me to like inspirations, follow architects and  publish awesome inspirations." ]
                ]
            , div [ class "signup-buttons-wrapper"]
                [ button [ class "btn-large btn btn-primary" ] [ text "Connect with Facebook", i [ class "fa fa-facebook" ] [] ]
                , button [ class "btn-large btn btn-signup-email" ] [ text "Sign up with Email" ]
                , hr [] []
                , p [] [ a [ onClick SwitchToEmailMode ] [ text "I already have an account" ]  ]
                ]
            ]
        ]

Signup.SignupEmail.elm

module Components.Signup.SignupEmail exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)


view : Html msg
view =
    div [ class "col-sm-6 col-md-5 col-md-offset-4 col-sm-offset-4" ]
        [ div [ class "signup-modal" ]
            [ div [ class "signup-modal-header" ]
                [ img [ src "images/decora-signup.png" ] []
                , h1 [] [ text "Join Decora.me" ]
                ]
            , Html.form []
                [ div [ class "form-group" ]
                    [ label [ for "name" ]
                        [ text "First and last name" ]
                    , input [ class "form-control", id "name", placeholder "First and last name", type' "text", value "Maurivan Luiz" ]
                        []
                    ]
                , div [ class "form-group" ]
                    [ label [ for "username" ]
                        [ text "Username" ]
                    , input [ class "form-control", id "username", placeholder "Username", type' "email", value "Fulaninho" ]
                        []
                    ]
                , div [ class "signup-modal-explanation" ]
                    [ p [] [ text "Your public profile will look like this" ]
                    , a [] [ text "decora.me/fulaninho" ]
                    ]
                , div [ class "form-group" ]
                    [ label [ for "signup-email" ]
                        [ text "Email" ]
                    , input [ class "form-control", id "signup-email", placeholder "Email", type' "email" ]
                        []
                    ]
                , div [ class "form-group" ]
                    [ label [ for "signup-password" ]
                        [ text "Password" ]
                    , input [ class "form-control", id "signup-password", placeholder "Password", type' "password" ]
                        []
                    ]
                , button [ class "btn btn-success btn-lg btn-block btn-create-account", type' "submit" ]
                    [ text "Create Account" ]
                , p [ class "signup-modal-footer" ]
                    [ text "By signing up, you agree to our Terms & Privacy Policy" ]
                ]
            ]
        ]

Signup.Update.elm

module Components.Signup.Update exposing (..)

import Components.Signup.Messages exposing (..)
import Components.Signup.Models exposing (..)


update : Msg -> Model -> Model
update msg model =
    case msg of
        SwitchToEmailMode ->
            Email

        SwitchToFacebookMode ->
            Facebook