* [pve-devel] [PATCH proxmox_login_manager v2 0/4] fix #6983: ui: make cosmetic changes inside the login screen
@ 2025-11-11 14:00 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
` (4 more replies)
0 siblings, 5 replies; 6+ messages in thread
From: Shan Shaji @ 2025-11-11 14:00 UTC (permalink / raw)
To: pve-devel
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.
History
=======
changes since v1:
- The Continue button was disabled even though the Origin field had a
value. In v1, I disabled the button by default so that it would only be
enabled after successful form validation. However, when saved
credentials already exist and tried to log in with those credentials
(with the SSL toggle not disabled), the Origin field UI is displayed on
the login screen. Since the button was disabled by default even though the
Origin field contained value, i had to edit the field to enable the button
again. To fix this, the button will be enabled if the origin value is not empty.
- In v1, the overlay loading indicator was hiding the Close button,
making it impossible to close the loading animation. To fix this, the
Close button is now stacked above the overlay loading indicator.
Shan Shaji (4):
fix: ui: disable continue button by default in login form
fix: ui: add more padding around the form in portrait mode
fix: ui: remove app bar and stack the close button on body
cleanup: run dart format command to fix formatting
lib/proxmox_login_form.dart | 80 ++++++++++++++++++++-----------------
1 file changed, 43 insertions(+), 37 deletions(-)
--
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 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
end of thread, other threads:[~2025-11-12 9:21 UTC | newest]
Thread overview: 6+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
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 ` [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 ` [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
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox