Merge pull request #42 from johnwmail/feature/upload-auth

Feature/upload auth

Author: johnwmail

Documents/LAMBDA.md

@@ -63,7 +63,7 @@ Create an IAM role with the following permissions:
                 "s3:GetObject",
                 "s3:PutObject",
                 "s3:DeleteObject",
-                "s3:HeadObject"
+                "s3:ListBucket"
             ],
             "Resource": [
                 "arn:aws:s3:::YOUR_BUCKET_NAME",
@@ -79,6 +79,7 @@ Create an IAM role with the following permissions:
 - `s3:GetObject` - Read paste content and metadata
 - `s3:PutObject` - Create new pastes
 - `s3:DeleteObject` - Clean up expired pastes
+- `s3:ListBucket` - List objects for slug uniqueness checks
 
 ### GitHub Actions Permissions
 
@@ -486,4 +487,4 @@ aws ce get-cost-and-usage \
 - [AWS Lambda Documentation](https://docs.aws.amazon.com/lambda/)
 - [Amazon S3 Documentation](https://docs.aws.amazon.com/s3/)
 - [CloudWatch Logs Documentation](https://docs.aws.amazon.com/AmazonCloudWatch/latest/logs/)
-- [nclip GitHub Repository](https://github.com/johnwmail/nclip)
+- [nclip GitHub Repository](https://github.com/johnwmail/nclip)

README.md

@@ -183,7 +183,7 @@ aws lambda create-function \
                 "s3:GetObject",
                 "s3:PutObject",
                 "s3:DeleteObject",
-                "s3:HeadObject"
+                "s3:ListBucket"
             ],
             "Resource": "*"
         }

static/index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{.Title}}</title>
-    <link rel="stylesheet" href="/static/style.css">
+    <link rel="stylesheet" href="/static/style.css?v={{.Version}}">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link
@@ -44,14 +44,7 @@ <h2>
                 <div class="form-group">
                     <label for="text-content">Text Content</label>
                     <textarea id="text-content" placeholder="Paste your text here..."></textarea>
-                    {{ if .UploadAuth }}
-                    <!-- API Key for uploads (server requires it) -->
-                    <div class="api-key-wrapper" style="margin-top:0.5rem;">
-                        <label for="api-key-input">API Key</label>
-                        <input type="text" id="api-key-input" placeholder="Paste API key for uploads"
-                            style="width:100%;" />
-                    </div>
-                    {{ end }}
+                    <!-- API key moved below file upload controls -->
                     <div class="form-controls">
                         <div class="checkbox-wrapper">
                             <input type="checkbox" id="burn-text">
@@ -71,6 +64,7 @@ <h2>
                 <div class="form-group">
                     <label for="file-input">File Upload</label>
                     <input type="file" id="file-input">
+                    <!-- API key unified below -->
                     <div class="form-controls">
                         <div class="checkbox-wrapper">
                             <input type="checkbox" id="burn-file">
@@ -85,6 +79,12 @@ <h2>
                         </button>
                     </div>
                 </div>
+                {{ if .UploadAuth }}
+                <div class="form-group api-key-row">
+                    <label for="api-key-input">API Key</label>
+                    <input type="text" id="api-key-input" placeholder="Paste API key for uploads" style="width:100%;" />
+                </div>
+                {{ end }}
             </div>
 
             <div class="card result-section" id="result-section">

static/script.js

@@ -20,8 +20,25 @@ document.addEventListener('DOMContentLoaded', function () {
     const usageExamplesContainer = document.querySelector('.code-examples');
     const initialUsageHTML = usageExamplesContainer ? usageExamplesContainer.innerHTML : '';
 
-    // API key input (optional)
+    // API key inputs (optional)
     const apiKeyInput = document.getElementById('api-key-input');
+    const apiKeyInputMobile = document.getElementById('api-key-input-mobile');
+
+    // Helper to get the API key value. Prefer mobile input if visible.
+    function getApiKey() {
+        try {
+            if (apiKeyInputMobile) {
+                // Check if mobile input is visible
+                const style = window.getComputedStyle(apiKeyInputMobile);
+                if (style && style.display !== 'none') {
+                    return apiKeyInputMobile.value.trim();
+                }
+            }
+        } catch (e) {
+            // ignore
+        }
+        return apiKeyInput ? apiKeyInput.value.trim() : '';
+    }
 
     // Text upload
     uploadTextBtn.addEventListener('click', function () {
@@ -41,10 +58,8 @@ document.addEventListener('DOMContentLoaded', function () {
             'Content-Type': 'text/plain',
             'Accept': 'application/json',
         };
-        const key = apiKeyInput ? apiKeyInput.value.trim() : '';
-        if (key) {
-            headers['Authorization'] = 'Bearer ' + key;
-        }
+        const key = getApiKey();
+        if (key) headers['Authorization'] = 'Bearer ' + key;
 
         fetch(endpoint, {
             method: 'POST',
@@ -123,7 +138,7 @@ document.addEventListener('DOMContentLoaded', function () {
         uploadFileBtn.textContent = 'Uploading...';
 
         const headers = { 'Accept': 'application/json' };
-        const key = apiKeyInput ? apiKeyInput.value.trim() : '';
+        const key = getApiKey();
         if (key) headers['Authorization'] = 'Bearer ' + key;
 
         fetch(endpoint, {
@@ -206,48 +221,9 @@ document.addEventListener('DOMContentLoaded', function () {
         // Always reload the main page to ensure a pristine, server-rendered state
         event.preventDefault();
         window.location.assign('/');
-        return;
-
-        // Legacy fallback (kept for reference, unreachable due to return above)
-        // Hide result section
-        resultSection.style.display = 'none';
-
-        // Show upload section again
-        const uploadSection = document.querySelector('.upload-section');
-        if (uploadSection) {
-            uploadSection.style.display = 'block';
-        }
-
-        // Reset all form fields
-        textContent.value = '';
-        fileInput.value = '';
-        burnTextCheckbox.checked = false;
-        burnFileCheckbox.checked = false;
-
-        // Remove any file selection
-        if (fileInput) {
-            fileInput.value = '';
-        }
-
-        // Restore original usage examples exactly as initial render
-        if (usageExamplesContainer) {
-            usageExamplesContainer.innerHTML = initialUsageHTML;
-        }
-
-        // Show all usage examples (in case any were hidden)
-        const examples = document.querySelectorAll('.example');
-        examples.forEach(e => e.style.display = 'block');
-
-        // Show the usage section if it was hidden
-        if (usageSection) usageSection.style.display = 'block';
-
-        // Scroll to top for a clean experience
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-
-        // Focus on the text area
-        textContent.focus();
     });
 
+
     // Update usage examples to show how to read the created paste
     function updateUsageExamples(url, slug) {
         const baseUrl = url.replace('/' + slug, '');
@@ -269,9 +245,6 @@ document.addEventListener('DOMContentLoaded', function () {
         }
     }
 
-    // Restore original usage examples for new paste
-    function restoreOriginalUsageExamples() { /* no-op: handled by initialUsageHTML restore */ }
-
     // Keyboard shortcuts
     document.addEventListener('keydown', function (e) {
         // Ctrl+Enter to upload text

static/style.css

@@ -58,6 +58,9 @@ header {
     text-align: center;
     margin-bottom: 1.5rem;
     flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 header h1 {
@@ -92,25 +95,10 @@ body.main-page main {
     background: var(--surface-elevated);
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    padding: 1.5rem;
-    flex-shrink: 0;
-    box-shadow: var(--shadow);
-    transition: box-shadow 0.2s ease;
-}
-
-.card:hover {
+    padding: 1rem;
     box-shadow: var(--shadow-lg);
 }
 
-.card h2 {
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: var(--text-primary);
-    margin-bottom: 1rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
 
 /* Upload Section Layout */
 .upload-section {
@@ -125,16 +113,31 @@ body.main-page main {
     margin-bottom: 0.5rem;
 }
 
+/* Collapse truly empty direct children to prevent stray blank rows */
+.upload-section>*:empty {
+    display: none;
+    margin: 0;
+    padding: 0;
+}
+
+/* API key row styling - spans full width in grid layout */
+.upload-section .api-key-row {
+    margin-bottom: 0.5rem;
+}
+
 /* Form Elements */
 .form-group {
+
     margin-bottom: 1rem;
     display: flex;
     flex-direction: column;
-    height: 100%;
+    /* do not stretch to 100% of the grid row: let content size naturally */
+    height: auto;
 }
 
 .form-group .form-controls {
     margin-top: auto;
+    padding: 0.5rem;
 }
 
 .form-group label {
@@ -362,20 +365,14 @@ input[type="file"]:hover {
 .example code {
     display: block;
     background: var(--background);
-    padding: 0.5rem;
-    border-radius: 4px;
-    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, monospace;
-    font-size: 0.75rem;
-    color: var(--text-primary);
-    border: 1px solid var(--border);
-    word-break: break-all;
     padding: 0.75rem;
     border-radius: calc(var(--radius) - 2px);
     font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, monospace;
     font-size: 0.8rem;
     color: var(--text-primary);
-    overflow-x: auto;
     border: 1px solid var(--border);
+    word-break: break-all;
+    overflow-x: auto;
 }
 
 /* Responsive Design */
@@ -412,8 +409,6 @@ input[type="file"]:hover {
 
     .card {
         padding: 1rem;
-        margin-bottom: 1rem;
-        /* Space between cards on mobile */
     }
 
     .form-controls {
@@ -686,4 +681,37 @@ footer {
 
 .result-section {
     animation: slideIn 0.3s ease-out;
+}
+
+/* Responsive Design - Desktop (min-width: 768px) */
+@media (min-width: 768px) {
+    .upload-section {
+        gap: 0 1rem;
+        /* row-gap column-gap */
+    }
+
+    .upload-section .api-key-row {
+        grid-column: 1 / -1;
+        padding: 0;
+        margin: 0;
+    }
+
+    .card.upload-section .api-key-row label {
+        display: block;
+        margin: 0 0 0.5rem 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    .card.upload-section .api-key-row input[type="text"] {
+        display: block;
+        margin: 0;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0.5rem;
+    }
+
+    .upload-section .form-group {
+        margin-bottom: 0.25rem;
+    }
 }

static/view.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{.Title}}</title>
-    <link rel="stylesheet" href="/static/style.css">
+    <link rel="stylesheet" href="/static/style.css?v={{.Version}}">
 </head>
 
 <body>