TF-518 Apply new UI for login in web
This commit is contained in:
Dat PHAM HOANG
committed by
Dat H. Pham
Dat H. Pham
parent
cc66d141d4
commit
3fc2ae4776
@@ -0,0 +1,116 @@
|
||||
import 'package:core/presentation/extensions/color_extension.dart';
|
||||
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/login/domain/state/authentication_user_state.dart';
|
||||
import 'package:tmail_ui_user/features/login/presentation/login_controller.dart';
|
||||
import 'package:tmail_ui_user/features/login/presentation/login_form_type.dart';
|
||||
import 'package:tmail_ui_user/features/login/presentation/state/login_state.dart';
|
||||
import 'package:tmail_ui_user/features/login/presentation/widgets/login_input_decoration_builder.dart';
|
||||
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> {
|
||||
BaseLoginView({Key? key}) : super(key: key);
|
||||
|
||||
final loginController = Get.find<LoginController>();
|
||||
final responsiveUtils = Get.find<ResponsiveUtils>();
|
||||
final imagePaths = Get.find<ImagePaths>();
|
||||
|
||||
Widget buildLoginMessage(BuildContext context, LoginState loginState) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(top: 11, bottom: 36, left: 58, right: 58),
|
||||
child: SizedBox(
|
||||
width: responsiveUtils.getWidthLoginTextField(context),
|
||||
child: CenterTextBuilder()
|
||||
.key(const Key('login_message'))
|
||||
.text(loginState.viewState.fold(
|
||||
(failure) => failure is AuthenticationUserFailure
|
||||
? AppLocalizations.of(context).unknown_error_login_message
|
||||
: AppLocalizations.of(context).loginInputUrlMessage,
|
||||
(success) {
|
||||
if (loginController.loginFormType.value == LoginFormType.credentialForm || kIsWeb) {
|
||||
return AppLocalizations.of(context).loginInputCredentialMessage;
|
||||
}
|
||||
return AppLocalizations.of(context).loginInputUrlMessage;
|
||||
}))
|
||||
.textStyle(TextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: loginState.viewState.fold(
|
||||
(failure) => failure is AuthenticationUserFailure
|
||||
? AppColor.textFieldErrorBorderColor
|
||||
: AppColor.colorNameEmail,
|
||||
(success) => AppColor.colorNameEmail)))
|
||||
.build()
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildLoginButton(BuildContext context) {
|
||||
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<Color>((Set<MaterialState> states) => Colors.white),
|
||||
backgroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> 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();
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildInputCredentialForm(BuildContext context) {
|
||||
return Column(
|
||||
children: [
|
||||
buildUserNameInput(context),
|
||||
buildPasswordInput(context)
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildUserNameInput(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 16, right: 24, left: 24),
|
||||
child: Container(
|
||||
child: (TextFieldBuilder()..key(const Key('login_username_input'))
|
||||
..onChange((value) => loginController.setUserNameText(value))
|
||||
..textInputAction(TextInputAction.next)
|
||||
..keyboardType(TextInputType.emailAddress)
|
||||
..textDecoration((LoginInputDecorationBuilder()
|
||||
..setLabelText(AppLocalizations.of(context).email)
|
||||
..setHintText(AppLocalizations.of(context).email))
|
||||
.build()))
|
||||
.build()));
|
||||
}
|
||||
|
||||
Widget buildPasswordInput(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 40, right: 24, left: 24),
|
||||
child: Container(
|
||||
child: (LoginTextInputBuilder(context, imagePaths)
|
||||
..setOnSubmitted((value) => loginController.handleLoginPressed())
|
||||
..passwordInput(true)
|
||||
..key(const Key('login_password_input'))
|
||||
..obscureText(true)
|
||||
..onChange((value) => loginController.setPasswordText(value))
|
||||
..textInputAction(TextInputAction.done)
|
||||
..hintText(AppLocalizations.of(context).password))
|
||||
.build()));
|
||||
}
|
||||
}
|
||||
@@ -2,19 +2,14 @@ import 'package:core/core.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:tmail_ui_user/features/login/domain/state/authentication_user_state.dart';
|
||||
import 'package:tmail_ui_user/features/login/presentation/login_controller.dart';
|
||||
import 'package:tmail_ui_user/features/login/presentation/base_login_view.dart';
|
||||
import 'package:tmail_ui_user/features/login/presentation/login_form_type.dart';
|
||||
import 'package:tmail_ui_user/features/login/presentation/state/login_state.dart';
|
||||
import 'package:tmail_ui_user/features/login/presentation/widgets/login_input_decoration_builder.dart';
|
||||
import 'package:tmail_ui_user/features/login/presentation/widgets/login_text_input_builder.dart';
|
||||
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
|
||||
|
||||
class LoginView extends GetWidget<LoginController> {
|
||||
class LoginView extends BaseLoginView {
|
||||
|
||||
final loginController = Get.find<LoginController>();
|
||||
final imagePaths = Get.find<ImagePaths>();
|
||||
final _responsiveUtils = Get.find<ResponsiveUtils>();
|
||||
final keyboardUtils = Get.find<KeyboardUtils>();
|
||||
|
||||
LoginView({Key? key}) : super(key: key);
|
||||
@@ -64,19 +59,19 @@ class LoginView extends GetWidget<LoginController> {
|
||||
children: [
|
||||
Padding(
|
||||
padding: EdgeInsets.only(
|
||||
top: _responsiveUtils.isHeightShortest(context) ? 64 : 0),
|
||||
top: responsiveUtils.isHeightShortest(context) ? 64 : 0),
|
||||
child: Text(
|
||||
AppLocalizations.of(context).login,
|
||||
style: const TextStyle(fontSize: 32, color: AppColor.colorNameEmail, fontWeight: FontWeight.w900)
|
||||
)
|
||||
),
|
||||
Obx(() => _buildLoginMessage(context, loginController.loginState.value)),
|
||||
Obx(() => buildLoginMessage(context, loginController.loginState.value)),
|
||||
Obx(() {
|
||||
switch (controller.loginFormType.value) {
|
||||
case LoginFormType.baseUrlForm:
|
||||
return _buildUrlInput(context);
|
||||
case LoginFormType.credentialForm:
|
||||
return _buildInputCredentialForm(context);
|
||||
return buildInputCredentialForm(context);
|
||||
default:
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
@@ -119,40 +114,6 @@ class LoginView extends GetWidget<LoginController> {
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildLoginMessage(BuildContext context, LoginState loginState) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(top: 11, bottom: 36, left: 58, right: 58),
|
||||
child: SizedBox(
|
||||
width: _responsiveUtils.getWidthLoginTextField(context),
|
||||
child: CenterTextBuilder()
|
||||
.key(const Key('login_message'))
|
||||
.text(loginState.viewState.fold(
|
||||
(failure) => failure is AuthenticationUserFailure
|
||||
? AppLocalizations.of(context).unknown_error_login_message
|
||||
: AppLocalizations.of(context).loginInputUrlMessage,
|
||||
(success) => AppLocalizations.of(context).loginInputUrlMessage))
|
||||
.textStyle(TextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: loginState.viewState.fold(
|
||||
(failure) => failure is AuthenticationUserFailure
|
||||
? AppColor.textFieldErrorBorderColor
|
||||
: AppColor.colorNameEmail,
|
||||
(success) => AppColor.colorNameEmail)))
|
||||
.build()
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildInputCredentialForm(BuildContext context) {
|
||||
return Column(
|
||||
children: [
|
||||
_buildUserNameInput(context),
|
||||
_buildPasswordInput(context)
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildUrlInput(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(right: 24, left: 24, bottom: 24),
|
||||
@@ -173,37 +134,6 @@ class LoginView extends GetWidget<LoginController> {
|
||||
.build()));
|
||||
}
|
||||
|
||||
Widget _buildUserNameInput(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 16, right: 24, left: 24),
|
||||
child: Container(
|
||||
child: (TextFieldBuilder()
|
||||
..key(const Key('login_username_input'))
|
||||
..onChange((value) => loginController.setUserNameText(value))
|
||||
..textInputAction(TextInputAction.next)
|
||||
..keyboardType(TextInputType.emailAddress)
|
||||
..textDecoration((LoginInputDecorationBuilder()
|
||||
..setLabelText(AppLocalizations.of(context).email)
|
||||
..setHintText(AppLocalizations.of(context).email))
|
||||
.build()))
|
||||
.build()));
|
||||
}
|
||||
|
||||
Widget _buildPasswordInput(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 40, right: 24, left: 24),
|
||||
child: Container(
|
||||
child: (LoginTextInputBuilder(context, imagePaths)
|
||||
..setOnSubmitted((value) => loginController.handleLoginPressed())
|
||||
..passwordInput(true)
|
||||
..key(const Key('login_password_input'))
|
||||
..obscureText(true)
|
||||
..onChange((value) => loginController.setPasswordText(value))
|
||||
..textInputAction(TextInputAction.done)
|
||||
..hintText(AppLocalizations.of(context).password))
|
||||
.build()));
|
||||
}
|
||||
|
||||
Widget _buildExpandedButton(BuildContext context, Widget child) {
|
||||
return Expanded(
|
||||
child: Align(
|
||||
@@ -216,7 +146,7 @@ class LoginView extends GetWidget<LoginController> {
|
||||
Widget _buildNextButton(BuildContext context) {
|
||||
return Container(
|
||||
margin: const EdgeInsets.only(bottom: 16, left: 24, right: 24),
|
||||
width: _responsiveUtils.getDeviceWidth(context),height: 48,
|
||||
width: responsiveUtils.getDeviceWidth(context),height: 48,
|
||||
child: ElevatedButton(
|
||||
key: const Key('nextToCredentialForm'),
|
||||
style: ButtonStyle(
|
||||
@@ -239,32 +169,8 @@ class LoginView extends GetWidget<LoginController> {
|
||||
|
||||
Widget _buildLoginButtonInContext(BuildContext context) {
|
||||
return _supportScrollForm(context)
|
||||
? _buildLoginButton(context)
|
||||
: _buildExpandedButton(context, _buildLoginButton(context));
|
||||
}
|
||||
|
||||
Widget _buildLoginButton(BuildContext context) {
|
||||
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<Color>((Set<MaterialState> states) => Colors.white),
|
||||
backgroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => AppColor.primaryColor),
|
||||
shape: MaterialStateProperty.all(RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
side: const BorderSide(width: 0, color: AppColor.primaryColor)
|
||||
))
|
||||
),
|
||||
child: Text(AppLocalizations.of(context).login,
|
||||
style: const TextStyle(fontSize: 16, color: Colors.white)
|
||||
),
|
||||
onPressed: () {
|
||||
loginController.handleLoginPressed();
|
||||
}
|
||||
)
|
||||
);
|
||||
? buildLoginButton(context)
|
||||
: _buildExpandedButton(context, buildLoginButton(context));
|
||||
}
|
||||
|
||||
Widget _buildLoadingCircularProgress() {
|
||||
|
||||
@@ -0,0 +1,192 @@
|
||||
import 'package:core/core.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart';
|
||||
import 'package:tmail_ui_user/features/login/presentation/base_login_view.dart';
|
||||
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
|
||||
|
||||
class LoginView extends BaseLoginView {
|
||||
|
||||
LoginView({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
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),
|
||||
)))
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildMobileForm(BuildContext context) {
|
||||
return Stack(
|
||||
children: [
|
||||
ConstrainedBox(
|
||||
constraints: const BoxConstraints(minWidth: 200, maxWidth: 720, minHeight: 720),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 67),
|
||||
child: (SloganBuilder(arrangedByHorizontal: true)
|
||||
..setSloganText(AppLocalizations.of(context).app_name)
|
||||
..setSloganTextAlign(TextAlign.center)
|
||||
..setSloganTextStyle(const TextStyle(color: Colors.black, fontSize: 24, fontWeight: FontWeight.bold))
|
||||
..setSizeLogo(36)
|
||||
..setLogo(imagePaths.icLogoTMail))
|
||||
.build()
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 67),
|
||||
child: Text(
|
||||
AppLocalizations.of(context).signIn,
|
||||
style: const TextStyle(fontSize: 32, color: AppColor.colorNameEmail, fontWeight: FontWeight.w900)
|
||||
)
|
||||
),
|
||||
Obx(() => buildLoginMessage(context, loginController.loginState.value)),
|
||||
buildInputCredentialForm(context),
|
||||
buildLoginButton(context)
|
||||
],
|
||||
)
|
||||
),
|
||||
Positioned.fill(
|
||||
bottom: 24,
|
||||
child: Align(
|
||||
alignment: Alignment.bottomCenter,
|
||||
child: SvgPicture.asset(
|
||||
imagePaths.icPowerByLinagora,
|
||||
width: 97,
|
||||
height: 44,
|
||||
fit: BoxFit.fill)))
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildWebForm(BuildContext context) {
|
||||
return Stack(
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(right: 86),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
AppLocalizations.of(context).jmapBasedMailSolution,
|
||||
style: const TextStyle(fontSize: 36, color: AppColor.colorNameEmail, fontWeight: FontWeight.w900)
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 24),
|
||||
child: (SloganBuilder(arrangedByHorizontal: true, )
|
||||
..setLogoSVG(imagePaths.icJMAPStandard)
|
||||
..setSizeLogo(48.0)
|
||||
..setPadding(const EdgeInsets.only(left: 12))
|
||||
..setSloganText(AppLocalizations.of(context).jmapStandard)
|
||||
..setSloganTextStyle(const TextStyle(fontSize: 24, fontWeight: FontWeight.w400, color: AppColor.colorNameEmail)))
|
||||
.build()
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 16),
|
||||
child: (SloganBuilder(arrangedByHorizontal: true, )
|
||||
..setLogoSVG(imagePaths.icEncrypted)
|
||||
..setSizeLogo(48.0)
|
||||
..setPadding(const EdgeInsets.only(left: 12))
|
||||
..setSloganText(AppLocalizations.of(context).encryptedMailbox)
|
||||
..setSloganTextStyle(const TextStyle(fontSize: 24, fontWeight: FontWeight.w400, color: AppColor.colorNameEmail)))
|
||||
.build()
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 16),
|
||||
child: (SloganBuilder(arrangedByHorizontal: true, )
|
||||
..setLogoSVG(imagePaths.icTeam)
|
||||
..setSizeLogo(48.0)
|
||||
..setPadding(const EdgeInsets.only(left: 12))
|
||||
..setSloganText(AppLocalizations.of(context).manageEmailAsATeam)
|
||||
..setSloganTextStyle(const TextStyle(fontSize: 24, fontWeight: FontWeight.w400, color: AppColor.colorNameEmail)))
|
||||
.build()
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 16),
|
||||
child: (SloganBuilder(arrangedByHorizontal: true, )
|
||||
..setLogoSVG(imagePaths.icIntegration)
|
||||
..setSizeLogo(48.0)
|
||||
..setPadding(const EdgeInsets.only(left: 12))
|
||||
..setSloganText(AppLocalizations.of(context).multipleIntegrations)
|
||||
..setSloganTextStyle(const TextStyle(fontSize: 24, fontWeight: FontWeight.w400, color: AppColor.colorNameEmail)))
|
||||
.build()
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 44),
|
||||
child: Image(
|
||||
image: AssetImage(imagePaths.loginGraphic),
|
||||
fit: BoxFit.fill,
|
||||
alignment: Alignment.center
|
||||
)
|
||||
)
|
||||
],
|
||||
)
|
||||
),
|
||||
Column(
|
||||
children: [
|
||||
SizedBox(
|
||||
height: 690,
|
||||
width: 445,
|
||||
child: Card(
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(20.0),
|
||||
),
|
||||
elevation: 10,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(left: 31, right: 31),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 66),
|
||||
child: (SloganBuilder(arrangedByHorizontal: true)
|
||||
..setSloganText(AppLocalizations.of(context).app_name)
|
||||
..setSloganTextAlign(TextAlign.center)
|
||||
..setSloganTextStyle(const TextStyle(color: Colors.black, fontSize: 24, fontWeight: FontWeight.bold))
|
||||
..setSizeLogo(36)
|
||||
..setLogo(imagePaths.icLogoTMail))
|
||||
.build()
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 67),
|
||||
child: Text(
|
||||
AppLocalizations.of(context).signIn,
|
||||
style: const TextStyle(fontSize: 32, color: AppColor.colorNameEmail, fontWeight: FontWeight.w900)
|
||||
)
|
||||
),
|
||||
Obx(() => buildLoginMessage(context, loginController.loginState.value)),
|
||||
buildInputCredentialForm(context),
|
||||
buildLoginButton(context)
|
||||
],
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 44, bottom: 10),
|
||||
child: SvgPicture.asset(imagePaths.icPowerByLinagora, width: 97, height: 44, fit: BoxFit.fill))
|
||||
]
|
||||
)
|
||||
],
|
||||
)
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user