From 2a109ec125cf0d4ff618fa95cd59a23016954e60 Mon Sep 17 00:00:00 2001
From: Amitai Burstein <amitai@gizra.com>
Date: Wed, 3 Jan 2024 19:36:18 +0200
Subject: [PATCH] Add `urlField` (#1885)

* Add UrlField

* Re-order code

* Add docs

* Update IHP/View/Form.hs
---
 Guide/form.markdown      |  1 +
 IHP/View/CSSFramework.hs |  1 +
 IHP/View/Form.hs         | 20 ++++++++++++++++++++
 IHP/View/Types.hs        |  1 +
 4 files changed, 23 insertions(+)

diff --git a/Guide/form.markdown b/Guide/form.markdown
index 1b5f0843d..a15da5670 100644
--- a/Guide/form.markdown
+++ b/Guide/form.markdown
@@ -59,6 +59,7 @@ IHP has the most commonly-used form controls built in. In general the form contr
 - [`{passwordField #password}`](https://ihp.digitallyinduced.com/api-docs/IHP-View-Form.html#v:passwordField)
 - [`{dateTimeField #createdAt}`](https://ihp.digitallyinduced.com/api-docs/IHP-View-Form.html#v:dateTimeField)
 - [`{numberField #quantity}`](https://ihp.digitallyinduced.com/api-docs/IHP-View-Form.html#v:numberField)
+- [`{urlField #url}`](https://ihp.digitallyinduced.com/api-docs/IHP-View-Form.html#v:urlField)
 - [`{hiddenField #projectId}`](https://ihp.digitallyinduced.com/api-docs/IHP-View-Form.html#v:hiddenField)
 - [`{checkboxField #termsAccepted}`](https://ihp.digitallyinduced.com/api-docs/IHP-View-Form.html#v:checkboxField)
 - [`{selectField #projectId allProjects}`](https://ihp.digitallyinduced.com/api-docs/IHP-View-Form.html#v:selectField)
diff --git a/IHP/View/CSSFramework.hs b/IHP/View/CSSFramework.hs
index 0320bdea1..45fcbb77d 100644
--- a/IHP/View/CSSFramework.hs
+++ b/IHP/View/CSSFramework.hs
@@ -63,6 +63,7 @@ instance Default CSSFramework where
                     renderInner = case formField.fieldType of
                         TextInput -> styledTextFormField cssFramework "text" formField validationResult
                         NumberInput -> styledTextFormField cssFramework "number" formField validationResult
+                        UrlInput -> styledTextFormField cssFramework "url" formField validationResult
                         PasswordInput -> styledTextFormField cssFramework "password" formField validationResult
                         ColorInput -> styledTextFormField cssFramework "color" formField validationResult
                         EmailInput -> styledTextFormField cssFramework "email" formField validationResult
diff --git a/IHP/View/Form.hs b/IHP/View/Form.hs
index 3349f0bb8..5114fd565 100644
--- a/IHP/View/Form.hs
+++ b/IHP/View/Form.hs
@@ -504,6 +504,26 @@ numberField :: forall fieldName model value.
 numberField field = (textField field) { fieldType = NumberInput }
 {-# INLINE numberField #-}
 
+-- | Renders a URL input field
+--
+-- >>> {urlField #url}
+-- <div class="form-group" id="form-group-company_url">
+--     <label for="company_url">Url</label>
+--     <input type="url" name="url" id="company_url" class="form-control" />
+-- </div>
+--
+-- See 'textField' for examples of possible form control options.
+urlField :: forall fieldName model value.
+    ( ?formContext :: FormContext model
+    , HasField fieldName model value
+    , HasField "meta" model MetaBag
+    , KnownSymbol fieldName
+    , InputValue value
+    , KnownSymbol (GetModelName model)
+    ) => Proxy fieldName -> FormField
+urlField field = (textField field) { fieldType = UrlInput }
+{-# INLINE urlField #-}
+
 -- | Renders a textarea
 --
 -- >>> {textareaField #body}
diff --git a/IHP/View/Types.hs b/IHP/View/Types.hs
index 39ce2e34b..a13f1b285 100644
--- a/IHP/View/Types.hs
+++ b/IHP/View/Types.hs
@@ -93,6 +93,7 @@ instance SetField "customFormAttributes" (FormContext record) [(Text, Text)] whe
 data InputType
     = TextInput
     | NumberInput
+    | UrlInput
     | CheckboxInput
     | ColorInput
     | EmailInput