Add optional image parameter to showInputDialog for captcha support. Close #422

assets/init.js

@@ -1322,13 +1322,15 @@ let UI = {
      * Show an input dialog
      * @param title {string}
      * @param validator {(string) => string | null | undefined} - A function that validates the input. If the function returns a string, the dialog will show the error message.
+     * @param image {string?} - Available since 1.4.6. An optional image to show in the dialog. You can use this to show a captcha.
      * @returns {Promise<string | null>} - The input value. If the dialog is canceled, return null.
      */
-    showInputDialog: (title, validator) => {
+    showInputDialog: (title, validator, image) => {
         return sendMessage({
             method: 'UI',
             function: 'showInputDialog',
             title: title,
+            image: image,
             validator: validator
         })
     },

lib/components/js_ui.dart

@@ -37,9 +37,11 @@ mixin class JsUiApi {
       case 'showInputDialog':
         var title = message['title'];
         var validator = message['validator'];
+        var image = message['image'];
         if (title is! String) return;
         if (validator != null && validator is! JSInvokable) return;
-        return _showInputDialog(title, validator);
+        if (image != null && image is! String) return;
+        return _showInputDialog(title, validator, image);
       case 'showSelectDialog':
         var title = message['title'];
         var options = message['options'];
@@ -124,12 +126,13 @@ mixin class JsUiApi {
     controller?.close();
   }
 
-  Future<String?> _showInputDialog(String title, JSInvokable? validator) async {
+  Future<String?> _showInputDialog(String title, JSInvokable? validator, String? image) async {
     String? result;
     var func = validator == null ? null : JSAutoFreeFunction(validator);
     await showInputDialog(
       context: App.rootContext,
       title: title,
+      image: image,
       onConfirm: (v) {
         if (func != null) {
           var res = func.call([v]);

lib/components/message.dart

@@ -359,6 +359,7 @@ Future<void> showInputDialog({
   String confirmText = "Confirm",
   String cancelText = "Cancel",
   RegExp? inputValidator,
+  String? image,
 }) {
   var controller = TextEditingController(text: initialValue);
   bool isLoading = false;
@@ -371,14 +372,23 @@ Future<void> showInputDialog({
         builder: (context, setState) {
           return ContentDialog(
             title: title,
-            content: TextField(
-              controller: controller,
-              decoration: InputDecoration(
-                hintText: hintText,
-                border: const OutlineInputBorder(),
-                errorText: error,
-              ),
-            ).paddingHorizontal(12),
+            content: Column(
+              children: [
+                if (image != null)
+                  SizedBox(
+                    height: 108,
+                    child: Image.network(image, fit: BoxFit.none),
+                  ).paddingBottom(8),
+                TextField(
+                  controller: controller,
+                  decoration: InputDecoration(
+                    hintText: hintText,
+                    border: const OutlineInputBorder(),
+                    errorText: error,
+                  ),
+                ).paddingHorizontal(12),
+              ],
+            ),
             actions: [
               Button.filled(
                 isLoading: isLoading,