mirror of
https://github.com/dillonkearns/elm-pages-v3-beta.git
synced 2024-12-24 12:22:27 +03:00
Use plain HTML for vanilla form page.
This commit is contained in:
Dillon Kearns
parent
07bd8902d6
commit
dda2f89cce
@ -1,25 +1,18 @@
|
||||
module Page.Form exposing (Data, Model, Msg, page)
|
||||
|
||||
--import Html
|
||||
--import Html.Attributes as Attr
|
||||
|
||||
import Css
|
||||
import DataSource exposing (DataSource)
|
||||
import Dict exposing (Dict)
|
||||
import Form exposing (Form)
|
||||
import Head
|
||||
import Head.Seo as Seo
|
||||
import Html.Styled as Html exposing (Html)
|
||||
import Html.Styled.Attributes as Attr exposing (css)
|
||||
import Icon
|
||||
import Html exposing (Html)
|
||||
import Html.Attributes as Attr
|
||||
import Page exposing (Page, PageWithState, StaticPayload)
|
||||
import PageServerResponse exposing (PageServerResponse)
|
||||
import Pages.PageUrl exposing (PageUrl)
|
||||
import Pages.Url
|
||||
import Server.Request as Request exposing (Request)
|
||||
import Shared
|
||||
import Tailwind.Breakpoints as Bp
|
||||
import Tailwind.Utilities as Tw
|
||||
import View exposing (View)
|
||||
|
||||
|
||||
@ -54,7 +47,7 @@ defaultUser =
|
||||
}
|
||||
|
||||
|
||||
errorsView : List String -> Html.Html msg
|
||||
errorsView : List String -> Html msg
|
||||
errorsView errors =
|
||||
case errors of
|
||||
first :: rest ->
|
||||
@ -76,213 +69,6 @@ errorsView errors =
|
||||
Html.div [] []
|
||||
|
||||
|
||||
styleAttrs attrs =
|
||||
List.map Attr.fromUnstyled attrs
|
||||
|
||||
|
||||
|
||||
--usernameInput : Html msg
|
||||
|
||||
|
||||
usernameInput { toInput, toLabel, errors } =
|
||||
Html.div []
|
||||
[ Html.div
|
||||
[ css
|
||||
[ Bp.sm
|
||||
[ Tw.grid
|
||||
, Tw.grid_cols_3
|
||||
, Tw.gap_4
|
||||
, Tw.items_start
|
||||
, Tw.border_t
|
||||
, Tw.border_gray_200
|
||||
, Tw.pt_5
|
||||
]
|
||||
]
|
||||
]
|
||||
[ Html.label
|
||||
(styleAttrs toInput
|
||||
++ [ Attr.for "username"
|
||||
, css
|
||||
[ Tw.block
|
||||
, Tw.text_sm
|
||||
, Tw.font_medium
|
||||
, Tw.text_gray_700
|
||||
, Bp.sm
|
||||
[ Tw.mt_px
|
||||
, Tw.pt_2
|
||||
]
|
||||
]
|
||||
]
|
||||
)
|
||||
[ Html.text "Username" ]
|
||||
, Html.div
|
||||
[ css
|
||||
[ Tw.mt_1
|
||||
, Bp.sm
|
||||
[ Tw.mt_0
|
||||
, Tw.col_span_2
|
||||
]
|
||||
]
|
||||
]
|
||||
[ Html.div
|
||||
[ css
|
||||
[ Tw.max_w_lg
|
||||
, Tw.flex
|
||||
, Tw.rounded_md
|
||||
, Tw.shadow_sm
|
||||
, Tw.relative
|
||||
]
|
||||
]
|
||||
[ Html.span
|
||||
[ css
|
||||
[ Tw.inline_flex
|
||||
, Tw.items_center
|
||||
, Tw.px_3
|
||||
, Tw.rounded_l_md
|
||||
, Tw.border
|
||||
, Tw.border_r_0
|
||||
, Tw.border_gray_300
|
||||
, Tw.bg_gray_50
|
||||
, Tw.text_gray_500
|
||||
, Bp.sm
|
||||
[ Tw.text_sm
|
||||
]
|
||||
]
|
||||
]
|
||||
[ Html.text "workcation.com/" ]
|
||||
, Html.input
|
||||
(styleAttrs toInput
|
||||
++ [ Attr.type_ "text"
|
||||
, Attr.name "username"
|
||||
, Attr.id "username"
|
||||
, Attr.attribute "autocomplete" "username"
|
||||
, css
|
||||
[ Tw.flex_1
|
||||
, Tw.block
|
||||
, Tw.w_full
|
||||
, Tw.min_w_0
|
||||
, Tw.rounded_none
|
||||
, Tw.rounded_r_md
|
||||
, Tw.border_gray_300
|
||||
, Css.focus
|
||||
[ Tw.ring_indigo_500
|
||||
, Tw.border_indigo_500
|
||||
]
|
||||
, Bp.sm
|
||||
[ Tw.text_sm
|
||||
]
|
||||
]
|
||||
]
|
||||
)
|
||||
[]
|
||||
, Html.div
|
||||
[ css
|
||||
[ Tw.absolute
|
||||
, Tw.inset_y_0
|
||||
, Tw.right_0
|
||||
, Tw.pr_3
|
||||
, Tw.flex
|
||||
, Tw.items_center
|
||||
, Tw.pointer_events_none
|
||||
]
|
||||
]
|
||||
[ if errors |> List.isEmpty then
|
||||
Html.text ""
|
||||
|
||||
else
|
||||
Icon.error
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
, Html.div []
|
||||
[ Html.p
|
||||
[ css
|
||||
[ Tw.mt_2
|
||||
, Tw.text_sm
|
||||
, Tw.text_red_600
|
||||
]
|
||||
]
|
||||
[ errors |> String.join "\n" |> Html.text ]
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
inputWithErrors =
|
||||
Html.div []
|
||||
[ Html.label
|
||||
[ Attr.for "email"
|
||||
, css
|
||||
[ Tw.block
|
||||
, Tw.text_sm
|
||||
, Tw.font_medium
|
||||
, Tw.text_gray_700
|
||||
]
|
||||
]
|
||||
[ Html.text "Email" ]
|
||||
, Html.div
|
||||
[ css
|
||||
[ Tw.mt_1
|
||||
, Tw.relative
|
||||
, Tw.rounded_md
|
||||
, Tw.shadow_sm
|
||||
]
|
||||
]
|
||||
[ Html.input
|
||||
[ Attr.type_ "email"
|
||||
, Attr.name "email"
|
||||
, Attr.id "email"
|
||||
, css
|
||||
[ Tw.block
|
||||
, Tw.w_full
|
||||
, Tw.pr_10
|
||||
, Tw.border_red_300
|
||||
, Tw.text_red_900
|
||||
, Tw.placeholder_red_300
|
||||
, Tw.rounded_md
|
||||
, Css.focus
|
||||
[ Tw.outline_none
|
||||
, Tw.ring_red_500
|
||||
, Tw.border_red_500
|
||||
]
|
||||
, Bp.sm
|
||||
[ Tw.text_sm
|
||||
]
|
||||
]
|
||||
, Attr.placeholder "you@example.com"
|
||||
, Attr.value "adamwathan"
|
||||
, Attr.attribute "aria-invalid" "true"
|
||||
, Attr.attribute "aria-describedby" "email-error"
|
||||
]
|
||||
[]
|
||||
, Html.div
|
||||
[ css
|
||||
[ Tw.absolute
|
||||
, Tw.inset_y_0
|
||||
, Tw.right_0
|
||||
, Tw.pr_3
|
||||
, Tw.flex
|
||||
, Tw.items_center
|
||||
, Tw.pointer_events_none
|
||||
]
|
||||
]
|
||||
[ Icon.error
|
||||
]
|
||||
]
|
||||
, Html.div []
|
||||
[ Html.p
|
||||
[ css
|
||||
[ Tw.mt_2
|
||||
, Tw.text_sm
|
||||
, Tw.text_red_600
|
||||
]
|
||||
, Attr.id "email-error"
|
||||
]
|
||||
[ Html.text "Your password must be less than 4 characters." ]
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
form : User -> Form User (Html Never)
|
||||
form user =
|
||||
Form.succeed User
|
||||
@ -292,10 +78,10 @@ form user =
|
||||
(\{ toInput, toLabel, errors } ->
|
||||
Html.div []
|
||||
[ errorsView errors
|
||||
, Html.label (styleAttrs toLabel)
|
||||
, Html.label toLabel
|
||||
[ Html.text "First"
|
||||
]
|
||||
, Html.input (styleAttrs toInput) []
|
||||
, Html.input toInput []
|
||||
]
|
||||
)
|
||||
|> Form.withInitialValue user.first
|
||||
@ -306,10 +92,10 @@ form user =
|
||||
(\{ toInput, toLabel, errors } ->
|
||||
Html.div []
|
||||
[ errorsView errors
|
||||
, Html.label (styleAttrs toLabel)
|
||||
, Html.label toLabel
|
||||
[ Html.text "Last"
|
||||
]
|
||||
, Html.input (styleAttrs toInput) []
|
||||
, Html.input toInput []
|
||||
]
|
||||
)
|
||||
|> Form.withInitialValue user.last
|
||||
@ -317,15 +103,14 @@ form user =
|
||||
|> Form.required
|
||||
(Form.input
|
||||
"username"
|
||||
(\info ->
|
||||
--Html.div []
|
||||
-- [ errorsView errors
|
||||
-- , Html.label (styleAttrs toLabel)
|
||||
-- [ Html.text "Username"
|
||||
-- ]
|
||||
-- , Html.input (styleAttrs toInput) []
|
||||
-- ]
|
||||
usernameInput info
|
||||
(\{ toInput, toLabel, errors } ->
|
||||
Html.div []
|
||||
[ errorsView errors
|
||||
, Html.label toLabel
|
||||
[ Html.text "Username"
|
||||
]
|
||||
, Html.input toInput []
|
||||
]
|
||||
)
|
||||
|> Form.withInitialValue user.username
|
||||
|> Form.withServerValidation
|
||||
@ -343,10 +128,10 @@ form user =
|
||||
(\{ toInput, toLabel, errors } ->
|
||||
Html.div []
|
||||
[ errorsView errors
|
||||
, Html.label (styleAttrs toLabel)
|
||||
, Html.label toLabel
|
||||
[ Html.text "Email"
|
||||
]
|
||||
, Html.input (styleAttrs toInput) []
|
||||
, Html.input toInput []
|
||||
]
|
||||
)
|
||||
|> Form.withInitialValue user.email
|
||||
@ -357,10 +142,10 @@ form user =
|
||||
(\{ toInput, toLabel, errors } ->
|
||||
Html.div []
|
||||
[ errorsView errors
|
||||
, Html.label (styleAttrs toLabel)
|
||||
, Html.label toLabel
|
||||
[ Html.text "Date of Birth"
|
||||
]
|
||||
, Html.input (styleAttrs toInput) []
|
||||
, Html.input toInput []
|
||||
]
|
||||
)
|
||||
|> Form.withInitialValue user.birthDay
|
||||
@ -370,7 +155,7 @@ form user =
|
||||
|> Form.append
|
||||
(Form.submit
|
||||
(\{ attrs } ->
|
||||
Html.input (styleAttrs attrs) []
|
||||
Html.input attrs []
|
||||
)
|
||||
)
|
||||
|
||||
@ -456,29 +241,21 @@ view maybeUrl sharedModel static =
|
||||
in
|
||||
{ title = "Form Example"
|
||||
, body =
|
||||
[ --static.data.user
|
||||
-- |> Maybe.map
|
||||
-- (\user_ ->
|
||||
-- Html.p
|
||||
-- [ Attr.style "padding" "10px"
|
||||
-- , Attr.style "background-color" "#a3fba3"
|
||||
-- ]
|
||||
-- [ Html.text <| "Successfully received user " ++ user_.first ++ " " ++ user_.last
|
||||
-- ]
|
||||
-- )
|
||||
-- |> Maybe.withDefault (Html.p [] [])
|
||||
--, Html.h1
|
||||
-- []
|
||||
-- [ Html.text <| "Edit profile " ++ user.first ++ " " ++ user.last ]
|
||||
--, form user
|
||||
-- |> Form.toHtml static.data.errors
|
||||
--, Html.input [ Attr.type_ "submit" ] []
|
||||
Html.div []
|
||||
[ form user
|
||||
|> Form.toHtml
|
||||
(\attrs children -> Html.form (List.map Attr.fromUnstyled attrs) children)
|
||||
static.data.errors
|
||||
]
|
||||
|> Html.toUnstyled
|
||||
[ static.data.user
|
||||
|> Maybe.map
|
||||
(\user_ ->
|
||||
Html.p
|
||||
[ Attr.style "padding" "10px"
|
||||
, Attr.style "background-color" "#a3fba3"
|
||||
]
|
||||
[ Html.text <| "Successfully received user " ++ user_.first ++ " " ++ user_.last
|
||||
]
|
||||
)
|
||||
|> Maybe.withDefault (Html.p [] [])
|
||||
, Html.h1
|
||||
[]
|
||||
[ Html.text <| "Edit profile " ++ user.first ++ " " ++ user.last ]
|
||||
, form user
|
||||
|> Form.toHtml Html.form static.data.errors
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user