sustitude flet by flask

app/main.py

@@ -8,8 +8,10 @@ import time
 import base64
 import requests
 import datetime
-from flask import Flask, render_template, request, jsonify, redirect, url_for
+from flask import Flask, render_template, request, jsonify, redirect, url_for, flash
 from flask_socketio import SocketIO, emit
+from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user
+import mysql.connector
 import gitlab
 import telebot
 from telebot import types
@@ -18,7 +20,50 @@ from dotenv import load_dotenv
 
 load_dotenv()
 
-# --- CLASE PARA PERSISTENCIA ---
+# --- APP CONFIG ---
+app = Flask(__name__)
+app.config['SECRET_KEY'] = os.getenv("SECRET_KEY", "maker-secret-key")
+socketio = SocketIO(app, cors_allowed_origins="*")
+
+# --- LOGIN MANAGER ---
+login_manager = LoginManager()
+login_manager.init_app(app)
+login_manager.login_view = 'login'
+login_manager.login_message = "Por favor, inicia sesión para acceder."
+login_manager.login_message_category = "red"
+
+class User(UserMixin):
+    def __init__(self, id, username):
+        self.id = id
+        self.username = username
+
+# --- MYSQL CONFIG ---
+def get_db_connection():
+    try:
+        conn = mysql.connector.connect(
+            host=os.getenv("MYSQL_HOST", "localhost"),
+            user=os.getenv("MYSQL_USER", "root"),
+            password=os.getenv("MYSQL_PASSWORD", ""),
+            database=os.getenv("MYSQL_DB", "makerpage")
+        )
+        return conn
+    except Exception as e:
+        print(f"Error MySQL: {e}")
+        return None
+
+@login_manager.user_loader
+def load_user(user_id):
+    conn = get_db_connection()
+    if not conn: return None
+    cursor = conn.cursor(dictionary=True)
+    cursor.execute("SELECT id, username FROM users WHERE id = %s", (user_id,))
+    user_data = cursor.fetchone()
+    conn.close()
+    if user_data:
+        return User(str(user_data['id']), user_data['username'])
+    return None
+
+# --- CLASE PARA PERSISTENCIA DE PRÉSTAMOS ---
 class LoanManager:
     def __init__(self, filename="prestamos.json"):
         self.filename = filename
@@ -54,12 +99,7 @@ class LoanManager:
 
 loan_mgr = LoanManager()
 
-# --- APP CONFIG ---
-app = Flask(__name__)
-app.config['SECRET_KEY'] = 'maker-secret-key'
-socketio = SocketIO(app, cors_allowed_origins="*")
-
-# --- CONFIGURACIÓN DE VARIABLES GLOBALES ---
+# --- CONFIGURACIÓN DE TELEGRAM ---
 TG_TOKEN = os.getenv("TELEGRAM_TOKEN")
 TG_CHAT_ID = os.getenv("TELEGRAM_CHAT_ID")
 try:
@@ -69,14 +109,12 @@ except:
 
 GOOGLE_PROXY_URL = os.getenv("GOOGLE_PROXY_URL") or "https://script.google.com/macros/s/AKfycbz7z1Jb0vsur42GmmqrL3PVXeRkN2WxSojFDIleEDoLOg6MnrmJjb_uuPcQ15CTwyzD/exec"
 
-# --- CONFIGURACIÓN DE PROXY PARA EL BOT ---
 if TG_TOKEN and GOOGLE_PROXY_URL:
     base_url = GOOGLE_PROXY_URL.split('?')[0]
     telebot.apihelper.API_URL = base_url + "?path={1}&token={0}"
     telebot.apihelper.CONNECT_TIMEOUT = 60
     telebot.apihelper.READ_TIMEOUT = 60
 
-# Inicializar bot
 bot = telebot.TeleBot(TG_TOKEN) if TG_TOKEN else None
 
 def escape_md(text):
@@ -154,6 +192,43 @@ if bot:
 def index():
     return render_template('index.html', title="MAKER STATION")
 
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    if current_user.is_authenticated:
+        return redirect(url_for('repos'))
+        
+    if request.method == 'POST':
+        username = request.form.get('username')
+        password = request.form.get('password')
+        
+        conn = get_db_connection()
+        if not conn:
+            flash("Error de conexión a la base de datos", "red")
+            return render_template('login.html')
+            
+        cursor = conn.cursor(dictionary=True)
+        # NOTA: En producción usar hashing (e.g. werkzeug.security)
+        cursor.execute("SELECT id, username FROM users WHERE username = %s AND password = %s", (username, password))
+        user_data = cursor.fetchone()
+        conn.close()
+        
+        if user_data:
+            user = User(str(user_data['id']), user_data['username'])
+            login_user(user)
+            flash(f"¡Bienvenido, {username}!", "green")
+            return redirect(url_for('repos'))
+        else:
+            flash("Usuario o contraseña incorrectos", "red")
+            
+    return render_template('login.html', title="Login")
+
+@app.route('/logout')
+@login_required
+def logout():
+    logout_user()
+    flash("Has cerrado sesión", "blue")
+    return redirect(url_for('index'))
+
 @app.route('/prestamos')
 def prestamos():
     loans = loan_mgr.get_all()
@@ -207,6 +282,7 @@ def api_prestamo():
     return jsonify({"status": "success", "id": loan_id})
 
 @app.route('/repos')
+@login_required
 def repos():
     GITLAB_URL = "https://gitlab.com"
     GIT_TOKEN = os.getenv("GITLAB_TOKEN")
@@ -217,10 +293,12 @@ def repos():
         try:
             gl = gitlab.Gitlab(GITLAB_URL, private_token=GIT_TOKEN)
             projects = gl.groups.get(GIT_GROUP).projects.list(all=True)
-        except: pass
+        except Exception as e:
+            print(f"GitLab Error: {e}")
     return render_template('repos.html', title="Proyectos", projects=projects)
 
 @app.route('/ver/<pid>/<pname>')
+@login_required
 def ver_repo(pid, pname):
     GIT_TOKEN = os.getenv("GITLAB_TOKEN")
     GITLAB_URL = "https://gitlab.com"

app/requirements.txt

@@ -7,3 +7,5 @@ python-dotenv
 gunicorn
 eventlet
 markdown
+flask-login
+mysql-connector-python

app/static/manifest.json

@@ -0,0 +1,27 @@
+{
+    "name": "Maker Station",
+    "short_name": "MakerStation",
+    "description": "Panel de control para Maker Station",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#0f172a",
+    "theme_color": "#38bdf8",
+    "icons": [
+        {
+            "src": "/static/assets/icon192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/assets/icon-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/assets/apple-touch-icon.png",
+            "sizes": "180x180",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}

app/static/sw.js

@@ -0,0 +1,22 @@
+const CACHE_NAME = 'maker-station-v1';
+const ASSETS = [
+    '/',
+    '/static/css/style.css',
+    '/static/js/script.js',
+    '/static/assets/favicon.png',
+    '/static/assets/icon192x192.png'
+];
+
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS))
+    );
+});
+
+self.addEventListener('fetch', (event) => {
+    event.respondWith(
+        caches.match(event.request).then((response) => {
+            return response || fetch(event.request);
+        })
+    );
+});

app/templates/base.html

@@ -5,6 +5,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ title or "MAKERSTATION" }}</title>
+
+    <!-- PWA Meta Tags -->
+    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
+    <meta name="theme-color" content="#38bdf8">
+    <link rel="apple-touch-icon" href="{{ url_for('static', filename='assets/apple-touch-icon.png') }}">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="Maker Station">
+
     <link rel="icon" href="{{ url_for('static', filename='assets/favicon.png') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Outfit:wght@500;700&display=swap"
@@ -21,16 +30,34 @@
                 <span>MAKER STATION</span>
             </a>
             <div class="nav-links">
-                <a href="/repos" class="nav-item">PROYECTOS</a>
                 <a href="/prestamos" class="nav-item">PRÉSTAMOS</a>
+                <a href="/repos" class="nav-item">PROYECTOS</a>
+                {% if current_user.is_authenticated %}
+                <a href="/logout" class="nav-item" style="color: #ef4444;"><i class="fas fa-sign-out-alt"></i></a>
+                {% endif %}
+            </div>
+            <div style="display: flex; gap: 1rem; align-items: center;">
+                <button id="install-btn" class="btn-icon" style="display: none;">
+                    <i class="fas fa-download"></i>
+                </button>
+                <button id="notif-btn" class="btn-icon">
+                    <i class="fas fa-bell"></i>
+                </button>
             </div>
-            <button id="notif-btn" class="btn-icon">
-                <i class="fas fa-bell"></i>
-            </button>
         </div>
     </nav>
 
     <main class="content-wrapper">
+        {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+        {% for category, message in messages %}
+        <div class="notification glass {{ category }}" style="margin-bottom: 2rem;">
+            <i class="fas fa-exclamation-circle"></i> <span>{{ message }}</span>
+        </div>
+        {% endfor %}
+        {% endif %}
+        {% endwith %}
+
         {% block content %}{% endblock %}
     </main>
 
@@ -38,12 +65,8 @@
 
     <script src="{{ url_for('static', filename='js/script.js') }}"></script>
     <script>
+        // Socket.IO
         const socket = io();
-
-        socket.on('connect', () => {
-            console.log('Static Connection established');
-        });
-
         socket.on('notification', (data) => {
             showNotification(data.text, data.color || 'blue');
         });
@@ -56,7 +79,10 @@
             container.appendChild(notif);
 
             if ("Notification" in window && Notification.permission === "granted") {
-                new Notification("MAKER STATION", { body: text });
+                new Notification("MAKER STATION", {
+                    body: text,
+                    icon: "/static/assets/icon192x192.png"
+                });
             }
 
             setTimeout(() => {
@@ -65,11 +91,44 @@
             }, 5000);
         }
 
+        // Notification Permission
         document.getElementById('notif-btn').addEventListener('click', () => {
             if ("Notification" in window) {
                 Notification.requestPermission();
             }
         });
+
+        // PWA Service Worker Registration
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('/static/sw.js').then((reg) => {
+                    console.log('SW Registered', reg);
+                }).catch((err) => {
+                    console.log('SW Registration failed', err);
+                });
+            });
+        }
+
+        // PWA Install Prompt
+        let deferredPrompt;
+        const installBtn = document.getElementById('install-btn');
+
+        window.addEventListener('beforeinstallprompt', (e) => {
+            e.preventDefault();
+            deferredPrompt = e;
+            installBtn.style.display = 'block';
+        });
+
+        installBtn.addEventListener('click', async () => {
+            if (deferredPrompt) {
+                deferredPrompt.prompt();
+                const { outcome } = await deferredPrompt.userChoice;
+                if (outcome === 'accepted') {
+                    installBtn.style.display = 'none';
+                }
+                deferredPrompt = null;
+            }
+        });
     </script>
 </body>
 

app/templates/login.html

@@ -0,0 +1,28 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="hero section" style="text-align: center; margin-bottom: 3rem;">
+    <h1>INICIO DE SESIÓN</h1>
+    <p class="text-dim">Accede a los proyectos de Maker Station.</p>
+</div>
+
+<div class="glass" style="max-width: 400px; margin: 0 auto; padding: 2.5rem; border-radius: 24px;">
+    <form method="POST">
+        <div class="form-group">
+            <label for="username">Usuario</label>
+            <input type="text" id="username" name="username" placeholder="Tu usuario" required autofocus>
+        </div>
+        <div class="form-group">
+            <label for="password">Contraseña</label>
+            <input type="password" id="password" name="password" placeholder="••••••••" required>
+        </div>
+        <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 1rem;">
+            ENTRAR <i class="fas fa-sign-in-alt" style="margin-left: 0.5rem;"></i>
+        </button>
+    </form>
+
+    <div style="margin-top: 2rem; text-align: center; font-size: 0.85rem;" class="text-dim">
+        <p>Esta sección está protegida para miembros de Maker Station.</p>
+    </div>
+</div>
+{% endblock %}