tmpls: set required attr for form fields
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
leo 2023-05-15 18:37:34 +02:00
parent 532934b88f
commit 15918d4cd7
Signed by: wanderer
SSH Key Fingerprint: SHA256:Dp8+iwKHSlrMEHzE3bJnPng70I7LEsa3IJXRH/U+idQ
2 changed files with 5 additions and 5 deletions

@ -19,14 +19,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="username" placeholder="Username" class="block w-full py-3 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" required class="block w-full py-3 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">
</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" class="block w-full px-10 py-3 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" required class="block w-full px-10 py-3 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">
</div> </div>
<div class="mt-8 md:flex md:items-center"> <div class="mt-8 md:flex md:items-center">

@ -18,14 +18,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="username" placeholder="Username" class="block w-full py-3 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" required class="block w-full py-3 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">
</div> </div>
<div class="relative flex items-center mt-4"> <div class="relative flex items-center mt-4">
<!-- <label class="block"> --> <!-- <label class="block"> -->
<span class="absolute" role="img" aria-label="email icon"> <span class="absolute" role="img" aria-label="email icon">
{{ template "svg-email.tmpl" }} {{ template "svg-email.tmpl" }}
</span> </span>
<input name="email" type="email" placeholder="Email address" class="peer block w-full px-10 py-3 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="email" type="email" placeholder="Email address" required class="peer block w-full px-10 py-3 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">
<p class="mt-2 mx-4 hidden peer-invalid:block text-pink-600 text-sm"> <p class="mt-2 mx-4 hidden peer-invalid:block text-pink-600 text-sm">
Please provide a valid email address. Please provide a valid email address.
</p> </p>
@ -35,7 +35,7 @@
<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" class="block w-full px-10 py-3 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" required class="block w-full px-10 py-3 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">
</div> </div>
<div class="mt-8 md:flex md:items-center"> <div class="mt-8 md:flex md:items-center">
<button class="w-full px-6 py-3 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-lg md:w-1/2 hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50"> <button class="w-full px-6 py-3 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-lg md:w-1/2 hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50">