fix/added required tooltips to some field forms

This commit is contained in:
Joaquin committed 2025-05-21 11:04:08 -07:00
1 parent 3dc1faaed5
commit 231aca9ec5
5 files changed
+17 -14

No files matched your search

+4 -3
View File
@@ -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" />
+4 -3
View File
@@ -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>
+2 -2
View File
@@ -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>
+1 -1
View File
@@ -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>
+6 -5
View File
@@ -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" />