3 files changed, 44 insertions, 1 deletions
diff --git a/frontend/src/login.ts b/frontend/src/login.ts
new file mode 100644
index 0000000..d8054c0
--- /dev/null
+++ b/frontend/src/login.ts
@@ -0,0 +1,16 @@
+const loginForm = document.getElementById('login-form') as HTMLFormElement;
+const handleInput = document.getElementById('handle-input') as HTMLInputElement;
+const loginError = document.getElementById('login-error') as HTMLDivElement;
+
+loginForm.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const handle = handleInput.value.trim();
+
+  if (!handle) {
+    loginError.textContent = 'please enter a handle';
+    return;
+  }
+
+  loginError.textContent = '';
+  window.location.href = `/api/login?handle=${encodeURIComponent(handle)}`;
+});
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 20c3bea..4868365 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -68,6 +68,14 @@ function renderAuthor(note: any): string {
 }
 
 async function main() {
+  const sessionCheck = await fetch('/api/session', {
+    credentials: 'include'
+  });
+  if (!sessionCheck.ok) {
+    window.location.href = '/login.html';
+    throw new Error('not authenticated');
+  }
+
   const app = document.querySelector('#app');
   if (!app) {
     console.error('App container not found');
@@ -77,7 +85,9 @@ async function main() {
   app.innerHTML = '<div class="spinner"></div>';
 
   try {
-    const response = await fetch('http://localhost:8080/api/posts');
+    const response = await fetch('/api/posts', {
+      credentials: 'include'
+    });
     if (!response.ok) throw new Error(`HTTP ${response.status}`);
 
     const notes = await response.json();
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 549c596..700135c 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -13,6 +13,23 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+#login-container {
+  max-width: 400px;
+  margin: 2rem auto;
+  padding: 2rem;
+}
+
+#handle-input {
+  width: 100%;
+  padding: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+#login-error {
+  color: red;
+  margin-top: 1rem;
+}
+
 a {
   font-weight: 500;
   color: #646cff;