mirror of
https://github.com/ssep1ol/overleaf-registration-fe.git
synced 2026-07-21 12:30:20 +00:00
154 lines
4.9 KiB
Markdown
154 lines
4.9 KiB
Markdown
# 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](https://github.com/ssep1ol/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:
|
|
|
|
```html
|
|
<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:
|
|
|
|
```javascript
|
|
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:
|
|
|
|
```javascript
|
|
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:
|
|
|
|
```bash
|
|
cd frontend
|
|
python3 -m http.server 8080
|
|
```
|
|
|
|
Then visit `http://localhost:8080`.
|
|
|
|
## Run With Docker
|
|
|
|
Build image:
|
|
|
|
```bash
|
|
docker build -t overleaf-registration-fe .
|
|
```
|
|
|
|
Run container:
|
|
|
|
```bash
|
|
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](LICENSE) file for details.
|