TF-783 Show toast message and disable login button when no connection internet

lib/features/base/mixin/network_connection_mixin.dart

@@ -15,11 +15,11 @@ mixin NetworkConnectionMixin {
             color: Colors.white,
             borderRadius: BorderRadius.circular(16)),
         width: 320,
-        margin: const EdgeInsets.only(bottom: 100),
+        margin: const EdgeInsets.only(bottom: 150),
         child: Material(
-            elevation: 8,
+            elevation: 2,
             shape:  const RoundedRectangleBorder(
-              borderRadius: BorderRadius.all(Radius.circular(16.0)),
+              borderRadius: BorderRadius.all(Radius.circular(10.0)),
             ),
             child: ListTile(
                 leading: SvgPicture.asset(_imagePaths.icNotConnection),

lib/features/login/presentation/base_login_view.dart

@@ -3,9 +3,9 @@ import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/views/text/text_builder.dart';
 import 'package:core/presentation/views/text/text_field_builder.dart';
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/base/mixin/network_connection_mixin.dart';
 import 'package:tmail_ui_user/features/login/domain/state/get_oidc_configuration_state.dart';
 import 'package:tmail_ui_user/features/login/domain/state/get_token_oidc_state.dart';
 import 'package:tmail_ui_user/features/login/presentation/login_controller.dart';
@@ -15,7 +15,7 @@ import 'package:tmail_ui_user/features/login/presentation/widgets/login_input_de
 import 'package:tmail_ui_user/features/login/presentation/widgets/login_text_input_builder.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
-abstract class BaseLoginView extends GetWidget<LoginController> {
+abstract class BaseLoginView extends GetWidget<LoginController> with NetworkConnectionMixin {
   BaseLoginView({Key? key}) : super(key: key);
 
   final loginController = Get.find<LoginController>();
@@ -71,22 +71,27 @@ abstract class BaseLoginView extends GetWidget<LoginController> {
     return Container(
         margin:  const EdgeInsets.only(bottom: 16, left: 24, right: 24),
         width: responsiveUtils.getDeviceWidth(context),height: 48,
-        child: ElevatedButton(
+        child: AbsorbPointer(
-            key: const Key('loginSubmitForm'),
+          absorbing: !controller.isNetworkConnectionAvailable(),
-            style: ButtonStyle(
+          child: ElevatedButton(
-                foregroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => Colors.white),
+              key: const Key('loginSubmitForm'),
-                backgroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => AppColor.primaryColor),
+              style: ButtonStyle(
-                shape: MaterialStateProperty.all(RoundedRectangleBorder(
+                  foregroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => Colors.white),
-                    borderRadius: BorderRadius.circular(10),
+                  backgroundColor: MaterialStateProperty.resolveWith<Color>(
-                    side: const BorderSide(width: 0, color: AppColor.primaryColor)
+                      (Set<MaterialState> states) => AppColor.primaryColor.withOpacity(
-                ))
+                          controller.isNetworkConnectionAvailable() ? 1 : 0.5)),
-            ),
+                  shape: MaterialStateProperty.all(RoundedRectangleBorder(
-            child: Text(AppLocalizations.of(context).signIn,
+                      borderRadius: BorderRadius.circular(10),
-                style: const TextStyle(fontSize: 16, color: Colors.white)
+                      side: const BorderSide(width: 0, color: AppColor.primaryColor)
-            ),
+                  ))
-            onPressed: () {
+              ),
-              loginController.handleLoginPressed();
+              child: Text(AppLocalizations.of(context).signIn,
-            }
+                  style: const TextStyle(fontSize: 16, color: Colors.white)
+              ),
+              onPressed: () {
+                loginController.handleLoginPressed();
+              }
+          ),
         )
     );
   }

lib/features/login/presentation/login_view.dart

@@ -18,23 +18,24 @@ class LoginView extends BaseLoginView {
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: AppColor.primaryLightColor,
-      body: GestureDetector(
+      body: Stack(children: [
-        onTap: () => FocusScope.of(context).unfocus(),
+        GestureDetector(
-        child: SafeArea(
+          onTap: () => FocusScope.of(context).unfocus(),
-          child: _supportScrollForm(context)
+          child: SafeArea(
-            ? Stack(
+            child: _supportScrollForm(context)
+                ? Stack(
                 children: [
                   Center(child: SingleChildScrollView(child: _buildCenterForm(context), scrollDirection: Axis.vertical)),
                   Obx(() {
                     if (loginController.loginFormType.value == LoginFormType.credentialForm
-                      || loginController.loginFormType.value == LoginFormType.ssoForm) {
+                        || loginController.loginFormType.value == LoginFormType.ssoForm) {
                       return _buildBackButton(context);
                     }
                     return const SizedBox.shrink();
                   })
                 ]
-              )
+            )
-            : Stack(
+                : Stack(
                 children: [
                   _buildCenterForm(context),
                   Obx(() {
@@ -46,8 +47,17 @@ class LoginView extends BaseLoginView {
                   })
                 ]
             ),
+          ),
         ),
-    ));
+        Obx(() {
+          if (controller.isNetworkConnectionAvailable()) {
+            return const SizedBox.shrink();
+          }
+          return Align(
+              alignment: Alignment.bottomCenter,
+              child: buildNetworkConnectionWidget(context));
+        }),
+      ]));
   }
 
   Widget _buildCenterForm(BuildContext context) {
@@ -158,22 +168,27 @@ class LoginView extends BaseLoginView {
     return Container(
       margin:  const EdgeInsets.only(bottom: 16, left: 24, right: 24),
       width: responsiveUtils.getDeviceWidth(context),height: 48,
-      child: ElevatedButton(
+      child: AbsorbPointer(
-        key: const Key('nextToCredentialForm'),
+        absorbing: !controller.isNetworkConnectionAvailable(),
-        style: ButtonStyle(
+        child: ElevatedButton(
-          foregroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => Colors.white),
+          key: const Key('nextToCredentialForm'),
-          backgroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => AppColor.primaryColor),
+          style: ButtonStyle(
-          shape: MaterialStateProperty.all(RoundedRectangleBorder(
+            foregroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => Colors.white),
-            borderRadius: BorderRadius.circular(10),
+            backgroundColor: MaterialStateProperty.resolveWith<Color>(
-            side: const BorderSide(width: 0, color: AppColor.primaryColor)
+              (Set<MaterialState> states) => AppColor.primaryColor.withOpacity(
-          ))
+                  controller.isNetworkConnectionAvailable() ? 1 : 0.5)),
+            shape: MaterialStateProperty.all(RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(10),
+              side: const BorderSide(width: 0, color: AppColor.primaryColor)
+            ))
+          ),
+          child: Text(AppLocalizations.of(context).next,
+            style: const TextStyle(fontSize: 16, color: Colors.white)
+          ),
+          onPressed: () {
+            loginController.handleNextInUrlInputFormPress();
+          }
         ),
-        child: Text(AppLocalizations.of(context).next,
-          style: const TextStyle(fontSize: 16, color: Colors.white)
-        ),
-        onPressed: () {
-          loginController.handleNextInUrlInputFormPress();
-        }
       )
     );
   }

lib/features/login/presentation/login_view_web.dart

@@ -15,14 +15,24 @@ class LoginView extends BaseLoginView {
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: AppColor.primaryLightColor,
-      body: SafeArea(
+      body: Stack(children: [
-        child: Center(child: SingleChildScrollView(
+        SafeArea(
-          child: ResponsiveWidget(
+            child: Center(child: SingleChildScrollView(
-            responsiveUtils: responsiveUtils,
+                child: ResponsiveWidget(
-            mobile: _buildMobileForm(context),
+                  responsiveUtils: responsiveUtils,
-            desktop: _buildWebForm(context),
+                  mobile: _buildMobileForm(context),
-        )))
+                  desktop: _buildWebForm(context),
-      ),
+                )))
+        ),
+        Obx(() {
+          if (controller.isNetworkConnectionAvailable()) {
+            return const SizedBox.shrink();
+          }
+          return Align(
+              alignment: Alignment.bottomCenter,
+              child: buildNetworkConnectionWidget(context));
+        }),
+      ]),
     );
   }
 
@@ -269,22 +279,27 @@ class LoginView extends BaseLoginView {
     return Container(
         margin:  const EdgeInsets.only(bottom: 16, left: 24, right: 24),
         width: responsiveUtils.getDeviceWidth(context),height: 48,
-        child: ElevatedButton(
+        child: AbsorbPointer(
-            key: const Key('ssoSubmitForm'),
+          absorbing: !controller.isNetworkConnectionAvailable(),
-            style: ButtonStyle(
+          child: ElevatedButton(
-                foregroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => Colors.white),
+              key: const Key('ssoSubmitForm'),
-                backgroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => AppColor.primaryColor),
+              style: ButtonStyle(
-                shape: MaterialStateProperty.all(RoundedRectangleBorder(
+                  foregroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => Colors.white),
-                    borderRadius: BorderRadius.circular(10),
+                  backgroundColor: MaterialStateProperty.resolveWith<Color>(
-                    side: const BorderSide(width: 0, color: AppColor.primaryColor)
+                    (Set<MaterialState> states) => AppColor.primaryColor.withOpacity(
-                ))
+                        controller.isNetworkConnectionAvailable() ? 1 : 0.5)),
-            ),
+                  shape: MaterialStateProperty.all(RoundedRectangleBorder(
-            child: Text(AppLocalizations.of(context).singleSignOn,
+                      borderRadius: BorderRadius.circular(10),
-                style: const TextStyle(fontSize: 16, color: Colors.white)
+                      side: const BorderSide(width: 0, color: AppColor.primaryColor)
-            ),
+                  ))
-            onPressed: () {
+              ),
-              loginController.handleSSOPressed();
+              child: Text(AppLocalizations.of(context).singleSignOn,
-            }
+                  style: const TextStyle(fontSize: 16, color: Colors.white)
+              ),
+              onPressed: () {
+                loginController.handleSSOPressed();
+              }
+          ),
         )
     );
   }