feat: forms floating labels and validator

templates/auth/signin_form.html

@@ -14,22 +14,24 @@
   <h2 class="text-2xl font-bold text-center mb-8">Login to your account</h2>
 
   <form hx-post="/signin" hx-target="#login-result">
+
     <div class="form-control">
-      <label class="label">
+      <label class="floating-label">
-        <span class="label-text">Email</span>
+        <span>Email</span>
+        <input type="email" placeholder="Email" class="input input-md w-full validator" required />
+        <div class="validator-hint hidden">Enter valid email address</div>
       </label>
-      <input type="email" name="email" placeholder="Enter your email" class="input input-bordered w-full" required />
     </div>
-    <div class="form-control">
+
-      <label class="label">
+    <div class="form-control mt-4">
-        <span class="label-text">Password</span>
+      <label class="floating-label">
-      </label>
+        <span>Password</span>
-      <input type="password" name="password" placeholder="Enter your password" class="input input-bordered w-full"
+        <input type="password" class="input validator w-full" required placeholder="Password" minlength="8" />
-        required minlength="8" />
     </div>
+
     <div class="form-control mt-4">
       <label class="label cursor-pointer justify-start gap-4">
-        <input type="checkbox" name="remember_me" class="checkbox checkbox-primary" />
+        <input type="checkbox" name="remember_me" class="checkbox " />
         <span class="label-text">Remember me</span>
       </label>
     </div>

templates/auth/signup_form.html

@@ -16,18 +16,26 @@
 
   <form hx-post="/signup" hx-target="#signup-result" class="">
     <div class="form-control">
-      <label class="label">
+      <label class="floating-label">
-        <span class="label-text">Email</span>
+        <span>Email</span>
+        <input type="email" placeholder="Email" required class="input input-md w-full validator" />
+        <div class="validator-hint hidden">Enter valid email address</div>
       </label>
-      <input type="email" name="email" placeholder="Enter your email" class="input input-bordered w-full" required />
     </div>
 
-    <div class="form-control">
+    <div class="form-control mt-4">
-      <label class="label">
+      <label class="floating-label">
-        <span class="label-text">Password</span>
+        <span>Password</span>
+        <input type="password" class="input validator w-full" required placeholder="Password" minlength="8"
+          pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
+          title="Must be more than 8 characters, including number, lowercase letter, uppercase letter" />
+        <p class="validator-hint hidden">
+          Must be more than 8 characters, including
+          <br />At least one number
+          <br />At least one lowercase letter
+          <br />At least one uppercase letter
+        </p>
       </label>
-      <input type="password" name="password" placeholder="Create a password" class="input input-bordered w-full"
-        required minlength="8" />
     </div>
     <div class="mt-4" id="signup-result"></div>
     <div class="form-control mt-6">

templates/documentation/index.html

@@ -1,22 +1,22 @@
 {% extends "documentation/base.html" %}
 {% block article %}
-<h1 class="">Personalised Knowledge Management (PKM)</h1>
+<h1>Documentation</h1>
-<p class="">
+<p>
   Personalised Knowledge Management (PKM) is a system designed to help individuals organise, store, and retrieve
   information effectively. It empowers users to create a personalised workflow for managing knowledge, enabling
   better decision-making and productivity.
 </p>
-<p class="">
+<p>
   This documentation will guide you through the core concepts, tools, and best practices for building and
   maintaining your own PKM system.
 </p>
 <div class="card p-6 rounded-lg shadow-md">
-  <h2 class="">Getting Started</h2>
+  <h2>Getting Started</h2>
-  <p class="">
+  <p>
     To begin, explore the sections in the navigation menu. Each section provides detailed insights into
     different
     aspects of PKM, from foundational principles to advanced techniques.
   </p>
-  <a href="/documentation/submenu1" class="btn btn-primary" hx-boost="true">Learn More</a>
+  <a href="/documentation/quick-start" class="btn btn-primary text-primary-content" hx-boost="true">Learn More</a>
 </div>
 {% endblock %}