singin.tmpl: improve form
All checks were successful
continuous-integration/drone/push Build is passing
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:
parent
771dc0d55c
commit
06c2c79aa8
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">
|
||||
{{ template "svg-user.tmpl" }}
|
||||
</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>
|
||||
<!-- password field -->
|
||||
<div class="relative flex items-center mt-4">
|
||||
<span class="absolute" role="img" aria-label="password lock icon">
|
||||
{{ template "svg-password.tmpl" }}
|
||||
</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 class="mt-8 md:flex md:items-center">
|
||||
|
Loading…
Reference in New Issue
Block a user