Add STEGASOO_PORT env var, improve RPi setup output, channel key accordion

- Add STEGASOO_PORT environment variable support (default: 5000)
- Update .env.example with port and fix channel key format docs
- Move channel key generation to collapsible accordion in Generate page
- Improve RPi setup.sh output with HTTPS and channel key instructions
- Add rpi/BUILD_IMAGE.md workflow documentation

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontends/web/.env.example

@@ -5,9 +5,10 @@
 STEGASOO_AUTH_ENABLED=true
 STEGASOO_HTTPS_ENABLED=false
 STEGASOO_HOSTNAME=localhost
+STEGASOO_PORT=5000
 
-# Channel Key (256-bit hex for private channel isolation)
+# Channel Key (format: XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX)
-# Generate with: python -c "import secrets; print(secrets.token_hex(32))"
+# Generate with: stegasoo generate --channel-key
 # Leave empty for public mode
 STEGASOO_CHANNEL_KEY=
 

frontends/web/app.py

@@ -1405,9 +1405,10 @@ if __name__ == "__main__":
     else:
         print("Authentication disabled")
 
+    port = int(os.environ.get("STEGASOO_PORT", "5000"))
     app.run(
         host="0.0.0.0",
-        port=5000,
+        port=port,
         debug=False,
         ssl_context=ssl_context,
     )

frontends/web/templates/generate.html

@@ -74,36 +74,47 @@
                         </div>
                     </div>
                     
-                    <hr class="my-4">
+                    <button type="submit" class="btn btn-primary btn-lg w-100 mt-4">
-                    
-                    <!-- Channel Key Generation (v4.0.0) -->
-                    <div class="mb-4">
-                        <label class="form-label">
-                            <i class="bi bi-broadcast me-1"></i> Channel Key
-                            <span class="badge bg-info ms-1">v4.0</span>
-                            <a href="{{ url_for('about') }}#channel-keys" class="text-muted ms-2" title="Learn about channel keys">
-                                <i class="bi bi-question-circle"></i>
-                            </a>
-                        </label>
-                        
-                        <div class="input-group input-group-sm">
-                            <span class="input-group-text"><i class="bi bi-key"></i></span>
-                            <input type="text" class="form-control font-monospace" id="channelKeyGenerated" 
-                                   placeholder="Click Generate" readonly>
-                            <button class="btn btn-outline-primary" type="button" id="generateChannelKeyBtn">
-                                <i class="bi bi-shuffle me-1"></i>Generate
-                            </button>
-                            <button class="btn btn-outline-secondary" type="button" id="copyChannelKeyBtn" disabled title="Copy to clipboard">
-                                <i class="bi bi-clipboard"></i>
-                            </button>
-                        </div>
-                        <div class="form-text">For private groups: generate, then use <strong>Custom</strong> mode when encoding/decoding.</div>
-                    </div>
-                    
-                    <button type="submit" class="btn btn-primary btn-lg w-100 mt-3">
                         <i class="bi bi-shuffle me-2"></i>Generate Credentials
                     </button>
                 </form>
+
+                <!-- Channel Key Accordion (Advanced) -->
+                <div class="accordion mt-4" id="advancedAccordion">
+                    <div class="accordion-item bg-dark">
+                        <h2 class="accordion-header">
+                            <button class="accordion-button collapsed bg-dark text-light" type="button"
+                                    data-bs-toggle="collapse" data-bs-target="#channelKeyCollapse">
+                                <i class="bi bi-broadcast me-2"></i>Channel Key
+                                <span class="badge bg-info ms-2">Advanced</span>
+                            </button>
+                        </h2>
+                        <div id="channelKeyCollapse" class="accordion-collapse collapse" data-bs-parent="#advancedAccordion">
+                            <div class="accordion-body">
+                                <p class="text-muted small mb-3">
+                                    Channel keys create private encoding channels. Only users with the same key can decode each other's images.
+                                    <a href="{{ url_for('about') }}#channel-keys" class="text-info">Learn more</a>
+                                </p>
+
+                                <div class="input-group">
+                                    <span class="input-group-text"><i class="bi bi-key"></i></span>
+                                    <input type="text" class="form-control font-monospace" id="channelKeyGenerated"
+                                           placeholder="Click Generate to create a key" readonly>
+                                    <button class="btn btn-outline-primary" type="button" id="generateChannelKeyBtn">
+                                        <i class="bi bi-shuffle me-1"></i>Generate
+                                    </button>
+                                    <button class="btn btn-outline-secondary" type="button" id="copyChannelKeyBtn" disabled title="Copy to clipboard">
+                                        <i class="bi bi-clipboard"></i>
+                                    </button>
+                                </div>
+                                <div class="form-text mt-2">
+                                    <i class="bi bi-info-circle me-1"></i>
+                                    After generating, configure this key in your server's environment or use <strong>Custom</strong> channel mode when encoding/decoding.
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 
                 {% else %}
                 <!-- Generated Credentials Display -->

rpi/BUILD_IMAGE.md

@@ -0,0 +1,108 @@
+# Stegasoo Pi Image Build Workflow
+
+Quick reference for building a distributable SD card image.
+
+## Step 1: Flash Fresh Raspbian
+
+Use rpi-imager with these settings:
+- **OS**: Raspberry Pi OS (64-bit)
+- **Hostname**: `stegasoo`
+- **Enable SSH**: Yes (password auth)
+- **Username**: `pi` (or any)
+- **Password**: `raspberry` (temporary)
+- **WiFi**: Skip (use ethernet for clean image)
+
+## Step 2: Boot & SSH In
+
+```bash
+# Wait for Pi to boot (~60 seconds), then:
+ssh pi@stegasoo.local
+# or use IP from router DHCP list
+```
+
+## Step 3: Run Setup Script
+
+```bash
+curl -sSL https://raw.githubusercontent.com/adlee-was-taken/stegasoo/main/rpi/setup.sh | bash
+```
+
+This takes ~15-20 minutes and installs:
+- Python 3.12 via pyenv
+- jpegio (patched for ARM)
+- Stegasoo with web UI
+- Systemd service
+
+## Step 4: Test It Works
+
+```bash
+sudo systemctl start stegasoo
+curl -k https://localhost:5000
+# Should return HTML
+```
+
+## Step 5: Sanitize for Distribution
+
+```bash
+curl -sSL https://raw.githubusercontent.com/adlee-was-taken/stegasoo/main/rpi/sanitize-for-image.sh | sudo bash
+```
+
+This removes:
+- WiFi credentials
+- SSH authorized keys
+- Bash history
+- Stegasoo auth database
+- Logs and temp files
+
+The Pi will shut down when complete.
+
+## Step 6: Copy the Image
+
+Remove SD card, insert into your Linux machine:
+
+```bash
+# Find the SD card device (CAREFUL!)
+lsblk
+
+# Copy (replace sdX with actual device, e.g., sda)
+sudo dd if=/dev/sdX of=stegasoo-rpi-$(date +%Y%m%d).img bs=4M status=progress
+```
+
+## Step 7: Shrink & Compress
+
+```bash
+# Optional: Shrink image (saves space)
+wget https://raw.githubusercontent.com/Drewsif/PiShrink/master/pishrink.sh
+chmod +x pishrink.sh
+sudo ./pishrink.sh stegasoo-rpi-*.img
+
+# Compress
+xz -9 -T0 stegasoo-rpi-*.img
+```
+
+## Step 8: Distribute
+
+Upload `.img.xz` to GitHub Releases.
+
+Users can flash with:
+```bash
+# Linux
+xzcat stegasoo-rpi-*.img.xz | sudo dd of=/dev/sdX bs=4M status=progress
+
+# Or use rpi-imager "Use custom" option
+```
+
+---
+
+## Quick Command Summary
+
+```bash
+# On Pi:
+curl -sSL https://raw.githubusercontent.com/adlee-was-taken/stegasoo/main/rpi/setup.sh | bash
+sudo systemctl start stegasoo
+curl -k https://localhost:5000
+curl -sSL https://raw.githubusercontent.com/adlee-was-taken/stegasoo/main/rpi/sanitize-for-image.sh | sudo bash
+
+# On your machine:
+sudo dd if=/dev/sdX of=stegasoo-rpi-$(date +%Y%m%d).img bs=4M status=progress
+xz -9 -T0 stegasoo-rpi-*.img
+```

rpi/setup.sh

@@ -182,6 +182,7 @@ WorkingDirectory=$INSTALL_DIR/frontends/web
 Environment="PATH=$INSTALL_DIR/venv/bin:/usr/bin"
 Environment="STEGASOO_AUTH_ENABLED=true"
 Environment="STEGASOO_HTTPS_ENABLED=false"
+Environment="STEGASOO_PORT=5000"
 ExecStart=$INSTALL_DIR/venv/bin/python app.py
 Restart=on-failure
 RestartSec=5
@@ -217,8 +218,28 @@ echo "  journalctl -u stegasoo -f"
 echo ""
 echo -e "${GREEN}Access Web UI:${NC}"
 PI_IP=$(hostname -I | awk '{print $1}')
-echo "  http://$PI_IP:5000"
+echo "  http://$PI_IP:5000  (default port, configurable via STEGASOO_PORT)"
 echo ""
 echo -e "${YELLOW}Note: On first access, you'll be prompted to create an admin account.${NC}"
 echo ""
+echo -e "${GREEN}Enable HTTPS:${NC}"
+echo "  sudo nano /etc/systemd/system/stegasoo.service"
+echo ""
+echo "  Change: Environment=\"STEGASOO_HTTPS_ENABLED=false\""
+echo "  To:     Environment=\"STEGASOO_HTTPS_ENABLED=true\""
+echo ""
+echo "  Save (Ctrl+O, Enter, Ctrl+X), then:"
+echo "    sudo systemctl daemon-reload"
+echo "    sudo systemctl restart stegasoo"
+echo ""
+echo -e "${GREEN}Private Channel Key (optional):${NC}"
+echo "  Generate a key:"
+echo "    source $INSTALL_DIR/venv/bin/activate"
+echo "    stegasoo generate --channel-key"
+echo ""
+echo "  Add to the service file (same nano command above):"
+echo "    Environment=\"STEGASOO_CHANNEL_KEY=XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX\""
+echo ""
+echo "  This ensures only users with the same key can decode your images."
+echo ""
 echo -e "To start now: ${YELLOW}sudo systemctl start stegasoo${NC}"