The login page looks like this:
In the original version of the app, the HTML is as follows:
<div class="centered-form">
<div class="centered-form__box">
<h1>
Join
</h1>
<form action="chat.html">
<label>Display name</label>
<input type="text" name="username" placeholder="Display name" required>
<label>Room</label>
<input type="text" name="room" placeholder="Room" required>
<button>Join</button>
</form>
</div>
</div>
The conversion to Elm is straightforward:
view : Model -> Html Msg
view model =
div [ class "centered-form" ]
[
h1 [] [ text "Join" ],
Html.form [ action "chat.html" ]
[
label [] [ text "Display name"],
input [ type_ "text", name "username", placeholder "Display name", required True ] [],
label [] [ text "Room" ],
input [ type_ "text", name "room", placeholder "Room", required True ] [],
button [] [ text "Join" ]
]
]
This is in Login.elm.
In order to get the file to compile, I setup Msg
and Model
even though they aren’t used at all:
type Msg = Abc
type alias Model = Int
Is there a way I can setup Login.elm
so that I don’t have to define those?
Any other suggestions on how to streamline that file are welcome. 