Upload 9 files

.env

@@ -0,0 +1,3 @@
+MONGO_URI=mongodb+srv://mikmc55:[email protected]/?retryWrites=true&w=majority&appName=hy0
+SESSION_SECRET=bhdsaububsb387444nxkj
+PORT=3001

app.js

@@ -0,0 +1,87 @@
+require('dotenv').config();
+
+const express = require('express');
+const mongoose = require('mongoose');
+const session = require('express-session');
+const path = require('path');
+const fetch = require('node-fetch');
+const cors = require('cors');
+const logger = require('./logger');
+
+const app = express();
+const port = process.env.PORT || 3001;
+
+// MongoDB connection setup
+const mongoUri = "mongodb+srv://mikmc55:[email protected]/?retryWrites=true&w=majority&appName=hy0";
+mongoose.connect(mongoUri, {
+    useNewUrlParser: true,
+    useUnifiedTopology: true,
+})
+.then(() => logger.info('Connected to MongoDB successfully'))
+.catch(err => logger.error('Failed to connect to MongoDB:', err));
+
+// Configuration and constants setup
+const config = {
+    SESSION_SECRET: process.env.SESSION_SECRET || "bhdsaububsb387444nxkj"
+};
+
+const STREMIO_API = {
+    BASE_URL: "https://api.strem.io/api",
+    LOGIN: "/login",
+    REGISTER: "/register",
+    ADDON_COLLECTION_GET: "/addonCollectionGet",
+    ADDON_COLLECTION_SET: "/addonCollectionSet",
+    LOGOUT: "/logout"
+};
+
+const corsOptions = {
+    origin: "*",
+    methods: ["GET", "POST", "DELETE", "PUT", "PATCH"],
+    allowedHeaders: ["Content-Type", "Authorization"],
+    credentials: true,
+    maxAge: 86400
+};
+
+// Process error handlers
+process.on("uncaughtException", (error) => {
+    logger.error("Uncaught Exception:", error);
+    process.exit(1);
+});
+
+process.on("unhandledRejection", (reason, promise) => {
+    logger.error("Unhandled Rejection at:", promise, "reason:", reason);
+});
+
+// Middleware setup
+app.use(cors(corsOptions));
+app.options("*", cors(corsOptions));
+app.use(express.json({ limit: "50mb" }));
+app.use(express.static("public"));
+app.use(session({
+    secret: config.SESSION_SECRET,
+    resave: false,
+    saveUninitialized: true,
+    cookie: { 
+        secure: false,
+        maxAge: 24 * 60 * 60 * 1000
+    }
+}));
+
+// Routes and logic remain unchanged
+// Insert your existing routes and middleware here
+
+// Server initialization
+async function startServer() {
+    try {
+        app.listen(port, () => {
+            logger.info(`Server started on port ${port}`);
+        });
+    } catch (error) {
+        logger.error('Failed to initialize:', error);
+        process.exit(1);
+    }
+}
+
+startServer();
+
+module.exports = app;

database.js

@@ -0,0 +1,160 @@
+const mongoose = require('mongoose');
+const logger = require('./logger');
+
+const MONGODB_URI = process.env.MONGODB_URI || 'mongodb://localhost:27017/stremio-manager';
+
+// Connection options
+const options = {
+    useNewUrlParser: true,
+    useUnifiedTopology: true,
+    serverSelectionTimeoutMS: 5000,
+    socketTimeoutMS: 45000,
+};
+
+// Create connection
+let db;
+
+async function connectDB() {
+    try {
+        if (!db) {
+            db = await mongoose.connect(MONGODB_URI, options);
+            logger.info('MongoDB connected successfully');
+        }
+        return db;
+    } catch (error) {
+        logger.error('MongoDB connection error:', error);
+        throw error;
+    }
+}
+
+// Initialize connection before starting server
+async function initializeDB() {
+    await connectDB();
+}
+
+mongoose.connection.on('error', err => {
+    logger.error('MongoDB error:', err);
+});
+
+mongoose.connection.on('disconnected', () => {
+    logger.warn('MongoDB disconnected. Attempting to reconnect...');
+    connectDB();
+});
+
+// Define schemas
+const userSchema = new mongoose.Schema({
+    email: { type: String, required: true, unique: true },
+    password: { type: String, required: true },
+    lastSync: Date,
+    managedBy: { type: String, required: true }
+});
+
+const addonSchema = new mongoose.Schema({
+    transportUrl: { type: String, required: true },
+    transportName: { type: String, default: 'http' },
+    manifest: {
+        id: String,
+        name: String,
+        version: String,
+        description: String,
+        logo: String,
+        icon: String
+    },
+    flags: { type: Map, of: Boolean },
+    userEmail: { type: String, required: true }
+});
+
+const catalogSchema = new mongoose.Schema({
+    userEmail: { type: String, required: true },
+    addons: [{
+        transportUrl: String,
+        transportName: String,
+        manifest: {
+            id: String,
+            name: String,
+            version: String,
+            description: String,
+            logo: String,
+            icon: String
+        },
+        flags: { type: Map, of: Boolean }
+    }]
+});
+
+// Create models
+const User = mongoose.model('User', userSchema);
+const Addon = mongoose.model('Addon', addonSchema);
+const Catalog = mongoose.model('Catalog', catalogSchema);
+
+// Database helper functions
+async function ensureUserDatabases(email) {
+    const catalog = await Catalog.findOne({ userEmail: email });
+    if (!catalog) {
+        await Catalog.create({ userEmail: email, addons: [] });
+    }
+}
+
+async function readDatabase(email) {
+    const addons = await Addon.find({ userEmail: email });
+    return addons;
+}
+
+async function writeDatabase(email, data) {
+    await Addon.deleteMany({ userEmail: email });
+    if (data.length > 0) {
+        const addonsWithUser = data.map(addon => ({ ...addon, userEmail: email }));
+        await Addon.insertMany(addonsWithUser);
+    }
+    logger.debug('Database updated successfully');
+}
+
+async function readUsersDatabase(email) {
+    const users = await User.find({ managedBy: email });
+    return users.map(user => ({
+        email: user.email,
+        password: user.password,
+        lastSync: user.lastSync
+    }));
+}
+
+async function writeUsersDatabase(email, data) {
+    await User.deleteMany({ managedBy: email });
+    if (data.length > 0) {
+        const usersWithManager = data.map(user => ({
+            ...user,
+            managedBy: email
+        }));
+        await User.insertMany(usersWithManager);
+    }
+    logger.debug('Users database updated successfully');
+}
+
+async function writeCatalog(email, catalogs) {
+    await Catalog.findOneAndUpdate(
+        { userEmail: email },
+        { addons: catalogs },
+        { upsert: true }
+    );
+}
+
+async function readCatalog(email) {
+    const catalog = await Catalog.findOne({ userEmail: email });
+    return catalog ? catalog.addons : [];
+}
+
+module.exports = {
+    connectDB,
+    initializeDB,
+    ensureUserDatabases,
+    readDatabase,
+    writeDatabase,
+    readUsersDatabase,
+    writeUsersDatabase,
+    writeCatalog,
+    readCatalog,
+    models: {
+        User,
+        Addon,
+        Catalog
+    }
+};

logger.js

@@ -0,0 +1,70 @@
+const winston = require('winston');
+const DailyRotateFile = require('winston-daily-rotate-file');
+const path = require('path');
+
+// Define log format
+const logFormat = winston.format.combine(
+    winston.format.timestamp({
+        format: 'YYYY-MM-DD HH:mm:ss'
+    }),
+    winston.format.errors({ stack: true }),
+    winston.format.splat(),
+    winston.format.json()
+);
+
+// Create logs directory if it doesn't exist
+const logDir = 'logs';
+
+// Configure daily rotate file transport
+const fileRotateTransport = new DailyRotateFile({
+    filename: path.join(logDir, 'stremio-addon-manager-%DATE%.log'),
+    datePattern: 'YYYY-MM-DD',
+    maxSize: '20m',
+    maxFiles: '14d',
+    createSymlink: true,
+    symlinkName: 'current.log'
+});
+
+// Create logger instance
+const logger = winston.createLogger({
+    level: process.env.NODE_ENV === 'production' ? 'info' : 'debug',
+    format: logFormat,
+    transports: [
+        // Write all logs with level 'error' and below to error.log
+        new winston.transports.File({ 
+            filename: path.join(logDir, 'error.log'), 
+            level: 'error',
+            format: winston.format.combine(
+                winston.format.timestamp(),
+                winston.format.json()
+            )
+        }),
+        // Write all logs with level 'info' and below to combined.log
+        fileRotateTransport
+    ]
+});
+
+// If we're not in production, also log to the console with colorized output
+if (process.env.NODE_ENV !== 'production') {
+    logger.add(new winston.transports.Console({
+        format: winston.format.combine(
+            winston.format.colorize(),
+            winston.format.simple(),
+            winston.format.printf(({ level, message, timestamp, stack }) => {
+                if (stack) {
+                    return `${timestamp} ${level}: ${message}\n${stack}`;
+                }
+                return `${timestamp} ${level}: ${message}`;
+            })
+        )
+    }));
+}
+
+// Create a stream object with a write function for Morgan
+logger.stream = {
+    write: function(message) {
+        logger.info(message.trim());
+    }
+};
+
+module.exports = logger;

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "stremio-addon-manager",
+  "version": "1.0.0",
+  "description": "A web application to manage Stremio addons",
+  "main": "app.js",
+  "scripts": {
+    "start": "node app.js",
+    "dev": "nodemon app.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "stremio",
+    "addon",
+    "manager"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.7",
+    "express": "^4.18.2",
+    "express-session": "^1.17.3",
+    "mongoose": "^8.9.5",
+    "node-fetch": "^2.6.1",
+    "winston": "^3.17.0",
+    "winston-daily-rotate-file": "^5.0.0"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.22"
+  }
+}

public/css/style.css

@@ -0,0 +1,465 @@
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* General Layout */
+body {
+    font-family: Arial, sans-serif;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #111827;
+    line-height: 1.6;
+    color: #e5e7eb;
+}
+
+/* Container Styles */
+.form-container {
+    background: #1f2937;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    margin-bottom: 20px;
+    border: 1px solid #374151;
+}
+
+/* Form Elements */
+.form-group {
+    margin-bottom: 15px;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: 500;
+    color: #e5e7eb;
+}
+
+input {
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid #374151;
+    border-radius: 6px;
+    font-size: 14px;
+    background-color: #1f2937;
+    color: #e5e7eb;
+    transition: all 0.2s ease;
+}
+
+input:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+    background-color: #262f3f;
+}
+
+input::placeholder {
+    color: #6b7280;
+}
+
+/* Button Styles */
+button {
+    background-color: #3b82f6;
+    color: #ffffff;
+    padding: 8px 16px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    margin-right: 5px;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+button:hover {
+    background-color: #2563eb;
+    transform: translateY(-1px);
+}
+
+button:active {
+    transform: translateY(0);
+}
+
+button:disabled {
+    background-color: #4b5563;
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
+.delete-btn {
+    background-color: #dc2626;
+}
+
+.delete-btn:hover {
+    background-color: #b91c1c;
+}
+
+.refresh-btn, .sync-btn {
+    background-color: #3b82f6;
+}
+
+.refresh-btn:hover, .sync-btn:hover {
+    background-color: #2563eb;
+}
+
+.install-btn {
+    display: inline-block;
+    text-decoration: none;
+    background-color: #059669;
+    color: white;
+    padding: 8px 16px;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+}
+
+.install-btn:hover {
+    background-color: #047857;
+}
+
+/* Grid Layouts */
+.addon-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.users-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+/* Card Styles */
+.addon-item, .user-item {
+    background: #1f2937;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    transition: all 0.2s ease;
+    border: 1px solid #374151;
+}
+
+.addon-item:hover, .user-item:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
+    border-color: #4b5563;
+}
+
+/* Addon Specific Styles */
+.addon-item img {
+    max-width: 100px;
+    height: auto;
+    margin-bottom: 10px;
+    border-radius: 6px;
+}
+
+.addon-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.addon-title {
+    margin: 0;
+    font-size: 1.2em;
+    color: #e5e7eb;
+    font-weight: 600;
+}
+
+.addon-version {
+    color: #9ca3af;
+    font-size: 0.9em;
+}
+
+.addon-description {
+    margin: 10px 0;
+    color: #d1d5db;
+    font-size: 0.95em;
+    line-height: 1.5;
+}
+
+.addon-url {
+    word-break: break-all;
+    color: #9ca3af;
+    font-size: 0.9em;
+    padding: 8px;
+    background: #262f3f;
+    border-radius: 4px;
+    border: 1px solid #374151;
+}
+
+/* Progress Bar Styles */
+.sync-progress {
+    margin: 15px 0;
+    padding: 12px;
+    background: #262f3f;
+    border-radius: 6px;
+    border: 1px solid #374151;
+}
+
+.sync-status {
+    margin-bottom: 8px;
+    font-size: 14px;
+    color: #9ca3af;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 8px;
+    background: #374151;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: #3b82f6;
+    width: 0;
+    transition: width 0.3s ease;
+}
+
+/* Loading States */
+.loading {
+    text-align: center;
+    padding: 20px;
+    color: #9ca3af;
+}
+
+.loading i {
+    color: #3b82f6;
+}
+
+/* Utility Classes */
+.hidden {
+    display: none !important;
+}
+
+/* Button Groups */
+.button-group {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+/* File Input Styling */
+input[type="file"] {
+    display: none;
+}
+
+.file-input-label {
+    display: inline-block;
+    padding: 8px 16px;
+    background-color: #4b5563;
+    color: white;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.file-input-label:hover {
+    background-color: #374151;
+}
+
+/* Empty States */
+.empty-state {
+    text-align: center;
+    padding: 40px 20px;
+    color: #9ca3af;
+    background: #1f2937;
+    border-radius: 8px;
+    border: 2px dashed #374151;
+}
+
+.empty-state i {
+    font-size: 48px;
+    margin-bottom: 16px;
+    color: #4b5563;
+}
+
+/* Error States */
+.error {
+    background-color: #7f1d1d;
+    color: #fecaca;
+    padding: 12px;
+    border-radius: 6px;
+    margin: 10px 0;
+    border: 1px solid #dc2626;
+}
+
+/* Modal Styles */
+.modal {
+    background: #1f2937;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+    border: 1px solid #374151;
+}
+
+.modal-header {
+    border-bottom: 1px solid #374151;
+    padding-bottom: 10px;
+    margin-bottom: 15px;
+}
+
+.modal-footer {
+    border-top: 1px solid #374151;
+    padding-top: 15px;
+    margin-top: 15px;
+}
+
+/* Table Styles */
+table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    margin: 1rem 0;
+    background: #1f2937;
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+th, td {
+    padding: 12px;
+    text-align: left;
+    border-bottom: 1px solid #374151;
+    color: #e5e7eb;
+}
+
+th {
+    background-color: #262f3f;
+    font-weight: 600;
+    color: #e5e7eb;
+}
+
+tr:last-child td {
+    border-bottom: none;
+}
+
+tr:hover td {
+    background-color: #262f3f;
+}
+
+/* Sidebar Specific Styles */
+.sidebar {
+    background-color: #1f2937;
+    border-right: 1px solid #374151;
+}
+
+.sidebar-item {
+    color: #e5e7eb;
+    padding: 10px 15px;
+    border-radius: 6px;
+    margin: 2px 0;
+    transition: all 0.2s ease;
+}
+
+.sidebar-item:hover {
+    background-color: #262f3f;
+}
+
+.sidebar-item.active {
+    background-color: #2563eb;
+    color: white;
+}
+
+/* Notification Styles */
+.notification {
+    background-color: #1f2937;
+    border-left: 4px solid #3b82f6;
+    padding: 12px;
+    margin: 10px 0;
+    border-radius: 0 6px 6px 0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.notification.success {
+    border-left-color: #059669;
+}
+
+.notification.error {
+    border-left-color: #dc2626;
+}
+
+.notification.warning {
+    border-left-color: #d97706;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #1f2937;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #4b5563;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
+}
+
+/* Media Queries */
+@media (max-width: 768px) {
+    .addon-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .button-group {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    button {
+        width: 100%;
+        margin-bottom: 5px;
+    }
+
+    .form-container {
+        padding: 15px;
+    }
+}
+
+@media (max-width: 480px) {
+    body {
+        padding: 10px;
+    }
+
+    .addon-item, .user-item {
+        padding: 15px;
+    }
+
+    .notification {
+        padding: 10px;
+    }
+}
+
+/* Print Styles */
+@media print {
+    body {
+        background: white;
+        color: black;
+    }
+
+    .form-container, .addon-item, .user-item {
+        box-shadow: none;
+        border: 1px solid #ddd;
+    }
+
+    .no-print {
+        display: none !important;
+    }
+}

public/index.html

@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stremio Addon Manager</title>
+    
+    <!-- React and ReactDOM -->
+    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+    
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    
+    <!-- Tailwind Config for Dark Mode -->
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        dark: {
+                            bg: '#111827',
+                            card: '#1f2937',
+                            text: '#e5e7eb',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="/css/style.css">
+</head>
+<body class="bg-gray-900 text-gray-200">
+    <!-- Login Section -->
+    <div id="loginForm" class="flex items-center justify-center min-h-screen bg-gray-900">
+        <div class="form-container w-full max-w-md bg-gray-800 shadow-xl">
+            <h2 class="text-2xl font-bold mb-6 text-center text-gray-100">Login with Stremio</h2>
+            <form id="loginFormElement" class="space-y-4">
+                <div class="form-group">
+                    <label for="email" class="block text-sm font-medium text-gray-200">Email:</label>
+                    <input type="email" id="email" required 
+                           class="mt-1 block w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md shadow-sm text-gray-200 
+                                  focus:ring-blue-500 focus:border-blue-500">
+                </div>
+                <div class="form-group">
+                    <label for="password" class="block text-sm font-medium text-gray-200">Password:</label>
+                    <input type="password" id="password" required
+                           class="mt-1 block w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md shadow-sm text-gray-200
+                                  focus:ring-blue-500 focus:border-blue-500">
+                </div>
+                <div class="button-group">
+                    <button type="submit" 
+                            class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-white bg-blue-600 
+                                   hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                        Login with Stremio
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Root for React Content -->
+    <div id="root" class="hidden"></div>
+<!-- Main Content Sections -->
+    <div id="mainContent" class="hidden">
+        <!-- Dashboard Section -->
+        <div id="dashboardSection" class="section-content">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-700">
+                    <div class="flex items-center justify-between">
+                        <h3 class="text-lg font-medium text-gray-200">Total Users</h3>
+                        <i data-lucide="users" class="w-6 h-6 text-blue-500"></i>
+                    </div>
+                    <p class="text-3xl font-bold mt-2 text-gray-100" id="totalUsers">0</p>
+                </div>
+                <div class="bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-700">
+                    <div class="flex items-center justify-between">
+                        <h3 class="text-lg font-medium text-gray-200">Active Addons</h3>
+                        <i data-lucide="package" class="w-6 h-6 text-green-500"></i>
+                    </div>
+                    <p class="text-3xl font-bold mt-2 text-gray-100" id="activeAddons">0</p>
+                </div>
+                <div class="bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-700">
+                    <div class="flex items-center justify-between">
+                        <h3 class="text-lg font-medium text-gray-200">Last Sync</h3>
+                        <i data-lucide="clock" class="w-6 h-6 text-purple-500"></i>
+                    </div>
+                    <p class="text-lg mt-2 text-gray-300" id="lastSync">Never</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Register Section -->
+        <div id="registerSection" class="section-content hidden">
+            <div class="bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-700">
+                <h2 class="text-xl font-semibold mb-4 text-gray-100">Register New Stremio Account</h2>
+                <form id="stremioRegisterForm" class="space-y-4">
+                    <div class="form-group">
+                        <label for="stremioRegEmail" class="block text-sm font-medium text-gray-200">Email:</label>
+                        <input type="email" id="stremioRegEmail" required
+                               class="mt-1 block w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-gray-200">
+                    </div>
+                    <div class="form-group">
+                        <label for="stremioRegPassword" class="block text-sm font-medium text-gray-200">Password:</label>
+                        <input type="password" id="stremioRegPassword" required
+                               class="mt-1 block w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-gray-200">
+                    </div>
+                    <div class="form-group flex items-center">
+                        <input type="checkbox" id="gdprConsent" required 
+                               class="h-4 w-4 text-blue-600 bg-gray-700 border-gray-600 rounded">
+                        <label for="gdprConsent" class="ml-2 block text-sm text-gray-200">
+                            I agree to the Terms of Service and Privacy Policy
+                        </label>
+                    </div>
+                    <button type="submit" 
+                            class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
+                        Register New Stremio Account
+                    </button>
+                </form>
+            </div>
+        </div>
+
+        <!-- Addons Section -->
+        <div id="addonsSection" class="section-content hidden">
+            <!-- Add New Addon Form -->
+            <div class="bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-700 mb-6">
+                <h2 class="text-xl font-semibold mb-4 text-gray-100">Add New Addon</h2>
+                <form id="addonForm" class="space-y-4">
+                    <div class="form-group">
+                        <label for="manifestUrl" class="block text-sm font-medium text-gray-200">Manifest URL:</label>
+                        <input type="url" id="manifestUrl" required 
+                               placeholder="https://example.com/manifest.json"
+                               class="mt-1 block w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-gray-200">
+                    </div>
+                    <button type="submit" 
+                            class="py-2 px-4 border border-transparent rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
+                        Add Addon
+                    </button>
+                </form>
+            </div>
+
+            <!-- Installed Addons -->
+            <div class="bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-700">
+                <div class="flex items-center justify-between mb-6">
+                    <h2 class="text-xl font-semibold text-gray-100">Installed Addons</h2>
+                    <div class="flex gap-2">
+                        <button onclick="updateAddonList()" 
+                                class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
+                            <i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i>
+                            Refresh
+                        </button>
+                        <button onclick="exportAddons()" 
+                                class="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
+                            <i data-lucide="download" class="w-4 h-4 mr-2"></i>
+                            Export
+                        </button>
+                        <input type="file" id="importFile" accept=".json" class="hidden">
+                        <button onclick="document.getElementById('importFile').click()" 
+                                class="flex items-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
+                            <i data-lucide="upload" class="w-4 h-4 mr-2"></i>
+                            Import
+                        </button>
+                    </div>
+                </div>
+                <div id="loadingState" class="loading hidden text-center py-8">
+                    <i data-lucide="loader" class="w-8 h-8 mx-auto animate-spin text-blue-600"></i>
+                    <p class="mt-2 text-gray-400">Loading addons...</p>
+                </div>
+                <div id="addons" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
+            </div>
+        </div>
+
+        <!-- Users Section -->
+        <div id="usersSection" class="section-content hidden">
+            <!-- Add User Form -->
+            <div class="bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-700 mb-6">
+                <h2 class="text-xl font-semibold mb-4 text-gray-100">Add New User</h2>
+                <form id="userForm" class="space-y-4">
+                    <div class="form-group">
+                        <label for="userEmail" class="block text-sm font-medium text-gray-200">Stremio Email:</label>
+                        <input type="email" id="userEmail" required
+                               class="mt-1 block w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-gray-200">
+                    </div>
+                    <div class="form-group">
+                        <label for="userPassword" class="block text-sm font-medium text-gray-200">Stremio Password:</label>
+                        <input type="password" id="userPassword" required
+                               class="mt-1 block w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-gray-200">
+                    </div>
+                    <button type="submit" 
+                            class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
+                        Add User
+                    </button>
+                </form>
+            </div>
+
+            <!-- Users List -->
+            <div class="bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-700">
+                <div class="flex items-center justify-between mb-6">
+                    <h2 class="text-xl font-semibold text-gray-100">Registered Users</h2>
+                    <div class="flex gap-2">
+                        <button onclick="syncAllUsersWithProgress()" 
+                                class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
+                            <i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i>
+                            Sync All Users
+                        </button>
+                        <button onclick="updateUsersList()"
+                                class="flex items-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
+                            <i data-lucide="refresh" class="w-4 h-4 mr-2"></i>
+                            Refresh
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- Sync Progress Bar -->
+                <div id="syncProgress" class="hidden mb-6">
+                    <div class="sync-status text-sm text-gray-400 mb-2"></div>
+                    <div class="w-full bg-gray-700 rounded-full h-2">
+                        <div class="progress-fill bg-blue-600 h-2 rounded-full transition-all duration-300"></div>
+                    </div>
+                </div>
+
+                <!-- Loading State -->
+                <div id="loadingUsers" class="loading hidden text-center py-8">
+                    <i data-lucide="loader" class="w-8 h-8 mx-auto animate-spin text-blue-600"></i>
+                    <p class="mt-2 text-gray-400">Loading users...</p>
+                </div>
+
+                <!-- Users List Container -->
+                <div id="usersList" class="divide-y divide-gray-700">
+                    <!-- User items will be dynamically inserted here -->
+                </div>
+            </div>
+        </div>
+
+        <!-- Settings Section -->
+        <div id="settingsSection" class="section-content hidden">
+            <div class="bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-700">
+                <h2 class="text-xl font-semibold mb-6 text-gray-100">Settings</h2>
+                <div class="space-y-4">
+                    <div class="flex justify-between items-center py-4 border-t border-gray-700">
+                        <div>
+                            <h3 class="text-lg font-medium text-gray-200">Account</h3>
+                            <p class="text-sm text-gray-400">Manage your account settings</p>
+                        </div>
+                        <button onclick="handleLogout()" 
+                                class="flex items-center px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
+                            <i data-lucide="log-out" class="w-4 h-4 mr-2"></i>
+                            Logout
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="/js/SidebarLayout.js"></script>
+    <script src="/js/main.js"></script>
+    
+    <!-- Initialize Lucide Icons -->
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            lucide.createIcons();
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                document.documentElement.classList.add('dark');
+            }
+        });
+
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+            if (e.matches) {
+                document.documentElement.classList.add('dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+            }
+        });
+    </script>
+
+</body>
+</html>

public/js/SidebarLayout.js

@@ -0,0 +1,145 @@
+const SidebarLayout = () => {
+    const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+    const [activeSection, setActiveSection] = React.useState('dashboard');
+
+    // Menu items configuration
+    const menuItems = [
+        { id: 'dashboard', label: 'Dashboard', iconName: 'layout-dashboard' },
+        { id: 'register', label: 'Register Stremio', iconName: 'user-plus' },
+        { id: 'addons', label: 'Add New Addon', iconName: 'package' },
+        { id: 'users', label: 'Manage Users', iconName: 'users' },
+        { id: 'settings', label: 'Settings', iconName: 'settings' }
+    ];
+
+    // Effect to move mainContent on first render
+    React.useEffect(() => {
+        const mainContent = document.getElementById('mainContent');
+        const sidebarMainContent = document.querySelector('#root .content-area');
+        
+        if (mainContent && sidebarMainContent) {
+            // Move the content
+            mainContent.classList.remove('hidden');
+            sidebarMainContent.appendChild(mainContent);
+            
+            // Show initial section
+            showSection('dashboard');
+        }
+    }, []);
+
+    // Function to handle section switching
+    const showSection = (sectionId) => {
+        setActiveSection(sectionId);
+
+        // Hide all sections
+        document.querySelectorAll('.section-content').forEach(section => {
+            section.classList.add('hidden');
+        });
+
+        // Show selected section
+        const selectedSection = document.getElementById(`${sectionId}Section`);
+        if (selectedSection) {
+            selectedSection.classList.remove('hidden');
+            
+            // Update content based on section
+            switch (sectionId) {
+                case 'dashboard':
+                    if (window.updateDashboardStats) {
+                        window.updateDashboardStats();
+                    }
+                    break;
+                case 'users':
+                    if (window.updateUsersList) {
+                        window.updateUsersList();
+                    }
+                    break;
+                case 'addons':
+                    if (window.updateAddonList) {
+                        window.updateAddonList();
+                    }
+                    break;
+            }
+        }
+    };
+
+    return React.createElement('div', { 
+        className: 'min-h-screen bg-gray-900'
+    }, [
+        // Top Bar
+        React.createElement('div', { 
+            className: 'bg-gray-800 border-b border-gray-700 shadow-xl fixed top-0 left-0 right-0 h-16 z-30 flex items-center px-4' 
+        }, [
+            React.createElement('button', {
+                key: 'toggle-button',
+                onClick: () => setIsSidebarOpen(!isSidebarOpen),
+                className: 'p-2 hover:bg-gray-700 rounded-lg text-gray-300'
+            }, [
+                React.createElement('i', {
+                    key: 'toggle-icon',
+                    'data-lucide': isSidebarOpen ? 'panel-left-close' : 'panel-left-open',
+                    className: 'w-6 h-6'
+                })
+            ]),
+            React.createElement('h1', { 
+                key: 'title',
+                className: 'text-xl font-semibold ml-4 text-gray-100' 
+            }, 'Stremio Addon Manager')
+        ]),
+
+        // Sidebar
+        React.createElement('div', {
+            className: `fixed left-0 top-16 h-[calc(100vh-4rem)] bg-gray-800 border-r border-gray-700 shadow-xl 
+                       transition-all duration-300 z-20 ${isSidebarOpen ? 'w-64' : 'w-20'}`
+        }, [
+            React.createElement('nav', { 
+                key: 'nav',
+                className: 'p-4' 
+            }, 
+                menuItems.map(item => 
+                    React.createElement('button', {
+                        key: item.id,
+                        onClick: () => showSection(item.id),
+                        className: `w-full flex items-center px-4 py-3 mb-2 rounded-lg transition-colors
+                            ${activeSection === item.id 
+                                ? 'bg-blue-600/20 text-blue-400' 
+                                : 'text-gray-400 hover:bg-gray-700 hover:text-gray-200'}
+                            ${!isSidebarOpen ? 'justify-center' : ''}`
+                    }, [
+                        React.createElement('i', {
+                            key: 'icon',
+                            'data-lucide': item.iconName,
+                            className: 'w-5 h-5'
+                        }),
+                        isSidebarOpen && React.createElement('span', {
+                            key: 'label',
+                            className: 'ml-3'
+                        }, item.label)
+                    ])
+                )
+            )
+        ]),
+
+        // Main Content Area
+        React.createElement('div', {
+            className: `pt-16 transition-all duration-300 ${isSidebarOpen ? 'ml-64' : 'ml-20'}`
+        }, [
+            React.createElement('div', { 
+                key: 'content-wrapper',
+                className: 'p-6' 
+            }, [
+                React.createElement('div', { 
+                    key: 'content-area',
+                    className: 'max-w-6xl mx-auto content-area'
+                })
+            ])
+        ])
+    ]);
+};
+
+// Initialize icons after component renders
+const initIcons = () => {
+    lucide.createIcons();
+};
+
+// Make the component and initialization function available globally
+window.SidebarLayout = SidebarLayout;
+window.initIcons = initIcons;

public/js/main.js

@@ -0,0 +1,753 @@
+// React Component for Device Linking
+const UserLinkComponent = ({ email, password }) => {
+    const [linkCode, setLinkCode] = React.useState('');
+    const [isLinking, setIsLinking] = React.useState(false);
+    const [linkStatus, setLinkStatus] = React.useState(null);
+
+    const handleLink = async () => {
+        if (linkCode.length !== 4) {
+            setLinkStatus({ type: 'error', message: 'Please enter a valid 4-digit code' });
+            return;
+        }
+
+        setIsLinking(true);
+        setLinkStatus(null);
+
+        try {
+            // Step 1: Login to Stremio API
+            const loginResponse = await fetch('https://api.strem.io/api/login', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'text/plain;charset=UTF-8',
+                    'Accept': '*/*',
+                    'Origin': 'https://web.stremio.com',
+                    'Referer': 'https://web.stremio.com/'
+                },
+                body: JSON.stringify({
+                    type: "Login",
+                    email: email,
+                    password: password,
+                    facebook: false
+                })
+            });
+
+            const loginData = await loginResponse.json();
+            if (!loginResponse.ok || !loginData.result?.authKey) {
+                throw new Error(loginData.error || 'Login failed');
+            }
+
+            const authKey = loginData.result.authKey;
+
+            // Step 2: Link the device
+            const linkResponse = await fetch(`https://link.stremio.com/api/write?code=${linkCode}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+                    'Accept': '*/*',
+                    'Origin': 'https://www.stremio.com',
+                    'Referer': 'https://www.stremio.com/'
+                },
+                body: JSON.stringify({ authKey })
+            });
+
+            const linkData = await linkResponse.json();
+            if (!linkResponse.ok || !linkData.success) {
+                throw new Error(linkData.error || 'Failed to link device');
+            }
+
+            setLinkStatus({ type: 'success', message: 'Device linked successfully! Please wait...' });
+
+            // Step 3: Wait for 1 minute before logging out
+            await new Promise(resolve => setTimeout(resolve, 60000));
+
+            // Step 4: Logout from Stremio API
+            await fetch('https://api.strem.io/api/logout', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'text/plain;charset=UTF-8',
+                    'Accept': '*/*'
+                },
+                body: JSON.stringify({
+                    type: "Logout",
+                    authKey: authKey
+                })
+            });
+
+            setLinkStatus({ type: 'success', message: 'Device linked successfully!' });
+        } catch (error) {
+            setLinkStatus({ type: 'error', message: error.message });
+        } finally {
+            setIsLinking(false);
+        }
+    };
+
+    return React.createElement('div', { 
+        className: 'mt-2 flex items-center gap-2'
+    }, [
+        React.createElement('input', {
+            key: 'input',
+            type: 'text',
+            maxLength: '4',
+            placeholder: 'Enter 4-digit code',
+            value: linkCode,
+            onChange: (e) => setLinkCode(e.target.value.toUpperCase()),
+            className: 'w-32 px-3 py-1 border border-gray-300 rounded-md text-center uppercase'
+        }),
+        React.createElement('button', {
+            key: 'button',
+            onClick: handleLink,
+            disabled: isLinking,
+            className: 'inline-flex items-center px-3 py-1 bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50'
+        }, 
+            isLinking ? [
+                React.createElement('i', {
+                    key: 'loader',
+                    'data-lucide': 'loader-2',
+                    className: 'w-4 h-4 mr-2 animate-spin'
+                }),
+                'Linking...'
+            ] : 'Link Device'
+        ),
+        linkStatus && React.createElement('div', {
+            key: 'status',
+            className: `ml-2 px-3 py-1 rounded-md ${linkStatus.type === 'success' ? 'bg-green-50 text-green-800' : 'bg-red-50 text-red-800'}`
+        }, linkStatus.message)
+    ].filter(Boolean));
+};
+// Event Listeners
+document.addEventListener('DOMContentLoaded', () => {
+    const loginForm = document.getElementById('loginFormElement');
+    if (loginForm) loginForm.addEventListener('submit', handleLogin);
+
+    const stremioRegForm = document.getElementById('stremioRegisterForm');
+    if (stremioRegForm) stremioRegForm.addEventListener('submit', handleStremioRegister);
+    
+    const userForm = document.getElementById('userForm');
+    if (userForm) userForm.addEventListener('submit', handleAddUser);
+    
+    const addonForm = document.getElementById('addonForm');
+    if (addonForm) addonForm.addEventListener('submit', handleAddAddon);
+    
+    const importFile = document.getElementById('importFile');
+    if (importFile) importFile.addEventListener('change', handleImportFile);
+
+    checkLoginStatus();
+});
+
+// Core Functions
+window.handleLogin = async (event) => {
+    event.preventDefault();
+    
+    const email = document.getElementById('email').value;
+    const password = document.getElementById('password').value;
+    
+    try {
+        const response = await fetch('/api/login', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'include',
+            body: JSON.stringify({ email, password })
+        });
+        
+        const data = await response.json();
+        
+        if (response.ok && data.success) {
+            localStorage.setItem('currentUserEmail', email);
+            
+            // Fetch catalogs after login
+            const catalogs = await fetchAndUpdateCatalogs();
+            console.log('Fetched catalogs:', catalogs);
+            
+            showMainContent();
+            updateAddonList();
+            updateUsersList();
+            updateDashboardStats();
+        } else {
+            throw new Error(data.error || 'Login failed');
+        }
+    } catch (error) {
+        console.error('Login error:', error);
+        alert('Login failed: ' + error.message);
+    }
+};
+
+window.handleLogout = async () => {
+    try {
+        const response = await fetch('/api/logout', {
+            method: 'POST',
+            credentials: 'include'
+        });
+        
+        if (response.ok) {
+            localStorage.removeItem('mainUserCatalogs');
+            localStorage.removeItem('currentUserEmail');
+            window.location.reload();
+        }
+    } catch (error) {
+        console.error('Logout error:', error);
+        alert('Logout failed: ' + error.message);
+    }
+};
+
+async function fetchAndUpdateCatalogs() {
+    try {
+        const response = await fetch('/api/user/catalog', {
+            credentials: 'include'
+        });
+        
+        if (!response.ok) {
+            throw new Error('Failed to fetch catalogs');
+        }
+        
+        const data = await response.json();
+        console.log('Received catalog data:', data);
+        
+        if (data.success && data.catalog) {
+            const currentUser = localStorage.getItem('currentUserEmail');
+            const catalogData = {
+                mainUser: currentUser,
+                catalogs: data.catalog
+            };
+            console.log('Storing catalog data:', catalogData);
+            localStorage.setItem('mainUserCatalogs', JSON.stringify(catalogData));
+            return data.catalog;
+        }
+    } catch (error) {
+        console.error('Error fetching catalogs:', error);
+        throw error;
+    }
+}
+
+window.handleAddAddon = async (event) => {
+    event.preventDefault();
+    
+    const url = document.getElementById('manifestUrl').value.trim();
+    
+    try {
+        new URL(url);
+    } catch (e) {
+        alert('Please enter a valid URL');
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/addons', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'include',
+            body: JSON.stringify({ url })
+        });
+
+        const data = await response.json();
+        
+        if (response.ok) {
+            alert('Addon added successfully');
+            document.getElementById('addonForm').reset();
+
+            localStorage.setItem('mainUserCatalogs', JSON.stringify({
+                mainUser: localStorage.getItem('currentUserEmail'),
+                catalogs: data.addons
+            }));
+
+            await updateAddonList();
+            await updateDashboardStats();
+        } else {
+            throw new Error(data.error || 'Failed to add addon');
+        }
+    } catch (error) {
+        console.error('Error:', error);
+        alert('Error adding addon: ' + error.message);
+    }
+};
+// UI Management
+function showMainContent() {
+    const loginForm = document.getElementById('loginForm');
+    const root = document.getElementById('root');
+    
+    if (loginForm) loginForm.classList.add('hidden');
+    if (root) {
+        root.classList.remove('hidden');
+        ReactDOM.render(React.createElement(SidebarLayout), root, () => {
+            window.initIcons();
+        });
+    }
+}
+
+function showLoginForm() {
+    const loginForm = document.getElementById('loginForm');
+    const root = document.getElementById('root');
+    
+    if (loginForm) loginForm.classList.remove('hidden');
+    if (root) root.classList.add('hidden');
+}
+
+async function checkLoginStatus() {
+    try {
+        const response = await fetch('/api/auth/status', {
+            credentials: 'include'
+        });
+        
+        const data = await response.json();
+        
+        if (data.isAuthenticated) {
+            showMainContent();
+            updateDashboardStats();
+        } else {
+            showLoginForm();
+        }
+    } catch (error) {
+        console.error('Error checking login status:', error);
+        showLoginForm();
+    }
+}
+
+// Dashboard Functions
+async function updateDashboardStats() {
+    try {
+        const [usersResponse, addonsResponse] = await Promise.all([
+            fetch('/api/users', { credentials: 'include' }),
+            fetch('/api/addons', { credentials: 'include' })
+        ]);
+
+        const users = await usersResponse.json();
+        const addons = await addonsResponse.json();
+
+        document.getElementById('totalUsers').textContent = users.length;
+        document.getElementById('activeAddons').textContent = addons.length;
+
+        if (users.length > 0) {
+            const lastSyncDate = users
+                .map(user => user.lastSync)
+                .filter(date => date)
+                .sort((a, b) => new Date(b) - new Date(a))[0];
+            
+            document.getElementById('lastSync').textContent = lastSyncDate 
+                ? new Date(lastSyncDate).toLocaleString()
+                : 'Never';
+        }
+    } catch (error) {
+        console.error('Error updating dashboard:', error);
+    }
+}
+
+// Sync Functions
+async function syncUser(email) {
+    try {
+        const mainUserCatalogs = JSON.parse(localStorage.getItem('mainUserCatalogs'));
+        if (!mainUserCatalogs?.catalogs) {
+            throw new Error('Main user catalogs not found');
+        }
+
+        const response = await fetch(`/api/users/${encodeURIComponent(email)}/sync`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'include',
+            body: JSON.stringify({
+                addons: mainUserCatalogs.catalogs
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to sync user');
+        }
+
+        alert('User synced successfully with main user\'s catalogs');
+        updateUsersList();
+        updateDashboardStats();
+    } catch (error) {
+        console.error('Sync error:', error);
+        alert('Error syncing user: ' + error.message);
+    }
+}
+
+async function syncAllUsersWithProgress() {
+    const progressContainer = document.getElementById('syncProgress');
+    const progressBar = progressContainer.querySelector('.progress-fill');
+    const statusText = progressContainer.querySelector('.sync-status');
+    
+    try {
+        const response = await fetch('/api/users', {
+            credentials: 'include'
+        });
+        
+        if (!response.ok) {
+            throw new Error('Failed to fetch users');
+        }
+        
+        const users = await response.json();
+        
+        if (users.length === 0) {
+            alert('No users to sync');
+            return;
+        }
+        
+        progressContainer.classList.remove('hidden');
+        let completed = 0;
+        
+        for (const user of users) {
+            statusText.textContent = `Syncing ${user.email}... (${completed + 1}/${users.length})`;
+            progressBar.style.width = `${(completed / users.length) * 100}%`;
+            
+            try {
+                await syncUser(user.email);
+                completed++;
+            } catch (error) {
+                console.error(`Failed to sync user ${user.email}:`, error);
+                statusText.textContent = `Error syncing ${user.email}. Continuing...`;
+                await new Promise(resolve => setTimeout(resolve, 2000));
+            }
+        }
+        
+        progressBar.style.width = '100%';
+        statusText.textContent = `Completed syncing ${completed} out of ${users.length} users`;
+        
+        setTimeout(() => {
+            progressContainer.classList.add('hidden');
+            progressBar.style.width = '0';
+            updateDashboardStats();
+        }, 3000);
+        
+    } catch (error) {
+        console.error('Error syncing all users:', error);
+        alert('Error: ' + error.message);
+        progressContainer.classList.add('hidden');
+    }
+}
+
+// Registration Functions
+async function handleStremioRegister(event) {
+    event.preventDefault();
+    
+    const email = document.getElementById('stremioRegEmail').value;
+    const password = document.getElementById('stremioRegPassword').value;
+    const gdprConsent = document.getElementById('gdprConsent').checked;
+    
+    if (!gdprConsent) {
+        alert('Please accept the Terms of Service and Privacy Policy');
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/stremio/register', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'include',
+            body: JSON.stringify({ 
+                email, 
+                password
+            })
+        });
+        
+        const data = await response.json();
+        
+        if (response.ok) {
+            alert('Successfully registered with Stremio! Now you can add this account to the managed accounts.');
+            document.getElementById('userEmail').value = email;
+            document.getElementById('userPassword').value = password;
+            document.getElementById('stremioRegisterForm').reset();
+        } else {
+            throw new Error(data.error || 'Registration failed');
+        }
+    } catch (error) {
+        console.error('Error:', error);
+        alert('Error registering with Stremio: ' + error.message);
+    }
+}
+async function updateUsersList() {
+    const loadingState = document.getElementById('loadingUsers');
+    const usersList = document.getElementById('usersList');
+    
+    if (!usersList) return;
+
+    try {
+        if (loadingState) loadingState.classList.remove('hidden');
+        usersList.innerHTML = '';
+        
+        const response = await fetch('/api/users', {
+            credentials: 'include'
+        });
+        
+        if (!response.ok) {
+            throw new Error('Failed to fetch users');
+        }
+        
+        const users = await response.json();
+        
+        if (users.length === 0) {
+            usersList.innerHTML = `
+                <div class="text-center py-8 text-gray-500">
+                    <i data-lucide="users" class="w-12 h-12 mx-auto mb-2"></i>
+                    <p>No users registered</p>
+                </div>`;
+            window.initIcons();
+            return;
+        }
+        
+        users.forEach(user => {
+            const div = document.createElement('div');
+            div.className = 'py-4 flex flex-col';
+            
+            const lastSync = user.lastSync ? new Date(user.lastSync).toLocaleString() : 'Never';
+            
+            div.innerHTML = `
+                <div class="flex items-center justify-between">
+                    <div class="user-info-section">
+                        <h3 class="font-medium">${user.email}</h3>
+                        <div class="text-sm text-gray-500">Last Sync: ${lastSync}</div>
+                    </div>
+                    <div class="flex gap-2">
+                        <button onclick="syncUser('${user.email}')" 
+                                class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg">
+                            <i data-lucide="refresh-cw" class="w-5 h-5"></i>
+                        </button>
+                        <button onclick="deleteUser('${user.email}')" 
+                                class="p-2 text-red-600 hover:bg-red-50 rounded-lg">
+                            <i data-lucide="trash-2" class="w-5 h-5"></i>
+                        </button>
+                    </div>
+                </div>`;
+                
+            const linkContainer = document.createElement('div');
+            linkContainer.id = `link-container-${user.email.replace('@', '-at-')}`;
+            div.appendChild(linkContainer);
+            
+            usersList.appendChild(div);
+            
+            ReactDOM.render(
+                React.createElement(UserLinkComponent, {
+                    email: user.email,
+                    password: user.password
+                }),
+                linkContainer
+            );
+        });
+        
+        window.initIcons();
+    } catch (error) {
+        console.error('Error:', error);
+        usersList.innerHTML = `
+            <div class="p-4 bg-red-50 text-red-600 rounded-lg">
+                <div class="flex items-center">
+                    <i data-lucide="alert-circle" class="w-5 h-5 mr-2"></i>
+                    Error loading users. Please try again.
+                </div>
+            </div>`;
+        window.initIcons();
+    } finally {
+        if (loadingState) loadingState.classList.add('hidden');
+    }
+}
+async function updateAddonList() {
+    const loadingState = document.getElementById('loadingState');
+    const addonsList = document.getElementById('addons');
+    
+    if (!addonsList) return;
+
+    try {
+        if (loadingState) loadingState.classList.remove('hidden');
+        addonsList.innerHTML = '';
+        
+        const response = await fetch('/api/addons', {
+            credentials: 'include'
+        });
+        
+        if (!response.ok) {
+            throw new Error('Failed to fetch addons');
+        }
+        
+        const addons = await response.json();
+        
+        if (!Array.isArray(addons) || addons.length === 0) {
+            addonsList.innerHTML = `
+                <div class="col-span-full text-center py-8 text-gray-400 bg-gray-800 rounded-lg border border-gray-700">
+                    <i data-lucide="package" class="w-12 h-12 mx-auto mb-2"></i>
+                    <p>No addons installed</p>
+                </div>`;
+            window.initIcons();
+            return;
+        }
+        
+        addons.forEach(addon => {
+            const div = document.createElement('div');
+            div.className = 'bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-700 transition-all hover:shadow-xl';
+            
+            let logo = addon.manifest.logo || addon.manifest.icon || '';
+            
+            div.innerHTML = `
+                <div class="flex items-center justify-between mb-4">
+                    ${logo ? `<img src="${logo}" alt="${addon.manifest.name} logo" 
+                                class="w-10 h-10 rounded bg-gray-700 p-1" 
+                                onerror="this.style.display='none'">` : 
+                            `<i data-lucide="package" class="w-10 h-10 text-gray-400"></i>`}
+                    <button onclick="deleteAddon('${addon.manifest.id}')" 
+                            class="text-red-400 hover:bg-red-500/20 hover:text-red-300 p-2 rounded-lg transition-colors">
+                        <i data-lucide="trash-2" class="w-5 h-5"></i>
+                    </button>
+                </div>
+                <h3 class="font-semibold text-lg mb-1 text-gray-200">${addon.manifest.name}</h3>
+                <div class="text-sm text-gray-400 mb-2">Version: ${addon.manifest.version}</div>
+                <p class="text-gray-300 mb-4">${addon.manifest.description || 'No description available'}</p>
+                <div class="text-xs text-gray-400 break-all pt-4 border-t border-gray-700 bg-gray-800/50 rounded px-2 py-1">
+                    URL: ${addon.transportUrl}
+                </div>`;
+            addonsList.appendChild(div);
+        });
+        
+        window.initIcons();
+    } catch (error) {
+        console.error('Error:', error);
+        addonsList.innerHTML = `
+            <div class="col-span-full p-4 bg-red-900/20 text-red-400 rounded-lg border border-red-800">
+                <div class="flex items-center mb-2">
+                    <i data-lucide="alert-circle" class="w-5 h-5 mr-2"></i>
+                    <strong>Error loading addons</strong>
+                </div>
+                <p class="text-sm">${error.message}</p>
+            </div>`;
+        window.initIcons();
+    } finally {
+        if (loadingState) loadingState.classList.add('hidden');
+    }
+}
+
+async function handleAddUser(event) {
+    event.preventDefault();
+    
+    const email = document.getElementById('userEmail').value;
+    const password = document.getElementById('userPassword').value;
+    
+    try {
+        const response = await fetch('/api/users', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'include',
+            body: JSON.stringify({ email, password })
+        });
+        
+        const data = await response.json();
+        
+        if (response.ok) {
+            alert('User added successfully');
+            document.getElementById('userForm').reset();
+            updateUsersList();
+            updateDashboardStats();
+        } else {
+            alert(data.error || 'Failed to add user');
+        }
+    } catch (error) {
+        console.error('Error:', error);
+        alert('Error adding user: ' + error.message);
+    }
+}
+
+async function deleteUser(email) {
+    if (!confirm('Are you sure you want to delete this user?')) return;
+    
+    try {
+        const response = await fetch(`/api/users/${encodeURIComponent(email)}`, {
+            method: 'DELETE',
+            credentials: 'include'
+        });
+        
+        if (response.ok) {
+            alert('User deleted successfully');
+            updateUsersList();
+            updateDashboardStats();
+        } else {
+            const data = await response.json();
+            alert(data.error || 'Failed to delete user');
+        }
+    } catch (error) {
+        console.error('Error:', error);
+        alert('Error deleting user: ' + error.message);
+    }
+}
+async function handleImportFile(event) {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    try {
+        const text = await file.text();
+        const response = await fetch('/api/import', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'include',
+            body: text
+        });
+
+        if (response.ok) {
+            const result = await response.json();
+            alert(`Import completed:\nSuccessful: ${result.results.success}\nFailed: ${result.results.failed}\nDuplicates: ${result.results.duplicates}`);
+            
+            // Update catalogs after import
+            await fetchAndUpdateCatalogs();
+            updateAddonList();
+            updateDashboardStats();
+        } else {
+            const error = await response.json();
+            alert(error.error || 'Import failed');
+        }
+    } catch (error) {
+        console.error('Error:', error);
+        alert('Error importing addons: ' + error.message);
+    }
+    event.target.value = '';
+}
+
+async function exportAddons() {
+    try {
+        const response = await fetch('/api/export', {
+            credentials: 'include'
+        });
+        
+        if (!response.ok) {
+            throw new Error('Failed to export addons');
+        }
+
+        const data = await response.json();
+        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'stremio-addons.json';
+        a.click();
+        URL.revokeObjectURL(url);
+    } catch (error) {
+        console.error('Error:', error);
+        alert('Error exporting addons: ' + error.message);
+    }
+}
+
+// Make the rest of functions globally available
+window.updateUsersList = updateUsersList;
+window.updateAddonList = updateAddonList;
+window.handleImportFile = handleImportFile;
+window.exportAddons = exportAddons;
+window.syncAllUsersWithProgress = syncAllUsersWithProgress;
+window.updateDashboardStats = updateDashboardStats;
+window.handleStremioRegister = handleStremioRegister;
+window.syncUser = syncUser;
+window.deleteAddon = async (id) => {
+    if (!confirm('Are you sure you want to delete this addon?')) return;
+    
+    try {
+        const response = await fetch(`/api/addons/${id}`, {
+            method: 'DELETE',
+            credentials: 'include'
+        });
+        
+        if (response.ok) {
+            // Refresh catalogs and UI
+            await fetchAndUpdateCatalogs();
+            await updateAddonList();
+            await updateDashboardStats();
+            alert('Addon deleted successfully');
+        } else {
+            const data = await response.json();
+            throw new Error(data.error || 'Failed to delete addon');
+        }
+    } catch (error) {
+        console.error('Error:', error);
+        alert('Error deleting addon: ' + error.message);
+    }
+};