Add a modal to confirm the removal of a domain.

src/App/DomainListInterface.purs

@@ -28,6 +28,7 @@ import Halogen.HTML.Properties as HP
 import Web.Event.Event as Event
 import Web.Event.Event (Event)
 import Bulma as Bulma
+import CSSClasses as C
 
 import App.LogMessage
 import App.Messages.DNSManagerDaemon as DNSManager
@@ -96,6 +97,9 @@ data Action
   | RemoveDomain String
   | EnterDomain String
 
+  | DeleteDomainModal String
+  | CancelModal
+
   | Initialize
   | Finalize
 
@@ -116,6 +120,7 @@ type State =
   , my_domains             :: Array String
 
   , wsUp :: Boolean
+  , active_modal :: Maybe String
   }
 
 component :: forall m. MonadAff m => H.Component Query Input Output m
@@ -144,17 +149,53 @@ initialState _ =
   , accepted_domains: [ default_domain ]
   , my_domains: [ ]
   , wsUp: true
+  , active_modal: Nothing
   }
 
 render :: forall m. State -> H.ComponentHTML Action () m
-render { accepted_domains, my_domains, newDomainForm, wsUp }
+render { accepted_domains, my_domains, newDomainForm, wsUp, active_modal }
   = Bulma.section_small
       [ case wsUp of
           false -> Bulma.p "You are disconnected."
-          true  -> Bulma.columns_ [ Bulma.column_ newdomain_form, Bulma.column_ list_of_own_domains ]
+          true  -> case active_modal of
+            Nothing -> Bulma.columns_ [ Bulma.column_ newdomain_form, Bulma.column_ list_of_own_domains ]
+            Just domain -> modal_domain_delete domain
       ]
   where
 
+    modal_domain_delete :: forall w. String -> HH.HTML w Action
+    modal_domain_delete domain =
+      modal
+        [ modal_background
+        , modal_card [modal_header, modal_body]
+        , modal_foot [modal_delete_button, modal_cancel_button]
+        ]
+        where
+          modal = HH.div [HP.classes (C.modal <> C.is_active)]
+          modal_background = HH.div [HP.classes C.modal_background] []
+          modal_card = HH.div [HP.classes C.modal_card]
+          modal_header = HH.header [HP.classes C.modal_card_head]
+            [ HH.p [HP.classes C.modal_card_title] [HH.text "Deleting a domain"]
+            --, HH.button [HP.classes C.delete, ARIA.label "close"] []
+            ]
+          modal_body = HH.section [HP.classes C.modal_card_body] [ warning_message ]
+          modal_foot = HH.div [HP.classes C.modal_card_foot]
+          modal_delete_button
+            = HH.button [ HP.classes (C.button <> C.is_success)
+                        , HE.onClick \_ -> RemoveDomain domain
+                        ] [HH.text "Delete the domain."]
+          modal_cancel_button
+            = HH.button [ HP.classes C.button
+                        , HE.onClick \_ -> CancelModal
+                        ] [HH.text "Cancel"]
+          warning_message
+            = HH.p [] [ HH.text $ "You are about to delete your domain '"
+                                  <> domain
+                                  <> "'. Are you sure you want to do this? This is "
+                      , HH.strong_ [ HH.text "irreversible" ]
+                      , HH.text "."
+                      ]
+
     newdomain_form
       = [ Bulma.h3 "Add a domain!"
         , render_adduser_form
@@ -168,7 +209,7 @@ render { accepted_domains, my_domains, newDomainForm, wsUp }
     domain_buttons domain
       = [ HH.button
             [ HP.type_ HP.ButtonSubmit
-            , HE.onClick \_ -> RemoveDomain domain
+            , HE.onClick \_ -> DeleteDomainModal domain
             , HP.classes CSSClasses.button
             ]
             [ HH.text "x" ]
@@ -202,6 +243,9 @@ handleAction = case _ of
     state <- H.get
     H.raise $ StoreState state
 
+  CancelModal -> do
+    H.modify_ _ { active_modal = Nothing }
+
   UpdateAcceptedDomains domains -> do
     H.modify_ _ { accepted_domains = domains }
 
@@ -216,10 +260,14 @@ handleAction = case _ of
   EnterDomain domain -> do
     H.raise $ Log $ SimpleLog $ "[???] trying to enter domain: " <> domain
 
+  DeleteDomainModal domain -> do
+    H.modify_ _ { active_modal = Just domain }
+
   RemoveDomain domain -> do
     message <- H.liftEffect $ DNSManager.serialize $ DNSManager.MkDeleteDomain { domain: domain }
     H.raise $ MessageToSend message
     H.raise $ Log $ SimpleLog $ "[😇] Removing domain: " <> domain
+    H.modify_ _ { active_modal = Nothing }
 
   NewDomainAttempt ev -> do
     H.liftEffect $ Event.preventDefault ev