Added a password gen feature and updated the ui a bit

This commit is contained in:
Isaac Godin 2026-01-09 13:21:39 -05:00
parent 062aadb1ab
commit 82c1aeb9ec
2 changed files with 54 additions and 13 deletions

View File

@ -299,6 +299,28 @@ function printPdf() {
}, 100); }, 100);
} }
async function generatePassword(length = 12) {
const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:,.<>?";
let password = "";
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * characters.length);
password += characters[randomIndex];
}
const textareaElement = document.getElementById("tempPwPassword");
textareaElement.value = password;
try {
await navigator.clipboard.writeText(password);
console.log('text copied');
} catch (err) {
console.error('Failed: ', err);
}
}
// ############################################################# // #############################################################
// Event Listeners // Event Listeners
// ############################################################# // #############################################################
@ -317,6 +339,14 @@ document.getElementById('customNoteBtn').addEventListener('click', () => {
alert(`An error occurred while generating the PDF: ${error.message}`); alert(`An error occurred while generating the PDF: ${error.message}`);
} }
}); });
document.getElementById('genPassword').addEventListener('click', () => {
try {
generatePassword();
} catch (error) {
alert(`An error occurred while generating the PDF: ${error.message}`);
}
});
document.getElementById('deviceTrackerBtn').addEventListener('click', () => { document.getElementById('deviceTrackerBtn').addEventListener('click', () => {
try { try {
deviceTrackerHandler(); deviceTrackerHandler();

View File

@ -35,11 +35,11 @@
<!-- Username --> <!-- Username -->
<label for="tempPwUsername" class="dark:text-gray-300 block text-md font-medium text-gray-700">Username: (optional)</label> <label for="tempPwUsername" class="dark:text-gray-300 block text-md font-medium text-gray-700">Username: (optional)</label>
<input type="text" id="tempPwUsername" name="tempPwUsername" <input type="text" id="tempPwUsername" name="tempPwUsername"
class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 ml-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"> class="dark:border-gray-700 dark:bg-gray-700 dark:text-white 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">
<!-- Password --> <!-- Password -->
<label for="tempPwPassword" class="dark:text-gray-300 block text-md font-medium text-gray-700">Password:</label> <label for="tempPwPassword" class="dark:text-gray-300 block text-md font-medium text-gray-700">Password:</label>
<input type="text" id="tempPwPassword" name="tempPwPassword" <input type="text" id="tempPwPassword" name="tempPwPassword"
class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 ml-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"> class="dark:border-gray-700 dark:bg-gray-700 dark:text-white 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">
</div> </div>
<!-- Submit Button --> <!-- Submit Button -->
<div class="text-center"> <div class="text-center">
@ -50,6 +50,14 @@
Generate Receipt Generate Receipt
</button> </button>
</div> </div>
<div class="text-center">
<button type="submit"
id="genPassword"
style="background-color: #4b7839;"
class="dark:bg-indigo-600 dark:hover:bg-indigo-700 w-full text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 mt-4">
Generate And Copy Password
</button>
</div>
</div> </div>
<!-- Custom Note --> <!-- Custom Note -->
@ -62,7 +70,7 @@
<!-- max size added and removed resizing --> <!-- max size added and removed resizing -->
<label for="customNoteTextArea" class="dark:text-gray-300 block text-md font-medium text-gray-700">Notes:</label> <label for="customNoteTextArea" class="dark:text-gray-300 block text-md font-medium text-gray-700">Notes:</label>
<textarea id="customNoteTextArea" name="customNoteTextArea" cols="35" rows="10" maxlength="1000" style="resize: none;" <textarea id="customNoteTextArea" name="customNoteTextArea" cols="35" rows="10" maxlength="1000" style="resize: none;"
class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 ml-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"></textarea> class="dark:border-gray-700 dark:bg-gray-700 dark:text-white 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"></textarea>
</div> </div>
<!-- Submit Button --> <!-- Submit Button -->
<div class="text-center"> <div class="text-center">
@ -87,11 +95,11 @@
<!-- Ticket field --> <!-- Ticket field -->
<label for="dtticket" class="dark:text-gray-300 block text-md font-medium text-gray-700">Ticket:</label> <label for="dtticket" class="dark:text-gray-300 block text-md font-medium text-gray-700">Ticket:</label>
<input type="text" id="dtticket" name="dtticket" <input type="text" id="dtticket" name="dtticket"
class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 ml-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"> class="dark:border-gray-700 dark:bg-gray-700 dark:text-white 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">
<!-- User field --> <!-- User field -->
<label for="dtuser" class="dark:text-gray-300 block text-md font-medium text-gray-700">User:</label> <label for="dtuser" class="dark:text-gray-300 block text-md font-medium text-gray-700">User:</label>
<input type="text" id="dtuser" name="dtuser" <input type="text" id="dtuser" name="dtuser"
class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 ml-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"> class="dark:border-gray-700 dark:bg-gray-700 dark:text-white 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">
<!-- Radio buttons to pick from "Stock", "Deploy", "Image", "E-Waste", "Repair/Parts" and "Other" --> <!-- Radio buttons to pick from "Stock", "Deploy", "Image", "E-Waste", "Repair/Parts" and "Other" -->
<label for="dtservice" class="dark:text-gray-300 block text-md font-medium text-gray-700 mb-2">Service:</label> <label for="dtservice" class="dark:text-gray-300 block text-md font-medium text-gray-700 mb-2">Service:</label>
<div class="flex flex-row space-x-20 pl-2"> <div class="flex flex-row space-x-20 pl-2">
@ -99,41 +107,41 @@
<label class="inline-flex items-center"> <label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Stock" <input type="radio" name="dtservice" value="Stock"
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500"> class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500">
<span class="ml-2 dark:text-gray-300">Stock</span> <span class=" dark:text-gray-300">Stock</span>
</label> </label>
<label class="inline-flex items-center"> <label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Deploy" <input type="radio" name="dtservice" value="Deploy"
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500"> class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500">
<span class="ml-2 dark:text-gray-300">Deploy</span> <span class=" dark:text-gray-300">Deploy</span>
</label> </label>
<label class="inline-flex items-center"> <label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Image" <input type="radio" name="dtservice" value="Image"
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500"> class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500">
<span class="ml-2 dark:text-gray-300">Image</span> <span class=" dark:text-gray-300">Image</span>
</label> </label>
</div> </div>
<div class="flex flex-col space-y-2"> <div class="flex flex-col space-y-2">
<label class="inline-flex items-center"> <label class="inline-flex items-center">
<input type="radio" name="dtservice" value="E-Waste" <input type="radio" name="dtservice" value="E-Waste"
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500"> class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500">
<span class="ml-2 dark:text-gray-300">E-Waste</span> <span class=" dark:text-gray-300">E-Waste</span>
</label> </label>
<label class="inline-flex items-center"> <label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Repair/Parts" <input type="radio" name="dtservice" value="Repair/Parts"
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500"> class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500">
<span class="ml-2 dark:text-gray-300">Repair/Parts</span> <span class=" dark:text-gray-300">Repair/Parts</span>
</label> </label>
<label class="inline-flex items-center"> <label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Other" <input type="radio" name="dtservice" value="Other"
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500"> class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500">
<span class="ml-2 dark:text-gray-300">Other</span> <span class=" dark:text-gray-300">Other</span>
</label> </label>
</div> </div>
</div> </div>
<!-- Notes field --> <!-- Notes field -->
<label for="dtnotes" class="dark:text-gray-300 block text-md font-medium text-gray-700">Notes: (optional)</label> <label for="dtnotes" class="dark:text-gray-300 block text-md font-medium text-gray-700">Notes: (optional)</label>
<textarea id="dtnotes" name="dtnotes" cols="35" rows="6" maxlength="500" style="resize: none;" <textarea id="dtnotes" name="dtnotes" cols="35" rows="6" maxlength="500" style="resize: none;"
class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 ml-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"></textarea> class="dark:border-gray-700 dark:bg-gray-700 dark:text-white 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"></textarea>
</div> </div>
<!-- Submit Button --> <!-- Submit Button -->
<div class="text-center"> <div class="text-center">
@ -168,3 +176,6 @@
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
</body> </body>
</html> </html>