gitcitadel-online/templates/contact.html

{{define "content"}}
<article class="contact-page">
    <h1>Contact Us</h1>
    
    <div class="contact-links">
        <h2>Find us elsewhere:</h2>
        <ul>
            <li>
                <a href="https://aitherboard.imwald.eu/repos/naddr1qvzqqqrhnypzplfq3m5v3u5r0q9f255fdeyz8nyac6lagssx8zy4wugxjs8ajf7pqq9xw6t5vd5hgctyv4kqde47kt?tab=about" target="_blank" rel="noopener noreferrer">
                    <span class="icon-inline">{{icon "package"}}</span> Aitherboard Repository
                </a>
            </li>
            <li>
                <a href="https://github.com/ShadowySupercode" target="_blank" rel="noopener noreferrer">
                    <span class="icon-inline">{{icon "github"}}</span> GitHub: ShadowySupercode
                </a>
            </li>
            <li>
                <a href="https://alexandria.gitcitadel.eu/events?id=npub1s3ht77dq4zqnya8vjun5jp3p44pr794ru36d0ltxu65chljw8xjqd975wz" target="_blank" rel="noopener noreferrer">
                    <span class="icon-inline">{{icon "user"}}</span> GitCitadel on Alexandria
                </a>
            </li>
        </ul>
    </div>

    {{if .Profile}}
    <div class="nostr-profile">
        <h2>Nostr Profile</h2>
        <div class="nostr-profile-content">
            {{if .Profile.Picture}}
            <img src="{{.Profile.Picture}}" alt="Profile picture" class="nostr-profile-picture">
            {{end}}
            <div class="nostr-profile-info">
                <h3>
                    {{if .Profile.DisplayName}}{{.Profile.DisplayName}}{{else if .Profile.Name}}{{.Profile.Name}}{{else}}Anonymous{{end}}
                </h3>
                {{if .Profile.Name}}
                <p class="nostr-profile-name">@{{.Profile.Name}}</p>
                {{end}}
                {{if .Profile.About}}
                <p class="nostr-profile-about">{{.Profile.About}}</p>
                {{end}}
                {{if .Profile.Website}}
                <p class="nostr-profile-website">
                    <a href="{{.Profile.Website}}" target="_blank" rel="noopener noreferrer">
                        <span class="icon-inline">{{icon "globe"}}</span> Website
                    </a>
                </p>
                {{end}}
                {{if .Profile.NIP05}}
                <p class="nostr-profile-nip05">
                    <span class="icon-inline">{{icon "check-circle"}}</span> NIP-05: {{.Profile.NIP05}}
                </p>
                {{end}}
            </div>
        </div>
    </div>
    {{end}}
    
    <p>Have a question, suggestion, or want to report an issue? Fill out the form below and we'll get back to you.</p>
    
    {{if .Success}}
    <div class="alert alert-success" role="alert">
        <strong><span class="icon-inline">{{icon "check-circle"}}</span> Success!</strong> Your message has been submitted. Thank you for contacting us!
        {{if .EventID}}
        <br><small><span class="icon-inline">{{icon "hash"}}</span> Issue ID: {{.EventID}}</small>
        {{end}}
    </div>
    {{end}}
    
    {{if .Error}}
    {{template "alert-error" .Error}}
    {{end}}
    
    <form id="contact-form" method="POST" action="/contact" class="contact-form">
        <div id="nostr-status" class="alert" style="display: none;"></div>
        
        <div class="form-group">
            <label for="subject">Subject <span class="required">*</span></label>
            <input type="text" id="subject" name="subject" required 
                   value="{{.FormData.Subject}}" 
                   placeholder="Brief description of your message"
                   aria-required="true">
        </div>
        
        <div class="form-group">
            <label for="content">Message <span class="required">*</span></label>
            <textarea id="content" name="content" rows="10" required 
                      placeholder="Please provide details about your question, suggestion, or issue..."
                      aria-required="true">{{.FormData.Content}}</textarea>
            <small class="form-help">You can use Markdown formatting in your message.</small>
        </div>
        
        <div class="form-group">
            <label for="labels">Labels (optional)</label>
            <input type="text" id="labels" name="labels" 
                   value="{{.FormData.Labels}}" 
                   placeholder="bug, feature-request, question (comma-separated)">
            <small class="form-help">Add labels to categorize your issue (comma-separated).</small>
        </div>
        
        <div class="form-actions">
            <button type="submit" id="submit-btn" class="btn btn-primary"><span class="icon-inline">{{icon "send"}}</span> Submit</button>
            <button type="reset" class="btn btn-secondary"><span class="icon-inline">{{icon "x"}}</span> Clear</button>
        </div>
    </form>
    
    <!-- Contact Submission Modal -->
    <div id="contact-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Choose Submission Method</h2>
                <button type="button" class="modal-close" id="modal-close-btn" aria-label="Close">&times;</button>
            </div>
            <div class="modal-body">
                <p>How would you like to submit your message?</p>
                <div class="modal-options">
                    <button type="button" id="login-btn" class="btn btn-primary">
                        <span class="icon-inline">{{icon "key"}}</span> Login with Browser Extension
                    </button>
                    <button type="button" id="anonymous-btn" class="btn btn-secondary">
                        <span class="icon-inline">{{icon "user-x"}}</span> Submit Anonymously
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Success Modal -->
    <div id="success-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h2><span class="icon-inline">{{icon "check-circle"}}</span> Success!</h2>
                <button type="button" class="modal-close" id="success-modal-close-btn" aria-label="Close">&times;</button>
            </div>
            <div class="modal-body">
                <p>Your message has been successfully submitted to the Nostr relays.</p>
                <div class="modal-options">
                    <a href="https://aitherboard.imwald.eu/repos/naddr1qvzqqqrhnypzplfq3m5v3u5r0q9f255fdeyz8nyac6lagssx8zy4wugxjs8ajf7pqq9xw6t5vd5hgctyv4kqde47kt?tab=issues" target="_blank" rel="noopener noreferrer" class="btn btn-primary">
                        <span class="icon-inline">{{icon "external-link"}}</span> View Issue Board
                    </a>
                    <button type="button" id="success-modal-close-btn2" class="btn btn-secondary">
                        <span class="icon-inline">{{icon "x"}}</span> Close
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Failure Modal -->
    <div id="failure-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h2><span class="icon-inline">{{icon "alert-circle"}}</span> Submission Failed</h2>
                <button type="button" class="modal-close" id="failure-modal-close-btn" aria-label="Close">&times;</button>
            </div>
            <div class="modal-body">
                <p id="failure-message">Failed to publish your message to any of the configured relays. Please try again later.</p>
                <div class="modal-options">
                    <button type="button" id="failure-modal-close-btn2" class="btn btn-primary">
                        <span class="icon-inline">{{icon "x"}}</span> Close
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    {{if .RepoAnnouncement}}
    <script type="application/json" id="repo-announcement-data">{{json .RepoAnnouncement}}</script>
    {{end}}
    
    <script type="application/json" id="contact-relays-data">{{json .ContactRelays}}</script>
    
    <script src="https://cdn.jsdelivr.net/npm/nostr-tools@1.18.0/lib/nostr.bundle.js"></script>
    <script>
    (function() {
        const form = document.getElementById('contact-form');
        const submitBtn = document.getElementById('submit-btn');
        const statusDiv = document.getElementById('nostr-status');
        const modal = document.getElementById('contact-modal');
        const modalCloseBtn = document.getElementById('modal-close-btn');
        const loginBtn = document.getElementById('login-btn');
        const anonymousBtn = document.getElementById('anonymous-btn');
        const successModal = document.getElementById('success-modal');
        const successModalCloseBtn = document.getElementById('success-modal-close-btn');
        const successModalCloseBtn2 = document.getElementById('success-modal-close-btn2');
        const failureModal = document.getElementById('failure-modal');
        const failureModalCloseBtn = document.getElementById('failure-modal-close-btn');
        const failureModalCloseBtn2 = document.getElementById('failure-modal-close-btn2');
        const failureMessage = document.getElementById('failure-message');
        
        // Get contact relays from JSON script tag
        let contactRelays = [];
        const contactRelaysEl = document.getElementById('contact-relays-data');
        if (contactRelaysEl) {
            try {
                contactRelays = JSON.parse(contactRelaysEl.textContent);
            } catch (e) {
                console.error('Failed to parse contact relays data:', e);
                // Fallback to empty array
                contactRelays = [];
            }
        }
        
        // Get repo announcement data from JSON script tag
        let repoAnnouncement = null;
        const repoDataEl = document.getElementById('repo-announcement-data');
        if (repoDataEl) {
            try {
                repoAnnouncement = JSON.parse(repoDataEl.textContent);
            } catch (e) {
                console.error('Failed to parse repo announcement data:', e);
            }
        }
        
        // Store form data for submission
        let pendingFormData = null;
        
        function showStatus(message, isError) {
            statusDiv.textContent = message;
            statusDiv.className = 'alert ' + (isError ? 'alert-error' : 'alert-success');
            statusDiv.style.display = 'block';
        }
        
        function hideStatus() {
            statusDiv.style.display = 'none';
        }
        
        function showModal() {
            modal.style.display = 'flex';
        }
        
        function hideModal() {
            modal.style.display = 'none';
        }
        
        function showSuccessModal() {
            successModal.style.display = 'flex';
        }
        
        function hideSuccessModal() {
            successModal.style.display = 'none';
            // Reset form
            form.reset();
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<span class="icon-inline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg></span> Submit';
        }
        
        function showFailureModal(errorMessage) {
            if (errorMessage) {
                failureMessage.textContent = errorMessage;
            }
            failureModal.style.display = 'flex';
        }
        
        function hideFailureModal() {
            failureModal.style.display = 'none';
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<span class="icon-inline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg></span> Submit';
        }
        
        // Close modal handlers
        modalCloseBtn.addEventListener('click', hideModal);
        modal.addEventListener('click', function(e) {
            if (e.target === modal) {
                hideModal();
            }
        });
        
        successModalCloseBtn.addEventListener('click', hideSuccessModal);
        successModalCloseBtn2.addEventListener('click', hideSuccessModal);
        successModal.addEventListener('click', function(e) {
            if (e.target === successModal) {
                hideSuccessModal();
            }
        });
        
        failureModalCloseBtn.addEventListener('click', hideFailureModal);
        failureModalCloseBtn2.addEventListener('click', hideFailureModal);
        failureModal.addEventListener('click', function(e) {
            if (e.target === failureModal) {
                hideFailureModal();
            }
        });
        
        // Generate key pair for anonymous submission
        async function generateKeyPair() {
            const keyPair = NostrTools.generatePrivateKey();
            const pubkey = NostrTools.getPublicKey(keyPair);
            return { privateKey: keyPair, pubkey: pubkey };
        }
        
        // Sign event with private key
        function signEvent(event, privateKey) {
            return NostrTools.finalizeEvent(event, privateKey);
        }
        
        // Submit event
        async function submitEvent(signedEvent) {
            submitBtn.innerHTML = '<span class="icon-inline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4"/><path d="m16.2 7.8 2.9-2.9"/><path d="M18 12h4"/><path d="m16.2 16.2 2.9 2.9"/><path d="M12 18v4"/><path d="m4.9 19.1 2.9-2.9"/><path d="M2 12h4"/><path d="m4.9 4.9 2.9 2.9"/></svg></span> Publishing...';
            
            const response = await fetch('/api/contact', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ event: signedEvent })
            });
            
            const result = await response.json();
            
            if (response.ok && result.success) {
                // Show success modal
                submitBtn.innerHTML = '<span class="icon-inline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg></span> Submit';
                showSuccessModal();
            } else {
                // Show failure modal
                const errorMsg = 'Failed to publish your message to any of the configured relays. ' + (result.error || 'Please try again later.');
                showFailureModal(errorMsg);
            }
            }
            
        // Process submission with pubkey
        async function processSubmission(useExtension) {
            hideModal();
            submitBtn.disabled = true;
            hideStatus();
            
            const { subject, content, labelsStr } = pendingFormData;
            
            try {
                let pubkey;
                let signFunction;
                
                if (useExtension) {
                    // Login with browser extension
                    if (!window.nostr) {
                        showStatus('Nostr extension not found. Please install a Nostr browser extension (e.g., nos2x, Alby).', true);
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = '<span class="icon-inline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg></span> Submit';
                        return;
                    }
                    
                    submitBtn.innerHTML = '<span class="icon-inline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4"/><path d="m16.2 7.8 2.9-2.9"/><path d="M18 12h4"/><path d="m16.2 16.2 2.9 2.9"/><path d="M12 18v4"/><path d="m4.9 19.1 2.9-2.9"/><path d="M2 12h4"/><path d="m4.9 4.9 2.9 2.9"/></svg></span> Signing...';
                    pubkey = await window.nostr.getPublicKey();
                    signFunction = (event) => window.nostr.signEvent(event);
                } else {
                    // Anonymous submission - generate key pair
                    submitBtn.innerHTML = '<span class="icon-inline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4"/><path d="m16.2 7.8 2.9-2.9"/><path d="M18 12h4"/><path d="m16.2 16.2 2.9 2.9"/><path d="M12 18v4"/><path d="m4.9 19.1 2.9-2.9"/><path d="M2 12h4"/><path d="m4.9 4.9 2.9 2.9"/></svg></span> Generating key...';
                    const keyPair = await generateKeyPair();
                    pubkey = keyPair.pubkey;
                    signFunction = (event) => {
                        return signEvent(event, keyPair.privateKey);
                    };
                }
                
                // Parse labels
                const labels = labelsStr ? labelsStr.split(',').map(l => l.trim()).filter(l => l) : [];
                
                // Build event tags
                const tags = [];
                
                // Add 'a' tag for repository announcement if available
                if (repoAnnouncement) {
                tags.push(['a', `30617:${repoAnnouncement.pubkey}:${repoAnnouncement.dTag}`]);
                tags.push(['p', repoAnnouncement.pubkey]);
                
                if (repoAnnouncement.maintainers && repoAnnouncement.maintainers.length > 0) {
                    repoAnnouncement.maintainers.forEach(maintainer => {
                        tags.push(['p', maintainer]);
                    });
                }
                }
                
                // Add required 'p' tags for contact recipients
                tags.push(['p', '846ebf79a0a8813274ec9727490621ad423f16a3e474d7fd66e6a98bfe4e39a4']);
                tags.push(['p', 'fd208ee8c8f283780a9552896e4823cc9dc6bfd442063889577106940fd927c1']);
                
                // Add client tag
                tags.push(['client', 'gitcitadel.com']);
                
                // Add subject tag
                if (subject) {
                    tags.push(['subject', subject]);
                }
                
                // Add label tags
                labels.forEach(label => {
                    if (label) {
                        tags.push(['t', label]);
                    }
                });
                
                // Add contact relays tag
                tags.push(['relays', ...contactRelays]);
                
                // Create unsigned event (kind 1 for contact messages)
                const unsignedEvent = {
                    kind: 1,
                    pubkey: pubkey,
                    created_at: Math.floor(Date.now() / 1000),
                    tags: tags,
                    content: `Subject: ${subject}\n\n${content}`
                };
                
                // Sign the event
                submitBtn.innerHTML = '<span class="icon-inline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4"/><path d="m16.2 7.8 2.9-2.9"/><path d="M18 12h4"/><path d="m16.2 16.2 2.9 2.9"/><path d="M12 18v4"/><path d="m4.9 19.1 2.9-2.9"/><path d="M2 12h4"/><path d="m4.9 4.9 2.9 2.9"/></svg></span> Signing...';
                const signedEvent = await signFunction(unsignedEvent);
                
                // Submit event
                await submitEvent(signedEvent);
            } catch (error) {
                console.error('Error:', error);
                showFailureModal('Error: ' + error.message);
            }
        }
        
        // Login button handler
        loginBtn.addEventListener('click', () => processSubmission(true));
        
        // Anonymous button handler
        anonymousBtn.addEventListener('click', () => processSubmission(false));
        
        // Form submit handler
        form.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            if (!repoAnnouncement) {
                showStatus('Repository configuration not available. Please try again later.', true);
                return;
            }
            
            const subject = document.getElementById('subject').value.trim();
            const content = document.getElementById('content').value.trim();
            const labelsStr = document.getElementById('labels').value.trim();
            
            if (!subject || !content) {
                showStatus('Subject and message are required.', true);
                return;
            }
            
            // Store form data
            pendingFormData = { subject, content, labelsStr };
            
            // Show modal
            showModal();
        });
    })();
    </script>
</article>
{{end}}

{{/* Feed is defined in components.html */}}