singin.tmpl: improve form
All checks were successful
continuous-integration/drone/push Build is passing

* add limits to inputs
* signify with CSS when the input is incorrect
* rebuild tailwind
This commit is contained in:
leo 2023-05-29 14:57:13 +02:00
parent 771dc0d55c
commit 06c2c79aa8
Signed by: wanderer
SSH Key Fingerprint: SHA256:Dp8+iwKHSlrMEHzE3bJnPng70I7LEsa3IJXRH/U+idQ
2 changed files with 3 additions and 3 deletions

File diff suppressed because one or more lines are too long

@ -24,14 +24,14 @@
<span class="absolute" role="img" aria-label="person outline icon for username"> <span class="absolute" role="img" aria-label="person outline icon for username">
{{ template "svg-user.tmpl" }} {{ template "svg-user.tmpl" }}
</span> </span>
<input name="username" type="text" placeholder="Username" {{if and .Data.form .Data.form.Username}}value="{{.Data.form.Username}}"{{end}} required class="block w-full py-3 required:border-slate-500 dark:required:border-slate-300 required:border-3 valid:border text-gray-700 bg-white border rounded-lg px-11 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"> <input name="username" type="text" placeholder="Username" {{if and .Data.form .Data.form.Username}}value="{{.Data.form.Username}}"{{end}} autofocus minlength="2" required class="block w-full py-3 required:border-slate-500 dark:required:border-slate-300 required:border-3 valid:border invalid:border-pink-600 focus:invalid:border-pink-600 focus:invalid:ring-pink-300 dark:invalid:border-pink-400 dark:focus:invalid:border-pink-400 dark:focus:invalid:ring-pink-250 text-gray-700 bg-white border rounded-lg px-11 dark:bg-gray-900 dark:text-gray-300 dark:valid:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
</div> </div>
<!-- password field --> <!-- password field -->
<div class="relative flex items-center mt-4"> <div class="relative flex items-center mt-4">
<span class="absolute" role="img" aria-label="password lock icon"> <span class="absolute" role="img" aria-label="password lock icon">
{{ template "svg-password.tmpl" }} {{ template "svg-password.tmpl" }}
</span> </span>
<input name="password" type="password" placeholder="Password" {{if and .Data.form .Data.form.Password}}value="{{.Data.form.Password}}"{{else}}{{end}} required class="block w-full px-10 py-3 required:border-slate-500 dark:required:border-slate-300 required:border-3 valid:border text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"> <input name="password" type="password" placeholder="Password" {{if and .Data.form .Data.form.Password}}value="{{.Data.form.Password}}"{{else}}{{end}} minlength=12 required class="block w-full px-10 py-3 required:border-slate-500 dark:required:border-slate-300 required:border-3 valid:border invalid:border-pink-600 focus:invalid:border-pink-600 focus:invalid:ring-pink-300 dark:invalid:border-pink-400 dark:focus:invalid:border-pink-400 dark:focus:invalid:ring-pink-250 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:valid:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
</div> </div>
<div class="mt-8 md:flex md:items-center"> <div class="mt-8 md:flex md:items-center">