upload password

src/pages/upload.astro

@@ -3,10 +3,21 @@ import DefaultLayout from '../layouts/DefaultLayout.astro';
 
 const WORKER_URL = import.meta.env.PUBLIC_WORKER_URL;
 const UPLOAD_SECRET = import.meta.env.PUBLIC_UPLOAD_SECRET;
+const UPLOAD_PASSWORD = import.meta.env.PUBLIC_UPLOAD_PASSWORD;
 ---
 
 <DefaultLayout>
-  <section>
+  <!-- Password gate — shown before upload UI -->
+  <div id="gate" class="gate">
+    <div class="gate-box">
+      <p class="gate-label">Password required</p>
+      <input id="gate-input" type="password" class="gate-input" placeholder="Enter password" />
+      <button id="gate-btn" class="gate-btn">Enter</button>
+      <p id="gate-error" class="gate-error"></p>
+    </div>
+  </div>
+
+  <section id="upload-section" class="upload-section hidden">
     <h4>Upload</h4>
 
     <div id="drop-zone" class="drop-zone">
@@ -23,6 +34,37 @@ const UPLOAD_SECRET = import.meta.env.PUBLIC_UPLOAD_SECRET;
   </section>
 </DefaultLayout>
 
+<script define:vars={{ UPLOAD_PASSWORD }}>
+  const gate = document.getElementById('gate');
+  const gateInput = document.getElementById('gate-input');
+  const gateBtn = document.getElementById('gate-btn');
+  const gateError = document.getElementById('gate-error');
+  const uploadSection = document.getElementById('upload-section');
+
+  function unlock() {
+    gate.classList.add('hidden');
+    uploadSection.classList.remove('hidden');
+  }
+
+  if (sessionStorage.getItem('upload_authed') === '1') {
+    unlock();
+  }
+
+  function attempt() {
+    if (gateInput.value === UPLOAD_PASSWORD) {
+      sessionStorage.setItem('upload_authed', '1');
+      unlock();
+    } else {
+      gateError.textContent = 'Wrong password.';
+      gateInput.value = '';
+      setTimeout(() => { window.location.href = '/'; }, 1500);
+    }
+  }
+
+  gateBtn.addEventListener('click', attempt);
+  gateInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') attempt(); });
+</script>
+
 <script define:vars={{ WORKER_URL, UPLOAD_SECRET }}>
   const dropZone = document.getElementById('drop-zone');
   const fileInput = document.getElementById('file-input');
@@ -201,6 +243,73 @@ const UPLOAD_SECRET = import.meta.env.PUBLIC_UPLOAD_SECRET;
 </script>
 
 <style>
+  .gate {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 40vh;
+  }
+
+  .gate.hidden {
+    display: none;
+  }
+
+  .gate-box {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6em;
+    width: 100%;
+    max-width: 280px;
+  }
+
+  .gate-label {
+    margin: 0;
+    color: #aaa;
+    font-size: 0.9rem;
+  }
+
+  .gate-input {
+    background: #1e1e2e;
+    border: 1px solid #444;
+    border-radius: 4px;
+    color: #eeeeee;
+    padding: 0.5em 0.8em;
+    font-size: 1rem;
+    outline: none;
+    transition: border-color 0.2s;
+  }
+
+  .gate-input:focus {
+    border-color: #4ecca3;
+  }
+
+  .gate-btn {
+    padding: 0.5em;
+    background: #4ecca3;
+    color: #1a1a2e;
+    border: none;
+    border-radius: 4px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: opacity 0.2s;
+  }
+
+  .gate-btn:hover {
+    opacity: 0.85;
+  }
+
+  .gate-error {
+    margin: 0;
+    color: #e05c5c;
+    font-size: 0.85rem;
+    min-height: 1em;
+  }
+
+  .upload-section.hidden {
+    display: none;
+  }
+
   section {
     color: #eeeeee;
   }
@@ -256,8 +365,8 @@ const UPLOAD_SECRET = import.meta.env.PUBLIC_UPLOAD_SECRET;
   /* Preview grid */
 
   .preview-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    display: flex;
+    flex-wrap: wrap;
     gap: 1em;
     margin-bottom: 1em;
   }
@@ -270,6 +379,8 @@ const UPLOAD_SECRET = import.meta.env.PUBLIC_UPLOAD_SECRET;
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    width: 400px;
+    max-width: 100%;
     transition: border-color 0.2s;
   }
 
@@ -283,8 +394,9 @@ const UPLOAD_SECRET = import.meta.env.PUBLIC_UPLOAD_SECRET;
 
   .preview-card video,
   .preview-card img {
-    width: 100%;
-    aspect-ratio: 16 / 9;
+    width: 400px;
+    height: 400px;
+    max-width: 100%;
     object-fit: cover;
     display: block;
     background: #111;