[pve-devel] [PATCH pve_flutter_frontend v3] ui: enable noVNC console on iOS

[pve-devel] [PATCH pve_flutter_frontend v3] ui: enable noVNC console on iOS

[Shan Shaji]

The noVNC console was disabled in iOS and was only available in
android.

To fix the issue enabled the noVNC console view on iOS devices. The
changes also includes a refactor of the function responsible for
displaying the webview. Additionally, an `AppBar` has been added
to the console view on to allow users to easily close the view. To
avoid the body of the Scaffold to resize when the keyboard pops up set
`resizeToAvoidBottomInset` [0] to `false`

The `dart format` command was also ran in the file to fix the file
formatting.

- [0] https://api.flutter.dev/flutter/material/Scaffold/resizeToAvoidBottomInset.html

Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
 
 changes since v2:
 - Set `resizeToAvoidBottomInset` top false to avoid the Scaffold body
   to resize automatically when the keyboard pops up. 
 - Update commit message. 
 
 changes since v1:
 - Rebased with master. 
 - Update commit message. 
 
 lib/widgets/pve_console_menu_widget.dart | 176 +++++++++++------------
 1 file changed, 84 insertions(+), 92 deletions(-)

diff --git a/lib/widgets/pve_console_menu_widget.dart b/lib/widgets/pve_console_menu_widget.dart
index 473595d..8f1b889 100644
--- a/lib/widgets/pve_console_menu_widget.dart
+++ b/lib/widgets/pve_console_menu_widget.dart
@@ -97,45 +97,19 @@ class PveConsoleMenu extends StatelessWidget {
                   }
                 },
               ),
-            if (Platform.isAndroid) // web_view is only available for mobile :(
+
+            // web_view is only available for mobile :(
+            // xterm.js doesn't work that well on mobile
+            if (Platform.isAndroid || Platform.isIOS)
               ListTile(
                 title: const Text(
-                  //type == "qemu" ? "noVNC Console" : "xterm.js Console",
-                  "noVNC Console", // xterm.js doesn't work that well on mobile
+                  "noVNC Console",
                   style: TextStyle(fontWeight: FontWeight.bold),
                 ),
                 subtitle: const Text("Open console view"),
-                onTap: () async {
-                  if (Platform.isAndroid) {
-                    if (['qemu', 'lxc'].contains(type)) {
-                      SystemChrome.setEnabledSystemUIMode(
-                          SystemUiMode.immersive);
-                      Navigator.of(context)
-                          .push(_createHTMLConsoleRoute())
-                          .then((completion) {
-                        SystemChrome.setEnabledSystemUIMode(
-                            SystemUiMode.edgeToEdge,
-                            overlays: [
-                              SystemUiOverlay.top,
-                              SystemUiOverlay.bottom
-                            ]);
-                      });
-                    } else if (type == 'node') {
-                      SystemChrome.setEnabledSystemUIMode(
-                          SystemUiMode.immersive);
-                      Navigator.of(context)
-                          .push(_createHTMLConsoleRoute())
-                          .then((completion) {
-                        SystemChrome.setEnabledSystemUIMode(
-                            SystemUiMode.edgeToEdge,
-                            overlays: [
-                              SystemUiOverlay.top,
-                              SystemUiOverlay.bottom
-                            ]);
-                      });
-                    }
-                  } else {
-                    print('not implemented for current platform');
+                onTap: () {
+                  if (['qemu', 'lxc'].contains(type) || type == 'node') {
+                    _openNoVncConsole(context);
                   }
                 },
               ),
@@ -145,6 +119,18 @@ class PveConsoleMenu extends StatelessWidget {
     );
   }
 
+  Future<void> _openNoVncConsole(BuildContext context) async {
+    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
+    await Navigator.push(context, _createHTMLConsoleRoute());
+    SystemChrome.setEnabledSystemUIMode(
+      SystemUiMode.edgeToEdge,
+      overlays: [
+        SystemUiOverlay.top,
+        SystemUiOverlay.bottom,
+      ],
+    );
+  }
+
   void showTextDialog(BuildContext context, String title, String content) {
     showDialog(
       context: context,
@@ -226,74 +212,80 @@ class PVEWebConsoleState extends State<PVEWebConsole> {
     WidgetsFlutterBinding.ensureInitialized();
 
     return FutureBuilder(
-        future: CookieManager.instance().setCookie(
-          url: WebUri(consoleUrl),
-          name: 'PVEAuthCookie',
-          value: ticket,
-        ),
-        builder: (context, snapshot) {
-          return SafeArea(
-            child: InAppWebView(
-              onReceivedServerTrustAuthRequest: (controller, challenge) async {
-                final cert = challenge.protectionSpace.sslCertificate;
-                final certBytes = cert?.x509Certificate?.encoded;
-                final sslError = challenge.protectionSpace.sslError?.message;
+      future: CookieManager.instance().setCookie(
+        url: WebUri(consoleUrl),
+        name: 'PVEAuthCookie',
+        value: ticket,
+      ),
+      builder: (context, snapshot) {
+        return Scaffold(
+          resizeToAvoidBottomInset: false,
+          appBar: AppBar(),
+          body: InAppWebView(
+            onReceivedServerTrustAuthRequest: (controller, challenge) async {
+              final cert = challenge.protectionSpace.sslCertificate;
+              final certBytes = cert?.x509Certificate?.encoded;
+              final sslError = challenge.protectionSpace.sslError?.message;
 
-                String? issuedTo = cert?.issuedTo?.CName.toString();
-                String? hash = certBytes != null
-                    ? sha256.convert(certBytes).toString()
-                    : null;
+              String? issuedTo = cert?.issuedTo?.CName.toString();
+              String? hash = certBytes != null
+                  ? sha256.convert(certBytes).toString()
+                  : null;
 
-                final settings =
-                    await ProxmoxGeneralSettingsModel.fromLocalStorage();
+              final settings =
+                  await ProxmoxGeneralSettingsModel.fromLocalStorage();
 
-                bool trust = false;
-                if (hash != null && settings.trustedFingerprints != null) {
-                  trust = settings.trustedFingerprints!.contains(hash);
-                }
+              bool trust = false;
+              if (hash != null && settings.trustedFingerprints != null) {
+                trust = settings.trustedFingerprints!.contains(hash);
+              }
 
-                if (!trust) {
-                  // format hash to '01:23:...' format
-                  String? formattedHash = hash?.toUpperCase().replaceAllMapped(
-                      RegExp(r"[a-zA-Z0-9]{2}"),
-                      (match) => "${match.group(0)}:");
-                  formattedHash = formattedHash?.substring(
-                      0, formattedHash.length - 1); // remove last ':'
+              if (!trust) {
+                // format hash to '01:23:...' format
+                String? formattedHash = hash?.toUpperCase().replaceAllMapped(
+                    RegExp(r"[a-zA-Z0-9]{2}"), (match) => "${match.group(0)}:");
+                formattedHash = formattedHash?.substring(
+                    0, formattedHash.length - 1); // remove last ':'
 
-                  if (context.mounted) {
-                    trust = await showTLSWarning(
-                        context,
-                        sslError ?? 'An unknown TLS error has occurred',
-                        issuedTo ?? 'unknown',
-                        formattedHash ?? 'unknown');
-                  }
+                if (context.mounted) {
+                  trust = await showTLSWarning(
+                      context,
+                      sslError ?? 'An unknown TLS error has occurred',
+                      issuedTo ?? 'unknown',
+                      formattedHash ?? 'unknown');
                 }
+              }
 
-                // save Fingerprint
-                if (trust && hash != null) {
-                  await settings
-                      .rebuild((b) => b..trustedFingerprints.add(hash))
-                      .toLocalStorage();
-                  print(settings.toJson());
-                }
+              // save Fingerprint
+              if (trust && hash != null) {
+                await settings
+                    .rebuild((b) => b..trustedFingerprints.add(hash))
+                    .toLocalStorage();
+                print(settings.toJson());
+              }
 
-                final action = trust
-                    ? ServerTrustAuthResponseAction.PROCEED
-                    : ServerTrustAuthResponseAction.CANCEL;
-                return ServerTrustAuthResponse(action: action);
-              },
-              onWebViewCreated: (controller) {
-                webViewController = controller;
-                controller.loadUrl(
-                    urlRequest: URLRequest(url: WebUri(consoleUrl)));
-              },
-            ),
-          );
-        });
+              final action = trust
+                  ? ServerTrustAuthResponseAction.PROCEED
+                  : ServerTrustAuthResponseAction.CANCEL;
+              return ServerTrustAuthResponse(action: action);
+            },
+            onWebViewCreated: (controller) {
+              webViewController = controller;
+              controller.loadUrl(
+                  urlRequest: URLRequest(url: WebUri(consoleUrl)));
+            },
+          ),
+        );
+      },
+    );
   }
 
-  Future<bool> showTLSWarning(BuildContext context, String sslError,
-      String issuedTo, String hash) async {
+  Future<bool> showTLSWarning(
+    BuildContext context,
+    String sslError,
+    String issuedTo,
+    String hash,
+  ) async {
     return await showDialog(
         context: context,
         barrierDismissible: false,
-- 
2.50.1



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

Re: [pve-devel] [PATCH pve_flutter_frontend v3] ui: enable noVNC console on iOS

[Dominik Csapak]

On 8/13/25 10:29, Shan Shaji wrote:
> The noVNC console was disabled in iOS and was only available in
> android.
> 
> To fix the issue enabled the noVNC console view on iOS devices. The
> changes also includes a refactor of the function responsible for
> displaying the webview. Additionally, an `AppBar` has been added
> to the console view on to allow users to easily close the view. To
> avoid the body of the Scaffold to resize when the keyboard pops up set
> `resizeToAvoidBottomInset` [0] to `false`
> 
> The `dart format` command was also ran in the file to fix the file
> formatting.

is it possible to send dart format patches upfront and as a seperate patch?

that way one can see the actual changes much more easily.

also which version of dart/flutter do you use?
when i do `dart format` on that file here on current master,
it does not change the formatting at all
(but i'm still on flutter 3.29 with dart sdk on 3.7.2)

> 
> - [0] https://api.flutter.dev/flutter/material/Scaffold/resizeToAvoidBottomInset.html
> 
> Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
> ---
>   
>   changes since v2:
>   - Set `resizeToAvoidBottomInset` top false to avoid the Scaffold body
>     to resize automatically when the keyboard pops up.
>   - Update commit message.
>   
>   changes since v1:
>   - Rebased with master.
>   - Update commit message.
>   
>   lib/widgets/pve_console_menu_widget.dart | 176 +++++++++++------------
>   1 file changed, 84 insertions(+), 92 deletions(-)
> 
> diff --git a/lib/widgets/pve_console_menu_widget.dart b/lib/widgets/pve_console_menu_widget.dart
> index 473595d..8f1b889 100644
> --- a/lib/widgets/pve_console_menu_widget.dart
> +++ b/lib/widgets/pve_console_menu_widget.dart
> @@ -97,45 +97,19 @@ class PveConsoleMenu extends StatelessWidget {
>                     }
>                   },
>                 ),
> -            if (Platform.isAndroid) // web_view is only available for mobile :(
> +
> +            // web_view is only available for mobile :(
> +            // xterm.js doesn't work that well on mobile
> +            if (Platform.isAndroid || Platform.isIOS)
>                 ListTile(
>                   title: const Text(
> -                  //type == "qemu" ? "noVNC Console" : "xterm.js Console",
> -                  "noVNC Console", // xterm.js doesn't work that well on mobile
> +                  "noVNC Console",
>                     style: TextStyle(fontWeight: FontWeight.bold),
>                   ),
>                   subtitle: const Text("Open console view"),
> -                onTap: () async {
> -                  if (Platform.isAndroid) {
> -                    if (['qemu', 'lxc'].contains(type)) {
> -                      SystemChrome.setEnabledSystemUIMode(
> -                          SystemUiMode.immersive);
> -                      Navigator.of(context)
> -                          .push(_createHTMLConsoleRoute())
> -                          .then((completion) {
> -                        SystemChrome.setEnabledSystemUIMode(
> -                            SystemUiMode.edgeToEdge,
> -                            overlays: [
> -                              SystemUiOverlay.top,
> -                              SystemUiOverlay.bottom
> -                            ]);
> -                      });
> -                    } else if (type == 'node') {
> -                      SystemChrome.setEnabledSystemUIMode(
> -                          SystemUiMode.immersive);
> -                      Navigator.of(context)
> -                          .push(_createHTMLConsoleRoute())
> -                          .then((completion) {
> -                        SystemChrome.setEnabledSystemUIMode(
> -                            SystemUiMode.edgeToEdge,
> -                            overlays: [
> -                              SystemUiOverlay.top,
> -                              SystemUiOverlay.bottom
> -                            ]);
> -                      });
> -                    }
> -                  } else {
> -                    print('not implemented for current platform');
> +                onTap: () {
> +                  if (['qemu', 'lxc'].contains(type) || type == 'node') {
> +                    _openNoVncConsole(context);
>                     }
>                   },
>                 ),
> @@ -145,6 +119,18 @@ class PveConsoleMenu extends StatelessWidget {
>       );
>     }
>   
> +  Future<void> _openNoVncConsole(BuildContext context) async {
> +    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
> +    await Navigator.push(context, _createHTMLConsoleRoute());
> +    SystemChrome.setEnabledSystemUIMode(
> +      SystemUiMode.edgeToEdge,
> +      overlays: [
> +        SystemUiOverlay.top,
> +        SystemUiOverlay.bottom,
> +      ],
> +    );
> +  }
> +
>     void showTextDialog(BuildContext context, String title, String content) {
>       showDialog(
>         context: context,
> @@ -226,74 +212,80 @@ class PVEWebConsoleState extends State<PVEWebConsole> {
>       WidgetsFlutterBinding.ensureInitialized();
>   
>       return FutureBuilder(
> -        future: CookieManager.instance().setCookie(
> -          url: WebUri(consoleUrl),
> -          name: 'PVEAuthCookie',
> -          value: ticket,
> -        ),
> -        builder: (context, snapshot) {
> -          return SafeArea(
> -            child: InAppWebView(
> -              onReceivedServerTrustAuthRequest: (controller, challenge) async {
> -                final cert = challenge.protectionSpace.sslCertificate;
> -                final certBytes = cert?.x509Certificate?.encoded;
> -                final sslError = challenge.protectionSpace.sslError?.message;
> +      future: CookieManager.instance().setCookie(
> +        url: WebUri(consoleUrl),
> +        name: 'PVEAuthCookie',
> +        value: ticket,
> +      ),
> +      builder: (context, snapshot) {
> +        return Scaffold(
> +          resizeToAvoidBottomInset: false,
> +          appBar: AppBar(),
> +          body: InAppWebView(
> +            onReceivedServerTrustAuthRequest: (controller, challenge) async {
> +              final cert = challenge.protectionSpace.sslCertificate;
> +              final certBytes = cert?.x509Certificate?.encoded;
> +              final sslError = challenge.protectionSpace.sslError?.message;
>   
> -                String? issuedTo = cert?.issuedTo?.CName.toString();
> -                String? hash = certBytes != null
> -                    ? sha256.convert(certBytes).toString()
> -                    : null;
> +              String? issuedTo = cert?.issuedTo?.CName.toString();
> +              String? hash = certBytes != null
> +                  ? sha256.convert(certBytes).toString()
> +                  : null;
>   
> -                final settings =
> -                    await ProxmoxGeneralSettingsModel.fromLocalStorage();
> +              final settings =
> +                  await ProxmoxGeneralSettingsModel.fromLocalStorage();
>   
> -                bool trust = false;
> -                if (hash != null && settings.trustedFingerprints != null) {
> -                  trust = settings.trustedFingerprints!.contains(hash);
> -                }
> +              bool trust = false;
> +              if (hash != null && settings.trustedFingerprints != null) {
> +                trust = settings.trustedFingerprints!.contains(hash);
> +              }
>   
> -                if (!trust) {
> -                  // format hash to '01:23:...' format
> -                  String? formattedHash = hash?.toUpperCase().replaceAllMapped(
> -                      RegExp(r"[a-zA-Z0-9]{2}"),
> -                      (match) => "${match.group(0)}:");
> -                  formattedHash = formattedHash?.substring(
> -                      0, formattedHash.length - 1); // remove last ':'
> +              if (!trust) {
> +                // format hash to '01:23:...' format
> +                String? formattedHash = hash?.toUpperCase().replaceAllMapped(
> +                    RegExp(r"[a-zA-Z0-9]{2}"), (match) => "${match.group(0)}:");
> +                formattedHash = formattedHash?.substring(
> +                    0, formattedHash.length - 1); // remove last ':'
>   
> -                  if (context.mounted) {
> -                    trust = await showTLSWarning(
> -                        context,
> -                        sslError ?? 'An unknown TLS error has occurred',
> -                        issuedTo ?? 'unknown',
> -                        formattedHash ?? 'unknown');
> -                  }
> +                if (context.mounted) {
> +                  trust = await showTLSWarning(
> +                      context,
> +                      sslError ?? 'An unknown TLS error has occurred',
> +                      issuedTo ?? 'unknown',
> +                      formattedHash ?? 'unknown');
>                   }
> +              }
>   
> -                // save Fingerprint
> -                if (trust && hash != null) {
> -                  await settings
> -                      .rebuild((b) => b..trustedFingerprints.add(hash))
> -                      .toLocalStorage();
> -                  print(settings.toJson());
> -                }
> +              // save Fingerprint
> +              if (trust && hash != null) {
> +                await settings
> +                    .rebuild((b) => b..trustedFingerprints.add(hash))
> +                    .toLocalStorage();
> +                print(settings.toJson());
> +              }
>   
> -                final action = trust
> -                    ? ServerTrustAuthResponseAction.PROCEED
> -                    : ServerTrustAuthResponseAction.CANCEL;
> -                return ServerTrustAuthResponse(action: action);
> -              },
> -              onWebViewCreated: (controller) {
> -                webViewController = controller;
> -                controller.loadUrl(
> -                    urlRequest: URLRequest(url: WebUri(consoleUrl)));
> -              },
> -            ),
> -          );
> -        });
> +              final action = trust
> +                  ? ServerTrustAuthResponseAction.PROCEED
> +                  : ServerTrustAuthResponseAction.CANCEL;
> +              return ServerTrustAuthResponse(action: action);
> +            },
> +            onWebViewCreated: (controller) {
> +              webViewController = controller;
> +              controller.loadUrl(
> +                  urlRequest: URLRequest(url: WebUri(consoleUrl)));
> +            },
> +          ),
> +        );
> +      },
> +    );
>     }
>   
> -  Future<bool> showTLSWarning(BuildContext context, String sslError,
> -      String issuedTo, String hash) async {
> +  Future<bool> showTLSWarning(
> +    BuildContext context,
> +    String sslError,
> +    String issuedTo,
> +    String hash,
> +  ) async {
>       return await showDialog(
>           context: context,
>           barrierDismissible: false,



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

Re: [pve-devel] [PATCH pve_flutter_frontend v3] ui: enable noVNC console on iOS

[Shan Shaji]

Thank you so much for the review. I am using the samne versions 
flutter 3.29 and dart 3.7.2. I will create another patch without 
the formating changes to better identify the changes. 

After the patch is applied i can send another patch by runnning
the `dart format .` command on master. 

On Wed Aug 13, 2025 at 3:36 PM CEST, Dominik Csapak wrote:
>
>
> On 8/13/25 10:29, Shan Shaji wrote:
> > The noVNC console was disabled in iOS and was only available in
> > android.
> > 
> > To fix the issue enabled the noVNC console view on iOS devices. The
> > changes also includes a refactor of the function responsible for
> > displaying the webview. Additionally, an `AppBar` has been added
> > to the console view on to allow users to easily close the view. To
> > avoid the body of the Scaffold to resize when the keyboard pops up set
> > `resizeToAvoidBottomInset` [0] to `false`
> > 
> > The `dart format` command was also ran in the file to fix the file
> > formatting.
>
> is it possible to send dart format patches upfront and as a seperate patch?
>
> that way one can see the actual changes much more easily.
>
> also which version of dart/flutter do you use?
> when i do `dart format` on that file here on current master,
> it does not change the formatting at all
> (but i'm still on flutter 3.29 with dart sdk on 3.7.2)
>


_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

Re: [pve-devel] [PATCH pve_flutter_frontend v3] ui: enable noVNC console on iOS

[Shan Shaji]

Superseded by v4: https://lore.proxmox.com/pve-devel/20250814093219.75803-1-s.shaji@proxmox.com/T/#u

On Thu Aug 14, 2025 at 9:54 AM CEST, Shan Shaji wrote:
> Thank you so much for the review. I am using the samne versions 
> flutter 3.29 and dart 3.7.2. I will create another patch without 
> the formating changes to better identify the changes. 
>
> After the patch is applied i can send another patch by runnning
> the `dart format .` command on master. 
>
> On Wed Aug 13, 2025 at 3:36 PM CEST, Dominik Csapak wrote:
> > is it possible to send dart format patches upfront and as a seperate patch?
> >
> > that way one can see the actual changes much more easily.
> >
> > also which version of dart/flutter do you use?
> > when i do `dart format` on that file here on current master,
> > it does not change the formatting at all
> > (but i'm still on flutter 3.29 with dart sdk on 3.7.2)
> >



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel