2023-07-24 10:32:02 (UTC-03:00)

Marcel Rodrigues <marcelgmr@gmail.com>

better form fields

diff --git a/view/form.css b/view/form.css
index b3c35ba..4143df8 100644
--- a/view/form.css
+++ b/view/form.css
@@ -32,3 +32,6 @@
     .flat-button:hover {
       background-color: var(--color-2);
     }
+    .mono {
+      font-family: monospace;
+    }

diff --git a/view/join.html b/view/join.html
index fad5354..894e882 100644
--- a/view/join.html
+++ b/view/join.html
@@ -19,10 +19,16 @@
         % set iaf = ""
         % set uaf = "autofocus"
       % end
-      <li><input type="text" class="flat-field" name="invite" placeholder="Invite" value="{{$uuid}}" {{$iaf}}></li>
-      <li><input type="text" class="flat-field" name="username" placeholder="Username" {{$uaf}}></li>
-      <li><input type="text" class="flat-field" name="realname" placeholder="Real Name"></li>
-      <li><input type="password" class="flat-field" name="password" placeholder="Password"></li>
+      <li><input
+        type="text" class="flat-field mono" name="invite" placeholder="Invite"
+        required size=32 minlength=32 maxlength= 32 value="{{$uuid}}" {{$iaf}}>
+      </li>
+      <li><input
+        type="text" class="flat-field" name="username" placeholder="Username"
+        required pattern="[-_A-Za-z0-9]+" {{$uaf}}>
+      </li>
+      <li><input type="text" class="flat-field" name="realname" placeholder="Real Name" required></li>
+      <li><input type="password" class="flat-field" name="password" placeholder="Password" required></li>
       <li><input type="submit" class="flat-button" value="Join"></li>
     </ul>
   </form>

diff --git a/view/login.html b/view/login.html
index 9554310..0a0a0af 100644
--- a/view/login.html
+++ b/view/login.html
@@ -12,8 +12,11 @@
   <h1 class="centered">Login</h1>
   <form action="/login" method="post">
     <ul class="centered ul-form">
-      <li><input type="text" class="flat-field" name="username" placeholder="Username" autofocus></li>
-      <li><input type="password" class="flat-field" name="password" placeholder="Password"></li>
+      <li><input
+        type="text" class="flat-field" name="username" placeholder="Username"
+        required pattern="[-_A-Za-z0-9]+" autofocus>
+      </li>
+      <li><input type="password" class="flat-field" name="password" placeholder="Password" required></li>
       <li><input type="submit" class="flat-button" value="Login"></li>
     </ul>
   </form>