* [pve-devel] [PATCH proxmox_login_manager 0/4] fix #6983: ui: make cosmetic changes inside the login screen
@ 2025-11-04 17:38 Shan Shaji
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 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-04 17:38 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.
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 | 280 ++++++++++++++++++------------------
1 file changed, 141 insertions(+), 139 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 1/4] fix: ui: disable continue button by default in login form
2025-11-04 17:38 [pve-devel] [PATCH proxmox_login_manager 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
@ 2025-11-04 17:38 ` Shan Shaji
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 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-04 17:38 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. Also fixed a typo in the boolean
variable.
Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
lib/proxmox_login_form.dart | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/lib/proxmox_login_form.dart b/lib/proxmox_login_form.dart
index 030e546..9e95f27 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;
@@ -330,7 +330,7 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
key: _formKey,
onChanged: () {
setState(() {
- _submittButtonEnabled =
+ _submitButtonEnabled =
_formKey.currentState!.validate();
});
},
@@ -381,7 +381,7 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
final isValid =
_formKey.currentState!.validate();
setState(() {
- _submittButtonEnabled = isValid;
+ _submitButtonEnabled = isValid;
});
if (isValid) {
setState(() {
@@ -389,12 +389,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 +408,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 2/4] fix: ui: add more padding around the form in portrait mode
2025-11-04 17:38 [pve-devel] [PATCH proxmox_login_manager 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 1/4] fix: ui: disable continue button by default in login form Shan Shaji
@ 2025-11-04 17:38 ` Shan Shaji
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 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-04 17:38 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 9e95f27..c3781db 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,
@@ -322,7 +323,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 3/4] fix: ui: remove app bar and stack the close button on body
2025-11-04 17:38 [pve-devel] [PATCH proxmox_login_manager 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 1/4] fix: ui: disable continue button by default in login form Shan Shaji
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 2/4] fix: ui: add more padding around the form in portrait mode Shan Shaji
@ 2025-11-04 17:38 ` Shan Shaji
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 4/4] cleanup: run dart format command to fix formatting Shan Shaji
2025-11-11 14:05 ` [pve-devel] [PATCH proxmox_login_manager 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
4 siblings, 0 replies; 6+ messages in thread
From: Shan Shaji @ 2025-11-04 17:38 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>
---
lib/proxmox_login_form.dart | 43 ++++++++++++++++---------------------
1 file changed, 19 insertions(+), 24 deletions(-)
diff --git a/lib/proxmox_login_form.dart b/lib/proxmox_login_form.dart
index c3781db..30f2ef8 100644
--- a/lib/proxmox_login_form.dart
+++ b/lib/proxmox_login_form.dart
@@ -305,24 +305,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(
+ body: SafeArea(
+ child: Stack(
children: [
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
@@ -344,15 +337,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,
@@ -447,12 +438,16 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
),
),
),
+ IconButton(
+ icon: const Icon(Icons.close),
+ tooltip: "Close",
+ onPressed: () => Navigator.of(context).pop(),
),
if (_progressModel.inProgress > 0)
ProxmoxProgressOverlay(message: _progressModel.message),
],
),
- ),
+ )),
);
}
--
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 4/4] cleanup: run dart format command to fix formatting
2025-11-04 17:38 [pve-devel] [PATCH proxmox_login_manager 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
` (2 preceding siblings ...)
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 3/4] fix: ui: remove app bar and stack the close button on body Shan Shaji
@ 2025-11-04 17:38 ` Shan Shaji
2025-11-11 14:05 ` [pve-devel] [PATCH proxmox_login_manager 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
4 siblings, 0 replies; 6+ messages in thread
From: Shan Shaji @ 2025-11-04 17:38 UTC (permalink / raw)
To: pve-devel
Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
lib/proxmox_login_form.dart | 255 ++++++++++++++++++------------------
1 file changed, 128 insertions(+), 127 deletions(-)
diff --git a/lib/proxmox_login_form.dart b/lib/proxmox_login_form.dart
index 30f2ef8..67febab 100644
--- a/lib/proxmox_login_form.dart
+++ b/lib/proxmox_login_form.dart
@@ -304,150 +304,151 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
),
),
child: Scaffold(
- backgroundColor: ProxmoxColors.supportBlue,
- body: SafeArea(
- child: Stack(
- children: [
- SingleChildScrollView(
- 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
- ? 12
- : 8,
+ backgroundColor: ProxmoxColors.supportBlue,
+ body: SafeArea(
+ child: Stack(
+ children: [
+ SingleChildScrollView(
+ child: ConstrainedBox(
+ constraints: BoxConstraints.tightFor(
+ height: MediaQuery.sizeOf(context).height -
+ MediaQuery.viewPaddingOf(context).bottom -
+ MediaQuery.viewPaddingOf(context).top,
),
- child: FutureBuilder<List<PveAccessDomainModel?>?>(
- future: _accessDomains,
- builder: (context, snapshot) {
- return Form(
- key: _formKey,
- onChanged: () {
- setState(() {
- _submitButtonEnabled =
- _formKey.currentState!.validate();
- });
- },
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Expanded(
- child: Align(
+ child: Padding(
+ padding: EdgeInsets.symmetric(
+ horizontal: MediaQuery.maybeOrientationOf(context) ==
+ Orientation.portrait
+ ? 12
+ : 8,
+ ),
+ child: FutureBuilder<List<PveAccessDomainModel?>?>(
+ future: _accessDomains,
+ builder: (context, snapshot) {
+ return Form(
+ key: _formKey,
+ onChanged: () {
+ setState(() {
+ _submitButtonEnabled =
+ _formKey.currentState!.validate();
+ });
+ },
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Expanded(
+ child: Align(
alignment: Alignment.center,
child: Image.asset(
'assets/images/proxmox_logo_symbol_wordmark.png',
package: 'proxmox_login_manager',
),
- )
- ),
- ProxmoxLoginForm(
- originController: _originController,
- originValidator: (value) {
- if (value == null || value.isEmpty) {
- return 'Please enter origin';
- }
- try {
- normalizeUrl(value);
- return null;
- } on FormatException catch (_) {
- return 'Invalid URI';
- } on Exception catch (e) {
- return 'Invalid URI: $e';
- }
- },
- usernameController: _usernameController,
- passwordController: _passwordController,
- accessDomains: snapshot.data,
- selectedDomain: _selectedDomain,
- onSavePasswordChanged: (value) {
- _savePasswordCB = value;
- },
- canSavePassword: _canSavePassword,
- passwordSaved: widget.password != null,
- onDomainChanged: (value) {
- setState(() {
- _selectedDomain = value;
- });
- },
- onOriginSubmitted: () {
- final isValid =
- _formKey.currentState!.validate();
- setState(() {
- _submitButtonEnabled = isValid;
- });
- if (isValid) {
+ )),
+ ProxmoxLoginForm(
+ originController: _originController,
+ originValidator: (value) {
+ if (value == null || value.isEmpty) {
+ return 'Please enter origin';
+ }
+ try {
+ normalizeUrl(value);
+ return null;
+ } on FormatException catch (_) {
+ return 'Invalid URI';
+ } on Exception catch (e) {
+ return 'Invalid URI: $e';
+ }
+ },
+ usernameController: _usernameController,
+ passwordController: _passwordController,
+ accessDomains: snapshot.data,
+ selectedDomain: _selectedDomain,
+ onSavePasswordChanged: (value) {
+ _savePasswordCB = value;
+ },
+ canSavePassword: _canSavePassword,
+ passwordSaved: widget.password != null,
+ onDomainChanged: (value) {
setState(() {
- _accessDomains = _getAccessDomains();
+ _selectedDomain = value;
});
- }
- },
- onPasswordSubmitted: _submitButtonEnabled
- ? () {
- final isValid =
- _formKey.currentState!.validate();
- setState(() {
- _submitButtonEnabled = isValid;
- });
- if (isValid) {
- _onLoginButtonPressed();
+ },
+ onOriginSubmitted: () {
+ final isValid =
+ _formKey.currentState!.validate();
+ setState(() {
+ _submitButtonEnabled = isValid;
+ });
+ if (isValid) {
+ setState(() {
+ _accessDomains = _getAccessDomains();
+ });
+ }
+ },
+ onPasswordSubmitted: _submitButtonEnabled
+ ? () {
+ final isValid = _formKey
+ .currentState!
+ .validate();
+ setState(() {
+ _submitButtonEnabled = isValid;
+ });
+ if (isValid) {
+ _onLoginButtonPressed();
+ }
}
- }
- : null,
- ),
- Expanded(
- child: Align(
- alignment: Alignment.bottomCenter,
- child: SizedBox(
- width: MediaQuery.of(context).size.width,
- child: TextButton(
- onPressed: _submitButtonEnabled
- ? () {
- final isValid = _formKey
- .currentState!
- .validate();
- setState(() {
- _submitButtonEnabled =
- isValid;
- });
- if (isValid) {
- if (snapshot.hasData) {
- _onLoginButtonPressed();
- } else {
- setState(() {
- _accessDomains =
- _getAccessDomains();
- });
+ : null,
+ ),
+ Expanded(
+ child: Align(
+ alignment: Alignment.bottomCenter,
+ child: SizedBox(
+ width:
+ MediaQuery.of(context).size.width,
+ child: TextButton(
+ onPressed: _submitButtonEnabled
+ ? () {
+ final isValid = _formKey
+ .currentState!
+ .validate();
+ setState(() {
+ _submitButtonEnabled =
+ isValid;
+ });
+ if (isValid) {
+ if (snapshot.hasData) {
+ _onLoginButtonPressed();
+ } else {
+ setState(() {
+ _accessDomains =
+ _getAccessDomains();
+ });
+ }
}
}
- }
- : null,
- child: const Text('Continue'),
+ : null,
+ child: const Text('Continue'),
+ ),
),
),
),
- ),
- ],
- ),
- );
- }),
+ ],
+ ),
+ );
+ }),
+ ),
),
),
- ),
- IconButton(
- icon: const Icon(Icons.close),
- tooltip: "Close",
- onPressed: () => Navigator.of(context).pop(),
+ IconButton(
+ icon: const Icon(Icons.close),
+ tooltip: "Close",
+ onPressed: () => Navigator.of(context).pop(),
+ ),
+ if (_progressModel.inProgress > 0)
+ ProxmoxProgressOverlay(message: _progressModel.message),
+ ],
),
- if (_progressModel.inProgress > 0)
- ProxmoxProgressOverlay(message: _progressModel.message),
- ],
- ),
- )),
+ )),
);
}
--
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
* Re: [pve-devel] [PATCH proxmox_login_manager 0/4] fix #6983: ui: make cosmetic changes inside the login screen
2025-11-04 17:38 [pve-devel] [PATCH proxmox_login_manager 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
` (3 preceding siblings ...)
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 4/4] cleanup: run dart format command to fix formatting Shan Shaji
@ 2025-11-11 14:05 ` Shan Shaji
4 siblings, 0 replies; 6+ messages in thread
From: Shan Shaji @ 2025-11-11 14:05 UTC (permalink / raw)
To: Shan Shaji, pve-devel
Superseded by v2: https://lore.proxmox.com/pve-devel/20251111140005.41510-1-s.shaji@proxmox.com/T/#t
_______________________________________________
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-11 14:04 UTC | newest]
Thread overview: 6+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2025-11-04 17:38 [pve-devel] [PATCH proxmox_login_manager 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 1/4] fix: ui: disable continue button by default in login form Shan Shaji
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 2/4] fix: ui: add more padding around the form in portrait mode Shan Shaji
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 3/4] fix: ui: remove app bar and stack the close button on body Shan Shaji
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 4/4] cleanup: run dart format command to fix formatting Shan Shaji
2025-11-11 14:05 ` [pve-devel] [PATCH proxmox_login_manager 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
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.