mirror of
https://github.com/sassanix/Warracker.git
synced 2026-01-08 06:29:36 -06:00
47a42fb388
This major update introduces several significant new features, critical bug fixes, and key enhancements across the application, focusing on user customization, administration, and system stability. New Features Currency Position Control: Allows users to choose whether the currency symbol appears on the left or right of numbers. This setting is applied universally across the app, including warranty cards and forms, and is saved per-user. Super-Admin (Owner) Role: Implements an immutable Owner role for the primary administrator, who cannot be deleted or demoted. A secure ownership transfer process has been added to the admin settings. OIDC-Only Login Mode: Adds a site-wide setting to enforce OIDC-only authentication, which hides the traditional username/password login form to streamline SSO environments. Product Age Tracking & Sorting: Displays the age of a product (e.g., "2 years, 3 months") on warranty cards and adds a new "Sort by Age" option to organize items by their purchase date. Global View Photo Access: Permits users to view product photos on warranties shared in global view, while ensuring other sensitive documents like invoices remain private to the owner. Persistent View Scope: The application now remembers the user's last selected view (Global or Personal) and automatically loads the appropriate data on page refresh for a seamless experience. Export Debug Tools: Introduces a comprehensive debugging system, including a new debug page and API endpoint, to help administrators troubleshoot and verify warranty exports. Key Enhancements About Page Redesign: A complete visual overhaul of the "About" page with a modern, card-based layout, prominent community links, and improved branding. Flexible Apprise Notifications: Admins can now configure Apprise notifications to be a single global summary or sent as per-user messages. Additionally, the scope can be set to include warranties from all users or only the admin's warranties. Larger Product Photo Thumbnails: Increased the size of product photo thumbnails in all views (grid, list, and table) for better product visibility. Smart Currency Default: The "Add Warranty" form now intelligently defaults to the user's preferred currency setting, rather than always using USD. Bug Fixes Critical OIDC & Proxy Fixes: Resolved two major OIDC issues: a RecursionError with gevent workers and incorrect http:// callback URLs when behind an HTTPS reverse proxy, enabling reliable OIDC login. Critical User Preferences Persistence: Fixed a bug where user settings for currency symbol and date format were not being saved correctly to the database. Apprise & Notification Settings: Corrected an issue preventing user notification channel and Apprise timing settings from saving. The Apprise message format is now standardized, and the admin UI has been cleaned up. CSV Import Currency: Ensured that warranties imported via CSV correctly use the user's preferred currency instead of defaulting to USD. Maintenance & Refactoring Authentication System Refactoring: Migrated all authentication-related routes from app.py into a dedicated Flask Blueprint (auth_routes.py) to improve code organization and maintainability. Legacy Code Cleanup: Removed over 290 lines of orphaned and commented-out legacy OIDC code from the main application file.
957 lines
58 KiB
HTML
957 lines
58 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Authentication redirect script -->
|
||
<script src="auth-redirect.js" data-protected="true"></script>
|
||
|
||
<!-- Include authentication script first to handle login state immediately -->
|
||
<script src="include-auth-new.js"></script>
|
||
|
||
<!-- File utilities script for secure file handling -->
|
||
<script src="file-utils.js"></script>
|
||
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Warracker - Warranty Tracker</title>
|
||
<!-- Add standard favicon.ico link -->
|
||
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
|
||
<!-- Replace the old favicon link -->
|
||
<!-- <link rel="icon" type="image/png" href="img/favicon.png"> -->
|
||
<!-- Add new favicon links -->
|
||
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png?v=2">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png?v=2">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon-512x512.png">
|
||
<link rel="manifest" href="manifest.json">
|
||
<link rel="stylesheet" href="style.css?v=20250529005">
|
||
<script src="theme-loader.js"></script> <!-- Apply theme early -->
|
||
|
||
<!-- Font Awesome for icons -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<!-- Load header fix styles to ensure consistent header styling -->
|
||
<link rel="stylesheet" href="header-fix.css?v=20250529005">
|
||
<!-- Load fix for auth buttons -->
|
||
<script src="fix-auth-buttons-loader.js"></script>
|
||
<!-- Mobile Header specific styles -->
|
||
<link rel="stylesheet" href="mobile-header.css?v=20250529005">
|
||
|
||
<!-- Immediate authentication check script -->
|
||
<script>
|
||
// Check if user is logged in immediately to hide buttons
|
||
(function() {
|
||
if (localStorage.getItem('auth_token')) {
|
||
// Hide login and register buttons immediately
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
console.log('Inline script: User is logged in, hiding login/register buttons');
|
||
|
||
// Hide auth container
|
||
var authContainer = document.getElementById('authContainer');
|
||
if (authContainer) {
|
||
authContainer.style.display = 'none';
|
||
authContainer.style.visibility = 'hidden';
|
||
}
|
||
|
||
// Show user menu
|
||
var userMenu = document.getElementById('userMenu');
|
||
if (userMenu) {
|
||
userMenu.style.display = 'block';
|
||
userMenu.style.visibility = 'visible';
|
||
}
|
||
|
||
// Update user info if possible
|
||
try {
|
||
var userInfo = JSON.parse(localStorage.getItem('user_info'));
|
||
if (userInfo) {
|
||
var displayName = userInfo.first_name || userInfo.username || 'User';
|
||
var userDisplayName = document.getElementById('userDisplayName');
|
||
if (userDisplayName) {
|
||
userDisplayName.textContent = displayName;
|
||
}
|
||
|
||
var userName = document.getElementById('userName');
|
||
if (userName) {
|
||
userName.textContent = (userInfo.first_name || '') + ' ' + (userInfo.last_name || '');
|
||
if (!userName.textContent.trim()) userName.textContent = userInfo.username || 'User';
|
||
}
|
||
|
||
var userEmail = document.getElementById('userEmail');
|
||
if (userEmail && userInfo.email) {
|
||
userEmail.textContent = userInfo.email;
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.error('Error updating user info:', e);
|
||
}
|
||
}, { once: true });
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
<!-- Registration status check script -->
|
||
<script src="registration-status.js"></script>
|
||
</head>
|
||
<body>
|
||
<!-- Header -->
|
||
<header>
|
||
<div class="container">
|
||
<div class="app-title">
|
||
<i class="fas fa-shield-alt"></i>
|
||
<h1>Warracker</h1>
|
||
</div>
|
||
<div class="nav-links">
|
||
<a href="index.html" class="nav-link active">
|
||
<i class="fas fa-home"></i> Home
|
||
</a>
|
||
<a href="status.html" class="nav-link">
|
||
<i class="fas fa-chart-pie"></i> Status
|
||
</a>
|
||
</div>
|
||
<!-- Group for right-aligned elements -->
|
||
<div class="header-right-group">
|
||
<div id="authContainer" class="auth-buttons">
|
||
<a href="login.html" class="auth-btn login-btn">
|
||
<i class="fas fa-sign-in-alt"></i> Login
|
||
</a>
|
||
<a href="register.html" class="auth-btn register-btn">
|
||
<i class="fas fa-user-plus"></i> Register
|
||
</a>
|
||
</div>
|
||
<div id="userMenu" class="user-menu" style="display: none;">
|
||
<button id="userMenuBtn" class="user-btn">
|
||
<i class="fas fa-user-circle"></i>
|
||
<span id="userDisplayName">User</span>
|
||
</button>
|
||
<div id="userMenuDropdown" class="user-menu-dropdown">
|
||
<div class="user-info">
|
||
<div id="userName" class="user-name">User Name</div>
|
||
<div id="userEmail" class="user-email">user@example.com</div>
|
||
</div>
|
||
<div class="user-menu-item">
|
||
<a href="settings-new.html" style="color: inherit; text-decoration: none; display: block;">
|
||
<i class="fas fa-cog"></i> Settings
|
||
</a>
|
||
</div>
|
||
<div class="user-menu-item">
|
||
<i class="fas fa-info-circle"></i>
|
||
<a href="about.html" style="text-decoration: none; color: inherit;">About</a>
|
||
</div>
|
||
<div class="user-menu-item" id="logoutMenuItem">
|
||
<i class="fas fa-sign-out-alt"></i> Logout
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> <!-- End header-right-group -->
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Content -->
|
||
<div class="container">
|
||
<div class="main-content">
|
||
|
||
<!-- Warranties List Panel -->
|
||
<div class="warranties-panel">
|
||
<!-- Panel Header -->
|
||
<div class="panel-header">
|
||
<h2 id="warrantiesPanelTitle">Your Warranties</h2>
|
||
<!-- ADD BUTTON CONTAINER AND REFRESH BUTTON WRAPPER HERE -->
|
||
<div class="panel-header-actions">
|
||
<div class="add-warranty-button-container">
|
||
<button id="showAddWarrantyBtn" class="btn btn-primary btn-sm">
|
||
<i class="fas fa-plus"></i> Add New Warranty
|
||
</button>
|
||
</div>
|
||
<button id="refreshBtn" class="btn btn-secondary btn-sm" title="Refresh List">
|
||
<i class="fas fa-sync-alt"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- Filters and Search -->
|
||
<div class="filter-controls">
|
||
<div class="search-container" style="display: flex; width: 100%; gap: 8px; align-items: center; flex-wrap: nowrap;">
|
||
<!-- Make search box much longer, buttons only as wide as needed -->
|
||
<div class="search-box" style="flex: 2 1 400px; min-width: 200px; max-width: 1000px;">
|
||
<button id="searchBtn" class="search-btn" title="Search">
|
||
<i class="fas fa-search"></i>
|
||
</button>
|
||
<input type="text" id="searchWarranties" placeholder="Find by name, vendors, notes, tag, or serial number..." style="width: 100%; min-width: 200px;">
|
||
<button id="clearSearch" class="clear-search-btn" title="Clear search" style="display: none;">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div style="display: flex; gap: 8px; flex-wrap: nowrap; flex-shrink: 0; min-width: 0;">
|
||
<button id="exportBtn" class="export-btn" title="Export warranties" style="white-space: nowrap;">
|
||
<i class="fas fa-file-export"></i> Export
|
||
</button>
|
||
<button id="importBtn" class="import-btn" title="Import warranties from CSV" style="white-space: nowrap;">
|
||
<i class="fas fa-file-import"></i> Import
|
||
</button>
|
||
<button id="globalManageTagsBtn" class="export-btn" title="Manage all tags" style="white-space: nowrap;">
|
||
<i class="fas fa-tags"></i> Manage Tags
|
||
</button>
|
||
</div>
|
||
<input type="file" id="csvFileInput" accept=".csv" style="display: none;">
|
||
</div>
|
||
|
||
<div class="filter-options">
|
||
<div class="filter-group">
|
||
<label class="filter-label">Status</label>
|
||
<select id="statusFilter" class="filter-select">
|
||
<option value="all">All Status</option>
|
||
<option value="active">Active</option>
|
||
<option value="expiring">Expiring Soon</option>
|
||
<option value="expired">Expired</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label class="filter-label">Tag</label>
|
||
<select id="tagFilter" class="filter-select">
|
||
<option value="all">All Tags</option>
|
||
<!-- Tag options will be populated by JavaScript -->
|
||
</select>
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label class="filter-label">Vendor</label>
|
||
<select id="vendorFilter" class="filter-select">
|
||
<option value="all">All Vendors</option>
|
||
<!-- Vendor options will be populated by JavaScript -->
|
||
</select>
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label class="filter-label">Warranty Type</label>
|
||
<select id="warrantyTypeFilter" class="filter-select">
|
||
<option value="all">All Types</option>
|
||
<!-- Warranty type options will be populated by JavaScript -->
|
||
</select>
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label class="filter-label">Sort By</label>
|
||
<select id="sortBy" class="filter-select">
|
||
<option value="expiration">Expiration Date</option>
|
||
<option value="purchase">Purchase Date</option>
|
||
<option value="age">Age</option>
|
||
<option value="name">Product Name</option>
|
||
<option value="vendor">Vendor</option>
|
||
<option value="warranty_type">Warranty Type</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="view-switcher">
|
||
<label class="filter-label">View</label>
|
||
<div class="view-buttons">
|
||
<button id="gridViewBtn" class="view-btn active" title="Grid View">
|
||
<i class="fas fa-th-large"></i>
|
||
</button>
|
||
<button id="listViewBtn" class="view-btn" title="List View">
|
||
<i class="fas fa-list"></i>
|
||
</button>
|
||
<button id="tableViewBtn" class="view-btn" title="Table View">
|
||
<i class="fas fa-table"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scope View Toggle -->
|
||
<div class="admin-view-switcher" id="adminViewSwitcher" style="display: none;">
|
||
<label class="filter-label">Scope</label>
|
||
<div class="view-buttons">
|
||
<button id="personalViewBtn" class="view-btn active" title="View your warranties only">
|
||
<i class="fas fa-user"></i>
|
||
</button>
|
||
<button id="globalViewBtn" class="view-btn" title="View all users' warranties (read-only for others)">
|
||
<i class="fas fa-globe"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="warrantiesList" class="warranties-list grid-view">
|
||
<!-- Table headers for table view -->
|
||
<div class="table-view-header">
|
||
<tr>
|
||
<th>Product</th>
|
||
<th>Purchase Date</th>
|
||
<th>Expiration</th>
|
||
<th>Status</th>
|
||
<th>Actions</th>
|
||
</tr>
|
||
</div>
|
||
<!-- Warranties will be loaded here -->
|
||
<div class="empty-state" style="display: none;">
|
||
<i class="fas fa-box-open"></i>
|
||
<h3>No warranties yet</h3>
|
||
<p>Add your first warranty to get started</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MOVE the Form Panel content below -->
|
||
<!-- Original <div class="form-panel"> should be removed from here -->
|
||
<div id="addWarrantyModal" class="modal-backdrop">
|
||
<div class="modal" style="max-width: 700px;"> <!-- Adjusted max-width for the wizard -->
|
||
<div class="modal-header">
|
||
<h3 class="modal-title">Add New Warranty</h3>
|
||
<button class="close-btn" data-dismiss="modal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<!-- MOVE the entire original .form-panel content HERE -->
|
||
<div class="form-panel" style="box-shadow: none; padding: 0; background: none;">
|
||
<!-- Form Tabs -->
|
||
<div class="form-tabs" data-step="0">
|
||
<div class="form-tab active" data-tab="product-info" id="productInfoTabBtn">
|
||
<i class="fas fa-box"></i> Product
|
||
</div>
|
||
<div class="form-tab" data-tab="warranty-details" id="warrantyDetailsTabBtn">
|
||
<i class="fas fa-shield-alt"></i> Warranty
|
||
</div>
|
||
<div class="form-tab" data-tab="documents" id="documentsTabBtn">
|
||
<i class="fas fa-file-alt"></i> Documents
|
||
</div>
|
||
<div class="form-tab" data-tab="tags" id="tagsTabBtn">
|
||
<i class="fas fa-tags"></i> Tags
|
||
</div>
|
||
<div class="form-tab" data-tab="summary" id="summaryTabBtn">
|
||
<i class="fas fa-check-circle"></i> Summary
|
||
</div>
|
||
</div>
|
||
<!-- Warranty Form -->
|
||
<form id="warrantyForm">
|
||
<!-- Product Information Tab -->
|
||
<div class="tab-content active" id="product-info">
|
||
<div class="form-group">
|
||
<label for="productName">Product Name</label>
|
||
<input type="text" id="productName" name="product_name" class="form-control" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="productUrl">Product URL (Optional)</label>
|
||
<input type="text" id="productUrl" name="product_url" class="form-control" placeholder="https://example.com/product">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Serial Numbers</label>
|
||
<div id="serialNumbersContainer">
|
||
<!-- Serial number inputs will be added dynamically -->
|
||
<input type="text" name="serial_numbers[]" class="form-control" style="margin-bottom: 8px;" placeholder="Enter serial number">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="vendor">Vendor (Optional)</label>
|
||
<input type="text" id="vendor" name="vendor" class="form-control" placeholder="e.g. Amazon, Best Buy, etc.">
|
||
</div>
|
||
</div>
|
||
<!-- Warranty Details Tab -->
|
||
<div class="tab-content" id="warranty-details">
|
||
<div class="form-group">
|
||
<label for="purchaseDate">Purchase Date</label>
|
||
<input type="date" id="purchaseDate" name="purchase_date" class="form-control" required>
|
||
</div>
|
||
|
||
<!-- Add Lifetime Checkbox -->
|
||
<div class="form-group">
|
||
<label class="lifetime-label">
|
||
<input type="checkbox" id="isLifetime" name="is_lifetime" value="true">
|
||
Lifetime Warranty
|
||
</label>
|
||
</div>
|
||
<!-- End Lifetime Checkbox -->
|
||
|
||
<!-- Warranty Entry Method Selection -->
|
||
<div class="form-group" id="warrantyEntryMethod">
|
||
<label>Warranty Entry Method</label>
|
||
<div class="warranty-method-options">
|
||
<label class="radio-option">
|
||
<input type="radio" id="durationMethod" name="warranty_method" value="duration" checked>
|
||
<span>Warranty Duration</span>
|
||
</label>
|
||
<label class="radio-option">
|
||
<input type="radio" id="exactDateMethod" name="warranty_method" value="exact_date">
|
||
<span>Exact Expiration Date</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="warrantyDurationFields">
|
||
<div class="form-group">
|
||
<label for="warrantyDurationYears">Warranty Period</label>
|
||
<div class="duration-inputs">
|
||
<div>
|
||
<input type="number" id="warrantyDurationYears" name="warranty_duration_years" class="form-control" min="0" max="100" placeholder="Years">
|
||
<small>Years</small>
|
||
</div>
|
||
<div>
|
||
<input type="number" id="warrantyDurationMonths" name="warranty_duration_months" class="form-control" min="0" max="11" placeholder="Months">
|
||
<small>Months</small>
|
||
</div>
|
||
<div>
|
||
<input type="number" id="warrantyDurationDays" name="warranty_duration_days" class="form-control" min="0" max="365" placeholder="Days">
|
||
<small>Days</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="exactExpirationField" style="display: none;">
|
||
<div class="form-group">
|
||
<label for="exactExpirationDate">Expiration Date</label>
|
||
<input type="date" id="exactExpirationDate" name="exact_expiration_date" class="form-control">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="warrantyType">Warranty Type (Optional)</label>
|
||
<select id="warrantyType" name="warranty_type" class="form-control">
|
||
<option value="">Select warranty type...</option>
|
||
<option value="Standard">Standard</option>
|
||
<option value="Extended">Extended</option>
|
||
<option value="Manufacturer">Manufacturer</option>
|
||
<option value="Third Party">Third Party</option>
|
||
<option value="Store">Store</option>
|
||
<option value="Premium">Premium</option>
|
||
<option value="Limited">Limited</option>
|
||
<option value="Full">Full</option>
|
||
<option value="Parts Only">Parts Only</option>
|
||
<option value="Labor Only">Labor Only</option>
|
||
<option value="International">International</option>
|
||
<option value="Accidental Damage">Accidental Damage</option>
|
||
<option value="other">Other (Custom)</option>
|
||
</select>
|
||
<input type="text" id="warrantyTypeCustom" name="warranty_type_custom" class="form-control" style="display: none; margin-top: 8px;" placeholder="Enter custom warranty type">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="currency">Currency</label>
|
||
<select id="currency" name="currency" class="form-control">
|
||
<option value="USD">USD - US Dollar ($)</option>
|
||
<!-- Currency options will be populated by JavaScript -->
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="purchasePrice">Purchase Price (Optional)</label>
|
||
<div class="price-input-wrapper" id="addPriceInputWrapper">
|
||
<span class="currency-symbol" id="addCurrencySymbol">$</span>
|
||
<input type="number" id="purchasePrice" name="purchase_price" class="form-control" min="0" step="0.01" placeholder="0.00">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="notes">Notes (Optional)</label>
|
||
<textarea id="notes" name="notes" class="form-control" rows="3" placeholder="Add any notes about this warranty..."></textarea>
|
||
</div>
|
||
</div>
|
||
<!-- Documents Tab -->
|
||
<div class="tab-content" id="documents">
|
||
<div class="form-group">
|
||
<label>Product Photo (Optional)</label>
|
||
<div class="file-input-wrapper">
|
||
<label for="productPhoto" class="file-input-label">
|
||
<i class="fas fa-camera"></i> Choose Photo
|
||
</label>
|
||
<input type="file" id="productPhoto" name="product_photo" class="file-input" accept=".png,.jpg,.jpeg,.webp">
|
||
</div>
|
||
<div id="productPhotoFileName" class="file-name"></div>
|
||
<div id="productPhotoPreview" class="photo-preview" style="display: none;">
|
||
<img id="productPhotoImg" src="" alt="Product Photo Preview" style="max-width: 200px; max-height: 200px; border-radius: 8px; margin-top: 10px;">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Invoice/Receipt</label>
|
||
<div class="file-input-wrapper">
|
||
<label for="invoice" class="file-input-label">
|
||
<i class="fas fa-upload"></i> Choose File
|
||
</label>
|
||
<input type="file" id="invoice" name="invoice" class="file-input" accept=".pdf,.png,.jpg,.jpeg">
|
||
</div>
|
||
<div id="fileName" class="file-name"></div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Product Manual (Optional)</label>
|
||
<div class="file-input-wrapper">
|
||
<label for="manual" class="file-input-label">
|
||
<i class="fas fa-upload"></i> Choose File
|
||
</label>
|
||
<input type="file" id="manual" name="manual" class="file-input" accept=".pdf,.png,.jpg,.jpeg">
|
||
</div>
|
||
<div id="manualFileName" class="file-name"></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Files (ZIP/RAR, Optional)</label>
|
||
<div class="file-input-wrapper">
|
||
<label for="otherDocument" class="file-input-label">
|
||
<i class="fas fa-upload"></i> Choose File
|
||
</label>
|
||
<input type="file" id="otherDocument" name="other_document" class="file-input" accept=".zip,.rar">
|
||
</div>
|
||
<div id="otherDocumentFileName" class="file-name"></div>
|
||
</div>
|
||
</div>
|
||
<!-- Tags Tab -->
|
||
<div class="tab-content" id="tags">
|
||
<div class="form-group">
|
||
<label>Add Tags</label>
|
||
<p class="text-muted">Tags help you organize and filter your warranties</p>
|
||
|
||
<div class="tags-container">
|
||
<div class="selected-tags" id="selectedTags">
|
||
<!-- Selected tags will be displayed here -->
|
||
</div>
|
||
|
||
<div class="tags-dropdown">
|
||
<input type="text" id="tagSearch" class="form-control" placeholder="Search or add new tag...">
|
||
<div class="tags-list" id="tagsList">
|
||
<!-- Tag options will be populated by JavaScript -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-10">
|
||
<button type="button" id="manageTagsBtn" class="btn btn-secondary btn-sm">
|
||
<i class="fas fa-cog"></i> Manage Tags
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Summary Tab -->
|
||
<div class="tab-content" id="summary">
|
||
<div class="summary-container">
|
||
<div class="summary-section">
|
||
<h4><i class="fas fa-box"></i> Product Information</h4>
|
||
<div class="summary-item">
|
||
<span class="summary-label">Product Name:</span>
|
||
<span id="summary-product-name" class="summary-value">-</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span class="summary-label">Product URL:</span>
|
||
<span id="summary-product-url" class="summary-value">-</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span class="summary-label">Serial Numbers:</span>
|
||
<span id="summary-serial-numbers" class="summary-value">-</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span class="summary-label">Vendor:</span>
|
||
<span id="summary-vendor" class="summary-value">-</span>
|
||
</div>
|
||
</div>
|
||
<div class="summary-section">
|
||
<h4><i class="fas fa-shield-alt"></i> Warranty Details</h4>
|
||
<div class="summary-item">
|
||
<span class="summary-label">Purchase Date:</span>
|
||
<span id="summary-purchase-date" class="summary-value">-</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span class="summary-label">Warranty Period:</span>
|
||
<span id="summary-warranty-duration" class="summary-value">-</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span class="summary-label">Warranty Type:</span>
|
||
<span id="summary-warranty-type" class="summary-value">-</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span class="summary-label">Purchase Price:</span>
|
||
<span id="summary-purchase-price" class="summary-value">-</span>
|
||
</div>
|
||
</div>
|
||
<div class="summary-section">
|
||
<h4><i class="fas fa-file-alt"></i> Documents</h4>
|
||
<div class="summary-item">
|
||
<span class="summary-label">Product Photo:</span>
|
||
<span id="summary-product-photo" class="summary-value">-</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span class="summary-label">Invoice/Receipt:</span>
|
||
<span id="summary-invoice" class="summary-value">-</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span class="summary-label">Product Manual:</span>
|
||
<span id="summary-manual" class="summary-value">-</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span class="summary-label">Files:</span>
|
||
<span id="summary-other-document" class="summary-value">-</span>
|
||
</div>
|
||
</div>
|
||
<div class="summary-section">
|
||
<h4><i class="fas fa-tags"></i> Tags</h4>
|
||
<div class="summary-item">
|
||
<span class="summary-label">Selected Tags:</span>
|
||
<div id="summary-tags" class="summary-value">-</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<button type="submit" class="btn btn-primary" id="submitWarrantyBtn">Add Warranty</button>
|
||
</div>
|
||
</div>
|
||
<!-- Tab Navigation -->
|
||
<div class="tab-navigation">
|
||
<button type="button" class="btn btn-secondary prev-tab" id="prevTabBtn">
|
||
<i class="fas fa-arrow-left"></i> Previous
|
||
</button>
|
||
<button type="button" class="btn btn-primary next-tab" id="nextTabBtn">
|
||
Next <i class="fas fa-arrow-right"></i>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div> <!-- End form-panel -->
|
||
</div> <!-- End modal-body -->
|
||
<!-- Optional: Add a modal footer if you want separate Cancel/Submit buttons -->
|
||
<!-- <div class="modal-footer">
|
||
<button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||
</div> -->
|
||
</div> <!-- End modal -->
|
||
</div> <!-- End addWarrantyModal -->
|
||
</div> <!-- End main-content -->
|
||
</div> <!-- End container -->
|
||
|
||
<!-- Edit Warranty Modal -->
|
||
<div id="editModal" class="modal-backdrop">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h3 class="modal-title">Edit Warranty</h3>
|
||
<button class="close-btn" data-dismiss="modal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<!-- Tab Navigation -->
|
||
<div class="edit-tabs-nav">
|
||
<button type="button" class="edit-tab-btn active" data-tab="edit-product-info">
|
||
<i class="fas fa-box"></i> Product
|
||
</button>
|
||
<button type="button" class="edit-tab-btn" data-tab="edit-warranty-details">
|
||
<i class="fas fa-shield-alt"></i> Warranty
|
||
</button>
|
||
<button type="button" class="edit-tab-btn" data-tab="edit-documents">
|
||
<i class="fas fa-file-alt"></i> Documents
|
||
</button>
|
||
<button type="button" class="edit-tab-btn" data-tab="edit-tags">
|
||
<i class="fas fa-tags"></i> Tags
|
||
</button>
|
||
</div>
|
||
|
||
<form id="editWarrantyForm">
|
||
<input type="hidden" id="editWarrantyId">
|
||
|
||
<!-- Product Info Tab -->
|
||
<div class="edit-tab-content active" id="edit-product-info">
|
||
<div class="form-group">
|
||
<label for="editProductName">Product Name</label>
|
||
<input type="text" id="editProductName" name="product_name" class="form-control" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="editProductUrl">Product URL (Optional)</label>
|
||
<input type="text" id="editProductUrl" name="product_url" class="form-control" placeholder="https://example.com/product">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Serial Numbers</label>
|
||
<div id="editSerialNumbersContainer">
|
||
<!-- Serial number inputs will be added dynamically -->
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editVendor">Vendor (Optional)</label>
|
||
<input type="text" id="editVendor" name="vendor" class="form-control" placeholder="e.g. Amazon, Best Buy, etc.">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Warranty Details Tab -->
|
||
<div class="edit-tab-content" id="edit-warranty-details">
|
||
<div class="form-group">
|
||
<label for="editPurchaseDate">Purchase Date</label>
|
||
<input type="date" id="editPurchaseDate" name="purchase_date" class="form-control" required>
|
||
</div>
|
||
|
||
<!-- Add Lifetime Checkbox -->
|
||
<div class="form-group">
|
||
<label class="lifetime-label">
|
||
<input type="checkbox" id="editIsLifetime" name="is_lifetime" value="true">
|
||
Lifetime Warranty
|
||
</label>
|
||
</div>
|
||
<!-- End Lifetime Checkbox -->
|
||
|
||
<!-- Warranty Entry Method Selection -->
|
||
<div class="form-group" id="editWarrantyEntryMethod">
|
||
<label>Warranty Entry Method</label>
|
||
<div class="warranty-method-options">
|
||
<label class="radio-option">
|
||
<input type="radio" id="editDurationMethod" name="edit_warranty_method" value="duration" checked>
|
||
<span>Warranty Duration</span>
|
||
</label>
|
||
<label class="radio-option">
|
||
<input type="radio" id="editExactDateMethod" name="edit_warranty_method" value="exact_date">
|
||
<span>Exact Expiration Date</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="editWarrantyDurationFields">
|
||
<div class="form-group">
|
||
<label for="editWarrantyDurationYears">Warranty Period</label>
|
||
<div class="duration-inputs">
|
||
<div>
|
||
<input type="number" id="editWarrantyDurationYears" name="warranty_duration_years" class="form-control" min="0" max="100" placeholder="Years">
|
||
<small>Years</small>
|
||
</div>
|
||
<div>
|
||
<input type="number" id="editWarrantyDurationMonths" name="warranty_duration_months" class="form-control" min="0" max="11" placeholder="Months">
|
||
<small>Months</small>
|
||
</div>
|
||
<div>
|
||
<input type="number" id="editWarrantyDurationDays" name="warranty_duration_days" class="form-control" min="0" max="365" placeholder="Days">
|
||
<small>Days</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="editExactExpirationField" style="display: none;">
|
||
<div class="form-group">
|
||
<label for="editExactExpirationDate">Expiration Date</label>
|
||
<input type="date" id="editExactExpirationDate" name="exact_expiration_date" class="form-control">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="editWarrantyType">Warranty Type (Optional)</label>
|
||
<select id="editWarrantyType" name="warranty_type" class="form-control">
|
||
<option value="">Select warranty type...</option>
|
||
<option value="Standard">Standard</option>
|
||
<option value="Extended">Extended</option>
|
||
<option value="Manufacturer">Manufacturer</option>
|
||
<option value="Third Party">Third Party</option>
|
||
<option value="Store">Store</option>
|
||
<option value="Premium">Premium</option>
|
||
<option value="Limited">Limited</option>
|
||
<option value="Full">Full</option>
|
||
<option value="Parts Only">Parts Only</option>
|
||
<option value="Labor Only">Labor Only</option>
|
||
<option value="International">International</option>
|
||
<option value="Accidental Damage">Accidental Damage</option>
|
||
<option value="other">Other (Custom)</option>
|
||
</select>
|
||
<input type="text" id="editWarrantyTypeCustom" name="warranty_type_custom" class="form-control" style="display: none; margin-top: 8px;" placeholder="Enter custom warranty type">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editCurrency">Currency</label>
|
||
<select id="editCurrency" name="currency" class="form-control">
|
||
<option value="USD">USD - US Dollar ($)</option>
|
||
<!-- Currency options will be populated by JavaScript -->
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editPurchasePrice">Purchase Price (Optional)</label>
|
||
<div class="price-input-wrapper" id="editPriceInputWrapper">
|
||
<span class="currency-symbol" id="editCurrencySymbol">$</span>
|
||
<input type="number" id="editPurchasePrice" name="purchase_price" class="form-control" min="0" step="0.01" placeholder="0.00">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editNotes">Notes (Optional)</label>
|
||
<textarea id="editNotes" name="notes" class="form-control" rows="3" placeholder="Add any notes about this warranty..."></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Documents Tab -->
|
||
<div class="edit-tab-content" id="edit-documents">
|
||
<div class="form-group">
|
||
<label>Product Photo (Optional)</label>
|
||
<div class="file-input-wrapper">
|
||
<label for="editProductPhoto" class="file-input-label">
|
||
<i class="fas fa-camera"></i> Choose Photo
|
||
</label>
|
||
<input type="file" id="editProductPhoto" name="product_photo" class="file-input" accept=".png,.jpg,.jpeg,.webp">
|
||
</div>
|
||
<div id="editProductPhotoFileName" class="file-name"></div>
|
||
<div id="editProductPhotoPreview" class="photo-preview" style="display: none;">
|
||
<img id="editProductPhotoImg" src="" alt="Product Photo Preview" style="max-width: 200px; max-height: 200px; border-radius: 8px; margin-top: 10px;">
|
||
</div>
|
||
<div id="currentProductPhoto" class="mt-10"></div>
|
||
<button type="button" id="deleteProductPhotoBtn" class="btn btn-danger btn-sm mt-2" style="display:none;"><i class="fas fa-trash"></i> Delete Photo</button>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Invoice/Receipt</label>
|
||
<div class="file-input-wrapper">
|
||
<label for="editInvoice" class="file-input-label">
|
||
<i class="fas fa-upload"></i> Choose File
|
||
</label>
|
||
<input type="file" id="editInvoice" name="invoice" class="file-input" accept=".pdf,.png,.jpg,.jpeg">
|
||
</div>
|
||
<div id="editFileName" class="file-name"></div>
|
||
<div id="currentInvoice" class="mt-10"></div>
|
||
<button type="button" id="deleteInvoiceBtn" class="btn btn-danger btn-sm mt-2" style="display:none;"><i class="fas fa-trash"></i> Delete Invoice</button>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Product Manual (Optional)</label>
|
||
<div class="file-input-wrapper">
|
||
<label for="editManual" class="file-input-label">
|
||
<i class="fas fa-upload"></i> Choose File
|
||
</label>
|
||
<input type="file" id="editManual" name="manual" class="file-input" accept=".pdf,.png,.jpg,.jpeg">
|
||
</div>
|
||
<div id="editManualFileName" class="file-name"></div>
|
||
<div id="currentManual" class="mt-10"></div>
|
||
<button type="button" id="deleteManualBtn" class="btn btn-danger btn-sm mt-2" style="display:none;"><i class="fas fa-trash"></i> Delete Manual</button>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Files (ZIP/RAR, Optional)</label>
|
||
<div class="file-input-wrapper">
|
||
<label for="editOtherDocument" class="file-input-label">
|
||
<i class="fas fa-upload"></i> Choose File
|
||
</label>
|
||
<input type="file" id="editOtherDocument" name="other_document" class="file-input" accept=".zip,.rar">
|
||
</div>
|
||
<div id="editOtherDocumentFileName" class="file-name"></div>
|
||
<div id="currentOtherDocument" class="mt-10"></div>
|
||
<button type="button" id="deleteOtherDocumentBtn" class="btn btn-danger btn-sm mt-2" style="display:none;"><i class="fas fa-trash"></i> Delete Files</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tags Tab -->
|
||
<div class="edit-tab-content" id="edit-tags">
|
||
<div class="form-group">
|
||
<label>Add Tags</label>
|
||
<p class="text-muted">Tags help you organize and filter your warranties</p>
|
||
|
||
<div class="tags-container">
|
||
<div class="selected-tags" id="editSelectedTags">
|
||
<!-- Selected tags will be displayed here -->
|
||
</div>
|
||
|
||
<div class="tags-dropdown">
|
||
<input type="text" id="editTagSearch" class="form-control" placeholder="Search or add new tag...">
|
||
<div class="tags-list" id="editTagsList">
|
||
<!-- Tag options will be populated by JavaScript -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-10">
|
||
<button type="button" id="editManageTagsBtn" class="btn btn-secondary btn-sm">
|
||
<i class="fas fa-cog"></i> Manage Tags
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-danger" data-dismiss="modal">Cancel</button>
|
||
<button id="saveWarrantyBtn" class="btn btn-primary">Save Changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Confirm Delete Modal -->
|
||
<div id="deleteModal" class="modal-backdrop">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h3 class="modal-title">Confirm Delete</h3>
|
||
<button class="close-btn" data-dismiss="modal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>Are you sure you want to delete this warranty? This action cannot be undone.</p>
|
||
<p><strong>Product:</strong> <span id="deleteProductName"></span></p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||
<button id="confirmDeleteBtn" class="btn btn-danger">Delete</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tag Management Modal -->
|
||
<div id="tagManagementModal" class="modal-backdrop">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h3 class="modal-title">Manage Tags</h3>
|
||
<button class="close-btn" data-dismiss="modal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="newTagForm" class="tag-form">
|
||
<input type="text" id="newTagName" class="form-control" placeholder="New tag name" required>
|
||
<input type="color" id="newTagColor" value="#808080">
|
||
<button type="submit" class="btn btn-primary">Add Tag</button>
|
||
</form>
|
||
|
||
<h4 class="mt-20">Existing Tags</h4>
|
||
<div id="existingTags" class="existing-tags">
|
||
<!-- Tags will be populated here by JavaScript -->
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toast Container -->
|
||
<div id="toastContainer" class="toast-container"></div>
|
||
|
||
<!-- Loading Spinner -->
|
||
<div class="loading-container" id="loadingContainer">
|
||
<div class="loading-spinner"></div>
|
||
</div>
|
||
|
||
<script src="auth.js"></script>
|
||
<script src="script.js?v=20250529005"></script>
|
||
|
||
<!-- Footer Width Fix -->
|
||
<script src="footer-fix.js"></script>
|
||
|
||
<!-- Footer Content Manager -->
|
||
<script src="footer-content.js"></script>
|
||
|
||
<!-- Powered by Warracker Footer -->
|
||
<footer class="warracker-footer" id="warrackerFooter">
|
||
<!-- Content will be dynamically generated by footer-content.js -->
|
||
</footer>
|
||
|
||
<script>
|
||
// Apply footer styles based on theme
|
||
function applyFooterStyles() {
|
||
const footer = document.getElementById('warrackerFooter');
|
||
const link = document.getElementById('warrackerFooterLink');
|
||
const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark' ||
|
||
document.documentElement.classList.contains('dark-mode') ||
|
||
document.body.classList.contains('dark-mode');
|
||
|
||
if (footer) {
|
||
if (isDarkMode) {
|
||
// Dark mode styles - using same background as header (#2d2d2d)
|
||
footer.style.cssText = 'margin-top: 50px; padding: 20px; text-align: center; border-top: 1px solid #444; background-color: #2d2d2d; color: #e0e0e0; font-size: 0.9rem;';
|
||
if (link) link.style.cssText = 'color: #4dabf7; text-decoration: none; font-weight: 500;';
|
||
} else {
|
||
// Light mode styles - using same background as header (#ffffff)
|
||
footer.style.cssText = 'margin-top: 50px; padding: 20px; text-align: center; border-top: 1px solid #e0e0e0; background-color: #ffffff; color: #333333; font-size: 0.9rem;';
|
||
if (link) link.style.cssText = 'color: #3498db; text-decoration: none; font-weight: 500;';
|
||
}
|
||
}
|
||
}
|
||
|
||
// Apply styles when page loads
|
||
document.addEventListener('DOMContentLoaded', applyFooterStyles);
|
||
|
||
// Watch for theme changes
|
||
const observer = new MutationObserver(applyFooterStyles);
|
||
observer.observe(document.documentElement, {
|
||
attributes: true,
|
||
attributeFilter: ['data-theme', 'class']
|
||
});
|
||
|
||
// Also watch body for theme changes
|
||
observer.observe(document.body, {
|
||
attributes: true,
|
||
attributeFilter: ['class']
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|