nskd-lbr 1.1.1 → 1.1.3

package/src/nskd-lbr.js

@@ -10,9 +10,6 @@
  * @param {integer} [options.timeout=10000] - API request timeout in milliseconds
  * @param {boolean} [options.useLegacyAPI=false] - Whether to use the legacy API format
  * @param {function} [options.onLog=null] - Whether to validate local data against API response
- * @param {string} [options.loginEndpoint=''] - Login API endpoint for authentication
- * @param {function} [options.onLoginSuccess=null] - Callback function for successful login
- * @param {function} [options.onLoginFail=null] - Callback function for failed login
  */
 
 class NskdLbr {
@@ -23,14 +20,10 @@ class NskdLbr {
         this.strictCheck = options.strictCheck !== undefined ? options.strictCheck : true;
         this.onLog = options.onLog || null;
         this.useLegacyAPI = options.useLegacyAPI || false;
-        this.loginEndpoint = options.loginEndpoint || '';
-        this.onLoginSuccess = options.onLoginSuccess || null;
-        this.onLoginFail = options.onLoginFail || null;
         this.certificateData = null;
         this.verificationKey = null;
         this.localData = null;
         this.isValid = false;
-        this.currentLoginModal = null;
     }
 
     /**
@@ -62,762 +55,6 @@ class NskdLbr {
         }
     }
 
-    /**
-     * Show login modal (only available for webpages with loginEndpoint set)
-     * @returns {Promise<Object>} Login result
-     */
-    async showLoginModal() {
-        if (typeof window === 'undefined') {
-            throw new Error('Login modal is only available in browser environments');
-        }
-
-        if (!this.loginEndpoint || this.loginEndpoint.trim() === '') {
-            throw new Error('Login endpoint is not configured');
-        }
-
-        return new Promise((resolve, reject) => {
-            this.createLoginModal(resolve, reject);
-        });
-    }
-
-    /**
-     * Create and display the login modal
-     * @private
-     */
-    createLoginModal(resolve, reject) {
-    if (this.currentLoginModal) {
-        this.closeLoginModal();
-    }
-
-    const overlay = document.createElement('div');
-    overlay.id = 'noskid-login-overlay';
-    overlay.style.cssText = `
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(139, 69, 19, 0.15);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        z-index: 10000;
-        backdrop-filter: blur(8px);
-        opacity: 0;
-        transition: opacity 0.3s ease;
-    `;
-
-    const modal = document.createElement('div');
-    modal.id = 'noskid-login-modal';
-    modal.style.cssText = `
-        background: linear-gradient(135deg, #fcfaf5 0%, #f0ede0 100%);
-        border: 2px solid #8b4513;
-        border-radius: 16px;
-        padding: 0;
-        max-width: 480px;
-        width: 95%;
-        max-height: 95vh;
-        overflow: hidden;
-        box-shadow: 
-            0 25px 50px -12px rgba(139, 69, 19, 0.25),
-            0 0 0 1px rgba(139, 69, 19, 0.1),
-            inset 0 1px 0 rgba(252, 250, 245, 0.9);
-        transform: translateY(20px) scale(0.95);
-        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-        position: relative;
-    `;
-
-    const style = document.createElement('style');
-    style.textContent = `
-        @keyframes noskidModalSlideIn {
-            from {
-                opacity: 0;
-                transform: translateY(20px) scale(0.95);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0) scale(1);
-            }
-        }
-        
-        @keyframes noskidPulse {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-        }
-        
-        @keyframes noskidShake {
-            0%, 100% { transform: translateX(0); }
-            25% { transform: translateX(-4px); }
-            75% { transform: translateX(4px); }
-        }
-        
-        .noskid-modal-active {
-            opacity: 1 !important;
-        }
-        
-        .noskid-modal-active #noskid-login-modal {
-            transform: translateY(0) scale(1) !important;
-        }
-        
-        .noskid-header {
-            background: linear-gradient(135deg, #f9f7f0 0%, #e8e5d8 100%);
-            border-bottom: 1px solid #8b4513;
-            padding: 24px;
-            text-align: center;
-            position: relative;
-        }
-        
-        .noskid-header::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 1px;
-            background: linear-gradient(90deg, transparent, rgba(139, 69, 19, 0.3), transparent);
-        }
-        
-        .noskid-content {
-            padding: 32px;
-            overflow-y: auto;
-            max-height: calc(95vh - 140px);
-        }
-        
-        .noskid-title {
-            margin: 0;
-            color: #8b4513;
-            font-size: 24px;
-            font-family: 'Times New Roman', serif;
-            font-weight: bold;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 12px;
-        }
-        
-        .noskid-subtitle {
-            margin: 8px 0 0 0;
-            color: rgba(139, 69, 19, 0.7);
-            font-size: 14px;
-            font-family: system-ui, -apple-system, sans-serif;
-        }
-        
-        .noskid-icon {
-            width: 28px;
-            height: 28px;
-            background: #8b4513;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #fcfaf5;
-            font-size: 16px;
-            box-shadow: 0 2px 4px rgba(139, 69, 19, 0.2);
-        }
-        
-        .noskid-form-group {
-            margin-bottom: 24px;
-        }
-        
-        .noskid-label {
-            display: block;
-            margin-bottom: 8px;
-            color: #8b4513;
-            font-size: 14px;
-            font-weight: 600;
-            font-family: system-ui, -apple-system, sans-serif;
-        }
-        
-        .noskid-cert-upload {
-            border: 2px dashed rgba(139, 69, 19, 0.3);
-            border-radius: 12px;
-            padding: 24px;
-            text-align: center;
-            background: linear-gradient(135deg, rgba(252, 250, 245, 0.5), rgba(240, 237, 224, 0.5));
-            transition: all 0.3s ease;
-            cursor: pointer;
-            position: relative;
-            min-height: 120px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-        }
-        
-        .noskid-cert-upload:hover {
-            border-color: #8b4513;
-            background: linear-gradient(135deg, rgba(252, 250, 245, 0.8), rgba(240, 237, 224, 0.8));
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(139, 69, 19, 0.1);
-        }
-        
-        .noskid-cert-upload.dragover {
-            border-color: #8b4513;
-            background: linear-gradient(135deg, rgba(139, 69, 19, 0.1), rgba(139, 69, 19, 0.05));
-            animation: noskidPulse 1s infinite;
-        }
-        
-        .noskid-cert-upload.error {
-            border-color: #dc2626;
-            animation: noskidShake 0.5s ease-in-out;
-        }
-        
-        .noskid-cert-upload.success {
-            border-color: #059669;
-            background: linear-gradient(135deg, rgba(5, 150, 105, 0.1), rgba(5, 150, 105, 0.05));
-        }
-        
-        .noskid-upload-icon {
-            width: 48px;
-            height: 48px;
-            margin-bottom: 12px;
-            background: rgba(139, 69, 19, 0.1);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #8b4513;
-            font-size: 24px;
-            transition: all 0.3s ease;
-        }
-        
-        .noskid-cert-upload:hover .noskid-upload-icon {
-            background: rgba(139, 69, 19, 0.2);
-            transform: scale(1.1);
-        }
-        
-        .noskid-upload-text {
-            color: #8b4513;
-            font-size: 16px;
-            font-weight: 600;
-            margin-bottom: 4px;
-        }
-        
-        .noskid-upload-hint {
-            color: rgba(139, 69, 19, 0.6);
-            font-size: 12px;
-            line-height: 1.4;
-        }
-        
-        .noskid-file-input {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            opacity: 0;
-            cursor: pointer;
-        }
-        
-        .noskid-input {
-            width: 100%;
-            padding: 16px;
-            border: 2px solid rgba(139, 69, 19, 0.2);
-            border-radius: 12px;
-            font-size: 16px;
-            box-sizing: border-box;
-            background: rgba(252, 250, 245, 0.8);
-            color: #8b4513;
-            font-family: system-ui, -apple-system, sans-serif;
-            transition: all 0.3s ease;
-        }
-        
-        .noskid-input:focus {
-            outline: none;
-            border-color: #8b4513;
-            box-shadow: 0 0 0 4px rgba(139, 69, 19, 0.1);
-            background: #fcfaf5;
-        }
-        
-        .noskid-input::placeholder {
-            color: rgba(139, 69, 19, 0.5);
-        }
-        
-        .noskid-btn {
-            background: linear-gradient(135deg, #8b4513 0%, #6d3410 100%);
-            color: #fcfaf5;
-            border: none;
-            padding: 16px 32px;
-            border-radius: 12px;
-            cursor: pointer;
-            font-size: 16px;
-            font-weight: 600;
-            font-family: system-ui, -apple-system, sans-serif;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 12px rgba(139, 69, 19, 0.2);
-            position: relative;
-            overflow: hidden;
-        }
-        
-        .noskid-btn::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-            transition: left 0.5s ease;
-        }
-        
-        .noskid-btn:hover::before {
-            left: 100%;
-        }
-        
-        .noskid-btn:hover {
-            background: linear-gradient(135deg, #6d3410 0%, #5a2b0d 100%);
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(139, 69, 19, 0.3);
-        }
-        
-        .noskid-btn:active {
-            transform: translateY(0);
-        }
-        
-        .noskid-btn:disabled {
-            background: rgba(139, 69, 19, 0.3);
-            cursor: not-allowed;
-            transform: none;
-            box-shadow: none;
-        }
-        
-        .noskid-btn:disabled::before {
-            display: none;
-        }
-        
-        .noskid-btn-secondary {
-            background: linear-gradient(135deg, rgba(139, 69, 19, 0.1) 0%, rgba(139, 69, 19, 0.2) 100%);
-            color: #8b4513;
-            border: 2px solid rgba(139, 69, 19, 0.3);
-            padding: 14px 30px;
-            border-radius: 12px;
-            cursor: pointer;
-            font-size: 16px;
-            font-weight: 600;
-            font-family: system-ui, -apple-system, sans-serif;
-            transition: all 0.3s ease;
-        }
-        
-        .noskid-btn-secondary:hover {
-            background: linear-gradient(135deg, rgba(139, 69, 19, 0.2) 0%, rgba(139, 69, 19, 0.3) 100%);
-            border-color: #8b4513;
-            transform: translateY(-2px);
-        }
-        
-        .noskid-error {
-            color: #dc2626;
-            font-size: 14px;
-            margin-top: 8px;
-            padding: 12px;
-            background: rgba(220, 38, 38, 0.1);
-            border: 1px solid rgba(220, 38, 38, 0.2);
-            border-radius: 8px;
-            font-family: system-ui, -apple-system, sans-serif;
-        }
-        
-        .noskid-success {
-            color: #059669;
-            font-size: 14px;
-            margin-top: 8px;
-            padding: 12px;
-            background: rgba(5, 150, 105, 0.1);
-            border: 1px solid rgba(5, 150, 105, 0.2);
-            border-radius: 8px;
-            font-family: system-ui, -apple-system, sans-serif;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .noskid-actions {
-            display: flex;
-            gap: 16px;
-            justify-content: flex-end;
-            margin-top: 32px;
-        }
-        
-        .noskid-cert-info {
-            background: rgba(139, 69, 19, 0.05);
-            border: 1px solid rgba(139, 69, 19, 0.2);
-            border-radius: 8px;
-            padding: 16px;
-            margin-top: 12px;
-        }
-        
-        .noskid-cert-user {
-            font-weight: 600;
-            color: #8b4513;
-            margin-bottom: 4px;
-        }
-        
-        .noskid-cert-details {
-            font-size: 12px;
-            color: rgba(139, 69, 19, 0.7);
-        }
-        
-        .noskid-paste-hint {
-            margin-top: 8px;
-            font-size: 11px;
-            color: rgba(139, 69, 19, 0.5);
-            text-align: center;
-            font-style: italic;
-        }
-        
-        @media (max-width: 600px) {
-            .noskid-content {
-                padding: 24px;
-            }
-            
-            .noskid-header {
-                padding: 20px;
-            }
-            
-            .noskid-title {
-                font-size: 20px;
-            }
-            
-            .noskid-actions {
-                flex-direction: column-reverse;
-            }
-            
-            .noskid-btn,
-            .noskid-btn-secondary {
-                width: 100%;
-                justify-content: center;
-            }
-        }
-    `;
-    document.head.appendChild(style);
-
-    modal.innerHTML = `
-        <div class="noskid-header">
-            <h2 class="noskid-title">
-                <div class="noskid-icon">🔐</div>
-                Login with NoSkid
-            </h2>
-            <p class="noskid-subtitle">Upload your certificate and enter your password to authenticate</p>
-        </div>
-        
-        <div class="noskid-content">
-            <div class="noskid-form-group">
-                <label class="noskid-label">Certificate File</label>
-                <div class="noskid-cert-upload" id="noskid-cert-upload">
-                    <div class="noskid-upload-icon">📄</div>
-                    <div class="noskid-upload-text">Drop certificate here or click to browse</div>
-                    <div class="noskid-upload-hint">
-                        Supports .png files • Drag & drop • Paste from clipboard<br>
-                        <kbd>Ctrl+V</kbd> to paste certificate
-                    </div>
-                    <input type="file" id="noskid-cert-file" accept=".png" class="noskid-file-input">
-                </div>
-                <div id="noskid-file-error" class="noskid-error" style="display: none;"></div>
-                <div id="noskid-file-success" class="noskid-success" style="display: none;">
-                    <span>✓</span>
-                    <div id="noskid-cert-info"></div>
-                </div>
-            </div>
-            
-            <div class="noskid-form-group">
-                <label class="noskid-label">Password</label>
-                <input type="password" id="noskid-password" class="noskid-input" placeholder="Enter your password">
-                <div id="noskid-password-error" class="noskid-error" style="display: none;"></div>
-            </div>
-            
-            <div id="noskid-login-error" class="noskid-error" style="display: none;"></div>
-            
-            <div class="noskid-actions">
-                <button id="noskid-cancel-btn" class="noskid-btn-secondary">Cancel</button>
-                <button id="noskid-login-btn" class="noskid-btn" disabled>
-                    <span>Login</span>
-                </button>
-            </div>
-        </div>
-    `;
-
-    overlay.appendChild(modal);
-    document.body.appendChild(overlay);
-    this.currentLoginModal = overlay;
-
-    requestAnimationFrame(() => {
-        overlay.classList.add('noskid-modal-active');
-    });
-
-    const uploadArea = modal.querySelector('#noskid-cert-upload');
-    const fileInput = modal.querySelector('#noskid-cert-file');
-    const passwordInput = modal.querySelector('#noskid-password');
-    const loginBtn = modal.querySelector('#noskid-login-btn');
-    const cancelBtn = modal.querySelector('#noskid-cancel-btn');
-    const fileError = modal.querySelector('#noskid-file-error');
-    const fileSuccess = modal.querySelector('#noskid-file-success');
-    const certInfo = modal.querySelector('#noskid-cert-info');
-    const passwordError = modal.querySelector('#noskid-password-error');
-    const loginError = modal.querySelector('#noskid-login-error');
-
-    let certificateValid = false;
-    let tempCertData = null;
-
-    const processFile = async (file) => {
-        fileError.style.display = 'none';
-        fileSuccess.style.display = 'none';
-        uploadArea.classList.remove('error', 'success');
-        certificateValid = false;
-        tempCertData = null;
-        updateLoginButton();
-
-        if (!file) return;
-
-        try {
-            this.nskdLbrLog('Processing certificate for login...', 'info');
-            
-            const tempInstance = new NskdLbr({
-                apiUrl: this.apiUrl,
-                debug: this.debug,
-                timeout: this.timeout,
-                strictCheck: this.strictCheck,
-                useLegacyAPI: this.useLegacyAPI
-            });
-
-            const result = await tempInstance.loadFromFile(file);
-            
-            if (result.valid) {
-                certificateValid = true;
-                tempCertData = tempInstance.getCertificateData();
-                
-                certInfo.innerHTML = `
-                    <div class="noskid-cert-user">${tempCertData.localUsername || 'Unknown User'}</div>
-                    <div class="noskid-cert-details">
-                        Certificate verified • ${(file.size / 1024).toFixed(1)} KB
-                    </div>
-                `;
-                
-                uploadArea.classList.add('success');
-                uploadArea.querySelector('.noskid-upload-text').textContent = 'Certificate loaded successfully!';
-                uploadArea.querySelector('.noskid-upload-icon').textContent = '✓';
-                fileSuccess.style.display = 'block';
-                
-                this.nskdLbrLog('Certificate verified for login', 'success');
-            } else {
-                throw new Error(result.message || 'Certificate verification failed');
-            }
-        } catch (error) {
-            uploadArea.classList.add('error');
-            uploadArea.querySelector('.noskid-upload-text').textContent = 'Certificate verification failed';
-            uploadArea.querySelector('.noskid-upload-icon').textContent = '❌';
-            fileError.textContent = error.message;
-            fileError.style.display = 'block';
-            this.nskdLbrLog(`Certificate verification failed: ${error.message}`, 'error');
-        }
-        
-        updateLoginButton();
-    };
-
-    fileInput.addEventListener('change', async (e) => {
-        const file = e.target.files[0];
-        await processFile(file);
-    });
-
-    uploadArea.addEventListener('dragover', (e) => {
-        e.preventDefault();
-        uploadArea.classList.add('dragover');
-    });
-
-    uploadArea.addEventListener('dragleave', (e) => {
-        e.preventDefault();
-        if (!uploadArea.contains(e.relatedTarget)) {
-            uploadArea.classList.remove('dragover');
-        }
-    });
-
-    uploadArea.addEventListener('drop', async (e) => {
-        e.preventDefault();
-        uploadArea.classList.remove('dragover');
-        
-        const files = e.dataTransfer.files;
-        if (files.length > 0) {
-            const file = files[0];
-            if (file.type === 'image/png' || file.name.endsWith('.png')) {
-                await processFile(file);
-            } else {
-                uploadArea.classList.add('error');
-                fileError.textContent = 'Please drop a valid PNG certificate file';
-                fileError.style.display = 'block';
-            }
-        }
-    });
-
-    document.addEventListener('paste', async (e) => {
-        if (!overlay.classList.contains('noskid-modal-active')) return;
-        
-        const items = e.clipboardData.items;
-        for (let item of items) {
-            if (item.type === 'image/png') {
-                e.preventDefault();
-                const file = item.getAsFile();
-                if (file) {
-                    await processFile(file);
-                }
-                break;
-            }
-        }
-    });
-
-    passwordInput.addEventListener('input', () => {
-        passwordError.style.display = 'none';
-        loginError.style.display = 'none';
-        updateLoginButton();
-    });
-
-    const updateLoginButton = () => {
-        const hasPassword = passwordInput.value.trim().length > 0;
-        loginBtn.disabled = !certificateValid || !hasPassword;
-        
-        loginBtn.innerHTML = '<span>Login</span>';
-    };
-
-    loginBtn.addEventListener('click', async () => {
-        const password = passwordInput.value.trim();
-        
-        if (!certificateValid || !tempCertData) {
-            passwordError.textContent = 'Please upload a valid certificate first';
-            passwordError.style.display = 'block';
-            return;
-        }
-
-        if (!password) {
-            passwordError.textContent = 'Please enter your password';
-            passwordError.style.display = 'block';
-            return;
-        }
-
-        loginBtn.disabled = true;
-        loginBtn.innerHTML = '<span>Logging in...</span>';
-        loginError.style.display = 'none';
-
-        try {
-            const loginResult = await this.performLogin(tempCertData, password);
-            
-            if (loginResult.success) {
-                this.nskdLbrLog('Login successful', 'success');
-                
-                this.certificateData = tempCertData;
-                this.verificationKey = tempCertData.key;
-                this.isValid = true;
-                
-                if (this.onLoginSuccess && typeof this.onLoginSuccess === 'function') {
-                    this.onLoginSuccess(loginResult, tempCertData);
-                }
-                
-                loginBtn.innerHTML = '<span>Success!</span>';
-                setTimeout(() => {
-                    this.closeLoginModal();
-                    resolve({ success: true, data: tempCertData, response: loginResult });
-                }, 800);
-            } else {
-                throw new Error(loginResult.message || 'Login failed');
-            }
-        } catch (error) {
-            this.nskdLbrLog(`Login failed: ${error.message}`, 'error');
-            loginError.textContent = error.message;
-            loginError.style.display = 'block';
-            
-            if (this.onLoginFail && typeof this.onLoginFail === 'function') {
-                this.onLoginFail(error, tempCertData);
-            }
-            
-            loginBtn.disabled = false;
-            loginBtn.innerHTML = '<span>Try Again</span>';
-        }
-    });
-
-    cancelBtn.addEventListener('click', () => {
-        this.nskdLbrLog('Login cancelled by user', 'info');
-        this.closeLoginModal();
-        reject(new Error('Login cancelled by user'));
-    });
-
-    overlay.addEventListener('click', (e) => {
-        if (e.target === overlay) {
-            this.nskdLbrLog('Login cancelled by clicking outside', 'info');
-            this.closeLoginModal();
-            reject(new Error('Login cancelled'));
-        }
-    });
-
-    const escHandler = (e) => {
-        if (e.key === 'Escape') {
-            this.nskdLbrLog('Login cancelled by ESC key', 'info');
-            this.closeLoginModal();
-            document.removeEventListener('keydown', escHandler);
-            reject(new Error('Login cancelled'));
-        }
-    };
-    document.addEventListener('keydown', escHandler);
-
-    if (certificateValid) {
-        passwordInput.focus();
-    }
-}
-
-    /**
-     * Perform login API call
-     * @private
-     */
-    async performLogin(certData, password) {
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), this.timeout);
-
-        try {
-            const response = await fetch(this.loginEndpoint, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'User-Agent': 'NskdLbr/1.1.0'
-                },
-                body: JSON.stringify({
-                    certificate: {
-                        key: certData.key,
-                        username: certData.localUsername,
-                        nickname: certData.nickname,
-                        certificate_number: certData.certificate_number,
-                        percentage: certData.percentage,
-                        country: certData.country,
-                        countryCode: certData.countryCode,
-                        creationDate: certData.creationDate
-                    },
-                    password: password
-                }),
-                signal: controller.signal
-            });
-
-            clearTimeout(timeoutId);
-
-            if (!response.ok) {
-                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-            }
-
-            const result = await response.json();
-            return result;
-
-        } catch (error) {
-            clearTimeout(timeoutId);
-            if (error.name === 'AbortError') {
-                throw new Error('Login timeout - server took too long to respond');
-            }
-            throw new Error(`Login API error: ${error.message}`);
-        }
-    }
-
-    /**
-     * Close the login modal
-     * @private
-     */
-    closeLoginModal() {
-        if (this.currentLoginModal) {
-            this.currentLoginModal.remove();
-            this.currentLoginModal = null;
-        }
-    }
-
     /**
      * Load and verify a certificate from a PNG file
      * @param {File} file - The PNG certificate file
@@ -949,7 +186,6 @@ Certificate Details:
         this.verificationKey = null;
         this.localData = null;
         this.isValid = false;
-        this.closeLoginModal();
         this.nskdLbrLog('Certificate data reset', 'info');
     }