From 7c2d19c48c9ccfab61f41a266f14cd238124dd05 Mon Sep 17 00:00:00 2001
From: Lev <lev.kokotov@gmail.com>
Date: Tue, 9 Apr 2024 13:33:27 -0700
Subject: [PATCH] input with error

---
 .../src/components/inputs/text/input/input.scss   | 12 ++++++++++++
 .../src/components/inputs/text/input/mod.rs       |  7 +++++++
 .../components/inputs/text/input/template.html    | 15 +++++++++++++--
 .../src/components/pages/demo/template.html       | 10 ++++++++++
 4 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/pgml-dashboard/src/components/inputs/text/input/input.scss b/pgml-dashboard/src/components/inputs/text/input/input.scss
index f46002e93..4eb19e14d 100644
--- a/pgml-dashboard/src/components/inputs/text/input/input.scss
+++ b/pgml-dashboard/src/components/inputs/text/input/input.scss
@@ -1,7 +1,13 @@
 div[data-controller="inputs-text-input"] {
+    --bs-danger: #{$peach-shade-100};
+
     span.material-symbols-outlined {
         margin-left: -40px;
         color: #{$slate-shade-100};
+
+        &.is-invalid {
+            color: var(--bs-danger);
+        }
     }
 
     input.form-control {
@@ -12,4 +18,10 @@ div[data-controller="inputs-text-input"] {
     label.form-label {
         font-weight: #{$font-weight-normal};
     }
+
+    p {
+        small {
+            color: var(--bs-danger);
+        }
+    }
 }
diff --git a/pgml-dashboard/src/components/inputs/text/input/mod.rs b/pgml-dashboard/src/components/inputs/text/input/mod.rs
index 4ca82f657..dd5d4d53e 100644
--- a/pgml-dashboard/src/components/inputs/text/input/mod.rs
+++ b/pgml-dashboard/src/components/inputs/text/input/mod.rs
@@ -16,6 +16,7 @@ pub struct Input {
     autocomplete: bool,
     value: String,
     required: bool,
+    error: Option<String>,
 }
 
 impl Input {
@@ -38,6 +39,7 @@ impl Input {
             autocomplete: false,
             value: "".to_string(),
             required: false,
+            error: None,
         }
     }
 
@@ -90,6 +92,11 @@ impl Input {
         self.required = true;
         self
     }
+
+    pub fn error(mut self, error: Option<impl ToString>) -> Self {
+        self.error = error.map(|e| e.to_string());
+        self
+    }
 }
 
 component!(Input);
diff --git a/pgml-dashboard/src/components/inputs/text/input/template.html b/pgml-dashboard/src/components/inputs/text/input/template.html
index 44e21e702..c7f726c10 100644
--- a/pgml-dashboard/src/components/inputs/text/input/template.html
+++ b/pgml-dashboard/src/components/inputs/text/input/template.html
@@ -1,3 +1,9 @@
+<% let (input_classes, icon_classes) = if error.is_some() {
+  ("form-control is-invalid", "material-symbols-outlined is-invalid")
+} else {
+  ("form-control", "material-symbols-outlined")
+};
+%>
 <div data-controller="inputs-text-input">
   <% if let Some(label) = label { %>
     <label class="form-label" for="<%= id %>"><%+ label %></label>
@@ -8,7 +14,7 @@
       id="<%= id %>"
       type="<%= type_ %>"
       name="<%= name %>"
-      class="form-control"
+      class="<%= input_classes %>"
       placeholder="<%= placeholder %>"
       data-action="<%= input_actions %>"
       autocomplete="<%= autocomplete %>"
@@ -20,10 +26,15 @@
 
     <% if let Some(icon) = icon { %>
       <span
-        class="material-symbols-outlined"
+        class="<%= icon_classes %>"
         data-action="<%= icon_actions %>">
         <%= icon %>
       </span>
     <% } %>
   </div>
+  <% if let Some(error) = error { %>
+  <p class="mt-1 mb-0">
+    <small><%= error %></small>
+  </p>
+  <% } %>
 </div>
diff --git a/pgml-dashboard/src/components/pages/demo/template.html b/pgml-dashboard/src/components/pages/demo/template.html
index a1f962667..187dc1ce7 100644
--- a/pgml-dashboard/src/components/pages/demo/template.html
+++ b/pgml-dashboard/src/components/pages/demo/template.html
@@ -58,6 +58,16 @@
       .type_("text") %>
   </div>
 
+  <div class="py-5">
+    <%+ Input::new()
+      .label("What is your name?".into())
+      .icon("person")
+      .placeholder("Enter your name")
+      .name("name")
+      .type_("text")
+      .error(Some("Your name is not valid.")) %>
+  </div>
+
   <div class="py-5">
     <%+ Search::new(SearchOptions {
       name: "Model search".into(),

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/postgresml/postgresml/pull/1399.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/postgresml/postgresml/pull/1399.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/postgresml/postgresml/pull/1399.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/postgresml/postgresml/pull/1399.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>