overleaf-registration-fe/README.md

overleaf-registration-fe

Frontend signup interface for controlled Overleaf account registration.

Static HTML/JS/CSS site that presents a registration form with domain validation, Cloudflare Turnstile CAPTCHA, and Terms of Service acceptance. Served via nginx and designed to work with the overleaf-registration-be backend API.

Features

• Clean, responsive signup form
• Client-side email domain validation
• Cloudflare Turnstile CAPTCHA integration
• Terms of Service modal with acceptance checkbox
• Privacy policy page
• Static site served via nginx
• Docker container deployment

How It Works

1. User visits signup page.
2. User enters email address (validated client-side against hardcoded domain allowlist).
3. User completes Cloudflare Turnstile CAPTCHA challenge.
4. User accepts Terms of Service and Privacy Policy.
5. Form submits JSON payload to backend API endpoint.
6. User sees success/error message based on backend response.

Tech Stack

• Vanilla JavaScript (no framework)
• HTML5 with semantic markup
• CSS (with Bootstrap-style classes from Overleaf theme)
• Cloudflare Turnstile
• nginx (Alpine-based container)

Project Structure

frontend/
├── index.html              # Main signup page
├── script.js               # Form validation and submission logic
├── privacy.html            # Privacy policy page
├── main-style-*.css        # Compiled CSS from Overleaf theme
├── style.css               # Additional custom styles
├── styles.css              # Additional custom styles
├── scripts.js              # Additional JS (if any)
└── fonts/                  # Web fonts (Lato, Merriweather, Font Awesome)
nginx.conf                  # nginx server configuration
Dockerfile                  # Container image build instructions

Configuration

REQUIRED: Before deploying, you must configure the following hardcoded values in the source files.

1. Cloudflare Turnstile Site Key

In frontend/index.html, replace the placeholder:

<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY_HERE"></div>

Change YOUR_TURNSTILE_SITE_KEY_HERE to your actual Turnstile site key from the Cloudflare dashboard.

2. Allowed Email Domains

In frontend/script.js, update the allowedDomains array:

const allowedDomains = ['example.edu', 'university.edu']; // CONFIGURE: Replace with your allowed email domains

Replace with your institution's email domains (e.g., ['studenti.polito.it', 'edu.unito.it']).

3. Backend API Endpoint

In frontend/script.js, update the fetch URL:

const response = await fetch('https://YOUR_BACKEND_API_URL/signup', { // CONFIGURE: Replace with your backend API endpoint

Replace YOUR_BACKEND_API_URL with your actual backend service URL.

Summary of Required Changes

File	Line/Element	What to Replace
frontend/index.html	Turnstile div	YOUR_TURNSTILE_SITE_KEY_HERE → your site key
frontend/script.js	allowedDomains array	['example.edu', ...] → your domains
frontend/script.js	fetch() URL	YOUR_BACKEND_API_URL → your backend URL

Hardcoded Values in script.js

The following values are embedded in the client-side JavaScript and must be configured before deployment:

• Allowed email domains: Set in allowedDomains array
• Backend API endpoint: Set in fetch() call
• Turnstile Site Key: Set in index.html data-sitekey attribute

Run Locally

Serve the frontend/ directory with any web server.

Example with Python:

cd frontend
python3 -m http.server 8080

Then visit http://localhost:8080.

Run With Docker

Build image:

docker build -t overleaf-registration-fe .

Run container:

docker run --rm -p 8080:80 overleaf-registration-fe

Then visit http://localhost:8080.

Deployment Notes

• Configuration Required: You must update the placeholders in frontend/index.html and frontend/script.js before deploying (see Configuration section above).
• nginx serves static files from /usr/share/nginx/html.
• All routes fall back to index.html for single-page behavior.
• No environment variables or build-time configuration needed - all config is hardcoded in client-side files.
• After configuration, rebuild the Docker image to include your changes.

Terms of Service

The embedded ToS modal enforces:

• Non-commercial use only
• No copyrighted material without authorization
• No NSFW, gore, or illegal content
• Users must backup their own work
• No guarantees on service availability or data safety
• Service maintained by volunteers on best-effort basis

Privacy Policy

Located at frontend/privacy.html and accessible via link in signup form.

License

This project is licensed under the BSD 3-Clause License - see the LICENSE file for details.