* [pve-devel] [PATCH proxmox_login_manager v2 1/4] fix: ui: disable continue button by default in login form
2025-11-11 14:00 [pve-devel] [PATCH proxmox_login_manager v2 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
@ 2025-11-11 14:00 ` Shan Shaji
2025-11-11 14:00 ` [pve-devel] [PATCH proxmox_login_manager v2 2/4] fix: ui: add more padding around the form in portrait mode Shan Shaji
` (3 subsequent siblings)
4 siblings, 0 replies; 6+ messages in thread
From: Shan Shaji @ 2025-11-11 14:00 UTC (permalink / raw)
To: pve-devel
When adding a remote the continue button is initially submit-able,
even though the "origin" field is empty. Tapping the button will show
the error and greys out the button.
To improve UX the button will be disabled by default and gets enabled
only if the form validation succeeds unless the already saved origin
value is used. If the value is available then the continue button will
be enabled if the origin value is not empty. Also fixed a typo in the
boolean variable.
Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
changes since v1:
- enable the continue button if the origin value is not empty.
lib/proxmox_login_form.dart | 17 ++++++++++-------
1 file changed, 10 insertions(+), 7 deletions(-)
diff --git a/lib/proxmox_login_form.dart b/lib/proxmox_login_form.dart
index 030e546..e193c57 100644
--- a/lib/proxmox_login_form.dart
+++ b/lib/proxmox_login_form.dart
@@ -211,7 +211,7 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
PveAccessDomainModel? _selectedDomain;
final _formKey = GlobalKey<FormState>();
ProxmoxProgressModel _progressModel = ProxmoxProgressModel();
- bool _submittButtonEnabled = true;
+ bool _submitButtonEnabled = false;
bool _canSavePassword = false;
bool _savePasswordCB = false;
@@ -222,6 +222,8 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
_progressModel = ProxmoxProgressModel();
if (!widget.isCreate! && userModel != null) {
_originController.text = userModel.origin?.toString() ?? '';
+ _submitButtonEnabled = _originController.text.isNotEmpty;
+
// Uri does not append 443 for https, so we do it manually
if (userModel.origin != null &&
userModel.origin!.scheme == "https" &&
@@ -232,6 +234,7 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
_accessDomains = _getAccessDomains();
_usernameController.text = userModel.username!;
_savePasswordCB = widget.password != null;
+
if ((widget.ticket!.isNotEmpty && userModel.activeSession) ||
widget.password != null) {
_onLoginButtonPressed(ticket: widget.ticket!, mRealm: userModel.realm);
@@ -330,7 +333,7 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
key: _formKey,
onChanged: () {
setState(() {
- _submittButtonEnabled =
+ _submitButtonEnabled =
_formKey.currentState!.validate();
});
},
@@ -381,7 +384,7 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
final isValid =
_formKey.currentState!.validate();
setState(() {
- _submittButtonEnabled = isValid;
+ _submitButtonEnabled = isValid;
});
if (isValid) {
setState(() {
@@ -389,12 +392,12 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
});
}
},
- onPasswordSubmitted: _submittButtonEnabled
+ onPasswordSubmitted: _submitButtonEnabled
? () {
final isValid =
_formKey.currentState!.validate();
setState(() {
- _submittButtonEnabled = isValid;
+ _submitButtonEnabled = isValid;
});
if (isValid) {
_onLoginButtonPressed();
@@ -408,13 +411,13 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
child: SizedBox(
width: MediaQuery.of(context).size.width,
child: TextButton(
- onPressed: _submittButtonEnabled
+ onPressed: _submitButtonEnabled
? () {
final isValid = _formKey
.currentState!
.validate();
setState(() {
- _submittButtonEnabled =
+ _submitButtonEnabled =
isValid;
});
if (isValid) {
--
2.50.1
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 6+ messages in thread* [pve-devel] [PATCH proxmox_login_manager v2 2/4] fix: ui: add more padding around the form in portrait mode
2025-11-11 14:00 [pve-devel] [PATCH proxmox_login_manager v2 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
2025-11-11 14:00 ` [pve-devel] [PATCH proxmox_login_manager v2 1/4] fix: ui: disable continue button by default in login form Shan Shaji
@ 2025-11-11 14:00 ` Shan Shaji
2025-11-11 14:00 ` [pve-devel] [PATCH proxmox_login_manager v2 3/4] fix: ui: remove app bar and stack the close button on body Shan Shaji
` (2 subsequent siblings)
4 siblings, 0 replies; 6+ messages in thread
From: Shan Shaji @ 2025-11-11 14:00 UTC (permalink / raw)
To: pve-devel
portrait mode the margins around the "Origin" field are bit tight. To
fix it, if the orientation is portrait set the horizontal padding to
`12` and in landscape it will be `8`.
The helper text was getting truncated after adding the padding. Inorder
to fix that used `Text` widget.
Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
lib/proxmox_login_form.dart | 18 ++++++++++++------
1 file changed, 12 insertions(+), 6 deletions(-)
diff --git a/lib/proxmox_login_form.dart b/lib/proxmox_login_form.dart
index e193c57..8f290b4 100644
--- a/lib/proxmox_login_form.dart
+++ b/lib/proxmox_login_form.dart
@@ -72,11 +72,12 @@ class _ProxmoxLoginFormState extends State<ProxmoxLoginForm> {
if (widget.accessDomains == null) {
return TextFormField(
decoration: const InputDecoration(
- icon: Icon(Icons.vpn_lock),
- labelText: 'Origin',
- hintText: 'e.g. 192.168.1.2',
- helperText:
- 'Protocol (https) and default port (8006 or 443) implied'),
+ icon: Icon(Icons.vpn_lock),
+ labelText: 'Origin',
+ hintText: 'e.g. 192.168.1.2',
+ helper:
+ Text('Protocol (https) and default port (8006 or 443) implied'),
+ ),
textInputAction: TextInputAction.next,
controller: widget.originController,
validator: widget.originValidator,
@@ -325,7 +326,12 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
height: MediaQuery.of(context).size.height),
child: SafeArea(
child: Padding(
- padding: const EdgeInsets.all(8.0),
+ padding: EdgeInsets.symmetric(
+ horizontal: MediaQuery.maybeOrientationOf(context) ==
+ Orientation.portrait
+ ? 12
+ : 8,
+ ),
child: FutureBuilder<List<PveAccessDomainModel?>?>(
future: _accessDomains,
builder: (context, snapshot) {
--
2.50.1
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 6+ messages in thread* [pve-devel] [PATCH proxmox_login_manager v2 3/4] fix: ui: remove app bar and stack the close button on body
2025-11-11 14:00 [pve-devel] [PATCH proxmox_login_manager v2 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
2025-11-11 14:00 ` [pve-devel] [PATCH proxmox_login_manager v2 1/4] fix: ui: disable continue button by default in login form Shan Shaji
2025-11-11 14:00 ` [pve-devel] [PATCH proxmox_login_manager v2 2/4] fix: ui: add more padding around the form in portrait mode Shan Shaji
@ 2025-11-11 14:00 ` Shan Shaji
2025-11-11 14:00 ` [pve-devel] [PATCH proxmox_login_manager v2 4/4] cleanup: run dart format command to fix formatting Shan Shaji
2025-11-12 9:21 ` [pve-devel] applied: [PATCH proxmox_login_manager v2 0/4] fix #6983: ui: make cosmetic changes inside the login screen Dominik Csapak
4 siblings, 0 replies; 6+ messages in thread
From: Shan Shaji @ 2025-11-11 14:00 UTC (permalink / raw)
To: pve-devel
In landscape and portrait mode when adding a remote once the "Origin"
field is selected, the top bar becomes a slightly different shade of
blue. This occurs after the keyboard appears and the entire body
begins to scroll.
To fix this, the app bar was removed and the close button was stacked
within the body. The height was also constrained to avoid system
intrusion areas otherwise, the Continue button would not be visible.
Additionally, in landscape mode, the logo caused render flex issues
because the `Image`` widget was placed inside a `Column` and the logo
was trying to take more height than the available height. This was
fixed by removing the column and used `Align` widget to center the logo.
Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
changes since v1:
- Remove the SafeArea wrapping the stack.
- Wrap the login body and Close button with SafeArea.
- Stack the close button on top of loading overlay or else it would be
impossible to press the close button.
lib/proxmox_login_form.dart | 47 +++++++++++++++++--------------------
1 file changed, 22 insertions(+), 25 deletions(-)
diff --git a/lib/proxmox_login_form.dart b/lib/proxmox_login_form.dart
index 8f290b4..80dc4a2 100644
--- a/lib/proxmox_login_form.dart
+++ b/lib/proxmox_login_form.dart
@@ -308,24 +308,17 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
),
child: Scaffold(
backgroundColor: ProxmoxColors.supportBlue,
- extendBodyBehindAppBar: true,
- appBar: AppBar(
- elevation: 0.0,
- backgroundColor: Colors.transparent,
- leading: IconButton(
- icon: const Icon(Icons.close),
- tooltip: "Close",
- onPressed: () => Navigator.of(context).pop(),
- ),
- ),
body: Stack(
children: [
- SingleChildScrollView(
+ SafeArea(
+ child: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints.tightFor(
- height: MediaQuery.of(context).size.height),
- child: SafeArea(
- child: Padding(
+ height: MediaQuery.sizeOf(context).height -
+ MediaQuery.viewPaddingOf(context).bottom -
+ MediaQuery.viewPaddingOf(context).top,
+ ),
+ child: Padding(
padding: EdgeInsets.symmetric(
horizontal: MediaQuery.maybeOrientationOf(context) ==
Orientation.portrait
@@ -347,15 +340,13 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Image.asset(
- 'assets/images/proxmox_logo_symbol_wordmark.png',
- package: 'proxmox_login_manager',
- ),
- ],
- ),
+ child: Align(
+ alignment: Alignment.center,
+ child: Image.asset(
+ 'assets/images/proxmox_logo_symbol_wordmark.png',
+ package: 'proxmox_login_manager',
+ ),
+ )
),
ProxmoxLoginForm(
originController: _originController,
@@ -449,10 +440,16 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
}),
),
),
- ),
- ),
+ )),
if (_progressModel.inProgress > 0)
ProxmoxProgressOverlay(message: _progressModel.message),
+ SafeArea(
+ child: IconButton(
+ icon: const Icon(Icons.close),
+ tooltip: "Close",
+ onPressed: () => Navigator.of(context).pop(),
+ ),
+ ),
],
),
),
--
2.50.1
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 6+ messages in thread* [pve-devel] [PATCH proxmox_login_manager v2 4/4] cleanup: run dart format command to fix formatting
2025-11-11 14:00 [pve-devel] [PATCH proxmox_login_manager v2 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
` (2 preceding siblings ...)
2025-11-11 14:00 ` [pve-devel] [PATCH proxmox_login_manager v2 3/4] fix: ui: remove app bar and stack the close button on body Shan Shaji
@ 2025-11-11 14:00 ` Shan Shaji
2025-11-12 9:21 ` [pve-devel] applied: [PATCH proxmox_login_manager v2 0/4] fix #6983: ui: make cosmetic changes inside the login screen Dominik Csapak
4 siblings, 0 replies; 6+ messages in thread
From: Shan Shaji @ 2025-11-11 14:00 UTC (permalink / raw)
To: pve-devel
Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
lib/proxmox_login_form.dart | 32 ++++++++++++++++----------------
1 file changed, 16 insertions(+), 16 deletions(-)
diff --git a/lib/proxmox_login_form.dart b/lib/proxmox_login_form.dart
index 80dc4a2..b69636d 100644
--- a/lib/proxmox_login_form.dart
+++ b/lib/proxmox_login_form.dart
@@ -312,13 +312,13 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
children: [
SafeArea(
child: SingleChildScrollView(
- child: ConstrainedBox(
- constraints: BoxConstraints.tightFor(
- height: MediaQuery.sizeOf(context).height -
- MediaQuery.viewPaddingOf(context).bottom -
- MediaQuery.viewPaddingOf(context).top,
- ),
- child: Padding(
+ child: ConstrainedBox(
+ constraints: BoxConstraints.tightFor(
+ height: MediaQuery.sizeOf(context).height -
+ MediaQuery.viewPaddingOf(context).bottom -
+ MediaQuery.viewPaddingOf(context).top,
+ ),
+ child: Padding(
padding: EdgeInsets.symmetric(
horizontal: MediaQuery.maybeOrientationOf(context) ==
Orientation.portrait
@@ -340,14 +340,13 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
- child: Align(
- alignment: Alignment.center,
- child: Image.asset(
- 'assets/images/proxmox_logo_symbol_wordmark.png',
- package: 'proxmox_login_manager',
- ),
- )
- ),
+ child: Align(
+ alignment: Alignment.center,
+ child: Image.asset(
+ 'assets/images/proxmox_logo_symbol_wordmark.png',
+ package: 'proxmox_login_manager',
+ ),
+ )),
ProxmoxLoginForm(
originController: _originController,
originValidator: (value) {
@@ -440,7 +439,8 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
}),
),
),
- )),
+ ),
+ ),
if (_progressModel.inProgress > 0)
ProxmoxProgressOverlay(message: _progressModel.message),
SafeArea(
--
2.50.1
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 6+ messages in thread* [pve-devel] applied: [PATCH proxmox_login_manager v2 0/4] fix #6983: ui: make cosmetic changes inside the login screen
2025-11-11 14:00 [pve-devel] [PATCH proxmox_login_manager v2 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
` (3 preceding siblings ...)
2025-11-11 14:00 ` [pve-devel] [PATCH proxmox_login_manager v2 4/4] cleanup: run dart format command to fix formatting Shan Shaji
@ 2025-11-12 9:21 ` Dominik Csapak
4 siblings, 0 replies; 6+ messages in thread
From: Dominik Csapak @ 2025-11-12 9:21 UTC (permalink / raw)
To: pve-devel, Shan Shaji
On Tue, 11 Nov 2025 15:00:01 +0100, Shan Shaji wrote:
> This patch series fixes the issues recieved as feedback after testing
> the IOS Test Flight build.
>
> - when adding a remote the continue button is initially submit-able, even
> though the "Origin" field is empty. taping continue will shop an error message and
> gray out the button. Fixed the issue by disabling the button by default.
> - In portrait mode the margins around the "Origin" field are bit tight.
> Fixed the issue by adding more padding around the form.
> - In landscape mode when adding a remote once the "Origin" field is
> selected, the top bar becomes a slightly different shade of blue. Fixed
> the issue by removing the app bar and stacked the close button.
>
> [...]
Applied, thanks!
[1/4] fix: ui: disable continue button by default in login form
commit: 58cd68891968431827a4969bdd25c35233b03e8f
[2/4] fix: ui: add more padding around the form in portrait mode
commit: 7a9682a0e4fbefab61a8b660e7793aea1fcc24ae
[3/4] fix: ui: remove app bar and stack the close button on body
commit: 3708583d3d3ff1af46fb32dfff9708c3d3a5d6ec
[4/4] cleanup: run dart format command to fix formatting
commit: 7751b4376b62c088e5d3089e7b7fb60a9c0c49fd
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 6+ messages in thread