Added auth
This commit is contained in:
@@ -7,19 +7,53 @@
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<!-- Login Page -->
|
||||
<div id="loginPage" class="login-page">
|
||||
<div class="login-container">
|
||||
<h1>🐶 MTAR Drug Inventory System 🐶</h1>
|
||||
</header>
|
||||
<form id="loginForm" class="login-form">
|
||||
<h2>Login</h2>
|
||||
<div class="form-group">
|
||||
<label for="loginUsername">Username</label>
|
||||
<input type="text" id="loginUsername" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="loginPassword">Password</label>
|
||||
<input type="password" id="loginPassword" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Login</button>
|
||||
<p class="login-info">Contact an administrator to create an account</p>
|
||||
</form>
|
||||
<div id="loginError" class="error-message" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<!-- Drug List Section -->
|
||||
<section id="listSection" class="list-section">
|
||||
<div class="section-header">
|
||||
<h2>Current Inventory</h2>
|
||||
<div class="header-actions">
|
||||
<button id="addDrugBtn" class="btn btn-primary btn-small">➕ Add Drug</button>
|
||||
<!-- Main App (hidden until logged in) -->
|
||||
<div id="mainApp" class="main-app" style="display: none;">
|
||||
<div class="container">
|
||||
<header>
|
||||
<div class="header-top">
|
||||
<h1>🐶 MTAR Drug Inventory System 🐶</h1>
|
||||
<div class="user-menu">
|
||||
<span id="currentUser">User</span>
|
||||
<button id="userMenuBtn" class="btn btn-small">⋮</button>
|
||||
<div id="userDropdown" class="user-dropdown" style="display: none;">
|
||||
<button id="changePasswordBtn" class="dropdown-item">🔑 Change Password</button>
|
||||
<button id="adminBtn" class="dropdown-item" style="display: none;">👤 Admin</button>
|
||||
<button id="logoutBtn" class="dropdown-item">🚪 Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Drug List Section -->
|
||||
<section id="listSection" class="list-section">
|
||||
<div class="section-header">
|
||||
<h2>Current Inventory</h2>
|
||||
<div class="header-actions">
|
||||
<button id="addDrugBtn" class="btn btn-primary btn-small">➕ Add Drug</button>
|
||||
</div>
|
||||
<div class="filters">
|
||||
<button id="showAllBtn" class="filter-btn active">All</button>
|
||||
<button id="showLowStockBtn" class="filter-btn">Low Stock Only</button>
|
||||
@@ -40,219 +74,307 @@
|
||||
<footer>
|
||||
<p>Many Tears Confidential</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Edit Drug Modal -->
|
||||
<div id="editModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Edit Drug</h2>
|
||||
<form id="editForm">
|
||||
<input type="hidden" id="editDrugId">
|
||||
<div class="form-group">
|
||||
<label for="editDrugName">Drug Name *</label>
|
||||
<input type="text" id="editDrugName" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="editDrugDescription">Description</label>
|
||||
<input type="text" id="editDrugDescription">
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save Changes</button>
|
||||
<button type="button" class="btn btn-secondary" id="cancelEditBtn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Drug Modal -->
|
||||
<div id="addModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Add New Drug</h2>
|
||||
<form id="drugForm">
|
||||
<div class="form-group">
|
||||
<label for="drugName">Drug Name *</label>
|
||||
<input type="text" id="drugName" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="drugDescription">Description</label>
|
||||
<input type="text" id="drugDescription">
|
||||
</div>
|
||||
|
||||
<hr style="margin: 20px 0; border: none; border-top: 1px solid #ddd;">
|
||||
<h3 style="margin-top: 0;">Initial Variant (Optional)</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="initialVariantStrength">Strength</label>
|
||||
<input type="text" id="initialVariantStrength" placeholder="e.g., 10mg, 5.4mg">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="initialVariantQuantity">Quantity</label>
|
||||
<input type="number" id="initialVariantQuantity" placeholder="0" min="0" step="0.1">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="initialVariantUnit">Unit</label>
|
||||
<input type="text" id="initialVariantUnit" placeholder="e.g., tablets, capsules, vials" value="units">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="initialVariantThreshold">Low Stock Threshold</label>
|
||||
<input type="number" id="initialVariantThreshold" placeholder="0" min="0" step="0.1" value="10">
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Add Drug</button>
|
||||
<button type="button" class="btn btn-secondary" id="cancelAddBtn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dispense Drug Modal -->
|
||||
<div id="dispenseModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Dispense Drug</h2>
|
||||
<form id="dispenseForm" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="dispenseDrugSelect">Drug Variant *</label>
|
||||
<select id="dispenseDrugSelect">
|
||||
<option value="">-- Select a drug variant --</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dispenseQuantity">Quantity *</label>
|
||||
<input type="number" id="dispenseQuantity" step="0.1">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dispenseAnimal">Animal Name/ID</label>
|
||||
<input type="text" id="dispenseAnimal">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dispenseUser">Dispensed by *</label>
|
||||
<input type="text" id="dispenseUser">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dispenseNotes">Notes</label>
|
||||
<input type="text" id="dispenseNotes" placeholder="Optional">
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Dispense</button>
|
||||
<button type="button" class="btn btn-secondary" id="cancelDispenseBtn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Variant Modal -->
|
||||
<div id="addVariantModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Add Variant</h2>
|
||||
<form id="variantForm">
|
||||
<input type="hidden" id="variantDrugId">
|
||||
<div class="form-group">
|
||||
<label for="variantStrength">Strength *</label>
|
||||
<input type="text" id="variantStrength" placeholder="e.g., 5.4mg, 10.8mg, 100ml" required>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<!-- Edit Drug Modal -->
|
||||
<div id="editModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Edit Drug</h2>
|
||||
<form id="editForm">
|
||||
<input type="hidden" id="editDrugId">
|
||||
<div class="form-group">
|
||||
<label for="variantQuantity">Quantity *</label>
|
||||
<input type="number" id="variantQuantity" step="0.1" required>
|
||||
<label for="editDrugName">Drug Name *</label>
|
||||
<input type="text" id="editDrugName" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="variantUnit">Unit *</label>
|
||||
<select id="variantUnit">
|
||||
<option value="tablets">Tablets</option>
|
||||
<option value="bottles">Bottles</option>
|
||||
<option value="ml">ml</option>
|
||||
<option value="vials">Vials</option>
|
||||
<option value="units">Units</option>
|
||||
<option value="packets">Packets</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="variantThreshold">Low Stock Threshold *</label>
|
||||
<input type="number" id="variantThreshold" step="0.1" value="10" required>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Add Variant</button>
|
||||
<button type="button" class="btn btn-secondary" id="cancelVariantBtn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Variant Modal -->
|
||||
<div id="editVariantModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Edit Variant</h2>
|
||||
<form id="editVariantForm">
|
||||
<input type="hidden" id="editVariantId">
|
||||
<div class="form-group">
|
||||
<label for="editVariantStrength">Strength *</label>
|
||||
<input type="text" id="editVariantStrength" required>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="editVariantQuantity">Quantity *</label>
|
||||
<input type="number" id="editVariantQuantity" step="0.1" required>
|
||||
<label for="editDrugDescription">Description</label>
|
||||
<input type="text" id="editDrugDescription">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="editVariantUnit">Unit *</label>
|
||||
<select id="editVariantUnit">
|
||||
<option value="tablets">Tablets</option>
|
||||
<option value="bottles">Bottles</option>
|
||||
<option value="ml">ml</option>
|
||||
<option value="vials">Vials</option>
|
||||
<option value="units">Units</option>
|
||||
<option value="packets">Packets</option>
|
||||
</select>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save Changes</button>
|
||||
<button type="button" class="btn btn-secondary" id="cancelEditBtn">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="editVariantThreshold">Low Stock Threshold *</label>
|
||||
<input type="number" id="editVariantThreshold" step="0.1" required>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save Changes</button>
|
||||
<button type="button" class="btn btn-secondary" id="cancelEditVariantBtn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dispensing History Modal -->
|
||||
<div id="historyModal" class="modal">
|
||||
<div class="modal-content modal-large">
|
||||
<span class="close">×</span>
|
||||
<h2>Dispensing History - <span id="historyDrugName"></span></h2>
|
||||
<div id="historyContent" class="history-content">
|
||||
<p class="loading">Loading history...</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-secondary" id="closeHistoryBtn">Close</button>
|
||||
</div>
|
||||
|
||||
<!-- Add Drug Modal -->
|
||||
<div id="addModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Add New Drug</h2>
|
||||
<form id="drugForm">
|
||||
<div class="form-group">
|
||||
<label for="drugName">Drug Name *</label>
|
||||
<input type="text" id="drugName" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="drugDescription">Description</label>
|
||||
<input type="text" id="drugDescription">
|
||||
</div>
|
||||
|
||||
<hr style="margin: 20px 0; border: none; border-top: 1px solid #ddd;">
|
||||
<h3 style="margin-top: 0;">Initial Variant (Optional)</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="initialVariantStrength">Strength</label>
|
||||
<input type="text" id="initialVariantStrength" placeholder="e.g., 10mg, 5.4mg">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="initialVariantQuantity">Quantity</label>
|
||||
<input type="number" id="initialVariantQuantity" placeholder="0" min="0" step="0.1">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="initialVariantUnit">Unit</label>
|
||||
<select id="initialVariantUnit">
|
||||
<option value="tablets">Tablets</option>
|
||||
<option value="bottles">Bottles</option>
|
||||
<option value="boxes">Boxes</option>
|
||||
<option value="vials">Vials</option>
|
||||
<option value="units">Units</option>
|
||||
<option value="packets">Packets</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="initialVariantThreshold">Low Stock Threshold</label>
|
||||
<input type="number" id="initialVariantThreshold" placeholder="0" min="0" step="0.1" value="10">
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Add Drug</button>
|
||||
<button type="button" class="btn btn-secondary" id="cancelAddBtn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dispense Drug Modal -->
|
||||
<div id="dispenseModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Dispense Drug</h2>
|
||||
<form id="dispenseForm" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="dispenseDrugSelect">Drug Variant *</label>
|
||||
<select id="dispenseDrugSelect">
|
||||
<option value="">-- Select a drug variant --</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dispenseQuantity">Quantity *</label>
|
||||
<input type="number" id="dispenseQuantity" step="0.1">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dispenseAnimal">Animal Name/ID</label>
|
||||
<input type="text" id="dispenseAnimal">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dispenseUser">Dispensed by *</label>
|
||||
<input type="text" id="dispenseUser">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dispenseNotes">Notes</label>
|
||||
<input type="text" id="dispenseNotes" placeholder="Optional">
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Dispense</button>
|
||||
<button type="button" class="btn btn-secondary" id="cancelDispenseBtn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Variant Modal -->
|
||||
<div id="addVariantModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Add Variant</h2>
|
||||
<form id="variantForm">
|
||||
<input type="hidden" id="variantDrugId">
|
||||
<div class="form-group">
|
||||
<label for="variantStrength">Strength *</label>
|
||||
<input type="text" id="variantStrength" placeholder="e.g., 5.4mg, 10.8mg, 100ml" required>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="variantQuantity">Quantity *</label>
|
||||
<input type="number" id="variantQuantity" step="0.1" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="variantUnit">Unit *</label>
|
||||
<select id="variantUnit">
|
||||
<option value="tablets">Tablets</option>
|
||||
<option value="bottles">Bottles</option>
|
||||
<option value="boxes">boxes</option>
|
||||
<option value="vials">Vials</option>
|
||||
<option value="units">Units</option>
|
||||
<option value="packets">Packets</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="variantThreshold">Low Stock Threshold *</label>
|
||||
<input type="number" id="variantThreshold" step="0.1" value="10" required>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Add Variant</button>
|
||||
<button type="button" class="btn btn-secondary" id="cancelVariantBtn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Variant Modal -->
|
||||
<div id="editVariantModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Edit Variant</h2>
|
||||
<form id="editVariantForm">
|
||||
<input type="hidden" id="editVariantId">
|
||||
<div class="form-group">
|
||||
<label for="editVariantStrength">Strength *</label>
|
||||
<input type="text" id="editVariantStrength" required>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="editVariantQuantity">Quantity *</label>
|
||||
<input type="number" id="editVariantQuantity" step="0.1" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="editVariantUnit">Unit *</label>
|
||||
<select id="editVariantUnit">
|
||||
<option value="tablets">Tablets</option>
|
||||
<option value="bottles">Bottles</option>
|
||||
<option value="boxes">Boxes</option>
|
||||
<option value="vials">Vials</option>
|
||||
<option value="units">Units</option>
|
||||
<option value="packets">Packets</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="editVariantThreshold">Low Stock Threshold *</label>
|
||||
<input type="number" id="editVariantThreshold" step="0.1" required>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save Changes</button>
|
||||
<button type="button" class="btn btn-secondary" id="cancelEditVariantBtn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dispensing History Modal -->
|
||||
<div id="historyModal" class="modal">
|
||||
<div class="modal-content modal-large">
|
||||
<span class="close">×</span>
|
||||
<h2>Dispensing History - <span id="historyDrugName"></span></h2>
|
||||
<div id="historyContent" class="history-content">
|
||||
<p class="loading">Loading history...</p>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-secondary" id="closeHistoryBtn">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Change Password Modal -->
|
||||
<div id="changePasswordModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Change Password</h2>
|
||||
<form id="changePasswordForm">
|
||||
<div class="form-group">
|
||||
<label for="currentPassword">Current Password *</label>
|
||||
<input type="password" id="currentPassword" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="newPassword">New Password *</label>
|
||||
<input type="password" id="newPassword" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="confirmNewPassword">Confirm New Password *</label>
|
||||
<input type="password" id="confirmNewPassword" required>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Change Password</button>
|
||||
<button type="button" class="btn btn-secondary" id="cancelChangePasswordBtn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Admin Change User Password Modal -->
|
||||
<div id="adminChangePasswordModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Change User Password</h2>
|
||||
<form id="adminChangePasswordForm">
|
||||
<input type="hidden" id="adminChangePasswordUserId">
|
||||
<div class="form-group">
|
||||
<label for="adminChangePasswordUsername">Username</label>
|
||||
<input type="text" id="adminChangePasswordUsername" disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="adminChangePasswordNewPassword">New Password *</label>
|
||||
<input type="password" id="adminChangePasswordNewPassword" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="adminChangePasswordConfirm">Confirm Password *</label>
|
||||
<input type="password" id="adminChangePasswordConfirm" required>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Set Password</button>
|
||||
<button type="button" class="btn btn-secondary" id="cancelAdminChangePasswordBtn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Management Modal -->
|
||||
<div id="userManagementModal" class="modal">
|
||||
<div class="modal-content modal-large">
|
||||
<span class="close">×</span>
|
||||
<h2>User Management</h2>
|
||||
<div class="user-management-content">
|
||||
<div class="form-group">
|
||||
<h3>Create New User</h3>
|
||||
<form id="createUserForm">
|
||||
<div class="form-row">
|
||||
<input type="text" id="newUsername" placeholder="Username" required>
|
||||
<input type="password" id="newUserPassword" placeholder="Password" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-small">Create User</button>
|
||||
</form>
|
||||
</div>
|
||||
<div id="usersList" class="users-list">
|
||||
<h3>Users</h3>
|
||||
<p class="loading">Loading users...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-secondary" id="closeUserManagementBtn">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user