From 46a593966a2df5f95c10be6dfe6494d9f71243f8 Mon Sep 17 00:00:00 2001
From: Keep Creating Online <adambrettmalin@protonmail.com>
Date: Sun, 2 Feb 2025 21:08:57 -0500
Subject: [PATCH] update

---
 src/components/application-form.html          |  27 +-
 .../iframe_forms/iframe-application-form.html | 403 ++++++++++++++++++
 2 files changed, 415 insertions(+), 15 deletions(-)
 create mode 100644 src/components/iframe_forms/iframe-application-form.html
diff --git a/src/components/application-form.html b/src/components/application-form.html
index cc52be1..8d9e93c 100644
--- a/src/components/application-form.html
+++ b/src/components/application-form.html
@@ -1,9 +1,5 @@
 <!-- components/application-form.html 
-//    https://bitvid.network?modal=application => open ???Modal
-//    
-//    Admin: npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe
-//    Form: 
-//    Responces: 
+     https://bitvid.network?modal=application => open nostrFormModal
 -->
 <!DOCTYPE html>
 <html lang="en">
@@ -21,7 +17,7 @@
       class="fixed inset-0 z-50 hidden"
       style="background: transparent"
     >
-      <!-- Dark/blur overlay (same approach as your other modals) -->
+      <!-- Dark/blur overlay -->
       <div
         class="absolute inset-0 z-10"
         style="
@@ -31,19 +27,21 @@
         "
       ></div>
 
-      <!-- Outer container with same sizing as your video modal -->
+      <!-- Outer container with full width and centered content -->
       <div
         class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
       >
-        <!-- Inner content: wide layout, matching .max-w-[90%] lg:max-w-6xl -->
+        <!-- Inner content container -->
         <div
           class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
         >
-          <!-- Header bar (sticky) with exit button on the right -->
+          <!-- Header bar with updated styling -->
           <div
-            class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
+            class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between border-b border-gray-700"
           >
-            <h2 class="text-2xl font-bold text-white mb-0">Application Form</h2>
+            <h2 class="text-3xl font-extrabold text-white tracking-wide pb-2">
+              Application Form
+            </h2>
             <button
               id="closeNostrFormModal"
               class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
@@ -67,7 +65,6 @@
 
           <!-- Main Content -->
           <div class="p-6">
-            <!-- Flexible container for the iframe -->
             <div class="w-full" style="height: 80vh">
               <iframe
                 src=""
@@ -81,20 +78,20 @@
       </div>
     </div>
 
-    <!-- Optional Script for Opening/Closing (if you have a dedicated button) -->
+    <!-- Optional Script for Opening/Closing the Modal -->
     <script>
       const openBtn = document.getElementById("openNostrForm");
       const appModal = document.getElementById("nostrFormModal");
       const closeBtn = document.getElementById("closeNostrFormModal");
 
-      // Open the modal
+      // Open the modal when the designated button is clicked.
       if (openBtn) {
         openBtn.addEventListener("click", () => {
           appModal.classList.remove("hidden");
         });
       }
 
-      // Close the modal
+      // Close the modal when the close button is clicked.
       if (closeBtn) {
         closeBtn.addEventListener("click", () => {
           appModal.classList.add("hidden");
diff --git a/src/components/iframe_forms/iframe-application-form.html b/src/components/iframe_forms/iframe-application-form.html
new file mode 100644
index 0000000..cd73f4f
--- /dev/null
+++ b/src/components/iframe_forms/iframe-application-form.html
@@ -0,0 +1,403 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>bitvid Whitelist Application Form</title>
+    <!-- Link to your main stylesheet -->
+    <link rel="stylesheet" href="style.css" />
+    <style>
+      /* Override for form page to match modal field styling */
+
+      /* Remove width constraints from body so our container can be full width */
+      body {
+        background-color: transparent;
+        color: #fff;
+        font-family: system-ui, -apple-system, sans-serif;
+        margin: 20px;
+      }
+
+      /* Override the .container to use the full available width */
+      .container {
+        width: 100%;
+        max-width: 100%;
+        margin: 0;
+        padding: 0;
+      }
+
+      /* Card-like container for the form */
+      .form-container {
+        background-color: #111827; /* Tailwind's bg-gray-900 */
+        padding: 1.5rem;
+        border-radius: 0.5rem;
+        box-shadow: var(--shadow-md);
+      }
+
+      h1,
+      h2 {
+        color: #fff;
+      }
+
+      /* Labels in a light gray */
+      label {
+        display: block;
+        margin-top: 1em;
+        font-weight: bold;
+        color: #E5E7EB; /* Tailwind's text-gray-200 */
+      }
+
+      /* Input, textarea, select mimic modal field styles */
+      input,
+      textarea,
+      select {
+        width: 100%;
+        margin-bottom: 0.75em;
+        background-color: #1F2937; /* Tailwind's bg-gray-800 */
+        color: #F3F4F6; /* Tailwind's text-gray-100 */
+        border: 1px solid #374151; /* Tailwind's border-gray-700 */
+        padding: 0.5em;
+        border-radius: 0.375rem; /* rounded-md */
+        box-sizing: border-box;
+      }
+
+      input:focus,
+      textarea:focus,
+      select:focus {
+        border-color: #3B82F6; /* blue-500 */
+        outline: none;
+        box-shadow: 0 0 0 1px #3B82F6;
+      }
+
+      /* Style for checkboxes – display inline with a label */
+      .checkbox-group label {
+        display: inline-block;
+        margin-right: 1rem;
+        font-weight: normal;
+      }
+
+      /* Button styled similarly to modal publish button */
+      button {
+        padding: 0.5em 1em;
+        background: #3B82F6; /* blue-500 */
+        color: #fff;
+        border: none;
+        border-radius: 0.375rem;
+        cursor: pointer;
+      }
+
+      /* Status log area */
+      #status {
+        margin-top: 1em;
+        padding: 0.5em;
+        background: #111827;
+        white-space: pre-wrap;
+        min-height: 80px;
+        border-radius: 0.25rem;
+      }
+      .status-line {
+        margin: 0.25em 0;
+      }
+      .error {
+        color: #F87171; /* a red tint */
+      }
+      .success {
+        color: #3B82F6; /* blue-500 */
+      }
+      .warn {
+        color: #FACC15; /* a yellow tone */
+      }
+
+      /* Custom Scrollbar styling for WebKit browsers */
+      ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+      ::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      ::-webkit-scrollbar-thumb {
+        background-color: #3B82F6;
+        border-radius: 4px;
+      }
+      /* Custom Scrollbar styling for Firefox */
+      * {
+        scrollbar-width: thin;
+        scrollbar-color: #3B82F6 transparent;
+      }
+    </style>
+    <!-- Load nostr‑tools v2.10.4 -->
+    <script src="https://cdn.jsdelivr.net/npm/nostr-tools@2.10.4/lib/nostr.bundle.min.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <div class="form-container">
+        <p>
+          bitvid is currently in early access. If you would like to request access, please fill out this application. Applications will be reviewed manually, and approvals will be based on alignment with bitvid’s community values.
+        </p>
+        <form id="wl-form">
+          <!-- 1. Applicant Information -->
+          <h2>1. Applicant Information</h2>
+          <label for="applicantNpub">Nostr Public Key (npub):</label>
+          <input type="text" id="applicantNpub" placeholder="Enter your npub" required />
+
+          <label for="contactMethod">Preferred Contact Method (if applicable):</label>
+          <input type="text" id="contactMethod" placeholder="Nostr DM, email, or other" />
+
+          <label for="username">Username or Alias (if applicable):</label>
+          <input type="text" id="username" placeholder="Enter your preferred name" />
+
+          <!-- 2. Content Intent -->
+          <h2>2. Content Intent</h2>
+          <p>What type of content do you plan to upload? (Check all that apply)</p>
+          <div class="checkbox-group">
+            <label><input type="checkbox" name="contentType" value="Educational" /> Educational</label>
+            <label><input type="checkbox" name="contentType" value="Entertainment" /> Entertainment</label>
+            <label><input type="checkbox" name="contentType" value="News & Journalism" /> News & Journalism</label>
+            <label><input type="checkbox" name="contentType" value="Creative Works" /> Creative Works</label>
+            <label><input type="checkbox" name="contentType" value="Discussions & Opinions" /> Discussions & Opinions</label>
+            <label><input type="checkbox" name="contentType" value="Other" /> Other</label>
+          </div>
+          <label for="otherContent">Other (please specify):</label>
+          <input type="text" id="otherContent" placeholder="Describe if Other was selected" />
+
+          <label for="whyJoin">Why do you want to join bitvid?</label>
+          <textarea id="whyJoin" rows="3" placeholder="Explain your motivation"></textarea>
+
+          <label for="priorExperience">Have you created content on other platforms before?</label>
+          <select id="priorExperience">
+            <option value="">Select an option</option>
+            <option value="Yes">Yes</option>
+            <option value="No">No</option>
+          </select>
+
+          <label for="experienceLinks">If yes, provide links or references to your previous work:</label>
+          <textarea id="experienceLinks" rows="2" placeholder="Paste links or describe your work"></textarea>
+
+          <!-- 3. Community Engagement -->
+          <h2>3. Community Engagement</h2>
+          <label for="familiarGuidelines">Are you familiar with bitvid’s Community Guidelines?</label>
+          <select id="familiarGuidelines">
+            <option value="">Select an option</option>
+            <option value="Yes">Yes</option>
+            <option value="No">No</option>
+          </select>
+
+          <label for="agreeGuidelines">Do you agree to follow the guidelines and respect decentralized moderation?</label>
+          <select id="agreeGuidelines">
+            <option value="">Select an option</option>
+            <option value="Yes">Yes</option>
+            <option value="No">No</option>
+          </select>
+
+          <label for="communityContribution">How do you plan to contribute positively to the bitvid community?</label>
+          <textarea id="communityContribution" rows="3" placeholder="Explain your approach"></textarea>
+
+          <!-- 4. Additional Information -->
+          <h2>4. Additional Information</h2>
+          <label for="specialSkills">Do you have any special skills or interests that could help improve bitvid?</label>
+          <textarea id="specialSkills" rows="3" placeholder="e.g., software development, moderation, design, advocacy"></textarea>
+
+          <label for="testFeatures">Would you be interested in helping test new features?</label>
+          <select id="testFeatures">
+            <option value="">Select an option</option>
+            <option value="Yes">Yes</option>
+            <option value="No">No</option>
+          </select>
+
+          <!-- 5. Declaration -->
+          <h2>5. Declaration</h2>
+          <p>
+            By submitting this application, you confirm that:
+            <br />- The information provided is accurate.
+            <br />- You understand that approval is based on community alignment and available capacity.
+            <br />- You acknowledge that whitelist status may be revoked if guidelines are violated.
+          </p>
+          <label for="signature">Signature (Digital or Written):</label>
+          <input type="text" id="signature" placeholder="Your signature" />
+
+          <label for="declarationDate">Date:</label>
+          <input type="date" id="declarationDate" />
+
+          <button type="submit">Submit Application</button>
+        </form>
+        <div id="status"></div>
+      </div>
+    </div>
+    <script>
+      document.addEventListener("DOMContentLoaded", () => {
+        // Logging functions for both on-page and console output.
+        function log(msg, type = "info") {
+          const div = document.createElement("div");
+          div.classList.add("status-line");
+          if (type === "error") div.classList.add("error");
+          if (type === "success") div.classList.add("success");
+          if (type === "warn") div.classList.add("warn");
+          div.textContent = msg;
+          document.getElementById("status").appendChild(div);
+          console.log(`[${type.toUpperCase()}] ${msg}`);
+        }
+        function clear() {
+          document.getElementById("status").innerHTML = "";
+        }
+        if (!window.NostrTools) {
+          log("NostrTools not loaded. Check console or ad-blockers.", "error");
+          return;
+        }
+        const { generateSecretKey, getPublicKey, finalizeEvent, nip04, nip19, SimplePool, Relay } = window.NostrTools;
+        
+        // Set the recipient's NPUB (your personal NPUB) here.
+        const recipientNpub = "npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe";
+        const RELAYS = [
+          "wss://relay.snort.social",
+          "wss://relay.damus.io",
+          "wss://relay.primal.net"
+        ];
+        const pool = new SimplePool();
+
+        document.getElementById("wl-form").addEventListener("submit", async (ev) => {
+          ev.preventDefault();
+          clear();
+          try {
+            // Retrieve applicant-provided input.
+            const applicantNpub = document.getElementById("applicantNpub").value.trim();
+            const contactMethod = document.getElementById("contactMethod").value.trim();
+            const username = document.getElementById("username").value.trim();
+
+            // Section 2: Content Intent
+            // Get all checked content types
+            const contentTypeNodes = document.querySelectorAll('input[name="contentType"]:checked');
+            let contentTypes = [];
+            contentTypeNodes.forEach((node) => {
+              contentTypes.push(node.value);
+            });
+            const otherContent = document.getElementById("otherContent").value.trim();
+            const whyJoin = document.getElementById("whyJoin").value.trim();
+            const priorExperience = document.getElementById("priorExperience").value.trim();
+            const experienceLinks = document.getElementById("experienceLinks").value.trim();
+
+            // Section 3: Community Engagement
+            const familiarGuidelines = document.getElementById("familiarGuidelines").value.trim();
+            const agreeGuidelines = document.getElementById("agreeGuidelines").value.trim();
+            const communityContribution = document.getElementById("communityContribution").value.trim();
+
+            // Section 4: Additional Information
+            const specialSkills = document.getElementById("specialSkills").value.trim();
+            const testFeatures = document.getElementById("testFeatures").value.trim();
+
+            // Section 5: Declaration
+            const signature = document.getElementById("signature").value.trim();
+            const declarationDate = document.getElementById("declarationDate").value.trim();
+
+            // Construct the whitelist application content.
+            const applicationContent = `
+# **bitvid Whitelist Application Form**
+
+**1. Applicant Information**
+- **Nostr Public Key (npub):** ${applicantNpub}
+- **Preferred Contact Method:** ${contactMethod || "N/A"}
+- **Username or Alias:** ${username || "N/A"}
+
+**2. Content Intent**
+- **Planned Content Types:** ${contentTypes.join(", ") || "N/A"}
+- **Other (if applicable):** ${otherContent || "N/A"}
+- **Why do you want to join bitvid?**  
+  ${whyJoin || "N/A"}
+- **Have you created content on other platforms before?** ${priorExperience || "N/A"}
+- **Links or references to your previous work:**  
+  ${experienceLinks || "N/A"}
+
+**3. Community Engagement**
+- **Familiar with bitvid’s Community Guidelines?** ${familiarGuidelines || "N/A"}
+- **Agree to follow guidelines and respect moderation?** ${agreeGuidelines || "N/A"}
+- **How do you plan to contribute to the community?**  
+  ${communityContribution || "N/A"}
+
+**4. Additional Information**
+- **Special skills or interests:**  
+  ${specialSkills || "N/A"}
+- **Interested in testing new features?** ${testFeatures || "N/A"}
+
+**5. Declaration**
+By submitting this application, you confirm that:
+- The information provided is accurate.
+- You understand that approval is based on community alignment and available capacity.
+- You acknowledge that whitelist status may be revoked if guidelines are violated.
+
+**Signature (Digital or Written):** ${signature || "N/A"}
+**Date:** ${declarationDate || "N/A"}
+
+---
+
+**Processing Time:** Applications will be reviewed within **7-14 days**. If approved, you will receive a confirmation via your provided contact method. If additional information is needed, we will reach out.
+
+For further questions, contact us through bitvid’s Nostr support channels.
+            `.trim();
+
+            log("[DEBUG] Constructed application content:\n" + applicationContent);
+
+            // Decode the recipient NPUB to get the public key.
+            log("Decoding recipient npub...");
+            const decoded = nip19.decode(recipientNpub);
+            log("[DEBUG] Decoded npub: " + JSON.stringify(decoded));
+            if (decoded.type !== "npub") {
+              throw new Error("Decoded type is not npub.");
+            }
+            const targetPubHex = decoded.data;
+            log("Recipient pubkey: " + targetPubHex.slice(0, 16) + "...");
+  
+            // Generate an ephemeral key pair.
+            log("Generating ephemeral key...");
+            const ephemeralPriv = generateSecretKey();
+            const ephemeralPubHex = getPublicKey(ephemeralPriv);
+            log("Ephemeral pubkey: " + ephemeralPubHex.slice(0, 16) + "...");
+  
+            // Encrypt the application content.
+            log("Encrypting application content (nip04)...");
+            const ciphertext = await nip04.encrypt(ephemeralPriv, targetPubHex, applicationContent);
+            log("[DEBUG] Ciphertext: " + ciphertext);
+            log("Encryption done.");
+  
+            // Build the Nostr event template.
+            const now = Math.floor(Date.now() / 1000);
+            const eventTemplate = {
+              kind: 4,
+              created_at: now,
+              tags: [["p", targetPubHex]],
+              content: ciphertext,
+            };
+            log("[DEBUG] Event template before finalizing: " + JSON.stringify(eventTemplate));
+  
+            // Finalize the event (computing the id and signature).
+            const event = finalizeEvent(eventTemplate, ephemeralPriv);
+            log("[DEBUG] Final event: " + JSON.stringify(event));
+  
+            // Publish the event to all relays.
+            log("Publishing the application to relays...");
+            await Promise.any(pool.publish(RELAYS, event));
+            log("At least one relay accepted the event.", "success");
+  
+            // For each relay, subscribe to verify the event appears.
+            for (const url of RELAYS) {
+              log("Connecting to " + url + " for subscription...");
+              const relay = await Relay.connect(url);
+              relay.subscribe([{ authors: [ephemeralPubHex], kinds: [4] }], {
+                onEvent(foundEvent) {
+                  if (foundEvent.id === event.id) {
+                    log("[" + url + "] => Found our application in storage! ID: " + foundEvent.id.slice(0, 8) + "...", "success");
+                  }
+                },
+                onEose() {
+                  relay.close();
+                },
+              });
+            }
+  
+            log("Done. If the logs show that at least one relay accepted the event and the application was found in storage, a moderator will review your application within 7-14 days.");
+          } catch (err) {
+            log("Error: " + err.message, "error");
+            console.error(err);
+          }
+        });
+      });
+    </script>
+  </body>
+</html>
