From 3f326b74d64c361a56775131e712b224f56d112a Mon Sep 17 00:00:00 2001
From: cellarspoon <cellarspoon@riseup.net>
Date: Mon, 10 Jan 2022 10:33:07 +0100
Subject: [PATCH] feat: minlength validation

---
 keycloak_collective_portal/static/default.css    | 12 ++++++++++++
 keycloak_collective_portal/static/lumbung.css    | 16 ++++++++++++++++
 .../templates/register.html                      | 14 +++++++-------
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/keycloak_collective_portal/static/default.css b/keycloak_collective_portal/static/default.css
index 019aa5d..360bc59 100644
--- a/keycloak_collective_portal/static/default.css
+++ b/keycloak_collective_portal/static/default.css
@@ -11,3 +11,15 @@ th, td {
 table, th, td {
   border: 1px solid black;
 }
+
+input {
+  border: 2px solid currentcolor;
+}
+
+input:invalid {
+  border: 2px dashed red;
+}
+
+input:invalid:focus {
+  background-image: linear-gradient(magenta, pink);
+}
diff --git a/keycloak_collective_portal/static/lumbung.css b/keycloak_collective_portal/static/lumbung.css
index 019aa5d..b6fd784 100644
--- a/keycloak_collective_portal/static/lumbung.css
+++ b/keycloak_collective_portal/static/lumbung.css
@@ -11,3 +11,19 @@ th, td {
 table, th, td {
   border: 1px solid black;
 }
+
+input {
+  border: 2px solid currentcolor;
+}
+
+input:invalid {
+  border: 2px dashed red;
+}
+
+input:invalid:focus {
+  background-image: linear-gradient(magenta, pink);
+}
+
+.error {
+  color: red;
+}
diff --git a/keycloak_collective_portal/templates/register.html b/keycloak_collective_portal/templates/register.html
index a6d150a..eede206 100644
--- a/keycloak_collective_portal/templates/register.html
+++ b/keycloak_collective_portal/templates/register.html
@@ -5,27 +5,27 @@
   </p>
 
   {% if exception %}
-  <p>Oops, something went wrong: {{ exception }} 😬</p>
+  <p class="error">Oops, something went wrong: {{ exception }} 😬</p>
   {% endif %}
 
   <form method="post" action="{{ url_for('form_keycloak_register') }}">
     <label for="first_name">First name:</label>
-    <input type="text" name="first_name" value="{{ first_name }}" />
+    <input type="text" name="first_name" value="{{ first_name }}" minlength="3" />
 
     <label for="last_name">Last name:</label>
-    <input type="text" name="last_name" value="{{ last_name }}" />
+    <input type="text" name="last_name" value="{{ last_name }}" minlength="3"/>
 
     <label for="username">Username:</label>
-    <input type="text" name="username" value="{{ username }}" />
+    <input type="text" name="username" value="{{ username }}" minlength="3"/>
 
     <label for="email">Email:</label>
-    <input type="text" name="email" value="{{ email }}" />
+    <input type="text" name="email" value="{{ email }}" minlength="3"/>
 
     <label for="password">Password:</label>
-    <input type="password" name="password" />
+    <input type="password" name="password" minlength="8"/>
 
     <label for="password_again">Password (just to be sure):</label>
-    <input type="password" name="password_again" />
+    <input type="password" name="password_again" minlength="8"/>
 
     <input type="hidden" name="invited_by" value="{{ invited_by }}"/>