rbox/static/js/components/user-settings.js

// static/js/components/user-settings.js
import app from '../app.js';

const api = app.getAPI();
const logger = app.getLogger();

export class UserSettings extends HTMLElement {
    constructor() {
        super();
        this.boundHandleClick = this.handleClick.bind(this);
    }

    connectedCallback() {
        this.render();
        this.addEventListener('click', this.boundHandleClick);
    }

    disconnectedCallback() {
        this.removeEventListener('click', this.boundHandleClick);
    }

    render() {
        this.innerHTML = `
            <div class="user-settings-container">
                <h2>User Settings</h2>

                <div class="settings-section">
                    <h3>Data Management</h3>
                    <p>You can export a copy of your personal data or delete your account.</p>
                    <button id="exportDataBtn" class="button button-primary">Export My Data</button>
                    <button id="deleteAccountBtn" class="button button-danger">Delete My Account</button>
                </div>

                <!-- Add more settings sections here later -->

            </div>
        `;
    }

    async handleClick(event) {
        if (event.target.id === 'exportDataBtn') {
            await this.exportUserData();
        } else if (event.target.id === 'deleteAccountBtn') {
            await this.deleteAccount();
        }
    }

    async exportUserData() {
        try {
            logger.info('Initiating data export...', { action: 'USER_DATA_EXPORT_ATTEMPT' });
            const response = await fetch('/api/users/me/export', {
                headers: {
                    'Authorization': `Bearer ${api.getToken()}`,
                    'Accept': 'application/json'
                }
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();
            const filename = `rbox_user_data_${new Date().toISOString().slice(0,10)}.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 = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            logger.info('User data exported successfully.', { action: 'USER_DATA_EXPORT_SUCCESS' });
            document.dispatchEvent(new CustomEvent('show-toast', {
                detail: { message: 'Your data has been exported successfully!', type: 'success' }
            }));
        } catch (error) {
            logger.error('Failed to export user data:', { action: 'USER_DATA_EXPORT_FAILURE', error: error.message });
            document.dispatchEvent(new CustomEvent('show-toast', {
                detail: { message: `Failed to export data: ${error.message}`, type: 'error' }
            }));
        }
    }

    async deleteAccount() {
        if (!confirm('Are you absolutely sure you want to delete your account? This action cannot be undone and all your data will be permanently lost.')) {
            return;
        }

        try {
            logger.warn('Initiating account deletion...', { action: 'USER_ACCOUNT_DELETE_ATTEMPT' });
            const response = await fetch('/api/users/me', {
                method: 'DELETE',
                headers: {
                    'Authorization': `Bearer ${api.getToken()}`
                }
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            logger.info('Account deleted successfully. Logging out...', { action: 'USER_ACCOUNT_DELETE_SUCCESS' });
            api.logout(); // Clear token and redirect to login
            document.dispatchEvent(new CustomEvent('show-toast', {
                detail: { message: 'Your account has been successfully deleted.', type: 'success' }
            }));
        } catch (error) {
            logger.error('Failed to delete account:', { action: 'USER_ACCOUNT_DELETE_FAILURE', error: error.message });
            document.dispatchEvent(new CustomEvent('show-toast', {
                detail: { message: `Failed to delete account: ${error.message}`, type: 'error' }
            }));
        }
    }
}

customElements.define('user-settings', UserSettings);