TF-518 Apply new UI for login in mobile
This commit is contained in:
Dat PHAM HOANG
committed by
Dat H. Pham
Dat H. Pham
parent
0932cf0185
commit
cc66d141d4
@@ -1,18 +1,20 @@
|
||||
import 'package:core/core.dart';
|
||||
import 'package:flutter/foundation.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/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> {
|
||||
|
||||
final loginController = Get.find<LoginController>();
|
||||
final imagePaths = Get.find<ImagePaths>();
|
||||
final responsiveUtils = Get.find<ResponsiveUtils>();
|
||||
final _responsiveUtils = Get.find<ResponsiveUtils>();
|
||||
final keyboardUtils = Get.find<KeyboardUtils>();
|
||||
|
||||
LoginView({Key? key}) : super(key: key);
|
||||
@@ -20,97 +22,161 @@ class LoginView extends GetWidget<LoginController> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
resizeToAvoidBottomInset: false,
|
||||
resizeToAvoidBottomInset: true,
|
||||
backgroundColor: AppColor.primaryLightColor,
|
||||
body: GestureDetector(
|
||||
onTap: () => FocusScope.of(context).unfocus(),
|
||||
child: SafeArea(
|
||||
child: Center(
|
||||
child: SingleChildScrollView(
|
||||
reverse: true,
|
||||
child: Padding(
|
||||
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
|
||||
child: Container(
|
||||
alignment: Alignment.center,
|
||||
padding: const EdgeInsets.only(top: 40),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
_buildSlogan(context),
|
||||
Obx(() => _buildLoginMessage(context, loginController.loginState.value)),
|
||||
if (!kIsWeb) _buildUrlInput(context),
|
||||
_buildUserNameInput(context),
|
||||
_buildPasswordInput(context),
|
||||
Obx(() => loginController.loginState.value.viewState.fold(
|
||||
(failure) => _buildLoginButton(context),
|
||||
(success) => success is LoginLoadingAction ? _buildLoadingCircularProgress() : _buildLoginButton(context))),
|
||||
],
|
||||
),
|
||||
),
|
||||
child: _supportScrollForm(context)
|
||||
? Stack(
|
||||
children: [
|
||||
Center(child: SingleChildScrollView(child: _buildCenterForm(context), scrollDirection: Axis.vertical)),
|
||||
Obx(() {
|
||||
return loginController.loginFormType.value == LoginFormType.credentialForm
|
||||
? _buildBackButton(context)
|
||||
: const SizedBox.shrink();
|
||||
})
|
||||
]
|
||||
)
|
||||
: Stack(
|
||||
children: [
|
||||
_buildCenterForm(context),
|
||||
Obx(() {
|
||||
return loginController.loginFormType.value == LoginFormType.credentialForm
|
||||
? _buildBackButton(context)
|
||||
: const SizedBox.shrink();
|
||||
})
|
||||
]
|
||||
),
|
||||
),
|
||||
));
|
||||
}
|
||||
|
||||
Widget _buildCenterForm(BuildContext context) {
|
||||
return Center(
|
||||
child: ConstrainedBox(
|
||||
constraints: _supportScrollForm(context)
|
||||
? const BoxConstraints(minWidth: 240, maxWidth: 400)
|
||||
: const BoxConstraints(minWidth: double.infinity),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
children: [
|
||||
Padding(
|
||||
padding: EdgeInsets.only(
|
||||
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(() {
|
||||
switch (controller.loginFormType.value) {
|
||||
case LoginFormType.baseUrlForm:
|
||||
return _buildUrlInput(context);
|
||||
case LoginFormType.credentialForm:
|
||||
return _buildInputCredentialForm(context);
|
||||
default:
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
}),
|
||||
Obx(() {
|
||||
switch (controller.loginFormType.value) {
|
||||
case LoginFormType.baseUrlForm:
|
||||
return _supportScrollForm(context)
|
||||
? _buildNextButton(context)
|
||||
: _buildExpandedButton(context, _buildNextButton(context));
|
||||
case LoginFormType.credentialForm:
|
||||
return Obx(() => loginController.loginState.value.viewState.fold(
|
||||
(failure) => _buildLoginButtonInContext(context),
|
||||
(success) => success is LoginLoadingAction
|
||||
? _buildLoadingCircularProgress()
|
||||
: _buildLoginButtonInContext(context)));
|
||||
default:
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
})
|
||||
]
|
||||
),
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSlogan(BuildContext context) {
|
||||
return (SloganBuilder()
|
||||
..setSloganText(AppLocalizations.of(context).login_text_slogan)
|
||||
..setSloganTextAlign(TextAlign.center)
|
||||
..setSloganTextStyle(const TextStyle(color: AppColor.primaryColor, fontSize: 16, fontWeight: FontWeight.w700))
|
||||
..setLogo(imagePaths.icLogoTMail))
|
||||
.build();
|
||||
Widget _buildBackButton(BuildContext context) {
|
||||
return Positioned(
|
||||
left: 12,
|
||||
top: 12,
|
||||
child: IconButton(
|
||||
key: const Key('login_arrow_back_button'),
|
||||
onPressed: () => controller.handleBackInCredentialForm(),
|
||||
icon: SvgPicture.asset(
|
||||
imagePaths.icBack,
|
||||
alignment: Alignment.center,
|
||||
color: AppColor.primaryColor
|
||||
)
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildLoginMessage(BuildContext context, LoginState loginState) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 24, top: 60),
|
||||
padding: const EdgeInsets.only(top: 11, bottom: 36, left: 58, right: 58),
|
||||
child: SizedBox(
|
||||
width: responsiveUtils.getWidthLoginTextField(context),
|
||||
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).login_text_login_to_continue,
|
||||
(success) => AppLocalizations.of(context).login_text_login_to_continue))
|
||||
: 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.appColor,
|
||||
(success) => AppColor.appColor)))
|
||||
: 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(bottom: 16),
|
||||
child: SizedBox(
|
||||
width: responsiveUtils.getWidthLoginTextField(context),
|
||||
padding: const EdgeInsets.only(right: 24, left: 24, bottom: 24),
|
||||
child: Container(
|
||||
child: (TextFieldBuilder()
|
||||
..key(const Key('login_url_input'))
|
||||
..onChange((value) => loginController.formatUrl(value))
|
||||
..textInputAction(TextInputAction.next)
|
||||
..addController(loginController.urlInputController)
|
||||
..keyboardType(TextInputType.url)
|
||||
..onSubmitted((value) {
|
||||
controller.handleNextInUrlInputFormPress();
|
||||
})
|
||||
..textDecoration((LoginInputDecorationBuilder()
|
||||
..setLabelText(AppLocalizations.of(context).prefix_https)
|
||||
..setPrefixText(AppLocalizations.of(context).prefix_https))
|
||||
.build()))
|
||||
..setLabelText(AppLocalizations.of(context).prefix_https)
|
||||
..setPrefixText(AppLocalizations.of(context).prefix_https))
|
||||
.build()))
|
||||
.build()));
|
||||
}
|
||||
|
||||
Widget _buildUserNameInput(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 16),
|
||||
child: SizedBox(
|
||||
width: responsiveUtils.getWidthLoginTextField(context),
|
||||
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))
|
||||
@@ -125,40 +191,78 @@ class LoginView extends GetWidget<LoginController> {
|
||||
|
||||
Widget _buildPasswordInput(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 40),
|
||||
child: SizedBox(
|
||||
width: responsiveUtils.getWidthLoginTextField(context),
|
||||
child: (TextFieldBuilder()
|
||||
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)
|
||||
..textDecoration((LoginInputDecorationBuilder()
|
||||
..setLabelText(AppLocalizations.of(context).password)
|
||||
..setHintText(AppLocalizations.of(context).password))
|
||||
.build()))
|
||||
..hintText(AppLocalizations.of(context).password))
|
||||
.build()));
|
||||
}
|
||||
|
||||
Widget _buildExpandedButton(BuildContext context, Widget child) {
|
||||
return Expanded(
|
||||
child: Align(
|
||||
alignment: FractionalOffset.bottomCenter,
|
||||
child: child
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildNextButton(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('nextToCredentialForm'),
|
||||
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).next,
|
||||
style: const TextStyle(fontSize: 16, color: Colors.white)
|
||||
),
|
||||
onPressed: () {
|
||||
loginController.handleNextInUrlInputFormPress();
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildLoginButtonInContext(BuildContext context) {
|
||||
return _supportScrollForm(context)
|
||||
? _buildLoginButton(context)
|
||||
: _buildExpandedButton(context, _buildLoginButton(context));
|
||||
}
|
||||
|
||||
Widget _buildLoginButton(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 16),
|
||||
child: SizedBox(
|
||||
key: const Key('login_confirm_button'),
|
||||
width: responsiveUtils.getWidthLoginButton(),
|
||||
height: 48,
|
||||
child: ElevatedButton(
|
||||
style: ButtonStyle(
|
||||
foregroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => Colors.white),
|
||||
backgroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => AppColor.buttonColor),
|
||||
shape: MaterialStateProperty.all(RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(80),
|
||||
side: const BorderSide(width: 0, color: AppColor.buttonColor)))),
|
||||
child: Text(AppLocalizations.of(context).login, style: const TextStyle(fontSize: 16, color: Colors.white)),
|
||||
onPressed: () {
|
||||
keyboardUtils.hideKeyboard(context);
|
||||
loginController.handleLoginPressed();
|
||||
}),
|
||||
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();
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -170,4 +274,8 @@ class LoginView extends GetWidget<LoginController> {
|
||||
height: 40,
|
||||
child: CircularProgressIndicator(color: AppColor.primaryColor));
|
||||
}
|
||||
|
||||
bool _supportScrollForm(BuildContext context) {
|
||||
return !(responsiveUtils.isMobile(context) && responsiveUtils.isPortrait(context));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user