fix: override text field's default error styling to remove gap but still show error outline on username field (#1726)

lib/pages/login/login.dart

@@ -208,7 +208,7 @@ class LoginController extends State<Login> {
       // setState(() => passwordError = exception.errorMessage);
       setState(() {
         passwordError = exception.errorMessage;
-        usernameError = "";
+        usernameError = exception.errorMessage;
       });
       // Pangea#
       return setState(() => loadingSignIn = false);
@@ -217,7 +217,7 @@ class LoginController extends State<Login> {
       // setState(() => passwordError = exception.toString());
       setState(() {
         passwordError = exception.toString();
-        usernameError = "";
+        usernameError = exception.toString();
       });
       // Pangea#
       return setState(() => loadingSignIn = false);

lib/pangea/login/pages/pangea_login_view.dart

@@ -30,6 +30,8 @@ class PangeaLoginView extends StatelessWidget {
             },
             controller: controller.usernameController,
             errorText: controller.usernameError,
+            showErrorText: controller.usernameError != null &&
+                controller.passwordError == null,
           ),
           FullWidthTextField(
             hintText: L10n.of(context).password,

lib/pangea/login/widgets/full_width_button.dart

@@ -118,8 +118,10 @@ class FullWidthTextField extends StatelessWidget {
   final TextInputType? keyboardType;
   final String? Function(String?)? validator;
   final TextEditingController? controller;
+  final bool? showErrorText;
   final String? errorText;
   final Function(String)? onSubmitted;
+  final InputDecoration? decoration;
 
   const FullWidthTextField({
     required this.hintText,
@@ -130,12 +132,16 @@ class FullWidthTextField extends StatelessWidget {
     this.validator,
     this.controller,
     this.errorText,
+    this.showErrorText,
     this.onSubmitted,
+    this.decoration,
     super.key,
   });
 
   @override
   Widget build(BuildContext context) {
+    final bool shouldShowError = showErrorText ?? errorText != null;
+
     return Padding(
       padding: const EdgeInsets.all(6.0),
       child: TextFormField(
@@ -148,8 +154,24 @@ class FullWidthTextField extends StatelessWidget {
           border: OutlineInputBorder(
             borderRadius: BorderRadius.circular(36.0),
           ),
+          enabledBorder: errorText != null
+              ? OutlineInputBorder(
+                  borderRadius: BorderRadius.circular(36.0),
+                  borderSide:
+                      BorderSide(color: Theme.of(context).colorScheme.error),
+                )
+              : null,
+          focusedBorder: errorText != null
+              ? OutlineInputBorder(
+                  borderRadius: BorderRadius.circular(36.0),
+                  borderSide: BorderSide(
+                    color: Theme.of(context).colorScheme.error,
+                    width: 2,
+                  ),
+                )
+              : null,
           contentPadding: const EdgeInsets.symmetric(horizontal: 30),
-          errorText: errorText,
+          errorText: shouldShowError ? errorText : null,
         ),
         validator: validator,
         onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),