diff --git a/.claude/skills/frontend-design/design-system/Logo/Full-Logo.svg b/.claude/skills/frontend-design/design-system/Logo/Full-Logo.svg index 8aea99f3..b76ac241 100644 --- a/.claude/skills/frontend-design/design-system/Logo/Full-Logo.svg +++ b/.claude/skills/frontend-design/design-system/Logo/Full-Logo.svg @@ -1,6 +1,6 @@ - - - - + + + + diff --git a/.claude/skills/frontend-design/design-system/Logo/Iconmark.svg b/.claude/skills/frontend-design/design-system/Logo/Iconmark.svg index e83c34ec..14dd654c 100644 --- a/.claude/skills/frontend-design/design-system/Logo/Iconmark.svg +++ b/.claude/skills/frontend-design/design-system/Logo/Iconmark.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/.claude/skills/frontend-design/design-system/Logo/flodoc.svg b/.claude/skills/frontend-design/design-system/Logo/flodoc.svg index f75258d3..7bc3d6e1 100644 --- a/.claude/skills/frontend-design/design-system/Logo/flodoc.svg +++ b/.claude/skills/frontend-design/design-system/Logo/flodoc.svg @@ -1,3 +1,3 @@ - + diff --git a/NGROK_SETUP.md b/NGROK_SETUP.md new file mode 100644 index 00000000..ad0b9a85 --- /dev/null +++ b/NGROK_SETUP.md @@ -0,0 +1,150 @@ +# Ngrok Setup for FloDoc Testing + +This guide explains how to make your FloDoc app accessible to other devices for testing email workflows. + +## Quick Start + +### 1. Get Ngrok Auth Token +1. Go to [ngrok.com](https://ngrok.com) and sign up for a free account +2. Go to your dashboard: https://dashboard.ngrok.com/get-started/your-authtoken +3. Copy your auth token + +### 2. Configure Ngrok +Run this command with your token: +```bash +~/bin/ngrok config add-authtoken YOUR_TOKEN_HERE +``` + +Or add to your `.env` file: +```bash +NGROK_AUTH_TOKEN=your_token_here +``` + +### 3. Start Testing +Run the automated setup script: +```bash +./start_with_ngrok.sh +``` + +This script will: +- Start Rails on port 3001 +- Create a public ngrok tunnel +- Update your APP_URL automatically +- Show you the public URL + +## Manual Testing (Alternative) + +If you already have Rails running, just start ngrok: +```bash +./start_ngrok_only.sh +``` + +## How It Works + +### The Complete Workflow + +1. **Start the system:** + ```bash + ./start_with_ngrok.sh + ``` + +2. **You'll see output like:** + ``` + ๐ŸŽ‰ SETUP COMPLETE! + ================== + + ๐Ÿ“ฑ Your FloDoc app is now publicly accessible! + + ๐Ÿ  Local URL: http://localhost:3001 + ๐ŸŒ Public URL: https://abc123.ngrok.io + + ๐Ÿ“ง Email links will use: https://abc123.ngrok.io + ``` + +3. **Test the email workflow:** + - Go to `https://abc123.ngrok.io/templates` + - Upload a PDF and create a template + - Add recipient email addresses + - Click "Send" to send invitation emails + - Check your email inbox + - Click the invitation link from **any device** (phone, tablet, another computer) + +4. **The recipient will see:** + - The document filling interface + - Fields mapped from your PDF + - A form they can complete and sign + - Submit button to complete the workflow + +### Email Links Format +When you send invitations, the links will look like: +``` +https://abc123.ngrok.io/s/abc123def456 +``` + +Anyone with this link can access the document, regardless of their location (as long as they have internet). + +## Security Notes + +โš ๏ธ **Important Security Considerations:** + +1. **Only for testing** - Never use ngrok for production or sensitive documents +2. **Public access** - Anyone with the link can access your documents +3. **Temporary** - Ngrok URLs change every time you restart +4. **Rate limits** - Free tier has limitations (6 hours per tunnel, 20 connections/minute) + +## Troubleshooting + +### Ngrok auth token error +``` +โŒ Ngrok auth token not configured +``` +**Solution:** Add your token to `.env` or run the ngrok auth command + +### Rails not starting +``` +โŒ Rails failed to start +``` +**Solution:** Check if port 3001 is available: `lsof -i :3001` + +### Can't access from other devices +``` +Connection refused +``` +**Solution:** Make sure you're using the ngrok URL (https://xxx.ngrok.io), not localhost + +### Email links not working +``` +This site can't be reached +``` +**Solution:** Check that ngrok is running: `~/bin/ngrok api tunnels list` + +## Files Created + +- `start_with_ngrok.sh` - Complete automated setup +- `start_ngrok_only.sh` - Quick ngrok starter +- `NGROK_SETUP.md` - This guide +- Updated `.env` with ngrok configuration + +## Next Steps + +Once you have ngrok working: +1. Test the complete 3-party workflow +2. Verify email delivery and link functionality +3. Test from different devices (phone, tablet, etc.) +4. Check that document filling works correctly +5. Verify submission completion notifications + +## Cleanup + +To stop everything: +```bash +pkill -f "rails server" +pkill -f "ngrok http" +``` + +## Need Help? + +Check the ngrok dashboard for live traffic monitoring: +http://localhost:4040 + +This shows all requests going through your tunnel in real-time. \ No newline at end of file diff --git a/QUICK_START_NGROK.txt b/QUICK_START_NGROK.txt new file mode 100644 index 00000000..c0896a2f --- /dev/null +++ b/QUICK_START_NGROK.txt @@ -0,0 +1,56 @@ +๐Ÿš€ FLODOC NGROK QUICK START +========================== + +1๏ธโƒฃ SETUP (ONE TIME) +------------------- +# Get your free ngrok token: https://dashboard.ngrok.com/get-started/your-authtoken +~/bin/ngrok config add-authtoken YOUR_TOKEN_HERE + +2๏ธโƒฃ START TESTING +----------------- +./start_with_ngrok.sh + +3๏ธโƒฃ USE THE PUBLIC URL +---------------------- +You'll see something like: https://abc123.ngrok.io + +Use this URL for: +- Email invitation links +- Testing from other devices +- Sharing with testers + +4๏ธโƒฃ TEST WORKFLOW +----------------- +1. Go to: https://abc123.ngrok.io/templates +2. Upload PDF โ†’ Create template +3. Add recipients โ†’ Send email +4. Check email โ†’ Click link +5. Test from phone/tablet/other PC + +๐Ÿ“Š MONITOR TRAFFIC +------------------ +http://localhost:4040 + +๐Ÿ›‘ STOP EVERYTHING +------------------ +pkill -f "rails server" && pkill -f "ngrok http" + +๐Ÿ“ TROUBLESHOOTING +------------------ +โ€ข Ngrok not working? Check: ~/bin/ngrok api tunnels list +โ€ข Rails not starting? Check: lsof -i :3001 +โ€ข Links not working? Make sure you're using https://xxx.ngrok.io, not localhost + +๐Ÿ“ FILES CREATED +---------------- +โ€ข start_with_ngrok.sh - Main setup script +โ€ข start_ngrok_only.sh - Quick ngrok starter +โ€ข NGROK_SETUP.md - Detailed guide +โ€ข .env - Updated with ngrok config + +โš ๏ธ SECURITY WARNING +-------------------- +โ€ข Only for testing - NEVER for production +โ€ข Public URLs - Anyone with link can access +โ€ข Free tier limits apply +โ€ข URLs change on restart \ No newline at end of file diff --git a/app/javascript/application.js b/app/javascript/application.js index 4b5988c9..8cf41815 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -155,7 +155,7 @@ safeRegisterElement('template-builder', class extends HTMLElement { this.app = createApp(TemplateBuilder, { template: reactive(JSON.parse(this.dataset.template)), - backgroundColor: '#faf7f5', + backgroundColor: '#F8F8F8', locale: this.dataset.locale, withPhone: this.dataset.withPhone === 'true', withVerification: ['true', 'false'].includes(this.dataset.withVerification) ? this.dataset.withVerification === 'true' : null, diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 89646c06..1a3f927b 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,5 +1,5 @@ - + <%= render 'layouts/head_tags' %> <% if Docuseal.enable_pwa? %> diff --git a/app/views/layouts/form.html.erb b/app/views/layouts/form.html.erb index 756f8f83..4887611a 100644 --- a/app/views/layouts/form.html.erb +++ b/app/views/layouts/form.html.erb @@ -1,5 +1,5 @@ - + <%= render 'layouts/head_tags' %> diff --git a/app/views/layouts/plain.html.erb b/app/views/layouts/plain.html.erb index 88916977..8f157885 100644 --- a/app/views/layouts/plain.html.erb +++ b/app/views/layouts/plain.html.erb @@ -1,5 +1,5 @@ - + <%= render 'layouts/head_tags' %> diff --git a/app/views/shared/_logo.html.erb b/app/views/shared/_logo.html.erb index 0f4a0d35..46396bc5 100644 --- a/app/views/shared/_logo.html.erb +++ b/app/views/shared/_logo.html.erb @@ -1,6 +1,6 @@ - - - - + + + + diff --git a/app/views/shared/_meta.html.erb b/app/views/shared/_meta.html.erb index d04ca266..ac66c6df 100644 --- a/app/views/shared/_meta.html.erb +++ b/app/views/shared/_meta.html.erb @@ -27,4 +27,4 @@ - + diff --git a/app/views/submit_form_draw_signature/show.html.erb b/app/views/submit_form_draw_signature/show.html.erb index f1ffebf0..2f2d06af 100644 --- a/app/views/submit_form_draw_signature/show.html.erb +++ b/app/views/submit_form_draw_signature/show.html.erb @@ -1,5 +1,5 @@ - + <%= render 'layouts/head_tags' %> diff --git a/docs/dashboard-ngrok-get-started-setup-linux.pdf b/docs/dashboard-ngrok-get-started-setup-linux.pdf new file mode 100644 index 00000000..2c322658 Binary files /dev/null and b/docs/dashboard-ngrok-get-started-setup-linux.pdf differ diff --git a/docs/dashboard-ngrok-get-started-setup-linux.pdf:Zone.Identifier b/docs/dashboard-ngrok-get-started-setup-linux.pdf:Zone.Identifier new file mode 100644 index 00000000..d6c1ec68 Binary files /dev/null and b/docs/dashboard-ngrok-get-started-setup-linux.pdf:Zone.Identifier differ diff --git a/docs/dashboard-ngrok-get-started-setup-linux.png:Zone.Identifier b/docs/dashboard-ngrok-get-started-setup-linux.png:Zone.Identifier new file mode 100644 index 00000000..d6c1ec68 Binary files /dev/null and b/docs/dashboard-ngrok-get-started-setup-linux.png:Zone.Identifier differ diff --git a/flodoc-landing-page b/flodoc-landing-page new file mode 160000 index 00000000..8cb45ba7 --- /dev/null +++ b/flodoc-landing-page @@ -0,0 +1 @@ +Subproject commit 8cb45ba7c5ef3f4895de1537d5ea4f4505500c11 diff --git a/lib/pdf_icons/logo.svg b/lib/pdf_icons/logo.svg index f75258d3..7bc3d6e1 100644 --- a/lib/pdf_icons/logo.svg +++ b/lib/pdf_icons/logo.svg @@ -1,3 +1,3 @@ - + diff --git a/lib/pdf_icons/logo_new.svg b/lib/pdf_icons/logo_new.svg index f75258d3..7bc3d6e1 100644 --- a/lib/pdf_icons/logo_new.svg +++ b/lib/pdf_icons/logo_new.svg @@ -1,3 +1,3 @@ - + diff --git a/lib/pdf_icons/stamp-logo.svg b/lib/pdf_icons/stamp-logo.svg index f75258d3..7bc3d6e1 100644 --- a/lib/pdf_icons/stamp-logo.svg +++ b/lib/pdf_icons/stamp-logo.svg @@ -1,3 +1,3 @@ - + diff --git a/public/logo.svg b/public/logo.svg index 8aea99f3..b76ac241 100644 --- a/public/logo.svg +++ b/public/logo.svg @@ -1,6 +1,6 @@ - - - - + + + + diff --git a/start_ngrok_only.sh b/start_ngrok_only.sh new file mode 100755 index 00000000..12c686ac --- /dev/null +++ b/start_ngrok_only.sh @@ -0,0 +1,27 @@ +#!/bin/bash + +# Quick ngrok starter for when Rails is already running on port 3001 + +echo "๐Ÿš€ Starting ngrok tunnel for FloDoc..." +echo " (Make sure Rails is running on port 3001 first)" + +# Kill existing ngrok +pkill -f "ngrok http" 2>/dev/null || true +sleep 2 + +# Start ngrok +~/bin/ngrok http 3001 & + +sleep 5 + +# Get URL +echo "" +echo "๐Ÿ“ก Your public URLs:" +echo "====================" +~/bin/ngrok api tunnels list 2>/dev/null | grep -o '"public_url":"[^"]*"' | cut -d'"' -f4 | while read url; do + echo " $url" +done + +echo "" +echo "๐Ÿ“Š View live traffic: http://localhost:4040" +echo "๐Ÿ›‘ Stop: pkill -f 'ngrok http'" \ No newline at end of file diff --git a/start_with_ngrok.sh b/start_with_ngrok.sh new file mode 100755 index 00000000..9e1d6933 --- /dev/null +++ b/start_with_ngrok.sh @@ -0,0 +1,149 @@ +#!/bin/bash + +# FloDoc Ngrok Testing Script +# This script starts Rails with ngrok for public testing of email workflows + +set -e + +echo "๐Ÿš€ Starting FloDoc with Ngrok for Public Testing" +echo "================================================" + +# Check if ngrok is installed +if ! command -v ~/bin/ngrok &> /dev/null; then + echo "โŒ Ngrok not found. Please install it first." + echo " Run: curl -s https://ngrok-agent.s3.amazonaws.com/ngrok/latest/linux-amd64.tgz | tar -xzf - && mv ngrok ~/bin/" + exit 1 +fi + +# Load environment variables +if [ -f .env ]; then + echo "โœ… Loading environment variables from .env" + source .env +else + echo "โŒ .env file not found" + exit 1 +fi + +# Check if ngrok auth token is set +if [ "$NGROK_AUTH_TOKEN" = "your_ngrok_auth_token_here" ] || [ -z "$NGROK_AUTH_TOKEN" ]; then + echo "โŒ Ngrok auth token not configured" + echo "" + echo "To set up ngrok:" + echo "1. Go to https://dashboard.ngrok.com/get-started/your-authtoken" + echo "2. Sign up for a free account and get your auth token" + echo "3. Run: ~/bin/ngrok config add-authtoken YOUR_TOKEN_HERE" + echo "4. Or add NGROK_AUTH_TOKEN=your_token to your .env file" + echo "" + echo "Once you have your token, update .env with:" + echo "NGROK_AUTH_TOKEN=your_actual_token_here" + exit 1 +fi + +echo "โœ… Ngrok auth token found" + +# Kill any existing ngrok processes +echo "๐Ÿงน Cleaning up existing processes..." +pkill -f "ngrok http" 2>/dev/null || true +sleep 2 + +# Start Rails server in background +echo "๐Ÿš€ Starting Rails server on port 3001..." +bin/rails server -b 0.0.0.0 -p 3001 & +RAILS_PID=$! +echo " Rails PID: $RAILS_PID" + +# Wait for Rails to start +echo "โณ Waiting for Rails to start..." +sleep 10 + +# Check if Rails is running +if ! curl -s http://localhost:3001 > /dev/null; then + echo "โŒ Rails failed to start" + kill $RAILS_PID 2>/dev/null || true + exit 1 +fi + +echo "โœ… Rails is running on http://localhost:3001" + +# Start ngrok +echo "๐Ÿš€ Starting ngrok tunnel..." +~/bin/ngrok http 3001 > /dev/null & +NGROK_PID=$! +echo " Ngrok PID: $NGROK_PID" + +# Wait for ngrok to establish connection +echo "โณ Waiting for ngrok tunnel to establish..." +sleep 8 + +# Get ngrok URL +echo "๐Ÿ“ก Fetching ngrok public URL..." +NGROK_URL=$(~/bin/ngrok api tunnels list 2>/dev/null | grep -o '"public_url":"[^"]*"' | cut -d'"' -f4 | head -1) + +if [ -z "$NGROK_URL" ]; then + echo "โŒ Failed to get ngrok URL. Trying alternative method..." + # Alternative method to get URL + NGROK_URL=$(curl -s http://localhost:4040/api/tunnels 2>/dev/null | grep -o '"public_url":"[^"]*"' | cut -d'"' -f4 | head -1) +fi + +if [ -z "$NGROK_URL" ]; then + echo "โš ๏ธ Could not automatically retrieve ngrok URL" + echo " You can manually check: http://localhost:4040" + echo " Or run: ~/bin/ngrok api tunnels list" + NGROK_URL="https://your-ngrok-url.ngrok.io" # Placeholder +else + echo "โœ… Ngrok tunnel established: $NGROK_URL" +fi + +# Update APP_URL in environment +echo "๐Ÿ”„ Updating APP_URL to: $NGROK_URL" +export APP_URL="$NGROK_URL" + +# Update .env file for future runs +if grep -q "APP_URL=" .env; then + sed -i "s|APP_URL=.*|APP_URL=$NGROK_URL|" .env +else + echo "APP_URL=$NGROK_URL" >> .env +fi + +# Restart Rails with new APP_URL +echo "๐Ÿ”„ Restarting Rails with updated APP_URL..." +kill $RAILS_PID 2>/dev/null || true +sleep 2 + +bin/rails server -b 0.0.0.0 -p 3001 & +NEW_RAILS_PID=$! +echo " New Rails PID: $NEW_RAILS_PID" + +sleep 5 + +echo "" +echo "๐ŸŽ‰ SETUP COMPLETE!" +echo "==================" +echo "" +echo "๐Ÿ“ฑ Your FloDoc app is now publicly accessible!" +echo "" +echo "๐Ÿ  Local URL: http://localhost:3001" +echo "๐ŸŒ Public URL: $NGROK_URL" +echo "" +echo "๐Ÿ“ง Email links will use: $NGROK_URL" +echo "" +echo "๐Ÿ”— Test the workflow:" +echo " 1. Go to: $NGROK_URL/templates" +echo " 2. Upload a PDF and create a template" +echo " 3. Add recipients and send test email" +echo " 4. Check your email and click the link" +echo " 5. Test from any device - even your phone!" +echo "" +echo "๐Ÿ“Š Monitor ngrok dashboard: http://localhost:4040" +echo "" +echo "๐Ÿ›‘ To stop everything: pkill -f 'rails server' && pkill -f 'ngrok http'" +echo "" +echo "๐Ÿ“ Next steps:" +echo " - Get your ngrok auth token from https://dashboard.ngrok.com" +echo " - Update .env with: NGROK_AUTH_TOKEN=your_token" +echo " - Run this script again for automatic setup" +echo "" + +# Keep script running and show status +echo "Press Ctrl+C to stop everything..." +wait \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index d6c5b9bf..aa663df7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,17 +5,21 @@ module.exports = { daisyui: { themes: [ { - docuseal: { + flodoc: { 'color-scheme': 'light', - primary: '#e4e0e1', - secondary: '#ef9fbc', - accent: '#eeaf3a', - neutral: '#291334', - 'base-100': '#faf7f5', - 'base-200': '#efeae6', - 'base-300': '#e7e2df', - 'base-content': '#291334', - '--rounded-btn': '1.9rem', + primary: '#925FF0', // Brand purple + secondary: '#A3FDA1', // Accent green + accent: '#35A7FF', // Complementary blue + neutral: '#0B0B0B', // Very dark gray/black + 'base-100': '#FFFFFF', // White background + 'base-200': '#F8F8F8', // Light gray + 'base-300': '#E8E8E8', // Medium gray + 'base-content': '#0B0B0B', // Dark text + info: '#35A7FF', // Blue + success: '#A3FDA1', // Green + warning: '#FFE74C', // Yellow + error: '#FF5964', // Red/Pink + '--rounded-btn': '0.75rem', '--tab-border': '2px', '--tab-radius': '.5rem' }