[pve-devel] [PATCH proxmox_login_manager v2 1/4] fix: ui: disable continue button by default in login form

[Shan Shaji]

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 at 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