Submit entry forms upon pressing Enter

assets/src/PlanningPokerEntry.elm

@@ -43,7 +43,11 @@ update key msg model =
             ( { model | playerName = newName }, Cmd.none )
 
         CreateRoom ->
-            ( model, Nav.pushUrl key ("/room/" ++ model.room) )
+            if not (String.isEmpty model.playerName) then
+                ( model, Nav.pushUrl key ("/room/" ++ model.room) )
+
+            else
+                ( model, Cmd.none )
 
 
 view : Model -> Document Msg
@@ -60,7 +64,7 @@ layout model =
             [ width fill, centerY, spacing 30 ]
             [ el [ centerX ] (text "Oh, hey!")
             , el [ centerX ] (text "Tell us who you are")
-            , Input.text [ centerX, width (px 300) ]
+            , Input.text [ centerX, width (px 300), UI.onEnter CreateRoom ]
                 { onChange = PlayerNameChanged
                 , text = model.playerName
                 , label = Input.labelHidden "Your name"

assets/src/PlanningPokerRoom.elm

@@ -151,9 +151,13 @@ update key msg model =
             ( { model | playerName = newName }, Cmd.none )
 
         JoinRoom ->
-            ( { model | state = Playing }
-            , API.newProfile { playerName = model.playerName }
-            )
+            if not (String.isEmpty model.playerName) then
+                ( { model | state = Playing }
+                , API.newProfile { playerName = model.playerName }
+                )
+
+            else
+                ( model, Cmd.none )
 
         GotPresence (Ok (PresenceState players)) ->
             let
@@ -426,7 +430,12 @@ joinForm room playerName =
     column [ width fill, spacing 20, centerX, centerY ]
         [ UI.heroText [ centerX ] "Welcome!"
         , el [ centerX ] (text "Tell us who you are")
-        , Input.text [ centerX, width (px 300), Font.center ]
+        , Input.text
+            [ centerX
+            , width (px 300)
+            , Font.center
+            , UI.onEnter JoinRoom
+            ]
             { onChange = PlayerNameChanged
             , text = playerName
             , label = Input.labelHidden "Your name"

assets/src/PlanningPokerUI.elm

@@ -3,6 +3,7 @@ module PlanningPokerUI exposing
     , colors
     , fontSizes
     , heroText
+    , onEnter
     , toDocument
     )
 
@@ -11,6 +12,8 @@ import Element exposing (..)
 import Element.Background as Background
 import Element.Font as Font
 import Element.Input as Input
+import Html.Events
+import Json.Decode as Decode
 
 
 colors =
@@ -102,3 +105,22 @@ toDocument { title, body } =
             column [ width fill, height fill, spacing 20 ] body
         ]
     }
+
+
+onEnter : msg -> Element.Attribute msg
+onEnter msg =
+    Element.htmlAttribute
+        (Html.Events.on "keyup"
+            (Decode.field
+                "key"
+                Decode.string
+                |> Decode.andThen
+                    (\key ->
+                        if key == "Enter" then
+                            Decode.succeed msg
+
+                        else
+                            Decode.fail "Not the enter key"
+                    )
+            )
+        )