refactor/add required indicators

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" />

src/views/partials/assetModify.ejs

@@ -86,7 +86,7 @@
         <input id="icon-<%= asset._id %>"      name="icon"   type="text" hidden value="<%= asset.icon %>">
 
         <% if (asset.type != "stock") { %>
-            <label for="name" class="block text-sm font-medium text-gray-700 mt-6">Name</label>
+            <label for="name" class="block text-sm font-medium text-gray-700 mt-6">Name <span class="text-red-500">*</span></label>
             <input 
                 id="name-<%= asset._id %>" 
                 disabled 
@@ -96,7 +96,7 @@
                 class="mt-1 mb-2 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 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none"
             >
         <% } else { %>
-            <label for="ticker" class="block text-sm font-medium text-gray-700 mt-2">Stock Ticker</label>
+            <label for="ticker" class="block text-sm font-medium text-gray-700 mt-2">Stock Ticker <span class="text-red-500">*</span></label>
             <input 
                 id="ticker-<%= asset._id %>" 
                 disabled 
@@ -110,7 +110,7 @@
         <hr class="h-px mt-6 mb-4 bg-gray-500 border-0 mx-10">
 
         <% if (asset.type != "stock") { %>
-            <label for="value" class="block text-sm font-medium text-gray-700">Value</label>
+            <label for="value" class="block text-sm font-medium text-gray-700">Value <span class="text-red-500">*</span></label>
             <input 
                 id="value-<%= asset._id %>" 
                 disabled 
@@ -121,7 +121,7 @@
                 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 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none"
             >
         <% } else { %>
-            <label for="price" class="block text-sm font-medium text-gray-700 mt-2">Price per Share</label>
+            <label for="price" class="block text-sm font-medium text-gray-700 mt-2">Price per Share <span class="text-red-500">*</span></label>
             <input 
                 id="price-<%= asset._id %>" 
                 disabled 
@@ -132,7 +132,7 @@
                 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 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none"
             >
             
-            <label for="quantity" class="block text-sm font-medium text-gray-700 mt-2">Quantity of Shares</label>
+            <label for="quantity" class="block text-sm font-medium text-gray-700 mt-2">Quantity of Shares <span class="text-red-500">*</span></label>
             <input 
                 id="quantity-<%= asset._id %>" 
                 disabled 
@@ -159,7 +159,7 @@
         <% } %>
 
         <% if (asset.type != "saving") { %>
-            <label for="purchaseDate" class="block text-sm font-medium text-gray-700 mt-2">Purchased on</label>
+            <label for="purchaseDate" class="block text-sm font-medium text-gray-700 mt-2">Purchased on <span class="text-red-500">*</span></label>
             <input 
                 id="purchaseDate-<%= asset._id %>" 
                 disabled 

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>
@@ -92,7 +93,7 @@
             </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" 
@@ -103,7 +104,7 @@
             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" 
@@ -115,7 +116,7 @@
             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" 
@@ -155,7 +156,7 @@
     <form style="display: none;" method="POST" action="/createAsset" id="create-saving-asset-form">
         <input style="display: none;" value="saving" name="type" type="text">
 
-        <label for="name" class="block text-sm font-medium text-gray-700 mt-2">Savings Name</label>
+        <label for="name" class="block text-sm font-medium text-gray-700 mt-2">Savings Name <span class="text-red-500">*</span></label>
         <input 
             required 
             id="name" 
@@ -166,7 +167,7 @@
             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">Savings Value</label>
+        <label for="value" class="block text-sm font-medium text-gray-700 mt-2">Savings Value <span class="text-red-500">*</span></label>
         <input 
             required 
             placeholder="CAD" 
@@ -199,7 +200,7 @@
     <form style="display: none;" method="POST" action="/createAsset" id="create-stock-asset-form">
         <input style="display: none;" value="stock" name="type" type="text">
 
-        <label for="ticker" class="block text-sm font-medium text-gray-700 mt-2">Stock Ticker</label>
+        <label for="ticker" class="block text-sm font-medium text-gray-700 mt-2">Stock Ticker <span class="text-red-500">*</span></label>
         <input 
             required 
             id="ticker" 
@@ -210,7 +211,7 @@
             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="price" class="block text-sm font-medium text-gray-700 mt-2">Price per Share</label>
+        <label for="price" class="block text-sm font-medium text-gray-700 mt-2">Price per Share <span class="text-red-500">*</span></label>
         <input 
             required 
             placeholder="CAD" 
@@ -222,7 +223,7 @@
             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="quantity" class="block text-sm font-medium text-gray-700 mt-2">Quantity of Shares</label>
+        <label for="quantity" class="block text-sm font-medium text-gray-700 mt-2">Quantity of Shares <span class="text-red-500">*</span></label>
         <input 
             required 
             type="number" 
@@ -232,7 +233,7 @@
             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" 

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>

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>

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" />