diff --git a/assets/pngs/web_login_image.png b/assets/pngs/web_login_image.png new file mode 100644 index 0000000..a40126e Binary files /dev/null and b/assets/pngs/web_login_image.png differ diff --git a/lib/core/constants/assets.dart b/lib/core/constants/assets.dart index 148a221..157f474 100644 --- a/lib/core/constants/assets.dart +++ b/lib/core/constants/assets.dart @@ -6,6 +6,7 @@ class AssetsManager { // login page static const logo = 'assets/pngs/logo.png'; + static const webLoginImage = 'assets/pngs/web_login_image.png'; static const userIcon = 'assets/svgs/user_icon.svg'; static const passwordIcon = 'assets/svgs/password_icon.svg'; static const passwordVisibility = 'assets/svgs/password_visibility.svg'; diff --git a/lib/core/theme/colors.dart b/lib/core/theme/colors.dart index 6249f1c..6fa6140 100644 --- a/lib/core/theme/colors.dart +++ b/lib/core/theme/colors.dart @@ -128,4 +128,5 @@ class AppColors { static const Color lightBlue = Color(0xFFe8ecfc); static const Color cyanAqua = Color(0xFFd6f4f8); static const Color cyanTeal = Color(0xFF24A6B4); + static const Color white = Color(0xFFFFFFFF); } diff --git a/lib/views/login/pages/login_desktop_page.dart b/lib/views/login/pages/login_desktop_page.dart index c706ab0..ff5ed75 100644 --- a/lib/views/login/pages/login_desktop_page.dart +++ b/lib/views/login/pages/login_desktop_page.dart @@ -20,68 +20,90 @@ class LoginDesktopPage extends StatelessWidget { body: Center( child: SingleChildScrollView( padding: EdgeInsets.symmetric(horizontal: 24.0.w()), - child: SizedBox( - width: 526, - child: Consumer( - builder: (context, viewModel, _) { - return Column( - mainAxisSize: MainAxisSize.min, - children: [ - LoginLogo(width: 190.0.w(), height: 88.0.h()), - SizedBox(height: 32.0.h()), - const LoginTitle(), - SizedBox(height: 32.0.h()), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceAround, + children: [ + SizedBox( + width: 526, + child: Consumer( + builder: (context, viewModel, _) { + return Column( + mainAxisSize: MainAxisSize.min, + children: [ + LoginLogo(width: 190.0.w(), height: 88.0.h()), + SizedBox(height: 32.0.h()), + const LoginTitle(), + SizedBox(height: 32.0.h()), + LoginTextField( + controller: viewModel.usernameController, + focusNode: viewModel.usernameFocus, + label: AppStrings.usernameLabel, + iconPath: AssetsManager.userIcon, + fieldHeight: 60.0.h(), + borderRedus: 12, + prefixIconPadding: 7.0.w(), + ), + SizedBox(height: 16.0.h()), + LoginTextField( + controller: viewModel.passwordController, + focusNode: viewModel.passwordFocus, + label: AppStrings.passwordLabel, + iconPath: AssetsManager.passwordIcon, + prefixIconPadding: 7.0.w(), + isPassword: true, + obscureText: viewModel.obscurePassword, + fieldHeight: 60.0.h(), + onToggleVisibility: + viewModel.togglePasswordVisibility, + borderRedus: 12, + ), + SizedBox(height: 32.0.h()), - LoginTextField( - controller: viewModel.usernameController, - focusNode: viewModel.usernameFocus, - label: AppStrings.usernameLabel, - iconPath: AssetsManager.userIcon, - fieldHeight: 60.0.h(), - borderRedus: 4.0.w(), - prefixIconPadding: 4.0.w(), - ), - SizedBox(height: 16.0.h()), - - LoginTextField( - controller: viewModel.passwordController, - focusNode: viewModel.passwordFocus, - label: AppStrings.passwordLabel, - iconPath: AssetsManager.passwordIcon, - prefixIconPadding: 4.0.w(), - isPassword: true, - obscureText: viewModel.obscurePassword, - fieldHeight: 60.0.h(), - onToggleVisibility: viewModel.togglePasswordVisibility, - borderRedus: 4.0.w(), - ), - SizedBox(height: 32.0.h()), - - if (viewModel.isLoading) - const CircularProgressIndicator() - else - BaseButton( - isEnabled: viewModel.isLoginEnabled, - onPressed: - viewModel.isLoginEnabled - ? () async { - await viewModel.login(); - if (viewModel.loggedInUser != null) { - HomeRouteData().go(context); - } else if (viewModel.errorMessage != null) { - ScaffoldMessenger.of(context).showSnackBar( - SnackBar( - content: Text(viewModel.errorMessage!), - ), - ); - } - } - : null, - ), - ], - ); - }, - ), + if (viewModel.isLoading) + BaseButton( + isEnabled: false, + onPressed: null, + isLoading: true, + ) + else + BaseButton( + isEnabled: viewModel.isLoginEnabled, + onPressed: + viewModel.isLoginEnabled + ? () async { + await viewModel.login(); + if (viewModel.loggedInUser != null) { + HomeRouteData().go(context); + } else if (viewModel.errorMessage != + null) { + ScaffoldMessenger.of( + context, + ).showSnackBar( + SnackBar( + content: Text( + viewModel.errorMessage!, + ), + ), + ); + } + } + : null, + ), + ], + ); + }, + ), + ), + Padding( + padding: EdgeInsets.symmetric(vertical: 20.0.h()), + child: Image.asset( + AssetsManager.webLoginImage, + width: 796.0.w(), + height: 944.0.h(), + fit: BoxFit.fitHeight, + ), + ), + ], ), ), ), diff --git a/lib/views/login/pages/login_mobile_page.dart b/lib/views/login/pages/login_mobile_page.dart index 9912c6d..d150dc5 100644 --- a/lib/views/login/pages/login_mobile_page.dart +++ b/lib/views/login/pages/login_mobile_page.dart @@ -51,7 +51,11 @@ class LoginMobilePage extends StatelessWidget { SizedBox(height: 32.0.h()), if (viewModel.isLoading) - const CircularProgressIndicator() + BaseButton( + isEnabled: false, + onPressed: null, + isLoading: true, + ) else BaseButton( isEnabled: viewModel.isLoginEnabled, diff --git a/lib/views/login/pages/login_tablet_page.dart b/lib/views/login/pages/login_tablet_page.dart index d054420..19e9532 100644 --- a/lib/views/login/pages/login_tablet_page.dart +++ b/lib/views/login/pages/login_tablet_page.dart @@ -38,7 +38,7 @@ class LoginTabletPage extends StatelessWidget { label: AppStrings.usernameLabel, iconPath: AssetsManager.userIcon, fieldHeight: 60.0.h(), - borderRedus: 4.0.w(), + borderRedus: 12, prefixIconPadding: 4.0.w(), ), SizedBox(height: 16.0.h()), @@ -53,12 +53,16 @@ class LoginTabletPage extends StatelessWidget { obscureText: viewModel.obscurePassword, fieldHeight: 60.0.h(), onToggleVisibility: viewModel.togglePasswordVisibility, - borderRedus: 4.0.w(), + borderRedus: 12, ), SizedBox(height: 32.0.h()), if (viewModel.isLoading) - const CircularProgressIndicator() + BaseButton( + isEnabled: false, + onPressed: null, + isLoading: true, + ) else BaseButton( isEnabled: viewModel.isLoginEnabled, diff --git a/lib/views/login/widgets/login_button.dart b/lib/views/login/widgets/login_button.dart index 50a78be..67869d2 100644 --- a/lib/views/login/widgets/login_button.dart +++ b/lib/views/login/widgets/login_button.dart @@ -15,6 +15,7 @@ class BaseButton extends StatelessWidget { final double? borderRadius; final double? elevation; final double? width; + final bool isLoading; const BaseButton({ required this.isEnabled, @@ -27,39 +28,59 @@ class BaseButton extends StatelessWidget { this.borderRadius, this.elevation, this.width, + this.isLoading = false, super.key, }); @override Widget build(BuildContext context) { - return SizedBox( - width: width ?? double.infinity, - height: 55.0.h(), - child: ElevatedButton( - onPressed: isEnabled ? onPressed : null, - style: ElevatedButton.styleFrom( - backgroundColor: - backgroundColor ?? - (isEnabled ? AppColors.mainBlue : AppColors.backgroundColor), - foregroundColor: textColor ?? AppColors.backgroundColor, - elevation: elevation ?? 0, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(borderRadius ?? 28.0.w()), - side: BorderSide( - color: borderColor ?? Colors.transparent, - width: borderWidth ?? 0, + return isLoading + ? Container( + width: double.infinity, + height: 55.0.h(), + decoration: BoxDecoration( + color: AppColors.mainBlue, + borderRadius: BorderRadius.circular(28.0.w()), + ), + child: Center( + child: SizedBox( + width: 30.0.w(), + height: 30.0.w(), + child: CircularProgressIndicator( + strokeWidth: 4.0, + color: AppColors.white, + ), ), ), - ), - child: Text( - text ?? AppStrings.loginButton, - style: TextStyle( - fontSize: 16.0.sp(), - fontWeight: FontWeight.bold, - color: textColor ?? AppColors.backgroundColor, + ) + : SizedBox( + width: width ?? double.infinity, + height: 55.0.h(), + child: ElevatedButton( + onPressed: isEnabled ? onPressed : null, + style: ElevatedButton.styleFrom( + backgroundColor: + backgroundColor ?? + (isEnabled ? AppColors.mainBlue : AppColors.backgroundColor), + foregroundColor: textColor ?? AppColors.backgroundColor, + elevation: elevation ?? 0, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(borderRadius ?? 28.0.w()), + side: BorderSide( + color: borderColor ?? Colors.transparent, + width: borderWidth ?? 0, + ), + ), + ), + child: Text( + text ?? AppStrings.loginButton, + style: TextStyle( + fontSize: 16.0.sp(), + fontWeight: FontWeight.bold, + color: textColor ?? AppColors.backgroundColor, + ), + ), ), - ), - ), - ); + ); } } diff --git a/pubspec.lock b/pubspec.lock index 0ce118b..24b3493 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -17,6 +17,14 @@ packages: url: "https://pub.dev" source: hosted version: "7.7.1" + archive: + dependency: transitive + description: + name: archive + sha256: "2fde1607386ab523f7a36bb3e7edb43bd58e6edaf2ffb29d8a6d578b297fdbbd" + url: "https://pub.dev" + source: hosted + version: "4.0.7" args: dependency: transitive description: @@ -145,6 +153,14 @@ packages: url: "https://pub.dev" source: hosted version: "1.19.1" + color: + dependency: transitive + description: + name: color + sha256: ddcdf1b3badd7008233f5acffaf20ca9f5dc2cd0172b75f68f24526a5f5725cb + url: "https://pub.dev" + source: hosted + version: "3.0.0" convert: dependency: transitive description: @@ -177,6 +193,14 @@ packages: url: "https://pub.dev" source: hosted version: "3.1.1" + dartx: + dependency: transitive + description: + name: dartx + sha256: "8b25435617027257d43e6508b5fe061012880ddfdaa75a71d607c3de2a13d244" + url: "https://pub.dev" + source: hosted + version: "1.2.0" dio: dependency: "direct main" description: @@ -230,6 +254,22 @@ packages: description: flutter source: sdk version: "0.0.0" + flutter_gen_core: + dependency: transitive + description: + name: flutter_gen_core + sha256: eda54fdc5de08e7eeea663eb8442aafc8660b5a13fda4e0c9e572c64e50195fb + url: "https://pub.dev" + source: hosted + version: "5.11.0" + flutter_gen_runner: + dependency: "direct dev" + description: + name: flutter_gen_runner + sha256: "669bf8b7a9b4acbdcb7fcc5e12bf638aca19acedf43341714cbca3bf3a219521" + url: "https://pub.dev" + source: hosted + version: "5.11.0" flutter_lints: dependency: "direct dev" description: @@ -312,6 +352,14 @@ packages: url: "https://pub.dev" source: hosted version: "2.3.2" + hashcodes: + dependency: transitive + description: + name: hashcodes + sha256: "80f9410a5b3c8e110c4b7604546034749259f5d6dcca63e0d3c17c9258f1a651" + url: "https://pub.dev" + source: hosted + version: "2.0.0" http: dependency: transitive description: @@ -336,6 +384,22 @@ packages: url: "https://pub.dev" source: hosted version: "4.1.2" + image: + dependency: transitive + description: + name: image + sha256: "4e973fcf4caae1a4be2fa0a13157aa38a8f9cb049db6529aa00b4d71abc4d928" + url: "https://pub.dev" + source: hosted + version: "4.5.4" + image_size_getter: + dependency: transitive + description: + name: image_size_getter + sha256: "7c26937e0ae341ca558b7556591fd0cc456fcc454583b7cb665d2f03e93e590f" + url: "https://pub.dev" + source: hosted + version: "2.4.1" io: dependency: transitive description: @@ -536,6 +600,14 @@ packages: url: "https://pub.dev" source: hosted version: "1.5.1" + posix: + dependency: transitive + description: + name: posix + sha256: "6323a5b0fa688b6a010df4905a56b00181479e6d10534cecfecede2aa55add61" + url: "https://pub.dev" + source: hosted + version: "6.0.3" provider: dependency: "direct main" description: @@ -709,6 +781,14 @@ packages: url: "https://pub.dev" source: hosted version: "0.7.4" + time: + dependency: transitive + description: + name: time + sha256: "370572cf5d1e58adcb3e354c47515da3f7469dac3a95b447117e728e7be6f461" + url: "https://pub.dev" + source: hosted + version: "2.1.5" timing: dependency: transitive description: