feat: minlength validation

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);
+}

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;
+}

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 }}"/>