feat(pos): add PIN pad login page with keyboard support and theming
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
10
pos/app.py
10
pos/app.py
@@ -15,6 +15,16 @@ def create_app():
|
|||||||
def health():
|
def health():
|
||||||
return {'status': 'ok'}
|
return {'status': 'ok'}
|
||||||
|
|
||||||
|
from flask import render_template, send_from_directory
|
||||||
|
|
||||||
|
@app.route('/pos/login')
|
||||||
|
def pos_login():
|
||||||
|
return render_template('login.html')
|
||||||
|
|
||||||
|
@app.route('/pos/static/<path:filename>')
|
||||||
|
def pos_static(filename):
|
||||||
|
return send_from_directory('static', filename)
|
||||||
|
|
||||||
return app
|
return app
|
||||||
|
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
|
|||||||
57
pos/static/css/common.css
Normal file
57
pos/static/css/common.css
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
/* /home/Autopartes/pos/static/css/common.css */
|
||||||
|
/* Theme variables — overridden by tenant theme */
|
||||||
|
:root {
|
||||||
|
--color-primary: #1a73e8;
|
||||||
|
--color-secondary: #5f6368;
|
||||||
|
--color-accent: #ff6b35;
|
||||||
|
--color-bg: #ffffff;
|
||||||
|
--color-surface: #f8f9fa;
|
||||||
|
--color-text: #202124;
|
||||||
|
--color-text-secondary: #5f6368;
|
||||||
|
--color-border: #dadce0;
|
||||||
|
--color-success: #34a853;
|
||||||
|
--color-warning: #f9ab00;
|
||||||
|
--color-error: #ea4335;
|
||||||
|
--font-display: 'Sora', sans-serif;
|
||||||
|
--font-body: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
--font-mono: 'JetBrains Mono', monospace;
|
||||||
|
--radius: 8px;
|
||||||
|
--shadow: 0 1px 3px rgba(0,0,0,0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-body);
|
||||||
|
background: var(--color-bg);
|
||||||
|
color: var(--color-text);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
background: var(--color-surface);
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover { background: var(--color-border); }
|
||||||
|
.btn--primary { background: var(--color-primary); color: white; border-color: var(--color-primary); }
|
||||||
|
.btn--primary:hover { opacity: 0.9; }
|
||||||
|
.btn--accent { background: var(--color-accent); color: white; border-color: var(--color-accent); }
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
111
pos/static/js/login.js
Normal file
111
pos/static/js/login.js
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
// /home/Autopartes/pos/static/js/login.js
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var pin = '';
|
||||||
|
var dots = document.querySelectorAll('#pinDots .pin-dot');
|
||||||
|
var errorEl = document.getElementById('loginError');
|
||||||
|
|
||||||
|
// Get tenant_id from URL param or localStorage
|
||||||
|
var tenantId = new URLSearchParams(window.location.search).get('tenant')
|
||||||
|
|| localStorage.getItem('pos_tenant_id');
|
||||||
|
|
||||||
|
// Device ID (persistent)
|
||||||
|
var deviceId = localStorage.getItem('pos_device_id');
|
||||||
|
if (!deviceId) {
|
||||||
|
deviceId = 'dev-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
|
||||||
|
localStorage.setItem('pos_device_id', deviceId);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if a JWT token is expired by decoding its payload.
|
||||||
|
* Returns true if the token is valid (not expired), false otherwise.
|
||||||
|
*/
|
||||||
|
function isTokenValid(token) {
|
||||||
|
try {
|
||||||
|
var parts = token.split('.');
|
||||||
|
if (parts.length !== 3) return false;
|
||||||
|
// Base64url decode the payload (index 1)
|
||||||
|
var payload = parts[1].replace(/-/g, '+').replace(/_/g, '/');
|
||||||
|
var decoded = JSON.parse(atob(payload));
|
||||||
|
// exp is in seconds, Date.now() is in milliseconds
|
||||||
|
if (!decoded.exp) return false;
|
||||||
|
// Add 30-second buffer to avoid edge cases
|
||||||
|
return (decoded.exp * 1000) > (Date.now() + 30000);
|
||||||
|
} catch (e) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateDots() {
|
||||||
|
dots.forEach(function(dot, i) {
|
||||||
|
dot.classList.toggle('filled', i < pin.length);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addDigit = function(d) {
|
||||||
|
if (pin.length >= 4) return;
|
||||||
|
pin += d;
|
||||||
|
updateDots();
|
||||||
|
errorEl.textContent = '';
|
||||||
|
if (pin.length === 4) {
|
||||||
|
submitPin();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.clearPin = function() {
|
||||||
|
pin = '';
|
||||||
|
updateDots();
|
||||||
|
errorEl.textContent = '';
|
||||||
|
};
|
||||||
|
|
||||||
|
window.submitPin = function() {
|
||||||
|
if (pin.length !== 4) return;
|
||||||
|
errorEl.textContent = '';
|
||||||
|
|
||||||
|
fetch('/pos/api/auth/login', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
tenant_id: parseInt(tenantId),
|
||||||
|
pin: pin,
|
||||||
|
device_id: deviceId
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(function(res) { return res.json().then(function(d) { return { ok: res.ok, data: d }; }); })
|
||||||
|
.then(function(result) {
|
||||||
|
if (!result.ok) {
|
||||||
|
errorEl.textContent = result.data.error || 'Error de autenticacion';
|
||||||
|
clearPin();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
localStorage.setItem('pos_token', result.data.token);
|
||||||
|
localStorage.setItem('pos_employee', JSON.stringify(result.data.employee));
|
||||||
|
localStorage.setItem('pos_tenant_id', tenantId);
|
||||||
|
window.location.href = '/pos/catalog';
|
||||||
|
})
|
||||||
|
.catch(function() {
|
||||||
|
errorEl.textContent = 'Error de conexion';
|
||||||
|
clearPin();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Keyboard support
|
||||||
|
document.addEventListener('keydown', function(e) {
|
||||||
|
if (e.key >= '0' && e.key <= '9') addDigit(e.key);
|
||||||
|
else if (e.key === 'Backspace') clearPin();
|
||||||
|
else if (e.key === 'Enter') submitPin();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Auto-redirect if already logged in AND token is not expired
|
||||||
|
var token = localStorage.getItem('pos_token');
|
||||||
|
if (token && tenantId) {
|
||||||
|
if (isTokenValid(token)) {
|
||||||
|
window.location.href = '/pos/catalog';
|
||||||
|
} else {
|
||||||
|
// Token expired — clean up and stay on login page
|
||||||
|
localStorage.removeItem('pos_token');
|
||||||
|
localStorage.removeItem('pos_employee');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})();
|
||||||
53
pos/templates/login.html
Normal file
53
pos/templates/login.html
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
<!-- /home/Autopartes/pos/templates/login.html -->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Nexus POS — Login</title>
|
||||||
|
<link rel="stylesheet" href="/pos/static/css/common.css">
|
||||||
|
<style>
|
||||||
|
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--color-bg); }
|
||||||
|
.login-card { text-align: center; max-width: 340px; width: 100%; padding: 40px; }
|
||||||
|
.login-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
|
||||||
|
.login-subtitle { color: var(--color-text-secondary); font-size: 0.9rem; margin-bottom: 24px; }
|
||||||
|
.pin-dots { display: flex; gap: 12px; justify-content: center; margin-bottom: 24px; }
|
||||||
|
.pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-border); transition: all 0.2s; }
|
||||||
|
.pin-dot.filled { background: var(--color-primary); border-color: var(--color-primary); }
|
||||||
|
.pin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 260px; margin: 0 auto; }
|
||||||
|
.pin-btn { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--color-border); background: var(--color-surface); font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; cursor: pointer; transition: all 0.15s; color: var(--color-text); }
|
||||||
|
.pin-btn:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); }
|
||||||
|
.pin-btn:active { transform: scale(0.95); }
|
||||||
|
.pin-btn--clear { font-size: 0.8rem; font-family: var(--font-body); }
|
||||||
|
.login-error { color: var(--color-error); font-size: 0.85rem; margin-top: 16px; min-height: 20px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="card login-card">
|
||||||
|
<div class="login-title">Nexus POS</div>
|
||||||
|
<div class="login-subtitle">Ingresa tu PIN</div>
|
||||||
|
<div class="pin-dots" id="pinDots">
|
||||||
|
<div class="pin-dot"></div>
|
||||||
|
<div class="pin-dot"></div>
|
||||||
|
<div class="pin-dot"></div>
|
||||||
|
<div class="pin-dot"></div>
|
||||||
|
</div>
|
||||||
|
<div class="pin-grid">
|
||||||
|
<button class="pin-btn" onclick="addDigit('1')">1</button>
|
||||||
|
<button class="pin-btn" onclick="addDigit('2')">2</button>
|
||||||
|
<button class="pin-btn" onclick="addDigit('3')">3</button>
|
||||||
|
<button class="pin-btn" onclick="addDigit('4')">4</button>
|
||||||
|
<button class="pin-btn" onclick="addDigit('5')">5</button>
|
||||||
|
<button class="pin-btn" onclick="addDigit('6')">6</button>
|
||||||
|
<button class="pin-btn" onclick="addDigit('7')">7</button>
|
||||||
|
<button class="pin-btn" onclick="addDigit('8')">8</button>
|
||||||
|
<button class="pin-btn" onclick="addDigit('9')">9</button>
|
||||||
|
<button class="pin-btn pin-btn--clear" onclick="clearPin()">Borrar</button>
|
||||||
|
<button class="pin-btn" onclick="addDigit('0')">0</button>
|
||||||
|
<button class="pin-btn pin-btn--clear" onclick="submitPin()">OK</button>
|
||||||
|
</div>
|
||||||
|
<div class="login-error" id="loginError"></div>
|
||||||
|
</div>
|
||||||
|
<script src="/pos/static/js/login.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user