Added a password gen feature and updated the ui a bit
This commit is contained in:
parent
062aadb1ab
commit
82c1aeb9ec
@ -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();
|
||||||
|
|||||||
@ -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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user