From 0ad9c21001d198dede377cf23a260cf8bcb7e625 Mon Sep 17 00:00:00 2001 From: dab246 Date: Fri, 5 Aug 2022 11:54:39 +0700 Subject: [PATCH] TF-783 Show toast message and disable login button when no connection internet --- .../base/mixin/network_connection_mixin.dart | 6 +- .../login/presentation/base_login_view.dart | 41 ++++++------ .../login/presentation/login_view.dart | 63 ++++++++++++------- .../login/presentation/login_view_web.dart | 63 ++++++++++++------- 4 files changed, 104 insertions(+), 69 deletions(-) diff --git a/lib/features/base/mixin/network_connection_mixin.dart b/lib/features/base/mixin/network_connection_mixin.dart index 0bd89b336..fb8528d61 100644 --- a/lib/features/base/mixin/network_connection_mixin.dart +++ b/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), diff --git a/lib/features/login/presentation/base_login_view.dart b/lib/features/login/presentation/base_login_view.dart index 4bdfc97bf..ba7a3ea90 100644 --- a/lib/features/login/presentation/base_login_view.dart +++ b/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 { +abstract class BaseLoginView extends GetWidget with NetworkConnectionMixin { BaseLoginView({Key? key}) : super(key: key); final loginController = Get.find(); @@ -71,22 +71,27 @@ abstract class BaseLoginView extends GetWidget { return Container( margin: const EdgeInsets.only(bottom: 16, left: 24, right: 24), width: responsiveUtils.getDeviceWidth(context),height: 48, - child: ElevatedButton( - key: const Key('loginSubmitForm'), - style: ButtonStyle( - foregroundColor: MaterialStateProperty.resolveWith((Set states) => Colors.white), - backgroundColor: MaterialStateProperty.resolveWith((Set states) => AppColor.primaryColor), - shape: MaterialStateProperty.all(RoundedRectangleBorder( - borderRadius: BorderRadius.circular(10), - side: const BorderSide(width: 0, color: AppColor.primaryColor) - )) - ), - child: Text(AppLocalizations.of(context).signIn, - style: const TextStyle(fontSize: 16, color: Colors.white) - ), - onPressed: () { - loginController.handleLoginPressed(); - } + child: AbsorbPointer( + absorbing: !controller.isNetworkConnectionAvailable(), + child: ElevatedButton( + key: const Key('loginSubmitForm'), + style: ButtonStyle( + foregroundColor: MaterialStateProperty.resolveWith((Set states) => Colors.white), + backgroundColor: MaterialStateProperty.resolveWith( + (Set 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).signIn, + style: const TextStyle(fontSize: 16, color: Colors.white) + ), + onPressed: () { + loginController.handleLoginPressed(); + } + ), ) ); } diff --git a/lib/features/login/presentation/login_view.dart b/lib/features/login/presentation/login_view.dart index d09256698..374a535db 100644 --- a/lib/features/login/presentation/login_view.dart +++ b/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( - onTap: () => FocusScope.of(context).unfocus(), - child: SafeArea( - child: _supportScrollForm(context) - ? Stack( + body: Stack(children: [ + GestureDetector( + onTap: () => FocusScope.of(context).unfocus(), + child: SafeArea( + 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( - key: const Key('nextToCredentialForm'), - style: ButtonStyle( - foregroundColor: MaterialStateProperty.resolveWith((Set states) => Colors.white), - backgroundColor: MaterialStateProperty.resolveWith((Set states) => AppColor.primaryColor), - shape: MaterialStateProperty.all(RoundedRectangleBorder( - borderRadius: BorderRadius.circular(10), - side: const BorderSide(width: 0, color: AppColor.primaryColor) - )) + child: AbsorbPointer( + absorbing: !controller.isNetworkConnectionAvailable(), + child: ElevatedButton( + key: const Key('nextToCredentialForm'), + style: ButtonStyle( + foregroundColor: MaterialStateProperty.resolveWith((Set states) => Colors.white), + backgroundColor: MaterialStateProperty.resolveWith( + (Set 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(); - } ) ); } diff --git a/lib/features/login/presentation/login_view_web.dart b/lib/features/login/presentation/login_view_web.dart index 2572c2bee..18e56cf14 100644 --- a/lib/features/login/presentation/login_view_web.dart +++ b/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( - child: Center(child: SingleChildScrollView( - child: ResponsiveWidget( - responsiveUtils: responsiveUtils, - mobile: _buildMobileForm(context), - desktop: _buildWebForm(context), - ))) - ), + body: Stack(children: [ + SafeArea( + child: Center(child: SingleChildScrollView( + child: ResponsiveWidget( + responsiveUtils: responsiveUtils, + 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( - key: const Key('ssoSubmitForm'), - style: ButtonStyle( - foregroundColor: MaterialStateProperty.resolveWith((Set states) => Colors.white), - backgroundColor: MaterialStateProperty.resolveWith((Set states) => AppColor.primaryColor), - shape: MaterialStateProperty.all(RoundedRectangleBorder( - borderRadius: BorderRadius.circular(10), - side: const BorderSide(width: 0, color: AppColor.primaryColor) - )) - ), - child: Text(AppLocalizations.of(context).singleSignOn, - style: const TextStyle(fontSize: 16, color: Colors.white) - ), - onPressed: () { - loginController.handleSSOPressed(); - } + child: AbsorbPointer( + absorbing: !controller.isNetworkConnectionAvailable(), + child: ElevatedButton( + key: const Key('ssoSubmitForm'), + style: ButtonStyle( + foregroundColor: MaterialStateProperty.resolveWith((Set states) => Colors.white), + backgroundColor: MaterialStateProperty.resolveWith( + (Set 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).singleSignOn, + style: const TextStyle(fontSize: 16, color: Colors.white) + ), + onPressed: () { + loginController.handleSSOPressed(); + } + ), ) ); }