From 2e9ca20aeab99d3cc740d81a29b245cdbf843d72 Mon Sep 17 00:00:00 2001
From: Atharv Raut <atharvraut2109@gmail.com>
Date: Tue, 1 Jul 2025 10:59:38 +0530
Subject: [PATCH 1/3] Add detailed PAT handling popup

---
 src/server/main.py                            |  1 -
 .../templates/components/git_form.jinja       | 91 +++++++++++++------
 2 files changed, 61 insertions(+), 31 deletions(-)

diff --git a/src/server/main.py b/src/server/main.py
index f314a3ad..fe468274 100644
--- a/src/server/main.py
+++ b/src/server/main.py
@@ -72,7 +72,6 @@ async def head_root() -> HTMLResponse:
     return HTMLResponse(content=None, headers={"content-type": "text/html; charset=utf-8"})
 
 
-@app.get("/api/", response_class=HTMLResponse)
 @app.get("/api", response_class=HTMLResponse)
 async def api_docs(request: Request) -> HTMLResponse:
     """
diff --git a/src/server/templates/components/git_form.jinja b/src/server/templates/components/git_form.jinja
index bf18804d..38c5d035 100644
--- a/src/server/templates/components/git_form.jinja
+++ b/src/server/templates/components/git_form.jinja
@@ -147,38 +147,69 @@
                         </div>
                         <!-- Help section -->
                         <div class="mt-2 flex items-center space-x-1">
-                            <a href="https://github.com/settings/tokens/new?description=gitingest&scopes=repo"
-                               target="_blank"
-                               rel="noopener noreferrer"
-                               class="text-sm text-gray-600 hover:text-gray-800 flex items-center space-x-1 underline">
-                                <span>Get your token</span>
-                                <svg class="w-3 h-3"
-                                     fill="none"
-                                     stroke="currentColor"
-                                     viewBox="0 0 24 24"
-                                     xmlns="http://www.w3.org/2000/svg">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14">
-                                    </path>
-                                </svg>
-                            </a>
+                            <!-- Help button to open modal -->
+                            <div class="mt-1">
+                                <button type="button"
+                                        class="text-sm text-blue-500 underline hover:text-blue-700"
+                                        onclick="document.getElementById('pat-modal').classList.remove('hidden')">
+                                    ❓ How is my token used?
+                                </button>
+                                <a href="https://github.com/settings/tokens/new?description=gitingest&scopes=repo"
+                                   target="_blank"
+                                   rel="noopener noreferrer"
+                                   class="text-sm text-gray-600 hover:text-gray-800 flex items-center space-x-1 underline">
+                                    <span>Get your token</span>
+                                    <svg class="w-3 h-3"
+                                         fill="none"
+                                         stroke="currentColor"
+                                         viewBox="0 0 24 24"
+                                         xmlns="http://www.w3.org/2000/svg">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14">
+                                        </path>
+                                    </svg>
+                                </a>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-        </form>
-        <!-- Example repositories section -->
-        {% if show_examples %}
-            <div class="mt-4">
-                <p class="opacity-70 mb-1">Try these example repositories:</p>
-                <div class="flex flex-wrap gap-2">
-                    {% for example in examples %}
-                        <button onclick="submitExample('{{ example.url }}')"
-                                class="px-4 py-1 bg-[#EBDBB7] hover:bg-[#FFC480] text-gray-900 rounded transition-colors duration-200 border-[3px] border-gray-900 relative hover:-translate-y-px hover:-translate-x-px">
-                            {{ example.name }}
-                        </button>
-                    {% endfor %}
+                <!-- Modal for PAT Help -->
+                <div id="pat-modal"
+                     class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+                    <div class="bg-white rounded-lg p-6 w-11/12 max-w-md shadow-lg">
+                        <h2 class="text-lg font-semibold mb-4">🔐 How We Handle Your GitHub Token</h2>
+                        <ul class="list-disc list-inside text-gray-700 text-sm mb-4">
+                            <li>
+                                <strong>Your Personal Access Token is never stored on our servers or in any database, ensuring complete token privacy.</strong>
+                            </li>
+                            <li>
+                                <strong>It is used only once during the cloning process and is immediately discarded after use.</strong>
+                            </li>
+                            <li>
+                                <strong>The token is not cached or saved in the browser's local storage or memory, preventing any unintended exposure on the client side.</strong>
+                            </li>
+                        </ul>
+                        <div class="text-right">
+                            <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+                                    onclick="document.getElementById('pat-modal').classList.add('hidden')">
+                                Got it
+                            </button>
+                        </div>
+                    </div>
                 </div>
-            </div>
-        {% endif %}
+            </form>
+            <!-- Example repositories section -->
+            {% if show_examples %}
+                <div class="mt-4">
+                    <p class="opacity-70 mb-1">Try these example repositories:</p>
+                    <div class="flex flex-wrap gap-2">
+                        {% for example in examples %}
+                            <button onclick="submitExample('{{ example.url }}')"
+                                    class="px-4 py-1 bg-[#EBDBB7] hover:bg-[#FFC480] text-gray-900 rounded transition-colors duration-200 border-[3px] border-gray-900 relative hover:-translate-y-px hover:-translate-x-px">
+                                {{ example.name }}
+                            </button>
+                        {% endfor %}
+                    </div>
+                </div>
+            {% endif %}
+        </div>
     </div>
-</div>

From 973130f48621975676fd0d66050ec36b7809caff Mon Sep 17 00:00:00 2001
From: Atharv Raut <atharvraut2109@gmail.com>
Date: Tue, 1 Jul 2025 11:02:35 +0530
Subject: [PATCH 2/3] Add detailed PAT handling popup

---
 .../templates/components/git_form.jinja       | 101 +++++++++---------
 1 file changed, 50 insertions(+), 51 deletions(-)

diff --git a/src/server/templates/components/git_form.jinja b/src/server/templates/components/git_form.jinja
index 38c5d035..55145d5d 100644
--- a/src/server/templates/components/git_form.jinja
+++ b/src/server/templates/components/git_form.jinja
@@ -154,62 +154,61 @@
                                         onclick="document.getElementById('pat-modal').classList.remove('hidden')">
                                     ❓ How is my token used?
                                 </button>
-                                <a href="https://github.com/settings/tokens/new?description=gitingest&scopes=repo"
-                                   target="_blank"
-                                   rel="noopener noreferrer"
-                                   class="text-sm text-gray-600 hover:text-gray-800 flex items-center space-x-1 underline">
-                                    <span>Get your token</span>
-                                    <svg class="w-3 h-3"
-                                         fill="none"
-                                         stroke="currentColor"
-                                         viewBox="0 0 24 24"
-                                         xmlns="http://www.w3.org/2000/svg">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14">
-                                        </path>
-                                    </svg>
-                                </a>
                             </div>
+                            <a href="https://github.com/settings/tokens/new?description=gitingest&scopes=repo"
+                               target="_blank"
+                               rel="noopener noreferrer"
+                               class="text-sm text-gray-600 hover:text-gray-800 flex items-center space-x-1 underline">
+                                <span>Get your token</span>
+                                <svg class="w-3 h-3"
+                                     fill="none"
+                                     stroke="currentColor"
+                                     viewBox="0 0 24 24"
+                                     xmlns="http://www.w3.org/2000/svg">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14">
+                                    </path>
+                                </svg>
+                            </a>
                         </div>
                     </div>
                 </div>
-                <!-- Modal for PAT Help -->
-                <div id="pat-modal"
-                     class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-                    <div class="bg-white rounded-lg p-6 w-11/12 max-w-md shadow-lg">
-                        <h2 class="text-lg font-semibold mb-4">🔐 How We Handle Your GitHub Token</h2>
-                        <ul class="list-disc list-inside text-gray-700 text-sm mb-4">
-                            <li>
-                                <strong>Your Personal Access Token is never stored on our servers or in any database, ensuring complete token privacy.</strong>
-                            </li>
-                            <li>
-                                <strong>It is used only once during the cloning process and is immediately discarded after use.</strong>
-                            </li>
-                            <li>
-                                <strong>The token is not cached or saved in the browser's local storage or memory, preventing any unintended exposure on the client side.</strong>
-                            </li>
-                        </ul>
-                        <div class="text-right">
-                            <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
-                                    onclick="document.getElementById('pat-modal').classList.add('hidden')">
-                                Got it
-                            </button>
-                        </div>
+            </div>
+            <!-- Modal for PAT Help -->
+            <div id="pat-modal"
+                 class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+                <div class="bg-white rounded-lg p-6 w-11/12 max-w-md shadow-lg">
+                    <h2 class="text-lg font-semibold mb-4">🔐 How We Handle Your GitHub Token</h2>
+                    <ul class="list-disc list-inside text-gray-700 text-sm mb-4">
+                        <li>
+                            <strong>Your Personal Access Token is never stored on our servers or in any database, ensuring complete token privacy.</strong>
+                        </li>
+                        <li>
+                            <strong>It is used only once during the cloning process and is immediately discarded after use.</strong>
+                        </li>
+                        <li>
+                            <strong>The token is not cached or saved in the browser's local storage or memory, preventing any unintended exposure on the client side.</strong>
+                        </li>
+                    </ul>
+                    <div class="text-right">
+                        <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+                                onclick="document.getElementById('pat-modal').classList.add('hidden')">Got it</button>
                     </div>
                 </div>
-            </form>
-            <!-- Example repositories section -->
-            {% if show_examples %}
-                <div class="mt-4">
-                    <p class="opacity-70 mb-1">Try these example repositories:</p>
-                    <div class="flex flex-wrap gap-2">
-                        {% for example in examples %}
-                            <button onclick="submitExample('{{ example.url }}')"
-                                    class="px-4 py-1 bg-[#EBDBB7] hover:bg-[#FFC480] text-gray-900 rounded transition-colors duration-200 border-[3px] border-gray-900 relative hover:-translate-y-px hover:-translate-x-px">
-                                {{ example.name }}
-                            </button>
-                        {% endfor %}
-                    </div>
+            </div>
+        </form>
+        <!-- Example repositories section -->
+        {% if show_examples %}
+            <div class="mt-4">
+                <p class="opacity-70 mb-1">Try these example repositories:</p>
+                <div class="flex flex-wrap gap-2">
+                    {% for example in examples %}
+                        <button onclick="submitExample('{{ example.url }}')"
+                                class="px-4 py-1 bg-[#EBDBB7] hover:bg-[#FFC480] text-gray-900 rounded transition-colors duration-200 border-[3px] border-gray-900 relative hover:-translate-y-px hover:-translate-x-px">
+                            {{ example.name }}
+                        </button>
+                    {% endfor %}
                 </div>
-            {% endif %}
-        </div>
+            </div>
+        {% endif %}
     </div>
+</div>

From 41993cf5e13a0d082d7c11a9fb6716cd70c73274 Mon Sep 17 00:00:00 2001
From: Atharv Raut <atharvraut2109@gmail.com>
Date: Tue, 1 Jul 2025 11:38:10 +0530
Subject: [PATCH 3/3] Update PAT modal popup style to match main UI design and
 button features

---
 src/server/templates/components/git_form.jinja | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/server/templates/components/git_form.jinja b/src/server/templates/components/git_form.jinja
index 7b33c80c..af8aea1d 100644
--- a/src/server/templates/components/git_form.jinja
+++ b/src/server/templates/components/git_form.jinja
@@ -178,9 +178,9 @@
             <!-- Modal for PAT Help -->
             <div id="pat-modal"
                  class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-                <div class="bg-white rounded-lg p-6 w-11/12 max-w-md shadow-lg">
-                    <h2 class="text-lg font-semibold mb-4">🔐 How We Handle Your GitHub Token</h2>
-                    <ul class="list-disc list-inside text-gray-700 text-sm mb-4">
+                <div class="bg-white rounded-xl p-6 w-11/12 max-w-md shadow-[4px_4px_0_#000] border-[3px] border-gray-900">
+                    <h2 class="text-lg font-semibold mb-4 text-gray-900">About Your GitHub Token</h2>
+                    <ul class="list-disc list-inside text-gray-800 text-sm space-y-2">
                         <li>
                             <strong>Your Personal Access Token is never stored on our servers or in any database, ensuring complete token privacy.</strong>
                         </li>
@@ -191,9 +191,13 @@
                             <strong>The token is not cached or saved in the browser's local storage or memory, preventing any unintended exposure on the client side.</strong>
                         </li>
                     </ul>
-                    <div class="text-right">
-                        <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
-                                onclick="document.getElementById('pat-modal').classList.add('hidden')">Got it</button>
+                    <div class="relative w-fit group ml-auto">
+                        <div class="w-full h-full rounded bg-gray-800 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
+                        <button type="button"
+                                onclick="document.getElementById('pat-modal').classList.add('hidden')"
+                                class="py-2.5 px-5 group-hover:-translate-y-px group-hover:-translate-x-px ease-out duration-300 z-20 relative border-[3px] border-gray-900 font-medium bg-[#ffc480] text-gray-900 rounded">
+                            Got it
+                        </button>
                     </div>
                 </div>
             </div>