Make modal-ids always css-compatible

src/Utils/Frontend/Modal.hs

@@ -11,8 +11,8 @@ import Utils.Route
 
 import Settings (widgetFile)
 
-import Control.Monad.Random.Class (MonadRandom(..))
-import qualified Data.UUID as UUID
+import Control.Monad.Random.Class (uniform)
+import Control.Monad.Trans.Random (evalRandTIO)
 
 
 data Modal site = Modal
@@ -47,8 +47,17 @@ msgModal :: WidgetT site IO ()
          -> Either (SomeRoute site) (WidgetT site IO ())
          -> WidgetT site IO ()
 msgModal modalTrigger' modalContent = do
-  modalTriggerId <- Just . UUID.toText <$> liftIO getRandom
-  modalId <- Just . UUID.toText <$> liftIO getRandom
+  let
+    randomIdentifier :: MonadIO m => m Text
+    -- ^ Generates valid CSS-Identifiers with roughly 128 bits of entropy
+    --
+    -- See https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
+    randomIdentifier = fmap pack . evalRandTIO $ do
+      prefix <- uniform $ ['a'..'z'] ++ ['A'..'Z'] ++ ['0'..'9']
+      suffix <- replicateM 21 . uniform $ ['a'..'z'] ++ ['A'..'Z']
+      return $ prefix : suffix
+  modalTriggerId <- Just <$> randomIdentifier
+  modalId <- Just <$> randomIdentifier
   customModal Modal{..}
   where
     modalTrigger mRoute triggerId = $(widgetFile "widgets/modal/trigger")