From 231aca9ec562279fa721d445a3e6023f9112286e Mon Sep 17 00:00:00 2001
From: Joaquin <jparedes.peake@gmail.com>
Date: Wed, 21 May 2025 11:04:08 -0700
Subject: [PATCH] fix/added required tooltips to some field forms

---
 src/views/login.ejs                |  7 ++++---
 src/views/partials/createAsset.ejs |  7 ++++---
 src/views/plans.ejs                |  4 ++--
 src/views/questionnaire.ejs        |  2 +-
 src/views/signup.ejs               | 11 ++++++-----
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/views/login.ejs b/src/views/login.ejs
index 1b41753..b725df5 100644
--- a/src/views/login.ejs
+++ b/src/views/login.ejs
@@ -6,15 +6,16 @@
         <form action="/login" method="POST">
             <div class="w-96 p-8 bg-white rounded-lg shadow-xl border border-slate-200">
                 <h1 class="text-3xl block text-center font-semibold text-slate-700">Login</h1>
-                <hr class="mt-4 mb-6 border-slate-300">
+                <hr class="mt-4 mb-4 border-slate-300">
+                <p class="text-sm text-gray-400 text-left mb-4"><span class="text-red-500">*</span> Indicates a required field</p>
                 <div class="mt-4">
-                    <label for="email" class="block text-base mb-2 text-slate-600">Email</label>
+                    <label for="email" class="block text-base mb-2 text-slate-600">Email <span class="text-red-500">*</span></label>
                     <input type="text" id="email" name="email"
                         class="border border-slate-300 focus:border-indigo-500 w-full rounded-md text-base px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors duration-200"
                         placeholder="Enter Email" value="<%= typeof email != 'undefined' ? email : '' %>"/>
                 </div>
                 <div class="mt-4">
-                    <label for="password" class="block text-base mb-2 text-slate-600">Password</label>
+                    <label for="password" class="block text-base mb-2 text-slate-600">Password <span class="text-red-500">*</span></label>
                     <input type="password" id="password" name="password"
                         class="border border-slate-300 focus:border-indigo-500 w-full rounded-md text-base px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors duration-200"
                         placeholder="Enter Password" />
diff --git a/src/views/partials/createAsset.ejs b/src/views/partials/createAsset.ejs
index b6624c7..4ae30fc 100644
--- a/src/views/partials/createAsset.ejs
+++ b/src/views/partials/createAsset.ejs
@@ -12,6 +12,7 @@
             </button>
         </form>
     </div>
+    <p class="text-sm text-gray-400 text-left mb-4"><span class="text-red-500">*</span> Indicates a required field</p>
 
     <div class="my-4">
         <label class="block text-sm font-medium text-gray-700">Asset Type</label>
@@ -59,13 +60,13 @@
             </div>
         </div>
 
-        <label for="name" class="block text-sm font-medium text-gray-700 mt-2">Asset Name</label>
+        <label for="name" class="block text-sm font-medium text-gray-700 mt-2">Asset Name <span class="text-red-500">*</span></label>
         <input required id="name" type="text" name="name" minlength="3" maxlength="30" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
 
-        <label for="value" class="block text-sm font-medium text-gray-700 mt-2">Asset Value</label>
+        <label for="value" class="block text-sm font-medium text-gray-700 mt-2">Asset Value <span class="text-red-500">*</span></label>
         <input required placeholder="CAD" min="0" id="value" type="number" name="value" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
 
-        <label for="purchaseDate" class="block text-sm font-medium text-gray-700 mt-2">Date of Purchase</label>
+        <label for="purchaseDate" class="block text-sm font-medium text-gray-700 mt-2">Date of Purchase <span class="text-red-500">*</span></label>
         <input required type="date" id="purchaseDate" name="purchaseDate" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
 
         <label for="description" class="block text-sm font-medium text-gray-700 mt-2">Description</label>
diff --git a/src/views/plans.ejs b/src/views/plans.ejs
index 3c1ab89..fa48b64 100644
--- a/src/views/plans.ejs
+++ b/src/views/plans.ejs
@@ -21,7 +21,7 @@
     <!-- New Plan Modal - Styled like createAsset.ejs -->
     <dialog id="newPlanDialog" class="w-lg mx-auto bg-white p-8 mt-10 rounded-lg shadow-md">
         <!-- Header: Title and Cancel button -->
-        <div class="flex flex-row justify-between items-center mb-4">
+        <div class="flex flex-row justify-between items-center">
             <h3 class="text-lg font-bold text-gray-900">Create New Retirement Plan</h3>
             <form method="dialog" id="cancelNewPlanDialogForm">
                 <button type="submit" class="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer">Cancel</button>
@@ -31,7 +31,7 @@
         <!-- Form Content -->
         <div> 
             <form id="newPlanForm" class="space-y-4">
-                <p class="text-sm text-gray-400 text-left mb-8"><span class="text-red-500">*</span> Indicates a required field</p>
+                <p class="text-sm text-gray-400 text-left mb-4"><span class="text-red-500">*</span> Indicates a required field</p>
                 <div>
                     <label for="name" class="block text-sm font-medium text-gray-700 text-left">Plan Name <span class="text-red-500">*</span></label>
                     <input type="text" name="name" id="planName" placeholder="e.g., My Awesome Plan" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
diff --git a/src/views/questionnaire.ejs b/src/views/questionnaire.ejs
index 1adacb3..4370a47 100644
--- a/src/views/questionnaire.ejs
+++ b/src/views/questionnaire.ejs
@@ -4,7 +4,7 @@
 <main class="container mx-auto p-4 pt-28">
     <div class="max-w-md mx-auto bg-white p-8 mb-10 rounded-lg shadow-md">
         <h3 class="text-lg font-medium mb-6">Financial Questionnaire</h3>
-        <p class="text-sm text-gray-400 text-left mb-8"><span class="text-red-500">*</span> Indicates a required field</p>
+        <p class="text-sm text-gray-400 text-left mb-4"><span class="text-red-500">*</span> Indicates a required field</p>
         <form action="/questionnaire" method="post" class="space-y-4">
             <div>
                 <label for="dob" class="block text-sm font-medium text-gray-700">Date of Birth <span class="text-red-500">*</span></label>
diff --git a/src/views/signup.ejs b/src/views/signup.ejs
index d79c1f9..1cc34a0 100644
--- a/src/views/signup.ejs
+++ b/src/views/signup.ejs
@@ -6,25 +6,26 @@
         <form action="/signup" method="POST">
             <div class="w-96 p-8 bg-white rounded-lg shadow-xl border border-slate-200">
                 <h1 class="text-3xl block text-center font-semibold text-slate-700">Signup</h1>
-                <hr class="mt-4 mb-6 border-slate-300">
+                <hr class="mt-4 mb-4 border-slate-300">
+                <p class="text-sm text-gray-400 text-left mb-4"><span class="text-red-500">*</span> Indicates a required field</p>
                 <div class="mt-4">
-                    <label for="name" class="block text-base mb-2 text-slate-600">Name</label>
+                    <label for="name" class="block text-base mb-2 text-slate-600">Name <span class="text-red-500">*</span></label>
                     <input type="text" id="name" name="name"
                         class="border border-slate-300 focus:border-indigo-500 w-full rounded-md text-base px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors duration-200"
                         placeholder="Enter Name" value="<%= typeof name != 'undefined' ? name : '' %>"/>
                 </div>
                 <div class="mt-4">
-                    <label for="email" class="block text-base mb-2 text-slate-600">Email</label>
+                    <label for="email" class="block text-base mb-2 text-slate-600">Email <span class="text-red-500">*</span></label>
                     <input type="email" id="email" name="email"
                         class="border border-slate-300 focus:border-indigo-500 w-full rounded-md text-base px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors duration-200"
                         placeholder="Enter Email" value="<%= typeof email != 'undefined' ? email : '' %>"/>
                 </div>
                 <div class="mt-4">
-                    <label for="password" class="block text-base mb-2 text-slate-600">Password</label>
+                    <label for="password" class="block text-base mb-2 text-slate-600">Password <span class="text-red-500">*</span></label>
                     <input type="password" id="password" name="password"
                         class="border border-slate-300 focus:border-indigo-500 w-full rounded-md text-base px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors duration-200"
                         placeholder="Enter Password" />
-                    <label for="repassword" class="block text-base mb-2 mt-3 text-slate-600">Re-type Password</label>
+                    <label for="repassword" class="block text-base mb-2 mt-3 text-slate-600">Re-type Password <span class="text-red-500">*</span></label>
                     <input type="password" id="repassword" name="repassword"
                         class="border border-slate-300 focus:border-indigo-500 w-full rounded-md text-base px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors duration-200"
                         placeholder="Enter Password" />