From 0cb2bde160bb7fd45f2df98c3025ff0b5a9aa77a Mon Sep 17 00:00:00 2001
From: eikek <eike.kettner@posteo.de>
Date: Sat, 13 Nov 2021 00:21:04 +0100
Subject: [PATCH] Improve e-mail input field

Closes: #987
---
 .../webapp/src/main/elm/Comp/EmailInput.elm   | 28 ++++++++++++++++---
 modules/webapp/src/main/elm/Util/Html.elm     |  8 ++++++
 website/site/content/docs/webapp/mailitem.md  |  5 +++-
 website/site/content/docs/webapp/share.md     |  6 ++++
 4 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/modules/webapp/src/main/elm/Comp/EmailInput.elm b/modules/webapp/src/main/elm/Comp/EmailInput.elm
index 89cbf06b..bac01172 100644
--- a/modules/webapp/src/main/elm/Comp/EmailInput.elm
+++ b/modules/webapp/src/main/elm/Comp/EmailInput.elm
@@ -21,7 +21,7 @@ import Data.DropdownStyle as DS
 import Data.Flags exposing (Flags)
 import Html exposing (..)
 import Html.Attributes exposing (..)
-import Html.Events exposing (onClick, onInput)
+import Html.Events exposing (onBlur, onClick, onInput)
 import Http
 import Styles as S
 import Util.Html exposing (onKeyUp)
@@ -34,6 +34,7 @@ type alias Model =
     , menuOpen : Bool
     , candidates : List String
     , active : Maybe String
+    , backspaceCount : Int
     }
 
 
@@ -43,6 +44,7 @@ init =
     , menuOpen = False
     , candidates = []
     , active = Nothing
+    , backspaceCount = 0
     }
 
 
@@ -94,7 +96,14 @@ update flags current msg model =
                         email =
                             Maybe.withDefault model.input model.active
                     in
-                    update flags current (AddEmail email) model
+                    if email == "" then
+                        ( model, Cmd.none, current )
+
+                    else
+                        update flags current (AddEmail email) model
+
+                removeLast =
+                    ( { model | backspaceCount = 0 }, Cmd.none, Util.List.dropRight 1 current )
             in
             case Util.Html.intToKeyCode code of
                 Just Util.Html.Up ->
@@ -128,6 +137,13 @@ update flags current msg model =
                 Just Util.Html.Space ->
                     addCurrent
 
+                Just Util.Html.Backspace ->
+                    if model.backspaceCount >= 1 then
+                        removeLast
+
+                    else
+                        ( { model | backspaceCount = model.backspaceCount + 1 }, Cmd.none, current )
+
                 _ ->
                     ( model, Cmd.none, current )
 
@@ -154,9 +170,12 @@ type alias ViewSettings =
 view2 : ViewSettings -> List String -> Model -> Html Msg
 view2 cfg values model =
     div [ class "text-sm flex-row space-x-2 relative" ]
-        [ div [ class cfg.style.link ]
+        [ div
+            [ class cfg.style.link
+            , class "flex-wrap"
+            ]
             [ div
-                [ class "flex flex-row space-x-2 mr-2"
+                [ class "flex flex-row space-x-2 mr-2 flex-wrap"
                 , classList [ ( "hidden", List.isEmpty values ) ]
                 ]
                 (List.map renderValue2 values)
@@ -166,6 +185,7 @@ view2 cfg values model =
                 , placeholder cfg.placeholder
                 , onKeyUp KeyPress
                 , onInput SetInput
+                , onBlur (KeyPress 13)
                 , class "inline-flex w-24 border-0 px-0 focus:ring-0 h-6 text-sm"
                 , class "placeholder-gray-400 dark:text-bluegray-200 dark:bg-bluegray-800 dark:border-bluegray-500"
                 ]
diff --git a/modules/webapp/src/main/elm/Util/Html.elm b/modules/webapp/src/main/elm/Util/Html.elm
index 7b6f8fe9..cdaeab7d 100644
--- a/modules/webapp/src/main/elm/Util/Html.elm
+++ b/modules/webapp/src/main/elm/Util/Html.elm
@@ -44,6 +44,8 @@ type KeyCode
     | Right
     | Enter
     | Space
+    | Backspace
+    | Tab
     | ESC
     | Letter_C
     | Letter_N
@@ -91,6 +93,12 @@ intToKeyCode code =
         32 ->
             Just Space
 
+        8 ->
+            Just Backspace
+
+        9 ->
+            Just Tab
+
         27 ->
             Just ESC
 
diff --git a/website/site/content/docs/webapp/mailitem.md b/website/site/content/docs/webapp/mailitem.md
index 51c24a9d..01e790be 100644
--- a/website/site/content/docs/webapp/mailitem.md
+++ b/website/site/content/docs/webapp/mailitem.md
@@ -34,7 +34,10 @@ field shows completion proposals from all contacts in your address
 book (from organizations and persons). Choose an address by pressing
 *Enter* or by clicking a proposal from the list. The proposal list can
 be iterated by the *Up* and *Down* arrows. You can type in any
-address, of course, it doesn't need to match a proposal.
+address, of course, it doesn't need to match a proposal. If you type
+in an arbitrary address, hit *Enter* or *Space* in order to add the
+current address. You can hit *Backspace* two times to remove the last
+e-mail address.
 
 If you have multiple mail settings defined, you can choose in the top
 dropdown which account to use for sending.
diff --git a/website/site/content/docs/webapp/share.md b/website/site/content/docs/webapp/share.md
index 1cd25577..860e00c7 100644
--- a/website/site/content/docs/webapp/share.md
+++ b/website/site/content/docs/webapp/share.md
@@ -113,6 +113,12 @@ to copy it.
 
 {{ figure(file="share-03.png") }}
 
+When typing in an e-mail address, there are completion proposals
+provided from your address book. If you type in an arbitrary address
+(not in the proposals), hit *Enter* or *Space* in order to add the
+current address. You can hit *Backspace* two times to remove the last
+e-mail address.
+
 The new share can now be found in *Collective Profile -> Shares*.
 Clicking *Done* brings you back to the search results.