Login Portal - HSA Automation<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 20px;\r\n }\r\n\r\n .login-portal {\r\n width: 100%;\r\n max-width: 600px;\r\n }\r\n\r\n .login-card {\r\n background: white;\r\n padding: 40px;\r\n border-radius: 20px;\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.1);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n }\r\n\r\n .login-header {\r\n text-align: center;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .login-header h2 {\r\n color: #2c3e50;\r\n margin-bottom: 10px;\r\n font-size: 28px;\r\n font-weight: 600;\r\n }\r\n\r\n .login-header p {\r\n color: #7f8c8d;\r\n font-size: 16px;\r\n margin: 0;\r\n }\r\n\r\n .input-group {\r\n position: relative;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .input-group .icon {\r\n position: absolute;\r\n left: 15px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n font-size: 18px;\r\n color: #7f8c8d;\r\n z-index: 2;\r\n }\r\n\r\n .input-group input {\r\n width: 100%;\r\n padding: 15px 15px 15px 50px;\r\n border: 2px solid #e8ecef;\r\n border-radius: 12px;\r\n font-size: 16px;\r\n transition: all 0.3s ease;\r\n background: #f8f9fa;\r\n color: #2c3e50;\r\n }\r\n\r\n .input-group input:focus {\r\n outline: none;\r\n border-color: #667eea;\r\n background: white;\r\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\r\n }\r\n\r\n .input-group input::placeholder {\r\n color: #a0a4a8;\r\n }\r\n\r\n .toggle-password {\r\n position: absolute;\r\n right: 15px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 18px;\r\n color: #7f8c8d;\r\n padding: 5px;\r\n border-radius: 5px;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .toggle-password:hover {\r\n color: #667eea;\r\n background: rgba(102, 126, 234, 0.1);\r\n }\r\n\r\n .form-options {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .remember-me {\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n color: #5a6c7d;\r\n font-size: 14px;\r\n }\r\n\r\n .remember-me input {\r\n margin-right: 8px;\r\n width: 16px;\r\n height: 16px;\r\n accent-color: #667eea;\r\n }\r\n\r\n .forgot-password {\r\n color: #667eea;\r\n text-decoration: none;\r\n font-size: 14px;\r\n font-weight: 500;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .forgot-password:hover {\r\n color: #764ba2;\r\n text-decoration: underline;\r\n }\r\n\r\n .submit-btn {\r\n width: 100%;\r\n padding: 16px;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: white;\r\n border: none;\r\n border-radius: 12px;\r\n font-size: 16px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n position: relative;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);\r\n }\r\n\r\n .submit-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);\r\n }\r\n\r\n .submit-btn:active {\r\n transform: translateY(0);\r\n }\r\n\r\n .submit-btn:disabled {\r\n opacity: 0.7;\r\n cursor: not-allowed;\r\n transform: none;\r\n box-shadow: none;\r\n }\r\n\r\n .spinner {\r\n width: 20px;\r\n height: 20px;\r\n border: 2px solid transparent;\r\n border-top: 2px solid white;\r\n border-radius: 50%;\r\n animation: spin 1s linear infinite;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n margin-top: -10px;\r\n margin-left: -10px;\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n .hidden {\r\n display: none;\r\n }\r\n\r\n .notification {\r\n position: fixed;\r\n top: 20px;\r\n right: 20px;\r\n padding: 16px 20px;\r\n border-radius: 12px;\r\n color: white;\r\n z-index: 1000;\r\n max-width: 350px;\r\n box-shadow: 0 8px 25px rgba(0,0,0,0.15);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n transform: translateX(400px);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .notification.show {\r\n transform: translateX(0);\r\n }\r\n\r\n .notification.success {\r\n background: linear-gradient(135deg, #10b981, #059669);\r\n }\r\n\r\n .notification.error {\r\n background: linear-gradient(135deg, #ef4444, #dc2626);\r\n }\r\n\r\n .login-footer {\r\n text-align: center;\r\n margin-top: 30px;\r\n padding-top: 25px;\r\n border-top: 1px solid #e8ecef;\r\n }\r\n\r\n .login-footer p {\r\n color: #7f8c8d;\r\n font-size: 14px;\r\n margin: 0;\r\n }\r\n\r\n .login-footer a {\r\n color: #667eea;\r\n text-decoration: none;\r\n font-weight: 500;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .login-footer a:hover {\r\n color: #764ba2;\r\n text-decoration: underline;\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 480px) {\r\n .login-card {\r\n padding: 30px 25px;\r\n margin: 10px;\r\n }\r\n \r\n .login-header h2 {\r\n font-size: 24px;\r\n }\r\n \r\n .form-options {\r\n flex-direction: column;\r\n gap: 15px;\r\n align-items: flex-start;\r\n }\r\n \r\n .notification {\r\n right: 10px;\r\n left: 10px;\r\n max-width: none;\r\n }\r\n }\r\n\r\n \/* Loading animation *\/\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .login-card {\r\n animation: fadeIn 0.6s ease-out;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"login-portal\">\r\n <div class=\"login-card\">\r\n <div class=\"login-header\">\r\n <h2>Welcome to HSA Automation<\/h2>\r\n <p>Please sign in to your account<\/p>\r\n <\/div>\r\n \r\n <form id=\"advancedLoginForm\">\r\n <div class=\"input-group\">\r\n <i class=\"icon\">\ud83d\udce7<\/i>\r\n <input type=\"email\" id=\"loginEmail\" placeholder=\"Enter your username\" required>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <i class=\"icon\">\ud83d\udd12<\/i>\r\n <input type=\"password\" id=\"loginPassword\" placeholder=\"Enter your password\" required>\r\n <button type=\"button\" class=\"toggle-password\" onclick=\"togglePassword()\">\ud83d\udc41\ufe0f<\/button>\r\n <\/div>\r\n \r\n <div class=\"form-options\">\r\n <label class=\"remember-me\">\r\n <input type=\"checkbox\" id=\"rememberMe\">\r\n <span>Remember me<\/span>\r\n <\/label>\r\n <a href=\"#\" class=\"forgot-password\">Forgot password?<\/a>\r\n <\/div>\r\n \r\n <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">\r\n <span class=\"btn-text\">Sign In<\/span>\r\n <div class=\"spinner hidden\"><\/div>\r\n <\/button>\r\n <\/form>\r\n \r\n <div class=\"login-footer\">\r\n <p>Don't have an account? <a href=\"\/signup\">Contact Administrator<\/a><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"notification\" class=\"notification hidden\"><\/div>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n <script>\r\n\/\/ SecureAPI Class - Production Ready\r\n\/\/ SecureAPI Class - Fixed for 400 Errors\r\nclass SecureAPI {\r\n constructor() {\r\n this.baseURL = 'https:\/\/hsaautomation.com';\r\n this.token = localStorage.getItem('authToken') || sessionStorage.getItem('authToken');\r\n }\r\n\r\n async login(credentials) {\r\n \/\/ Validate credentials before sending\r\n if (!credentials.username || !credentials.password) {\r\n throw new Error('Username and password are required');\r\n }\r\n\r\n try {\r\n const response = await fetch('https:\/\/hsaautomation.com\/login-api.php', {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json'\r\n },\r\n body: JSON.stringify({\r\n username: credentials.username.trim(),\r\n password: credentials.password\r\n })\r\n });\r\n\r\n \/\/ Handle different HTTP status codes\r\n if (response.status === 400) {\r\n const errorData = await response.json().catch(() => null);\r\n throw new Error(errorData?.message || 'Invalid request. Please check your input.');\r\n } else if (response.status === 500) {\r\n throw new Error('Server error. Please try again later.');\r\n } else if (!response.ok) {\r\n throw new Error(`Login failed with status: ${response.status}`);\r\n }\r\n\r\n const result = await response.json();\r\n return result;\r\n \r\n } catch (error) {\r\n if (error.name === 'TypeError' && error.message.includes('fetch')) {\r\n throw new Error('Network error. Please check your connection.');\r\n }\r\n throw error;\r\n }\r\n }\r\n\r\n \/\/ ... keep other methods the same\r\n async getSaleReports(params = {}) {\r\n const response = await fetch(`${this.baseURL}\/sale-reports-api.php`, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n 'Authorization': `Bearer ${this.token}`\r\n },\r\n body: JSON.stringify(params)\r\n });\r\n\r\n if (!response.ok) {\r\n throw new Error(`Failed to fetch sale reports: ${response.status}`);\r\n }\r\n\r\n return await response.json();\r\n }\r\n\r\n async getPumpsData() {\r\n return await this.request('pumps-data.php');\r\n }\r\n\r\n async getTanksData() {\r\n return await this.request('tanks-data.php');\r\n }\r\n\r\n async getShiftReports(params = {}) {\r\n return await this.request('shift-reports.php', params);\r\n }\r\n\r\n async request(endpoint, data = null, method = 'POST') {\r\n const response = await fetch(`${this.baseURL}\/${endpoint}`, {\r\n method: method,\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n 'Authorization': `Bearer ${this.token}`\r\n },\r\n body: data ? JSON.stringify(data) : null\r\n });\r\n\r\n if (!response.ok) {\r\n throw new Error(`API request failed: ${response.status}`);\r\n }\r\n\r\n return await response.json();\r\n }\r\n\r\n isAuthenticated() {\r\n return !!this.token;\r\n }\r\n\r\n logout() {\r\n localStorage.removeItem('authToken');\r\n localStorage.removeItem('userData');\r\n localStorage.removeItem('site_code');\r\n localStorage.removeItem('site_name');\r\n localStorage.removeItem('site_nozs');\r\n localStorage.removeItem('site_tanks');\r\n localStorage.removeItem('Site_maxshift');\r\n sessionStorage.clear();\r\n window.location.href = 'https:\/\/hsaautomation.com\/login.html';\r\n }\r\n}\r\n\r\n\/\/ Initialize API\r\nlet api = new SecureAPI();\r\n\r\n\/\/ INTERCEPT FETCH REQUESTS TO REMOVE SUCCESS MESSAGES\r\nconst originalFetch = window.fetch;\r\nwindow.fetch = function(...args) {\r\n return originalFetch.apply(this, args).then(response => {\r\n if (response.url.includes('hsaautomation.com') && response.headers.get('content-type')?.includes('application\/json')) {\r\n return response.clone().json().then(data => {\r\n if (data && data.success === true && data.message) {\r\n const { message, ...cleanData } = data;\r\n const blob = new Blob([JSON.stringify(cleanData)], { type: 'application\/json' });\r\n return new Response(blob, {\r\n status: response.status,\r\n statusText: response.statusStatus,\r\n headers: response.headers\r\n });\r\n }\r\n return response;\r\n }).catch(() => response);\r\n }\r\n return response;\r\n });\r\n};\r\n\r\n\/\/ Utility Functions\r\nfunction togglePassword() {\r\n const passwordInput = document.getElementById('loginPassword');\r\n const toggleButton = document.querySelector('.toggle-password');\r\n const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';\r\n passwordInput.setAttribute('type', type);\r\n toggleButton.textContent = type === 'password' ? '\ud83d\udc41\ufe0f' : '\ud83d\udd12';\r\n}\r\n\r\nfunction showNotification(message, type) {\r\n if (type === 'success') return;\r\n \r\n const notification = document.getElementById('notification');\r\n notification.textContent = message;\r\n notification.className = `notification ${type}`;\r\n notification.classList.remove('hidden');\r\n \r\n setTimeout(() => {\r\n notification.classList.add('show');\r\n }, 10);\r\n \r\n setTimeout(() => {\r\n notification.classList.remove('show');\r\n setTimeout(() => {\r\n notification.classList.add('hidden');\r\n }, 300);\r\n }, 5000);\r\n}\r\n\r\nfunction isValidEmail(email) {\r\n const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n return emailRegex.test(email);\r\n}\r\n\r\n\/\/ Function to get shifts data\r\nasync function getShiftsData(siteCode) {\r\n try {\r\n const response = await fetch('https:\/\/hsaautomation.com\/get-shiftsNos-api.php', {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n },\r\n body: JSON.stringify({\r\n site_code: siteCode\r\n })\r\n });\r\n\r\n const data = await response.json();\r\n\r\n if (data.success) {\r\n return {\r\n success: true,\r\n shifts: data.shifts,\r\n total_shifts: data.total_shifts,\r\n max_shift: data.shifts && data.shifts.length > 0 ? Math.max(...data.shifts.map(s => s.ShiftNumber)) : 0\r\n };\r\n } else {\r\n throw new Error(data.message || 'Failed to fetch shifts data');\r\n }\r\n } catch (error) {\r\n return {\r\n success: false,\r\n error: error.message,\r\n shifts: [],\r\n total_shifts: 0,\r\n max_shift: 0\r\n };\r\n }\r\n}\r\n\r\n\/\/ Login form handler\r\n\/\/ Login form handler - Fixed\r\ndocument.getElementById('advancedLoginForm').addEventListener('submit', async function(e) {\r\n e.preventDefault();\r\n \r\n const email = document.getElementById('loginEmail').value.trim();\r\n const password = document.getElementById('loginPassword').value;\r\n const rememberMe = document.getElementById('rememberMe').checked;\r\n const submitBtn = document.getElementById('submitBtn');\r\n const btnText = document.querySelector('.btn-text');\r\n const spinner = document.querySelector('.spinner');\r\n\r\n \/\/ Enhanced validation\r\n if (!email) {\r\n showNotification('Please enter your email address', 'error');\r\n return;\r\n }\r\n\r\n if (!isValidEmail(email)) {\r\n showNotification('Please enter a valid email address', 'error');\r\n return;\r\n }\r\n\r\n if (!password) {\r\n showNotification('Please enter your password', 'error');\r\n return;\r\n }\r\n\r\n \/\/ Show loading state\r\n btnText.classList.add('hidden');\r\n spinner.classList.remove('hidden');\r\n submitBtn.disabled = true;\r\n\r\n try {\r\n const result = await api.login({\r\n username: email,\r\n password: password\r\n });\r\n\r\n if (!result) {\r\n throw new Error('No response received from server');\r\n }\r\n\r\n if (result.success) {\r\n \/\/ Clear password immediately\r\n document.getElementById('loginPassword').value = '';\r\n \r\n \/\/ Get shifts data\r\n const shiftsData = await getShiftsData(result.site_code);\r\n \r\n \/\/ Prepare user data\r\n const userData = {\r\n email: email,\r\n site_name: result.site_name,\r\n site_code: result.site_code,\r\n site_nozs: result.site_nozs,\r\n site_pumps: result.site_pumps,\r\n site_tanks: result.site_tanks,\r\n Site_maxshift: shiftsData.max_shift || 0,\r\n shifts: shiftsData.shifts || [],\r\n total_shifts: shiftsData.total_shifts || 0\r\n };\r\n\r\n \/\/ Store user data\r\n const storage = rememberMe ? localStorage : sessionStorage;\r\n storage.setItem('authToken', 'authenticated');\r\n storage.setItem('userData', JSON.stringify(userData));\r\n storage.setItem('site_code', result.site_code);\r\n storage.setItem('site_name', result.site_name);\r\n storage.setItem('site_nozs', result.site_nozs);\r\n storage.setItem('site_pumps', result.site_pumps);\r\n storage.setItem('site_tanks', result.site_tanks);\r\n storage.setItem('Site_maxshift', userData.Site_maxshift.toString());\r\n \r\n \/\/ Immediate redirect\r\n window.location.href = 'https:\/\/hsaautomation.com\/index.php\/reports-dashboard\/';\r\n \r\n } else {\r\n throw new Error(result.message || 'Login failed. Please check your credentials.');\r\n }\r\n \r\n } catch (error) {\r\n console.error('Login error:', error);\r\n showNotification(error.message || 'An error occurred during login. Please try again.', 'error');\r\n } finally {\r\n \/\/ Reset button state\r\n btnText.classList.remove('hidden');\r\n spinner.classList.add('hidden');\r\n submitBtn.disabled = false;\r\n }\r\n});\r\n\r\n\/\/ DOM Ready\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Add input focus effects\r\n const inputs = document.querySelectorAll('input');\r\n inputs.forEach(input => {\r\n input.addEventListener('focus', function() {\r\n this.parentElement.classList.add('focused');\r\n });\r\n input.addEventListener('blur', function() {\r\n this.parentElement.classList.remove('focused');\r\n });\r\n });\r\n \r\n \/\/ Pre-fill test credentials\r\n document.getElementById('loginEmail').value = '@hsa.com';\r\n document.getElementById('loginPassword').value = '';\r\n \r\n \/\/ Auto-focus email field\r\n document.getElementById('loginEmail').focus();\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a61274c e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"a61274c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Login Portal – HSA Automation Welcome to HSA Automation Please sign in to your account \ud83d\udce7 \ud83d\udd12 \ud83d\udc41\ufe0f Remember me Forgot password? Sign In Don’t have an account? Contact Administrator<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"default","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-1581","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hsaautomation.com\/index.php\/wp-json\/wp\/v2\/pages\/1581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hsaautomation.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hsaautomation.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hsaautomation.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hsaautomation.com\/index.php\/wp-json\/wp\/v2\/comments?post=1581"}],"version-history":[{"count":176,"href":"https:\/\/hsaautomation.com\/index.php\/wp-json\/wp\/v2\/pages\/1581\/revisions"}],"predecessor-version":[{"id":3743,"href":"https:\/\/hsaautomation.com\/index.php\/wp-json\/wp\/v2\/pages\/1581\/revisions\/3743"}],"wp:attachment":[{"href":"https:\/\/hsaautomation.com\/index.php\/wp-json\/wp\/v2\/media?parent=1581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Login Portal - HSA Automation<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 20px;\r\n }\r\n\r\n .login-portal {\r\n width: 100%;\r\n max-width: 600px;\r\n }\r\n\r\n .login-card {\r\n background: white;\r\n padding: 40px;\r\n border-radius: 20px;\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.1);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n }\r\n\r\n .login-header {\r\n text-align: center;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .login-header h2 {\r\n color: #2c3e50;\r\n margin-bottom: 10px;\r\n font-size: 28px;\r\n font-weight: 600;\r\n }\r\n\r\n .login-header p {\r\n color: #7f8c8d;\r\n font-size: 16px;\r\n margin: 0;\r\n }\r\n\r\n .input-group {\r\n position: relative;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .input-group .icon {\r\n position: absolute;\r\n left: 15px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n font-size: 18px;\r\n color: #7f8c8d;\r\n z-index: 2;\r\n }\r\n\r\n .input-group input {\r\n width: 100%;\r\n padding: 15px 15px 15px 50px;\r\n border: 2px solid #e8ecef;\r\n border-radius: 12px;\r\n font-size: 16px;\r\n transition: all 0.3s ease;\r\n background: #f8f9fa;\r\n color: #2c3e50;\r\n }\r\n\r\n .input-group input:focus {\r\n outline: none;\r\n border-color: #667eea;\r\n background: white;\r\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\r\n }\r\n\r\n .input-group input::placeholder {\r\n color: #a0a4a8;\r\n }\r\n\r\n .toggle-password {\r\n position: absolute;\r\n right: 15px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 18px;\r\n color: #7f8c8d;\r\n padding: 5px;\r\n border-radius: 5px;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .toggle-password:hover {\r\n color: #667eea;\r\n background: rgba(102, 126, 234, 0.1);\r\n }\r\n\r\n .form-options {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .remember-me {\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n color: #5a6c7d;\r\n font-size: 14px;\r\n }\r\n\r\n .remember-me input {\r\n margin-right: 8px;\r\n width: 16px;\r\n height: 16px;\r\n accent-color: #667eea;\r\n }\r\n\r\n .forgot-password {\r\n color: #667eea;\r\n text-decoration: none;\r\n font-size: 14px;\r\n font-weight: 500;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .forgot-password:hover {\r\n color: #764ba2;\r\n text-decoration: underline;\r\n }\r\n\r\n .submit-btn {\r\n width: 100%;\r\n padding: 16px;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: white;\r\n border: none;\r\n border-radius: 12px;\r\n font-size: 16px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n position: relative;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);\r\n }\r\n\r\n .submit-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);\r\n }\r\n\r\n .submit-btn:active {\r\n transform: translateY(0);\r\n }\r\n\r\n .submit-btn:disabled {\r\n opacity: 0.7;\r\n cursor: not-allowed;\r\n transform: none;\r\n box-shadow: none;\r\n }\r\n\r\n .spinner {\r\n width: 20px;\r\n height: 20px;\r\n border: 2px solid transparent;\r\n border-top: 2px solid white;\r\n border-radius: 50%;\r\n animation: spin 1s linear infinite;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n margin-top: -10px;\r\n margin-left: -10px;\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n .hidden {\r\n display: none;\r\n }\r\n\r\n .notification {\r\n position: fixed;\r\n top: 20px;\r\n right: 20px;\r\n padding: 16px 20px;\r\n border-radius: 12px;\r\n color: white;\r\n z-index: 1000;\r\n max-width: 350px;\r\n box-shadow: 0 8px 25px rgba(0,0,0,0.15);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n transform: translateX(400px);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .notification.show {\r\n transform: translateX(0);\r\n }\r\n\r\n .notification.success {\r\n background: linear-gradient(135deg, #10b981, #059669);\r\n }\r\n\r\n .notification.error {\r\n background: linear-gradient(135deg, #ef4444, #dc2626);\r\n }\r\n\r\n .login-footer {\r\n text-align: center;\r\n margin-top: 30px;\r\n padding-top: 25px;\r\n border-top: 1px solid #e8ecef;\r\n }\r\n\r\n .login-footer p {\r\n color: #7f8c8d;\r\n font-size: 14px;\r\n margin: 0;\r\n }\r\n\r\n .login-footer a {\r\n color: #667eea;\r\n text-decoration: none;\r\n font-weight: 500;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .login-footer a:hover {\r\n color: #764ba2;\r\n text-decoration: underline;\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 480px) {\r\n .login-card {\r\n padding: 30px 25px;\r\n margin: 10px;\r\n }\r\n \r\n .login-header h2 {\r\n font-size: 24px;\r\n }\r\n \r\n .form-options {\r\n flex-direction: column;\r\n gap: 15px;\r\n align-items: flex-start;\r\n }\r\n \r\n .notification {\r\n right: 10px;\r\n left: 10px;\r\n max-width: none;\r\n }\r\n }\r\n\r\n \/* Loading animation *\/\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .login-card {\r\n animation: fadeIn 0.6s ease-out;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"login-portal\">\r\n <div class=\"login-card\">\r\n <div class=\"login-header\">\r\n <h2>Welcome to HSA Automation<\/h2>\r\n <p>Please sign in to your account<\/p>\r\n <\/div>\r\n \r\n <form id=\"advancedLoginForm\">\r\n <div class=\"input-group\">\r\n <i class=\"icon\">\ud83d\udce7<\/i>\r\n <input type=\"email\" id=\"loginEmail\" placeholder=\"Enter your username\" required>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <i class=\"icon\">\ud83d\udd12<\/i>\r\n <input type=\"password\" id=\"loginPassword\" placeholder=\"Enter your password\" required>\r\n <button type=\"button\" class=\"toggle-password\" onclick=\"togglePassword()\">\ud83d\udc41\ufe0f<\/button>\r\n <\/div>\r\n \r\n <div class=\"form-options\">\r\n <label class=\"remember-me\">\r\n <input type=\"checkbox\" id=\"rememberMe\">\r\n <span>Remember me<\/span>\r\n <\/label>\r\n <a href=\"#\" class=\"forgot-password\">Forgot password?<\/a>\r\n <\/div>\r\n \r\n <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">\r\n <span class=\"btn-text\">Sign In<\/span>\r\n <div class=\"spinner hidden\"><\/div>\r\n <\/button>\r\n <\/form>\r\n \r\n <div class=\"login-footer\">\r\n <p>Don't have an account? <a href=\"\/signup\">Contact Administrator<\/a><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"notification\" class=\"notification hidden\"><\/div>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n <script>\r\n\/\/ SecureAPI Class - Production Ready\r\n\/\/ SecureAPI Class - Fixed for 400 Errors\r\nclass SecureAPI {\r\n constructor() {\r\n this.baseURL = 'https:\/\/hsaautomation.com';\r\n this.token = localStorage.getItem('authToken') || sessionStorage.getItem('authToken');\r\n }\r\n\r\n async login(credentials) {\r\n \/\/ Validate credentials before sending\r\n if (!credentials.username || !credentials.password) {\r\n throw new Error('Username and password are required');\r\n }\r\n\r\n try {\r\n const response = await fetch('https:\/\/hsaautomation.com\/login-api.php', {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json'\r\n },\r\n body: JSON.stringify({\r\n username: credentials.username.trim(),\r\n password: credentials.password\r\n })\r\n });\r\n\r\n \/\/ Handle different HTTP status codes\r\n if (response.status === 400) {\r\n const errorData = await response.json().catch(() => null);\r\n throw new Error(errorData?.message || 'Invalid request. Please check your input.');\r\n } else if (response.status === 500) {\r\n throw new Error('Server error. Please try again later.');\r\n } else if (!response.ok) {\r\n throw new Error(`Login failed with status: ${response.status}`);\r\n }\r\n\r\n const result = await response.json();\r\n return result;\r\n \r\n } catch (error) {\r\n if (error.name === 'TypeError' && error.message.includes('fetch')) {\r\n throw new Error('Network error. Please check your connection.');\r\n }\r\n throw error;\r\n }\r\n }\r\n\r\n \/\/ ... keep other methods the same\r\n async getSaleReports(params = {}) {\r\n const response = await fetch(`${this.baseURL}\/sale-reports-api.php`, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n 'Authorization': `Bearer ${this.token}`\r\n },\r\n body: JSON.stringify(params)\r\n });\r\n\r\n if (!response.ok) {\r\n throw new Error(`Failed to fetch sale reports: ${response.status}`);\r\n }\r\n\r\n return await response.json();\r\n }\r\n\r\n async getPumpsData() {\r\n return await this.request('pumps-data.php');\r\n }\r\n\r\n async getTanksData() {\r\n return await this.request('tanks-data.php');\r\n }\r\n\r\n async getShiftReports(params = {}) {\r\n return await this.request('shift-reports.php', params);\r\n }\r\n\r\n async request(endpoint, data = null, method = 'POST') {\r\n const response = await fetch(`${this.baseURL}\/${endpoint}`, {\r\n method: method,\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n 'Authorization': `Bearer ${this.token}`\r\n },\r\n body: data ? JSON.stringify(data) : null\r\n });\r\n\r\n if (!response.ok) {\r\n throw new Error(`API request failed: ${response.status}`);\r\n }\r\n\r\n return await response.json();\r\n }\r\n\r\n isAuthenticated() {\r\n return !!this.token;\r\n }\r\n\r\n logout() {\r\n localStorage.removeItem('authToken');\r\n localStorage.removeItem('userData');\r\n localStorage.removeItem('site_code');\r\n localStorage.removeItem('site_name');\r\n localStorage.removeItem('site_nozs');\r\n localStorage.removeItem('site_tanks');\r\n localStorage.removeItem('Site_maxshift');\r\n sessionStorage.clear();\r\n window.location.href = 'https:\/\/hsaautomation.com\/login.html';\r\n }\r\n}\r\n\r\n\/\/ Initialize API\r\nlet api = new SecureAPI();\r\n\r\n\/\/ INTERCEPT FETCH REQUESTS TO REMOVE SUCCESS MESSAGES\r\nconst originalFetch = window.fetch;\r\nwindow.fetch = function(...args) {\r\n return originalFetch.apply(this, args).then(response => {\r\n if (response.url.includes('hsaautomation.com') && response.headers.get('content-type')?.includes('application\/json')) {\r\n return response.clone().json().then(data => {\r\n if (data && data.success === true && data.message) {\r\n const { message, ...cleanData } = data;\r\n const blob = new Blob([JSON.stringify(cleanData)], { type: 'application\/json' });\r\n return new Response(blob, {\r\n status: response.status,\r\n statusText: response.statusStatus,\r\n headers: response.headers\r\n });\r\n }\r\n return response;\r\n }).catch(() => response);\r\n }\r\n return response;\r\n });\r\n};\r\n\r\n\/\/ Utility Functions\r\nfunction togglePassword() {\r\n const passwordInput = document.getElementById('loginPassword');\r\n const toggleButton = document.querySelector('.toggle-password');\r\n const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';\r\n passwordInput.setAttribute('type', type);\r\n toggleButton.textContent = type === 'password' ? '\ud83d\udc41\ufe0f' : '\ud83d\udd12';\r\n}\r\n\r\nfunction showNotification(message, type) {\r\n if (type === 'success') return;\r\n \r\n const notification = document.getElementById('notification');\r\n notification.textContent = message;\r\n notification.className = `notification ${type}`;\r\n notification.classList.remove('hidden');\r\n \r\n setTimeout(() => {\r\n notification.classList.add('show');\r\n }, 10);\r\n \r\n setTimeout(() => {\r\n notification.classList.remove('show');\r\n setTimeout(() => {\r\n notification.classList.add('hidden');\r\n }, 300);\r\n }, 5000);\r\n}\r\n\r\nfunction isValidEmail(email) {\r\n const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n return emailRegex.test(email);\r\n}\r\n\r\n\/\/ Function to get shifts data\r\nasync function getShiftsData(siteCode) {\r\n try {\r\n const response = await fetch('https:\/\/hsaautomation.com\/get-shiftsNos-api.php', {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n },\r\n body: JSON.stringify({\r\n site_code: siteCode\r\n })\r\n });\r\n\r\n const data = await response.json();\r\n\r\n if (data.success) {\r\n return {\r\n success: true,\r\n shifts: data.shifts,\r\n total_shifts: data.total_shifts,\r\n max_shift: data.shifts && data.shifts.length > 0 ? Math.max(...data.shifts.map(s => s.ShiftNumber)) : 0\r\n };\r\n } else {\r\n throw new Error(data.message || 'Failed to fetch shifts data');\r\n }\r\n } catch (error) {\r\n return {\r\n success: false,\r\n error: error.message,\r\n shifts: [],\r\n total_shifts: 0,\r\n max_shift: 0\r\n };\r\n }\r\n}\r\n\r\n\/\/ Login form handler\r\n\/\/ Login form handler - Fixed\r\ndocument.getElementById('advancedLoginForm').addEventListener('submit', async function(e) {\r\n e.preventDefault();\r\n \r\n const email = document.getElementById('loginEmail').value.trim();\r\n const password = document.getElementById('loginPassword').value;\r\n const rememberMe = document.getElementById('rememberMe').checked;\r\n const submitBtn = document.getElementById('submitBtn');\r\n const btnText = document.querySelector('.btn-text');\r\n const spinner = document.querySelector('.spinner');\r\n\r\n \/\/ Enhanced validation\r\n if (!email) {\r\n showNotification('Please enter your email address', 'error');\r\n return;\r\n }\r\n\r\n if (!isValidEmail(email)) {\r\n showNotification('Please enter a valid email address', 'error');\r\n return;\r\n }\r\n\r\n if (!password) {\r\n showNotification('Please enter your password', 'error');\r\n return;\r\n }\r\n\r\n \/\/ Show loading state\r\n btnText.classList.add('hidden');\r\n spinner.classList.remove('hidden');\r\n submitBtn.disabled = true;\r\n\r\n try {\r\n const result = await api.login({\r\n username: email,\r\n password: password\r\n });\r\n\r\n if (!result) {\r\n throw new Error('No response received from server');\r\n }\r\n\r\n if (result.success) {\r\n \/\/ Clear password immediately\r\n document.getElementById('loginPassword').value = '';\r\n \r\n \/\/ Get shifts data\r\n const shiftsData = await getShiftsData(result.site_code);\r\n \r\n \/\/ Prepare user data\r\n const userData = {\r\n email: email,\r\n site_name: result.site_name,\r\n site_code: result.site_code,\r\n site_nozs: result.site_nozs,\r\n site_pumps: result.site_pumps,\r\n site_tanks: result.site_tanks,\r\n Site_maxshift: shiftsData.max_shift || 0,\r\n shifts: shiftsData.shifts || [],\r\n total_shifts: shiftsData.total_shifts || 0\r\n };\r\n\r\n \/\/ Store user data\r\n const storage = rememberMe ? localStorage : sessionStorage;\r\n storage.setItem('authToken', 'authenticated');\r\n storage.setItem('userData', JSON.stringify(userData));\r\n storage.setItem('site_code', result.site_code);\r\n storage.setItem('site_name', result.site_name);\r\n storage.setItem('site_nozs', result.site_nozs);\r\n storage.setItem('site_pumps', result.site_pumps);\r\n storage.setItem('site_tanks', result.site_tanks);\r\n storage.setItem('Site_maxshift', userData.Site_maxshift.toString());\r\n \r\n \/\/ Immediate redirect\r\n window.location.href = 'https:\/\/hsaautomation.com\/index.php\/reports-dashboard\/';\r\n \r\n } else {\r\n throw new Error(result.message || 'Login failed. Please check your credentials.');\r\n }\r\n \r\n } catch (error) {\r\n console.error('Login error:', error);\r\n showNotification(error.message || 'An error occurred during login. Please try again.', 'error');\r\n } finally {\r\n \/\/ Reset button state\r\n btnText.classList.remove('hidden');\r\n spinner.classList.add('hidden');\r\n submitBtn.disabled = false;\r\n }\r\n});\r\n\r\n\/\/ DOM Ready\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Add input focus effects\r\n const inputs = document.querySelectorAll('input');\r\n inputs.forEach(input => {\r\n input.addEventListener('focus', function() {\r\n this.parentElement.classList.add('focused');\r\n });\r\n input.addEventListener('blur', function() {\r\n this.parentElement.classList.remove('focused');\r\n });\r\n });\r\n \r\n \/\/ Pre-fill test credentials\r\n document.getElementById('loginEmail').value = '@hsa.com';\r\n document.getElementById('loginPassword').value = '';\r\n \r\n \/\/ Auto-focus email field\r\n document.getElementById('loginEmail').focus();\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a61274c e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"a61274c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Login Portal – HSA Automation Welcome to HSA Automation Please sign in to your account \ud83d\udce7 \ud83d\udd12 \ud83d\udc41\ufe0f Remember me Forgot password? Sign In Don’t have an account? Contact Administrator<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"default","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-1581","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hsaautomation.com\/index.php\/wp-json\/wp\/v2\/pages\/1581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hsaautomation.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hsaautomation.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hsaautomation.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hsaautomation.com\/index.php\/wp-json\/wp\/v2\/comments?post=1581"}],"version-history":[{"count":176,"href":"https:\/\/hsaautomation.com\/index.php\/wp-json\/wp\/v2\/pages\/1581\/revisions"}],"predecessor-version":[{"id":3743,"href":"https:\/\/hsaautomation.com\/index.php\/wp-json\/wp\/v2\/pages\/1581\/revisions\/3743"}],"wp:attachment":[{"href":"https:\/\/hsaautomation.com\/index.php\/wp-json\/wp\/v2\/media?parent=1581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}