make login page use a Form

lib/pages/login_page.dart

@@ -17,11 +17,14 @@ class LoginPage extends HookConsumerWidget {
     final password = useTextEditingController();
 
     final inputError = useState<String?>(null);
+    final formKey = useRef(GlobalKey<FormState>());
 
     Future<void> tryLogin() async {
       isLoading.value = true;
 
       try {
+        if (formKey.value.currentState?.validate() != true) return;
+
         final error = await client.login(
           .new(
             username: username.text,
@@ -41,6 +44,9 @@ class LoginPage extends HookConsumerWidget {
       }
     }
 
+    String? requiredValidator(String? value) =>
+        value == null || value.isEmpty ? "This field is required" : null;
+
     return Scaffold(
       appBar: Appbar(
         leading: IconButton(
@@ -50,30 +56,35 @@ class LoginPage extends HookConsumerWidget {
       ),
       body: AlertDialog(
         title: Text("Login to ${homeserver.host}"),
-        content: Column(
+        content: Form(
-          mainAxisSize: .min,
+          key: formKey.value,
-          crossAxisAlignment: .start,
+          child: Column(
-          children: [
+            mainAxisSize: .min,
-            TextField(
+            crossAxisAlignment: .start,
-              autofocus: true,
+            children: [
-              textInputAction: .next,
+              TextFormField(
-              decoration: .new(label: Text("Username")),
+                autofocus: true,
-              controller: username,
+                textInputAction: .next,
-            ),
+                autovalidateMode: AutovalidateMode.onUserInteraction,
-            SizedBox(height: 12),
+                validator: requiredValidator,
-            TextField(
+                decoration: .new(label: Text("Username")),
-              textInputAction: .done,
+                controller: username,
-              onSubmitted: (_) => tryLogin(),
-              selectAllOnFocus: true,
-              decoration: .new(
-                label: Text("Password"),
-                errorText: inputError.value,
-                errorMaxLines: 5,
               ),
-              controller: password,
+              SizedBox(height: 12),
-              obscureText: true,
+              TextFormField(
-            ),
+                textInputAction: .done,
-          ],
+                decoration: .new(
+                  label: Text("Password"),
+                  errorText: inputError.value,
+                  errorMaxLines: 5,
+                ),
+                autovalidateMode: AutovalidateMode.onUserInteraction,
+                validator: requiredValidator,
+                controller: password,
+                obscureText: true,
+              ),
+            ],
+          ),
         ),
         actions: [
           TextButton(