Added iOS app QR onboarding integration

.gitignore

@@ -28,3 +28,6 @@ test-datastore/
 
 # Memory consumption log
 test-memory.log
+
+# macOS operating system metadata
+/.DS_Store

changedetectionio/blueprint/settings/__init__.py

@@ -1,10 +1,12 @@
+import qrcode
+import io
 import os
 from copy import deepcopy
 from datetime import datetime
 from zoneinfo import ZoneInfo, available_timezones
 import secrets
 import flask_login
-from flask import Blueprint, render_template, request, redirect, url_for, flash
+from flask import Blueprint, render_template, request, redirect, url_for, flash, send_file
 
 from changedetectionio.store import ChangeDetectionStore
 from changedetectionio.auth_decorator import login_optionally_required
@@ -116,5 +118,19 @@ def notification_logs():
         output = render_template("notification-log.html",
                                logs=notification_debug_log if len(notification_debug_log) else ["Notification logs are empty - no notifications sent yet."])
         return output
+
+    @settings_blueprint.route("/generate_app_qr_code", methods=['GET'])
+    @login_optionally_required
+    def generate_app_qr_code():
+
+        base_url = request.url_root.rstrip('/')
+        api_access_token = datastore.data['settings']['application'].get('api_access_token')
+        data = f"changemonitor://pair?api_access_token={api_access_token}&base_url={base_url}"       
+
+        img = qrcode.make(data)
+        buf = io.BytesIO()
+        img.save(buf, format='PNG')
+        buf.seek(0)
+        return send_file(buf, mimetype='image/png')
 
     return settings_blueprint

changedetectionio/blueprint/settings/templates/settings.html

@@ -26,6 +26,7 @@
             <li class="tab"><a href="#api">API</a></li>
             <li class="tab"><a href="#timedate">Time &amp Date</a></li>
             <li class="tab"><a href="#proxies">CAPTCHA &amp; Proxies</a></li>
+            <li class="tab"><a href="#app">App</a></li>
         </ul>
     </div>
     <div class="box-wrap inner">
@@ -306,6 +307,19 @@ <h4>Chrome Extension</h4>
                     {{ render_field(form.requests.form.extra_browsers) }}
                 </div>
             </div>
+
+            <div class="tab-pane-inner" id="app">
+                <div class="pure-control-group">
+                    <p><strong>Connect the Changemonitor iOS app.</strong></p>
+                    <p>Download the app, then using the app or native iOS camera and scan the QR Code below.</p>
+                    <p>Note: This App is not an official changedetection.io product and comes from a third-party publisher.</p>
+                    <p><strong>Step 1</strong> Download from the Apple App Store</p>   
+                    <a href="https://apps.apple.com/nl/app/changemonitor/id6473832284" target="_blank"><img style="height: 3em;" src="{{url_for('static_content', group='images', filename='app_store.svg')}}" alt="Download on the App Store"></a>
+                    <p><strong>Step 2.</strong> Use the app or native iOS camera to scan the QR Code</p>   
+                    <img src="{{ url_for('settings.generate_app_qr_code') }}" alt="App QR Code" style="width:200px; height:200px;">                                
+                </div>
+            </div>
+
             <div id="actions">
                 <div class="pure-control-group">
                     {{ render_button(form.save_button) }}

requirements.txt

@@ -113,3 +113,6 @@ psutil==7.0.0
 
 ruff >= 0.11.2
 pre_commit >= 4.2.0
+
+# QR-code generator for app onboarding
+qrcode >= 8.1