Customizable Payment Options: Implement a user-friendly interface on …

…the BLT website for users to select their preferred cryptocurrency, input the amount they wish to pay or donate, and enter a unique payment address or QR code for the transaction. OWASP-BLT#1912 (OWASP-BLT#1951)
Sarthak5598 · Mar 8, 2024 · 1bb2746 · 1bb2746
1 parent e86ad55
commit 1bb2746
Show file tree

Hide file tree

Showing 8 changed files with 362 additions and 56 deletions.
diff --git a/website/admin.py b/website/admin.py
@@ -200,7 +200,9 @@ class UserAdmin(ImportExportModelAdmin):
 class UserProfileAdmin(admin.ModelAdmin):
     list_display = (
         "id",
-        "crypto_address",
+        "btc_address",
+        "eth_address",
+        "bch_address",
     )
 
 

diff --git a/website/migrations/0084_rename_crypto_address_userprofile_bch_address_and_more.py b/website/migrations/0084_rename_crypto_address_userprofile_bch_address_and_more.py
@@ -0,0 +1,27 @@
+# Generated by Django 5.0.2 on 2024-03-05 08:10
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("website", "0083_alter_invitefriend_options_and_more"),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name="userprofile",
+            old_name="crypto_address",
+            new_name="bch_address",
+        ),
+        migrations.AddField(
+            model_name="userprofile",
+            name="btc_address",
+            field=models.CharField(blank=True, max_length=100, null=True),
+        ),
+        migrations.AddField(
+            model_name="userprofile",
+            name="eth_address",
+            field=models.CharField(blank=True, max_length=100, null=True),
+        ),
+    ]
diff --git a/website/migrations/0085_merge_20240307_1217.py b/website/migrations/0085_merge_20240307_1217.py
@@ -0,0 +1,12 @@
+# Generated by Django 5.0.2 on 2024-03-07 06:47
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("website", "0084_contributorstats"),
+        ("website", "0084_rename_crypto_address_userprofile_bch_address_and_more"),
+    ]
+
+    operations = []
diff --git a/website/migrations/0086_merge_20240308_1030.py b/website/migrations/0086_merge_20240308_1030.py
@@ -0,0 +1,12 @@
+# Generated by Django 5.0.2 on 2024-03-08 05:00
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("website", "0085_merge_0084_contributorstats_0084_issue_cve_id"),
+        ("website", "0085_merge_20240307_1217"),
+    ]
+
+    operations = []
diff --git a/website/models.py b/website/models.py
@@ -426,7 +426,9 @@ class UserProfile(models.Model):
 
     subscribed_domains = models.ManyToManyField(Domain, related_name="user_subscribed_domains")
     subscribed_users = models.ManyToManyField(User, related_name="user_subscribed_users")
-    crypto_address = models.CharField(max_length=100, null=True, blank=True)
+    btc_address = models.CharField(max_length=100, blank=True, null=True)
+    bch_address = models.CharField(max_length=100, blank=True, null=True)
+    eth_address = models.CharField(max_length=100, blank=True, null=True)
 
     def avatar(self, size=36):
         if self.user_avatar:

diff --git a/website/templates/_leaderboard_widget.html b/website/templates/_leaderboard_widget.html
@@ -1,5 +1,51 @@
 {% load gravatar %}
 {% load humanize %}
+<style>
+    .crypto-address {
+    text-align: center;
+    }
+
+    .dialog {
+        position: relative;
+    }
+
+    .arrow-container {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: max-content;
+    }
+
+    .arrow-btn {
+        background: none;
+        border: none;
+        color: black;
+        font-size: 40px;
+        cursor: pointer;
+        font-weight: bold;
+        margin: 0 0px;
+    }
+
+    .crypto-name {
+        text-align: center;
+        font-size: 20px;
+        color: white;
+        font-weight: bold;
+        background-color: #ff4444;
+        border-radius: 10px;
+        display: inline-block;
+        margin-left: auto ;
+    }
+
+    .slideshow {
+        margin-top: 50px;
+    }
+
+</style>
 <div class="row-start-1 bug-container leaderboard-widget flex flex-col p-5 pt-3 bg-[white] m-1 w-[100%] row-span-2 rounded-[2.5rem]  border-[#e8e8e8] border-2 font-['Inter'] h-[630px]">
     <div class="font-['Barlow_Semi_Condensed'] font-semibold text-[black] text-[25px] text-center mb-2">LEADERBOARD</div>
     <div class="bg-[#EAEAEA] font-semibold p-3 mt- rounded-2xl">
@@ -52,21 +98,19 @@
                 <button type="button"
                         id="openModal-{{ leader.id }}"
                         class="btn btn-danger text-black"
-                        onclick="openModal('{{ leader.userprofile.crypto_address }}', '{{ leader.id }}')">
+                        onclick="openModal('{{ leader.userprofile.btc_address }}','{{ leader.userprofile.eth_address }}','{{ leader.userprofile.bch_address }}', '{{ leader.id }}')">
                     TIP:<i class="fab fa-btc"></i>
                 </button>
-                <dialog id="dialog-{{ leader.id }}">
-                    <img id="qr-image-{{ leader.id }}" alt="QR Code" height="300" width="400">
-                    <p id="bch-address-{{ leader.id }}">
-                        BCH:
-                        {% if leader.userprofile.crypto_address %}
-                            {{ leader.userprofile.crypto_address }}
-                        {% else %}
-                            User has not entered a BCH address:
-                            <br>
-                            Your tip will go to the leaderboard fund
-                        {% endif %}
-                    </p>
+                <dialog id="dialog-{{ leader.id }}" class="dialog">
+                    <div class="arrow-container">
+                        <button id="prev-{{ leader.id }}" class="arrow-btn">&lt;</button>
+                        <p id="crypto-name-{{ leader.id }}" class="crypto-name">Bitcoin</p>
+                        <button id="next-{{ leader.id }}" class="arrow-btn">&gt;</button>
+                    </div>
+                    <div id="slideshow-{{ leader.id }}" class="slideshow">
+                        <img id="qr-image-{{ leader.id }}" alt="QR Code" height="300" width="400">
+                        <p id="crypto-address-{{ leader.id }}" class="crypto-address"></p>
+                    </div>
                     <button id="close-{{ leader.id }}" class="btn btn-danger w-full">Close</button>
                 </dialog>
             </div>
@@ -83,17 +127,49 @@
 </div>
 {% comment %} positions the leaderboard rightmost {% endcomment %}
 <script>
-    function openModal(address, userId) {
-        if (address == '') {
-            address = "qr5yccf7j4dpjekyz3vpawgaarl352n7yv5d5mtzzc";
-        }
-        var qrUrl = "https://api.qrserver.com/v1/create-qr-code/?data=bitcoincash:" + address + "&size=400x300";
-        document.getElementById('qr-image-' + userId).src = qrUrl;
-        document.getElementById('dialog-' + userId).showModal();
-        document.getElementById('close-' + userId).addEventListener('click',function(){
+    const openModal = (btc, eth, bch, userId) => {
+        const cryptoOptions = [
+        { name: 'Bitcoin', address: btc },
+        { name: 'Ethereum', address: eth },
+        { name: 'Bitcoin Cash', address: bch }
+        ];
+        let currentIndex = 0;
+        const updateSlide = () => {
+            let { name, address } = cryptoOptions[currentIndex];
+            if (address == '' || address == 'None') {
+                address = "qr5yccf7j4dpjekyz3vpawgaarl352n7yv5d5mtzzc";
+                document.getElementById('qr-image-'+userId).src = `https://api.qrserver.com/v1/create-qr-code/?data=${address}&size=400x300`;
+                document.getElementById('crypto-name-' + userId).textContent = "No address: Will go to BLT Donation";
+                document.getElementById('crypto-address-'+userId).textContent = `BCH: ${address}`;
+            }
+            else{
+            document.getElementById('crypto-name-' + userId).textContent = name;
+            document.getElementById('qr-image-' + userId).src = `https://api.qrserver.com/v1/create-qr-code/?data=${address}&size=400x300`;
+            document.getElementById('crypto-address-' + userId).textContent = `${address}`;
+            }
+        };
+
+        updateSlide();
+
+        document.getElementById('openModal-' + userId).addEventListener('click', function() {
+            document.getElementById('dialog-' + userId).showModal();
+        });
+
+        document.getElementById('close-' + userId).addEventListener('click', function() {
             document.getElementById('dialog-' + userId).close();
         });
-    }
+
+        document.getElementById('prev-' + userId).addEventListener('click', function() {
+            currentIndex = (currentIndex - 1 + cryptoOptions.length) % cryptoOptions.length;
+            updateSlide();
+        });
+
+        document.getElementById('next-' + userId).addEventListener('click', function() {
+            currentIndex = (currentIndex + 1) % cryptoOptions.length;
+            updateSlide();
+        });
+    };
+
     document.addEventListener('DOMContentLoaded', function() {
       const grid = document.querySelector('.hero-bugs-container');
       const child = document.querySelector('.leaderboard-widget');