From: Shan Shaji <s.shaji@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] [PATCH pve_flutter_frontend v2] ui: enable noVNC console on iOS
Date: Tue, 12 Aug 2025 10:50:50 +0200 [thread overview]
Message-ID: <20250812085050.73887-1-s.shaji@proxmox.com> (raw)
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 to allow users to easily close the view.
The `dart format` command was also ran in the file to fix the file
formatting.
Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
changes since v1:
- Udpated the commit message.
- Rebased with master.
| 175 +++++++++++------------
1 file changed, 83 insertions(+), 92 deletions(-)
--git a/lib/widgets/pve_console_menu_widget.dart b/lib/widgets/pve_console_menu_widget.dart
index 473595d..281cad1 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,79 @@ 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(
+ 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
reply other threads:[~2025-08-12 8:49 UTC|newest]
Thread overview: [no followups] expand[flat|nested] mbox.gz Atom feed
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20250812085050.73887-1-s.shaji@proxmox.com \
--to=s.shaji@proxmox.com \
--cc=pve-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.