Implement mandatory authentication with Supabase integration

- Add mandatory login system - users must authenticate to access any content
- Integrate Supabase database for user authentication and task tracking
- Create LoginForm component with dark theme and proper validation
- Implement task completion tracking with database persistence
- Add session management with 1-week expiration
- Update UI to hide content from non-authenticated users
- Add user info display and logout functionality
- Create comprehensive README with Supabase setup instructions
- Add .env.example file with configuration guidance
- Include SQL queries for database table creation and sample users
- Implement proper authentication flow with localStorage session storage
- Add filtering by completion status (all/not-completed/completed)
- Enhance CSS for responsive design and professional dark theme

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

.env.example

@@ -0,0 +1,17 @@
+# Your Supabase Project URL
+# Example: https://your-project-id.supabase.co
+SUPABASE_URL=your_supabase_project_url
+
+# Your Supabase Anonymous/Public Key
+SUPABASE_ANON_KEY=your_supabase_anon_key
+
+# =================================================================
+# SETUP INSTRUCTIONS:
+# =================================================================
+# 1. Create a Supabase project at https://supabase.com
+# 2. Go to Settings → API in your project dashboard
+# 3. Copy the Project URL and anon key
+# 4. Replace the placeholder values above
+# 5. Save this file as .env (remove the .example extension)
+# 6. Run the SQL queries from README.md to set up your database
+# =================================================================

README.md

@@ -1,31 +1,242 @@
-# Speaking Practice Browser (Astro)
+# Speaking Practice Browser - Astro Version
 
-New Astro-based UI that replicates the Gradio experience with full control over styling and responsiveness.
+A modern web application for browsing and practicing CELPIP-style speaking and writing tasks with brainstorming prompts, curated vocabulary, and sample responses. Features mandatory user authentication, task tracking, and progress management with Supabase integration.
 
-## Getting Started
+## Features
 
-1. Install dependencies (Node 18+ recommended):
-   ```bash
-   cd astra
-   npm install
-   ```
-2. Start the dev server:
-   ```bash
-   npm run dev
-   ```
-   The app defaults to http://localhost:4321 and supports hot reloading.
-3. Build for production:
+- **Mandatory Authentication**: Users must log in to access any content
+- **Task Tracking**: Mark tasks as completed to avoid re-practicing
+- **Supabase Integration**: Real database for user authentication and progress tracking
+- **Responsive Design**: Works on desktop and mobile devices
+- **Dark Theme**: Professional dark mode interface
+- **Advanced Filtering**: Filter by category, task type, and completion status
+
+## Prerequisites
+
+- Node.js (v16 or higher)
+- npm or yarn
+- Supabase account and project
+
+## Setup Instructions
+
+### 1. Install Dependencies
+
+```bash
+cd astra
+npm install
+```
+
+### 2. Supabase Database Setup
+
+#### Create Tables
+Run these SQL queries in your Supabase SQL Editor:
+
+```sql
+-- Users table for authentication
+CREATE TABLE users (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    username VARCHAR(50) UNIQUE NOT NULL,
+    password_hash VARCHAR(255) NOT NULL,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Task completions table for tracking progress
+CREATE TABLE task_completions (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    task_id VARCHAR(50) NOT NULL,
+    task_type VARCHAR(50) NOT NULL,
+    category VARCHAR(20) NOT NULL,
+    completed_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    UNIQUE(user_id, task_id, task_type)
+);
+
+-- Indexes for better performance
+CREATE INDEX idx_task_completions_user_id ON task_completions(user_id);
+CREATE INDEX idx_users_username ON users(username);
+```
+
+#### Create Sample Users
+Run these queries to create test users:
+
+```sql
+-- Create test users (passwords are stored as plain text for testing - in production, use proper hashing)
+INSERT INTO users (username, password_hash) VALUES
+('testuser', 'password123'),
+('demo', 'demo123'),
+('student', 'student123');
+
+-- Verify users were created
+SELECT * FROM users;
+```
+
+#### Set Up Row Level Security (RLS)
+Enable RLS for better security:
+
+```sql
+-- Enable RLS on both tables
+ALTER TABLE users ENABLE ROW LEVEL SECURITY;
+ALTER TABLE task_completions ENABLE ROW LEVEL SECURITY;
+
+-- Users can only see their own completions
+CREATE POLICY "Users can view own completions" ON task_completions
+    FOR SELECT USING (auth.uid() = user_id);
+
+-- Users can only insert their own completions
+CREATE POLICY "Users can insert own completions" ON task_completions
+    FOR INSERT WITH CHECK (auth.uid() = user_id);
+
+-- Users can only update their own completions
+CREATE POLICY "Users can update own completions" ON task_completions
+    FOR UPDATE USING (auth.uid() = user_id);
+
+-- Users can only delete their own completions
+CREATE POLICY "Users can delete own completions" ON task_completions
+    FOR DELETE USING (auth.uid() = user_id);
+```
+
+### 3. Environment Configuration
+
+1. Copy the example environment file:
    ```bash
-   npm run build
-   npm run preview
+   cp .env.example .env
    ```
 
-## Data
+2. Fill in your Supabase credentials:
+   - Go to your Supabase project dashboard
+   - Settings → API
+   - Copy the Project URL and anon/public key
+
+### 4. Prepare Data Files
+
+Place your data files in the `astra/data/` directory:
+- `speaking.jsonl` - Speaking tasks data
+- `writing.jsonl` - Writing tasks data (optional)
+
+### 5. Run the Development Server
+
+```bash
+npm run dev
+```
+
+The application will be available at `http://localhost:4323`
+
+## Environment Variables
+
+Required environment variables (see `.env.example`):
+
+```env
+SUPABASE_URL=your_supabase_project_url
+SUPABASE_ANON_KEY=your_supabase_anon_key
+```
+
+## Usage
+
+### Authentication
+- **Login**: Users must log in with valid credentials to access any content
+- **Session**: Sessions last for 1 week
+- **Logout**: Clears session and refreshes the page
+
+### Task Management
+- **Browse**: Filter tasks by category, type, and completion status
+- **Track**: Mark tasks as completed to track progress
+- **Avoid Repetition**: Completed tasks can be filtered out
+
+### Data Structure
+
+#### Speaking Tasks (`speaking.jsonl`)
+```json
+{
+  "id": "unique_id",
+  "task_type": "giving_advice",
+  "category": "Speaking",
+  "rephrased_task": "Task description...",
+  "brainstorm": [{"title": "Idea", "description": "Description"}],
+  "vocabulary": ["word1", "word2"],
+  "response": "Sample response..."
+}
+```
+
+#### Writing Tasks (`writing.jsonl`)
+```json
+{
+  "id": "unique_id",
+  "task_type": "writing_email",
+  "category": "Writing",
+  "rephrased_task": "Task description...",
+  "brainstorm": [{"title": "Idea", "description": "Description"}],
+  "response": "Sample response..."
+}
+```
+
+## Development
+
+### Project Structure
+```
+astra/
+├── src/
+│   ├── components/     # Astro components
+│   ├── layouts/       # Layout components
+│   ├── pages/         # Page components
+│   ├── styles/        # Global styles
+│   └── utils/         # Utility functions
+├── data/              # JSON data files
+├── public/            # Static assets
+└── scripts/           # Build scripts
+```
+
+### Key Components
+- `src/pages/index.astro` - Main application page
+- `src/components/LoginForm.astro` - Authentication form
+- `src/layouts/BaseLayout.astro` - Base layout component
+
+### Authentication Flow
+1. Page loads → Check localStorage for valid session
+2. If no session → Show login overlay, hide content
+3. User submits form → Authenticate with Supabase
+4. If successful → Store session, show content
+5. Session persists for 1 week
+
+## Security Notes
+
+- **Important**: This is a demo implementation
+- In production, implement proper password hashing
+- Use HTTPS in production
+- Consider implementing proper Supabase Auth instead of custom authentication
+- Add input validation and sanitization
+- Implement rate limiting for login attempts
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Login form not working**
+   - Check browser console for JavaScript errors
+   - Verify Supabase credentials are correct
+   - Ensure database tables exist
+
+2. **Data not loading**
+   - Check that JSONL files are in the correct format
+   - Verify file paths in the data loading functions
+   - Check browser network tab for 404 errors
+
+3. **Authentication issues**
+   - Verify Supabase URL and keys are correct
+   - Check that users exist in the database
+   - Ensure RLS policies are set up correctly
+
+### Build for Production
 
-`speaking.jsonl` lives in `data/` and is loaded at build time. Drop a `writing.jsonl` file in the same folder if you have writing tasks�the UI will surface a Writing category automatically.
+```bash
+npm run build
+npm run preview
+```
 
-## Customisation
+## Deployment
 
-- Update task mappings or UI copy in `src/pages/index.astro`.
-- Tweak styling in `src/styles/global.css`.
-- Data loading helpers live in `src/utils/loadData.ts`.
+The app can be deployed to any static hosting service that supports environment variables:
+- Hugging Face Spaces
+- Vercel
+- Netlify
+- Cloudflare Pages

package-lock.json

@@ -8,6 +8,7 @@
       "name": "speaking-ideas-astro",
       "version": "0.0.1",
       "dependencies": {
+        "@supabase/supabase-js": "^2.75.1",
         "astro": "^4.10.0"
       }
     },
@@ -1584,6 +1585,80 @@
       "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
       "license": "MIT"
     },
+    "node_modules/@supabase/auth-js": {
+      "version": "2.75.1",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.75.1.tgz",
+      "integrity": "sha512-zktlxtXstQuVys/egDpVsargD9hQtG20CMdtn+mMn7d2Ulkzy2tgUT5FUtpppvCJtd9CkhPHO/73rvi5W6Am5A==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "2.6.15"
+      }
+    },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.75.1",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.75.1.tgz",
+      "integrity": "sha512-xO+01SUcwVmmo67J7Htxq8FmhkYLFdWkxfR/taxBOI36wACEUNQZmroXGPl4PkpYxBO7TaDsRHYGxUpv9zTKkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "2.6.15"
+      }
+    },
+    "node_modules/@supabase/node-fetch": {
+      "version": "2.6.15",
+      "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.15.tgz",
+      "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      }
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "2.75.1",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.75.1.tgz",
+      "integrity": "sha512-FiYBD0MaKqGW8eo4Xqu7/100Xm3ddgh+3qHtqS18yQRoglJTFRQCJzY1xkrGS0JFHE2YnbjL6XCiOBXiG8DK4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "2.6.15"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.75.1",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.75.1.tgz",
+      "integrity": "sha512-lBIJ855bUsBFScHA/AY+lxIFkubduUvmwbagbP1hq0wDBNAsYdg3ql80w8YmtXCDjkCwlE96SZqcFn7BGKKJKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "2.6.15",
+        "@types/phoenix": "^1.6.6",
+        "@types/ws": "^8.18.1",
+        "ws": "^8.18.2"
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.75.1",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.75.1.tgz",
+      "integrity": "sha512-WdGEhroflt5O398Yg3dpf1uKZZ6N3CGloY9iGsdT873uWbkQKoP0wG8mtx98dh0fhj6dAlzBqOAvnlV12cJfzA==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "2.6.15"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.75.1",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.75.1.tgz",
+      "integrity": "sha512-GEPVBvjQimcMd9z5K1eTKTixTRb6oVbudoLQ9JKqTUJnR6GQdBU4OifFZean1AnHfsQwtri1fop2OWwsMv019w==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/auth-js": "2.75.1",
+        "@supabase/functions-js": "2.75.1",
+        "@supabase/node-fetch": "2.6.15",
+        "@supabase/postgrest-js": "2.75.1",
+        "@supabase/realtime-js": "2.75.1",
+        "@supabase/storage-js": "2.75.1"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1679,12 +1754,36 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/node": {
+      "version": "24.8.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.8.1.tgz",
+      "integrity": "sha512-alv65KGRadQVfVcG69MuB4IzdYVpRwMG/mq8KWOaoOdyY617P5ivaDiMCGOFDWD2sAn5Q0mR3mRtUOgm99hL9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.14.0"
+      }
+    },
+    "node_modules/@types/phoenix": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.6.tgz",
+      "integrity": "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A==",
+      "license": "MIT"
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
       "license": "MIT"
     },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
@@ -4935,6 +5034,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
     "node_modules/trim-lines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
@@ -5008,6 +5113,12 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.14.0.tgz",
+      "integrity": "sha512-QQiYxHuyZ9gQUIrmPo3IA+hUl4KYk8uSA7cHrcKd/l3p1OTpZcM0Tbp9x7FAtXdAYhlasd60ncPpgu6ihG6TOA==",
+      "license": "MIT"
+    },
     "node_modules/unified": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
@@ -5310,6 +5421,22 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/which-pm": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/which-pm/-/which-pm-3.0.1.tgz",
@@ -5363,6 +5490,27 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/xxhash-wasm": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/xxhash-wasm/-/xxhash-wasm-1.1.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "check": "astro check"
   },
   "dependencies": {
+    "@supabase/supabase-js": "^2.75.1",
     "astro": "^4.10.0"
   }
 }

src/components/LoginForm.astro

@@ -0,0 +1,165 @@
+---
+interface Props {
+  isVisible?: boolean
+}
+
+const { isVisible = true } = Astro.props
+---
+
+<div id="login-overlay" class={`login-overlay ${isVisible ? 'visible' : 'hidden'}`}>
+  <div class="login-modal">
+    <div class="login-header">
+      <h2>Login to Track Progress</h2>
+      <p>Enter your username and password to track completed tasks</p>
+    </div>
+
+    <form id="login-form" class="login-form">
+      <div class="form-field">
+        <label for="username">Username</label>
+        <input type="text" id="username" name="username" required autocomplete="username">
+      </div>
+
+      <div class="form-field">
+        <label for="password">Password</label>
+        <input type="password" id="password" name="password" required autocomplete="current-password">
+      </div>
+
+      <div class="form-actions">
+        <button type="submit" class="login-btn">Login</button>
+      </div>
+    </form>
+
+    <div id="login-error" class="login-error hidden">
+      Invalid username or password
+    </div>
+
+    <div class="login-footer">
+      <p>Session expires after 1 week</p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .login-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.9);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    backdrop-filter: blur(8px);
+  }
+
+  .login-overlay.hidden {
+    display: none;
+  }
+
+  .login-modal {
+    background-color: #161b22;
+    border: 1px solid #30363d;
+    border-radius: 12px;
+    padding: 2rem;
+    width: 100%;
+    max-width: 400px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  }
+
+  .login-header {
+    text-align: center;
+    margin-bottom: 2rem;
+  }
+
+  .login-header h2 {
+    color: #f0f6fc;
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .login-header p {
+    color: #8b949e;
+    font-size: 0.9rem;
+  }
+
+  .login-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .form-field label {
+    color: #f0f6fc;
+    font-weight: 500;
+    font-size: 0.9rem;
+  }
+
+  .form-field input {
+    background-color: #0d1117;
+    border: 1px solid #30363d;
+    border-radius: 6px;
+    padding: 0.75rem;
+    color: #f0f6fc;
+    font-size: 1rem;
+    transition: border-color 0.2s ease;
+  }
+
+  .form-field input:focus {
+    outline: none;
+    border-color: #58a6ff;
+    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
+  }
+
+  .login-btn {
+    background-color: #238636;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+  }
+
+  .login-btn:hover {
+    background-color: #2ea043;
+  }
+
+  .login-btn:disabled {
+    background-color: #30363d;
+    cursor: not-allowed;
+  }
+
+  .login-error {
+    background-color: rgba(248, 81, 73, 0.1);
+    border: 1px solid rgba(248, 81, 73, 0.3);
+    border-radius: 6px;
+    padding: 0.75rem;
+    color: #f85149;
+    font-size: 0.9rem;
+    text-align: center;
+  }
+
+  .login-error.hidden {
+    display: none;
+  }
+
+  .login-footer {
+    text-align: center;
+    margin-top: 1.5rem;
+  }
+
+  .login-footer p {
+    color: #8b949e;
+    font-size: 0.8rem;
+  }
+</style>

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
 import { loadSpeakingData, loadWritingData } from '../utils/loadData';
+import LoginForm from '../components/LoginForm.astro';
 
 const ITEMS_PER_PAGE = 5;
 
@@ -42,38 +43,38 @@ const totalItems = defaultRecords.length;
 const totalPages = totalItems > 0 ? Math.ceil(totalItems / ITEMS_PER_PAGE) : 0;
 const firstPageRecords = totalItems > 0 ? defaultRecords.slice(0, ITEMS_PER_PAGE) : [];
 
-const escapeHtml = (value: string | undefined | null) =>
-  String(value ?? '')
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
-
-const formatMultiline = (value: string | undefined | null) =>
-  escapeHtml(value).replace(/\n/g, '<br />');
-
-const renderIdeas = (ideas: any[] | undefined | null) => {
-  if (!ideas || ideas.length === 0) return '';
-  const items = ideas
-    .map((idea) => {
-      const title = escapeHtml(idea?.title ?? 'Idea');
-      const description = escapeHtml(idea?.description ?? '');
-      return `<li><strong>${title}:</strong> ${description}</li>`;
-    })
-    .join('');
-  return `<ul>${items}</ul>`;
-};
-
-const renderVocabulary = (words: string[] | undefined | null) => {
-  if (!words || words.length === 0) return '';
-  const items = words.map((word) => `<li>${escapeHtml(word)}</li>`).join('');
-  return `<ul>${items}</ul>`;
-};
-
-const buildCard = (record: Record<string, any>) => {
+const buildInitialCard = (record: any) => {
   const recordId = record?.id ?? 'N/A';
-  const taskType = escapeHtml((record?.task_type ?? '').replace(/_/g, ' ')).replace(/\b\w/g, (char) => char.toUpperCase());
-
-  const sections: string[] = [];
+  const taskType = String(record?.task_type ?? '').replace(/_/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase());
+
+  const escapeHtml = (value: string | undefined | null) =>
+    String(value ?? '')
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+
+  const formatMultiline = (value: string | undefined | null) =>
+    escapeHtml(value).replace(/\n/g, '<br />');
+
+  const renderIdeas = (ideas: any[] | undefined | null) => {
+    if (!ideas || ideas.length === 0) return '';
+    const items = ideas
+      .map((idea) => {
+        const title = escapeHtml(idea?.title ?? 'Idea');
+        const description = escapeHtml(idea?.description ?? '');
+        return `<li><strong>${title}:</strong> ${description}</li>`;
+      })
+      .join('');
+    return `<ul>${items}</ul>`;
+  };
+
+  const renderVocabulary = (words: string[] | undefined | null) => {
+    if (!words || words.length === 0) return '';
+    const items = words.map((word) => `<li>${escapeHtml(word)}</li>`).join('');
+    return `<ul>${items}</ul>`;
+  };
+
+  let sections = [];
 
   if (record?.rephrased_task) {
     sections.push(`
@@ -130,14 +131,16 @@ const buildCard = (record: Record<string, any>) => {
   }
 
   return `
-    <article class="card">
-      <h3>Task ${recordId} - ${taskType}</h3>
+    <article class="card" data-task-id="${recordId}-${record.task_type}">
+      <div class="card-header">
+        <h3>Task ${recordId} - ${taskType}</h3>
+      </div>
       ${sections.join('\n')}
     </article>
   `;
 };
 
-const initialCardsHtml = firstPageRecords.map(buildCard).join('');
+const initialCardsHtml = firstPageRecords.map(buildInitialCard).join('');
 
 const initialSummary = totalItems === 0
   ? 'No records available yet for this category.'
@@ -147,7 +150,11 @@ const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPag
 ---
 
 <BaseLayout title="Speaking Practice Browser">
-  <main>
+  <LoginForm />
+
+  <!-- Main content - only visible when authenticated -->
+  <div id="main-content" class="main-content">
+    <main>
     <header class="app-header">
       <h1>Speaking Practice Browser</h1>
       <p>
@@ -185,6 +192,22 @@ const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPag
           ))}
         </select>
       </div>
+
+      <div class="field">
+        <label class="field-label" for="completion-filter">Completion Status</label>
+        <select id="completion-filter">
+          <option value="all">All Tasks</option>
+          <option value="not-completed">Not Completed</option>
+          <option value="completed">Completed</option>
+        </select>
+      </div>
+
+      <div class="user-section">
+        <div id="user-info" class="user-info hidden">
+          <span class="user-name">Not logged in</span>
+          <button id="logout-btn" class="logout-btn">Logout</button>
+        </div>
+      </div>
     </section>
 
     <section class="content-area" aria-live="polite">
@@ -198,8 +221,138 @@ const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPag
       <button id="next-btn" type="button">Next</button>
     </nav>
   </main>
+  </div>
+
+  <script define:vars={{ supabaseUrl: import.meta.env.SUPABASE_URL, supabaseAnonKey: import.meta.env.SUPABASE_ANON_KEY, defaultCategory, speakingRecords, writingRecords }} type="module">
+    // Import Supabase
+    import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
+
+    // Initialize Supabase client
+    const supabaseUrlFromEnv = supabaseUrl;
+    const supabaseKeyFromEnv = supabaseAnonKey;
+
+    console.log('Supabase URL:', supabaseUrlFromEnv ? 'Found' : 'Missing');
+    console.log('Supabase Key:', supabaseKeyFromEnv ? 'Found' : 'Missing');
+
+    let supabase;
+
+    if (supabaseUrlFromEnv && supabaseKeyFromEnv) {
+      try {
+        supabase = createClient(supabaseUrlFromEnv, supabaseKeyFromEnv);
+        console.log('Supabase client initialized successfully');
+      } catch (error) {
+        console.error('Error initializing Supabase:', error);
+      }
+    } else {
+      console.error('Missing Supabase environment variables');
+    }
+
+    // Real authentication and task tracking functions
+    async function authenticateUser(username, password) {
+      if (!supabase) {
+        console.error('Supabase not initialized');
+        return null;
+      }
+
+      try {
+        const { data: user, error } = await supabase
+          .from('users')
+          .select('*')
+          .eq('username', username)
+          .eq('password_hash', password)
+          .single();
+
+        if (error || !user) {
+          console.error('Authentication error:', error);
+          return null;
+        }
+
+        return user;
+      } catch (error) {
+        console.error('Error authenticating user:', error);
+        return null;
+      }
+    }
+
+    async function getCompletedTasks(userId) {
+      if (!supabase) {
+        console.error('Supabase not initialized');
+        return [];
+      }
+
+      try {
+        const { data, error } = await supabase
+          .from('completed_tasks')
+          .select('*')
+          .eq('user_id', userId);
+
+        if (error) {
+          console.error('Error fetching completed tasks:', error);
+          return [];
+        }
+
+        return data || [];
+      } catch (error) {
+        console.error('Error fetching completed tasks:', error);
+        return [];
+      }
+    }
+
+    async function markTaskComplete(userId, taskId, taskType, category) {
+      if (!supabase) {
+        console.error('Supabase not initialized');
+        return null;
+      }
+
+      try {
+        const { data, error } = await supabase
+          .from('completed_tasks')
+          .upsert({
+            user_id: userId,
+            task_id: taskId,
+            task_type: taskType,
+            category: category
+          })
+          .select()
+          .single();
+
+        if (error) {
+          console.error('Error marking task complete:', error);
+          return null;
+        }
+
+        return data;
+      } catch (error) {
+        console.error('Error marking task complete:', error);
+        return null;
+      }
+    }
+
+    async function unmarkTaskComplete(userId, taskId) {
+      if (!supabase) {
+        console.error('Supabase not initialized');
+        return false;
+      }
+
+      try {
+        const { error } = await supabase
+          .from('completed_tasks')
+          .delete()
+          .eq('user_id', userId)
+          .eq('task_id', taskId);
+
+        if (error) {
+          console.error('Error unmarking task complete:', error);
+          return false;
+        }
+
+        return true;
+      } catch (error) {
+        console.error('Error unmarking task complete:', error);
+        return false;
+      }
+    }
 
-  <script define:vars={{ speakingRecords, writingRecords, defaultCategory }} type="module">
     // Data embedded directly from server
     const appData = {
       records: {
@@ -226,27 +379,38 @@ const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPag
         {id: 'Writing', label: 'Writing'}
       ],
       itemsPerPage: 5,
-      defaultCategory: defaultCategory
+      defaultCategory: {defaultCategory}
     };
 
     const state = {
       category: appData.defaultCategory,
       taskType: 'all',
+      completionFilter: 'all',
       page: 0,
-      totalPages: 0
+      totalPages: 0,
+      user: null,
+      completedTasks: []
     };
 
     const recordsByCategory = appData.records;
     const taskMappings = appData.taskMappings;
     const itemsPerPage = appData.itemsPerPage;
 
+    // DOM elements
     const cardsContainer = document.getElementById('cards-container');
     const summaryText = document.getElementById('summary-text');
     const pageInfo = document.getElementById('page-info');
     const prevBtn = document.getElementById('prev-btn');
     const nextBtn = document.getElementById('next-btn');
     const taskFilter = document.getElementById('task-filter');
+    const completionFilter = document.getElementById('completion-filter');
     const categoryInputs = Array.from(document.querySelectorAll('input[name="category"]'));
+    const logoutBtn = document.getElementById('logout-btn');
+    const loginOverlay = document.getElementById('login-overlay');
+    const loginForm = document.getElementById('login-form');
+    const loginError = document.getElementById('login-error');
+    const userInfo = document.getElementById('user-info');
+    const userName = document.querySelector('.user-name');
 
     const escapeHtml = (value) =>
       String(value ?? '')
@@ -261,12 +425,15 @@ const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPag
       return `<ul>${items.map(formatter).join('')}</ul>`;
     };
 
-    const buildCard = (record) => {
+    const buildCard = (record, isCompleted = false, showToggle = false) => {
       const recordId = record?.id ?? 'N/A';
       const taskType = escapeHtml(String(record?.task_type ?? ''))
         .replace(/_/g, ' ')
         .replace(/\b\w/g, (char) => char.toUpperCase());
 
+      const taskId = `${recordId}-${record?.task_type}`;
+      const category = record?.category || state.category;
+
       const sections = [];
 
       if (record?.rephrased_task) {
@@ -332,19 +499,159 @@ const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPag
       }
 
       return `
-        <article class="card">
-          <h3>Task ${recordId} - ${taskType}</h3>
+        <article class="card ${isCompleted ? 'completed' : ''}" data-task-id="${taskId}">
+          <div class="card-header">
+            <h3>Task ${recordId} - ${taskType}</h3>
+            ${showToggle ? `
+              <div class="task-toggle">
+                <input
+                  type="checkbox"
+                  id="toggle-${taskId}"
+                  class="task-checkbox"
+                  ${isCompleted ? 'checked' : ''}
+                  data-task-id="${recordId}"
+                  data-task-type="${record?.task_type}"
+                  data-category="${category}"
+                >
+                <label for="toggle-${taskId}" class="toggle-label">
+                  <span class="toggle-slider"></span>
+                  <span class="toggle-text">${isCompleted ? 'Completed' : 'Mark as Complete'}</span>
+                </label>
+              </div>
+            ` : ''}
+          </div>
           ${sections.join('\n')}
         </article>
       `;
     };
 
+    // Authentication functions
+    const checkAuthStatus = () => {
+      const sessionData = localStorage.getItem('userSession');
+      if (sessionData) {
+        const { user, expiresAt } = JSON.parse(sessionData);
+        if (expiresAt > Date.now()) {
+          state.user = user;
+          updateUserUI();
+          loadCompletedTasks();
+          return true;
+        } else {
+          localStorage.removeItem('userSession');
+        }
+      }
+      return false;
+    };
+
+    const updateUserUI = () => {
+      const mainContent = document.getElementById('main-content');
+
+      if (state.user) {
+        // User is authenticated - show main content and user info
+        userInfo.classList.remove('hidden');
+        userName.textContent = `Logged in as ${state.user.username}`;
+        mainContent.classList.add('authenticated');
+        loginOverlay.classList.add('hidden');
+        loginOverlay.classList.remove('visible');
+        document.body.style.overflow = ''; // Restore scrolling
+      } else {
+        // User is not authenticated - hide main content and user info, show login
+        userInfo.classList.add('hidden');
+        mainContent.classList.remove('authenticated');
+        loginOverlay.classList.remove('hidden');
+        loginOverlay.classList.add('visible');
+        document.body.style.overflow = 'hidden'; // Prevent background scrolling
+      }
+    };
+
+    const loadCompletedTasks = async () => {
+      if (!state.user) return;
+
+      try {
+        const completedTasks = await getCompletedTasks(state.user.id);
+        state.completedTasks = completedTasks.map(task => `${task.task_id}-${task.task_type}`);
+        applyState();
+      } catch (error) {
+        console.error('Error loading completed tasks:', error);
+      }
+    };
+
+    const login = async (username, password) => {
+      try {
+        const user = await authenticateUser(username, password);
+        if (user) {
+          const expiresAt = Date.now() + (7 * 24 * 60 * 60 * 1000); // 1 week
+          localStorage.setItem('userSession', JSON.stringify({ user, expiresAt }));
+          state.user = user;
+          loginError.classList.add('hidden');
+          updateUserUI();
+          loadCompletedTasks();
+          return true;
+        } else {
+          loginError.classList.remove('hidden');
+          return false;
+        }
+      } catch (error) {
+        console.error('Login error:', error);
+        loginError.classList.remove('hidden');
+        return false;
+      }
+    };
+
+    const logout = () => {
+      localStorage.removeItem('userSession');
+      state.user = null;
+      state.completedTasks = [];
+
+      // Refresh the page to reset all UI state
+      window.location.reload();
+    };
+
+    const handleTaskToggle = async (event) => {
+      if (!state.user) return;
+
+      const checkbox = event.target;
+      const taskId = checkbox.dataset.taskId;
+      const taskType = checkbox.dataset.taskType;
+      const category = checkbox.dataset.category;
+      const isCompleted = checkbox.checked;
+
+      try {
+        if (isCompleted) {
+          await markTaskComplete(state.user.id, taskId, taskType, category);
+          state.completedTasks.push(`${taskId}-${taskType}`);
+        } else {
+          await unmarkTaskComplete(state.user.id, taskId);
+          state.completedTasks = state.completedTasks.filter(id => id !== `${taskId}-${taskType}`);
+        }
+
+        // Update toggle text
+        const toggleText = checkbox.nextElementSibling.querySelector('.toggle-text');
+        toggleText.textContent = isCompleted ? 'Completed' : 'Mark as Complete';
+
+        applyState();
+      } catch (error) {
+        console.error('Error updating task status:', error);
+        checkbox.checked = !isCompleted; // Revert on error
+      }
+    };
+
     const applyState = () => {
       const allRecords = recordsByCategory[state.category] ?? [];
-      const filtered = state.taskType === 'all'
+
+      // Apply task type filter
+      let filtered = state.taskType === 'all'
         ? allRecords
         : allRecords.filter((item) => item?.task_type === state.taskType);
 
+      // Apply completion filter
+      if (state.user && state.completionFilter !== 'all') {
+        filtered = filtered.filter((item) => {
+          const taskId = `${item.id}-${item.task_type}`;
+          const isCompleted = state.completedTasks.includes(taskId);
+          return state.completionFilter === 'completed' ? isCompleted : !isCompleted;
+        });
+      }
+
       const totalItems = filtered.length;
       state.totalPages = totalItems === 0 ? 0 : Math.ceil(totalItems / itemsPerPage);
       state.page = Math.min(state.page, Math.max(state.totalPages - 1, 0));
@@ -354,14 +661,28 @@ const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPag
       const pageItems = filtered.slice(start, end);
 
       if (cardsContainer) {
-        cardsContainer.innerHTML = pageItems.map(buildCard).join('');
+        cardsContainer.innerHTML = pageItems.map(record => {
+          const taskId = `${record.id}-${record.task_type}`;
+          const isCompleted = state.completedTasks.includes(taskId);
+          return buildCard(record, isCompleted, state.user !== null);
+        }).join('');
+
+        // Add event listeners to new checkboxes
+        const checkboxes = cardsContainer.querySelectorAll('.task-checkbox');
+        checkboxes.forEach(checkbox => {
+          checkbox.addEventListener('change', handleTaskToggle);
+        });
       }
 
       if (totalItems === 0) {
         const hasRecordsInCategory = allRecords.length > 0;
         if (summaryText) {
           if (hasRecordsInCategory) {
-            summaryText.textContent = 'No records found for the selected task type.';
+            if (state.user && state.completionFilter !== 'all') {
+              summaryText.textContent = `No ${state.completionFilter === 'completed' ? 'completed' : 'not completed'} tasks found for the selected filters.`;
+            } else {
+              summaryText.textContent = 'No records found for the selected task type.';
+            }
           } else {
             if (state.category === 'Writing') {
               summaryText.textContent = 'No writing tasks available yet. Writing data will be displayed here when available.';
@@ -404,10 +725,6 @@ const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPag
       taskFilter.disabled = !hasRecords;
     };
 
-    // Initialize
-    updateTaskOptions();
-    applyState();
-
     // Event listeners
     categoryInputs.forEach((input) => {
       input.addEventListener('change', (event) => {
@@ -431,6 +748,16 @@ const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPag
       });
     }
 
+    if (completionFilter) {
+      completionFilter.addEventListener('change', (event) => {
+        const target = event.target;
+        if (!(target instanceof HTMLSelectElement)) return;
+        state.completionFilter = target.value;
+        state.page = 0;
+        applyState();
+      });
+    }
+
     if (prevBtn) {
       prevBtn.addEventListener('click', () => {
         state.page = Math.max(0, state.page - 1);
@@ -444,5 +771,22 @@ const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPag
         applyState();
       });
     }
+
+    loginForm.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      const formData = new FormData(loginForm);
+      const username = formData.get('username');
+      const password = formData.get('password');
+      await login(username, password);
+    });
+
+    logoutBtn.addEventListener('click', logout);
+
+    // Don't close login overlay when clicking outside - user must authenticate
+
+    // Initialize
+    checkAuthStatus();
+    updateTaskOptions();
+    applyState();
   </script>
 </BaseLayout>

src/styles/global.css

@@ -247,6 +247,142 @@ select {
   }
 }
 
+/* User section styles */
+.user-section {
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid #30363d;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.user-name {
+  color: #c9d1d9;
+  font-size: 0.9rem;
+}
+
+.logout-btn {
+  background-color: #da3633;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.logout-btn:hover {
+  background-color: #b91c1c;
+}
+
+.login-btn-header {
+  background-color: #238636;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  padding: 0.75rem 1.5rem;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.login-btn-header:hover {
+  background-color: #2ea043;
+}
+
+/* Task card styles with toggle */
+.card {
+  background-color: #161b22;
+  border: 1px solid #30363d;
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1rem;
+  transition: all 0.2s ease;
+}
+
+.card.completed {
+  background-color: rgba(35, 134, 54, 0.1);
+  border-color: rgba(35, 134, 54, 0.3);
+}
+
+.card.completed h3 {
+  color: #3fb950;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+  gap: 1rem;
+}
+
+.task-toggle {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.task-checkbox {
+  display: none;
+}
+
+.toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.toggle-slider {
+  width: 44px;
+  height: 24px;
+  background-color: #30363d;
+  border-radius: 12px;
+  position: relative;
+  transition: background-color 0.2s ease;
+}
+
+.toggle-slider::before {
+  content: '';
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  background-color: #f0f6fc;
+  border-radius: 50%;
+  top: 3px;
+  left: 3px;
+  transition: transform 0.2s ease;
+}
+
+.task-checkbox:checked + .toggle-label .toggle-slider {
+  background-color: #238636;
+}
+
+.task-checkbox:checked + .toggle-label .toggle-slider::before {
+  transform: translateX(20px);
+}
+
+.toggle-text {
+  font-size: 0.875rem;
+  color: #8b949e;
+  transition: color 0.2s ease;
+}
+
+.task-checkbox:checked + .toggle-label .toggle-text {
+  color: #3fb950;
+  font-weight: 500;
+}
+
 @media (max-width: 540px) {
   main {
     padding: clamp(14px, 6vw, 28px);
@@ -267,4 +403,33 @@ select {
     width: 100%;
     justify-content: center;
   }
+
+  .card-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .task-toggle {
+    align-self: flex-end;
+  }
+
+  .user-section {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: stretch;
+  }
+
+  .user-info {
+    justify-content: center;
+  }
 }
+
+/* Main content visibility for authentication */
+.main-content {
+  display: none;
+}
+
+.main-content.authenticated {
+  display: block;
+}
+