[PATCH login-manager v3 3/5] refactor: ui: split password form into its own widget

[Azharul Haque <haque@azharul.com>]

Group the username field together with the password field below the
realm selector (it previously sat above it), and extract the credential
fields -- username, password and the save-password checkbox -- into a
private _ProxmoxPasswordForm widget. No functional change.

This prepares for OpenID Connect realm support in the following commit:
an OpenID realm has no username/password to enter in the app, so the
credential fields need to be shown or replaced as one unit depending on
the selected realm's type.

Suggested-by: Shan Shaji <s.shaji@proxmox.com>
Signed-off-by: Azharul Haque <haque@azharul.com>
---
 lib/proxmox_login_form.dart | 169 ++++++++++++++++++++++--------------
 1 file changed, 105 insertions(+), 64 deletions(-)

diff --git a/lib/proxmox_login_form.dart b/lib/proxmox_login_form.dart
index 6039407..8d8f2da 100644
--- a/lib/proxmox_login_form.dart
+++ b/lib/proxmox_login_form.dart
@@ -63,10 +63,6 @@ class ProxmoxLoginForm extends StatefulWidget {
 }
 
 class _ProxmoxLoginFormState extends State<ProxmoxLoginForm> {
-  bool _obscure = true;
-  bool? _savePwCheckbox;
-  FocusNode? passwordFocusNode;
-
   @override
   Widget build(BuildContext context) {
     if (widget.accessDomains == null) {
@@ -97,20 +93,6 @@ class _ProxmoxLoginFormState extends State<ProxmoxLoginForm> {
             controller: widget.originController,
             enabled: false,
           ),
-          TextFormField(
-            decoration: const InputDecoration(
-              icon: Icon(Icons.person),
-              labelText: 'Username',
-            ),
-            controller: widget.usernameController,
-            validator: (value) {
-              if (value!.isEmpty) {
-                return 'Please enter username';
-              }
-              return null;
-            },
-            autofillHints: const [AutofillHints.username],
-          ),
           DropdownButtonFormField(
             decoration: const InputDecoration(icon: Icon(Icons.domain)),
             items: widget.accessDomains!
@@ -127,56 +109,115 @@ class _ProxmoxLoginFormState extends State<ProxmoxLoginForm> {
                 widget.accessDomains!.map((e) => Text(e!.realm)).toList(),
             initialValue: widget.selectedDomain,
           ),
-          Stack(
-            children: [
-              TextFormField(
-                decoration: const InputDecoration(
-                  icon: Icon(Icons.lock),
-                  labelText: 'Password',
-                ),
-                controller: widget.passwordController,
-                obscureText: _obscure,
-                autocorrect: false,
-                focusNode: passwordFocusNode,
-                validator: (value) {
-                  if (value!.isEmpty) {
-                    return 'Please enter password';
-                  }
-                  return null;
-                },
-                onFieldSubmitted: (value) => widget.onPasswordSubmitted!(),
-                autofillHints: const [AutofillHints.password],
-              ),
-              Align(
-                alignment: Alignment.bottomRight,
-                child: IconButton(
-                  constraints: BoxConstraints.tight(const Size(58, 58)),
-                  iconSize: 24,
-                  tooltip: _obscure ? "Show password" : "Hide password",
-                  icon:
-                      Icon(_obscure ? Icons.visibility : Icons.visibility_off),
-                  onPressed: () => setState(() {
-                    _obscure = !_obscure;
-                  }),
-                ),
-              )
-            ],
+          _ProxmoxPasswordForm(
+            usernameController: widget.usernameController,
+            passwordController: widget.passwordController,
+            onPasswordSubmitted: widget.onPasswordSubmitted,
+            onSavePasswordChanged: widget.onSavePasswordChanged,
+            canSavePassword: widget.canSavePassword,
+            passwordSaved: widget.passwordSaved,
           ),
-          if (widget.canSavePassword ?? false)
-            CheckboxListTile(
-              title: const Text('Save password in biometric storage'),
-              value: _savePwCheckbox ?? widget.passwordSaved ?? false,
-              onChanged: (value) {
-                if (widget.onSavePasswordChanged != null) {
-                  widget.onSavePasswordChanged!(value!);
+        ],
+      ),
+    );
+  }
+}
+
+/// Username/password credential fields of the login form, including the
+/// optional "save password" checkbox.
+class _ProxmoxPasswordForm extends StatefulWidget {
+  final TextEditingController usernameController;
+  final TextEditingController passwordController;
+  final Function? onPasswordSubmitted;
+  final Function? onSavePasswordChanged;
+  final bool? canSavePassword;
+  final bool? passwordSaved;
+
+  const _ProxmoxPasswordForm({
+    required this.usernameController,
+    required this.passwordController,
+    this.onPasswordSubmitted,
+    this.onSavePasswordChanged,
+    this.canSavePassword,
+    this.passwordSaved,
+  });
+
+  @override
+  State<_ProxmoxPasswordForm> createState() => _ProxmoxPasswordFormState();
+}
+
+class _ProxmoxPasswordFormState extends State<_ProxmoxPasswordForm> {
+  bool _obscure = true;
+  bool? _savePwCheckbox;
+  FocusNode? passwordFocusNode;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        TextFormField(
+          decoration: const InputDecoration(
+            icon: Icon(Icons.person),
+            labelText: 'Username',
+          ),
+          controller: widget.usernameController,
+          validator: (value) {
+            if (value!.isEmpty) {
+              return 'Please enter username';
+            }
+            return null;
+          },
+          autofillHints: const [AutofillHints.username],
+        ),
+        Stack(
+          children: [
+            TextFormField(
+              decoration: const InputDecoration(
+                icon: Icon(Icons.lock),
+                labelText: 'Password',
+              ),
+              controller: widget.passwordController,
+              obscureText: _obscure,
+              autocorrect: false,
+              focusNode: passwordFocusNode,
+              validator: (value) {
+                if (value!.isEmpty) {
+                  return 'Please enter password';
                 }
-                setState(() {
-                  _savePwCheckbox = value!;
-                });
+                return null;
               },
+              onFieldSubmitted: (value) => widget.onPasswordSubmitted!(),
+              autofillHints: const [AutofillHints.password],
+            ),
+            Align(
+              alignment: Alignment.bottomRight,
+              child: IconButton(
+                constraints: BoxConstraints.tight(const Size(58, 58)),
+                iconSize: 24,
+                tooltip: _obscure ? "Show password" : "Hide password",
+                icon: Icon(_obscure ? Icons.visibility : Icons.visibility_off),
+                onPressed: () => setState(() {
+                  _obscure = !_obscure;
+                }),
+              ),
             )
-        ],
-      ),
+          ],
+        ),
+        if (widget.canSavePassword ?? false)
+          CheckboxListTile(
+            title: const Text('Save password in biometric storage'),
+            value: _savePwCheckbox ?? widget.passwordSaved ?? false,
+            onChanged: (value) {
+              if (widget.onSavePasswordChanged != null) {
+                widget.onSavePasswordChanged!(value!);
+              }
+              setState(() {
+                _savePwCheckbox = value!;
+              });
+            },
+          )
+      ],
     );
   }
 
-- 
2.50.1 (Apple Git-155)