Added tooltip to registration page

ACMAS/app/ACMAS_Web/components/field/field.html

@@ -1,12 +1,47 @@
 {% load component_tags %}
 
-<div class="field-component flex bg-gray-100 p-4 h-14 space-x-4 rounded-lg w-full items-center">
+<div class="field-component relative flex bg-gray-100 p-4 h-14 space-x-4 rounded-lg w-full items-center">
     {% if component_type == "input" %}
         <input type="file" class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none" name="{{ name }}">
         {% else %}
         {% if icon_name != "" %}
             {% component "icon" icon=icon_name icon_type="mini" icon_class="w-6 h-6 flex-shrink-0 text-gray-400" %}
         {% endif %}
-        <input type="{{ component_type }}" class="bg-gray-100 outline-none border-0 w-full ring-0 focus:ring-0" name="{{ name }}" placeholder="{{ placeholder }}" />
+        <input type="{{ component_type }}" class="peer bg-gray-100 outline-none border-0 w-full ring-0 focus:ring-0" name="{{ name }}" placeholder="{{ placeholder }}" />
+    {% endif %}
+    {% if name == "password1" and placeholder == "Create password..." %}
+    <div class="-left-48 absolute invisible peer-focus:visible">
+        <div class="w-40 h-40 flex flex-col bg-white text-gray-600 text-xs rounded-xl text-left p-4 border border-light-gray z-50 justify-items-center">
+            <p>Password can't be:</p>
+            <ul class="list-disc pl-2 gap-y-2">
+                <li>too similar to other personal information</li>
+                <li>less than 8 characters </li>
+                <li>be a commonly used password</li>
+                <li>entirely numeric</li>
+            </ul>
+        </div>
+        <div class="relative z-30">
+            <div class="flex left-full -ml-3 bottom-20 absolute z-0">
+                <div class="h-4 w-4 origin-bottom-left rotate-45 transform border border-light-gray bg-white border-b-white border-l-white"></div>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+    {% if name == "username" and placeholder == "Create username..." %}
+    <div class="-left-48 absolute invisible peer-focus:visible">
+        <div class="w-40 h-36 flex flex-col bg-white text-gray-600 text-xs rounded-xl text-left p-4 border border-light-gray z-50 justify-items-center">
+            <ul class="list-disc pl-2 gap-y-2">
+                <li>Required</li>
+                <li>150 characters or fewer</li>
+                <li>Letters, digits and @/./+/-/_ only.</li>
+                <li>entirely numeric</li>
+            </ul>
+        </div>
+        <div class="relative z-30">
+            <div class="flex left-full -ml-3 bottom-[4.5rem] absolute z-0">
+                <div class="h-4 w-4 origin-bottom-left rotate-45 transform border border-light-gray bg-white border-b-white border-l-white"></div>
+            </div>
+        </div>
+    </div>
     {% endif %}
 </div>

ACMAS/app/ACMAS_Web/templates/register.html

@@ -12,9 +12,9 @@
             <div class="flex flex-col items-center space-x-6 p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition duration-500">
                 <div class="flex-col flex space-y-4 w-full">
                     <div class="grid gap-6 md:grid-cols-2 w-full">
-                        {% component "field" component_type="text" placeholder="Enter username..." name="username" icon_name="user" %}
+                        {% component "field" component_type="text" placeholder="Create username..." name="username" icon_name="user" %}
                         {% component "field" component_type="text" placeholder="Enter email..." name="email" icon_name="inbox" %}
-                        {% component "field" component_type="password" placeholder="Enter password..." name="password1" icon_name="lock-closed" %}
+                        {% component "field" component_type="password" placeholder="Create password..." name="password1" icon_name="lock-closed" %}
                         {% component "field" component_type="password" placeholder="Confirm password..." name="password2" icon_name="lock-closed" %}
                     </div>
                 </div>