Improve login page UI

Prime-Holding · Dec 12, 2024 · e9c6302 · e9c6302
1 parent 996119e
commit e9c6302
Show file tree

Hide file tree

Showing 10 changed files with 190 additions and 126 deletions.
diff --git a/..._templates/bricks/feature_login/__brick__/lib/feature_login/ui_components/login_form.dart b/..._templates/bricks/feature_login/__brick__/lib/feature_login/ui_components/login_form.dart
@@ -46,11 +46,6 @@ class _LoginFormState extends State<LoginForm> {
   Widget build(BuildContext context) => Column(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
-          Text(
-            widget.title,
-            style: context.designSystem.typography.h3Reg14,
-            textAlign: TextAlign.center,
-          ),
           RxTextFormFieldBuilder<LoginBlocType>(
             state: (bloc) => bloc.states.email.translate(context),
             showErrorState: (bloc) => bloc.states.showErrors,
@@ -71,11 +66,19 @@ class _LoginFormState extends State<LoginForm> {
               context,
             ),
           ),
-          SizedBox(height: context.designSystem.spacing.xs1),
+          SizedBox(height: context.designSystem.spacing.m),
           RxBlocBuilder<LoginBlocType, bool>(
             state: (bloc) => bloc.states.isLoading,
             builder: _buildLoginButton,
           ),
+          SizedBox(height: context.designSystem.spacing.l),
+          GestureDetector(
+            onTap: () {
+              // Implement your logic here
+            },
+            child: Text(context.l10n.featureLogin.forgottenPassword),
+          ),
+          SizedBox(height: context.designSystem.spacing.xs1),
           AppErrorModalWidget<LoginBlocType>(
             errorState: (bloc) => bloc.states.errors,
           ),
@@ -94,7 +97,14 @@ class _LoginFormState extends State<LoginForm> {
         focusNode: _passwordFocusNode,
         onEditingComplete: () => FocusScope.of(context).unfocus(),
         decoration: fieldState.decoration.copyWith(
+          labelStyle: fieldState.showError
+              ? fieldState.decoration.labelStyle
+              : fieldState.decoration.labelStyle
+                  ?.copyWith(color: DefaultTextStyle.of(context).style.color),
           labelText: context.l10n.field.password,
+          hintText: context.l10n.featureLogin.passwordHint,
+          hintStyle: context.designSystem.typography.h2Reg16,
+          helperText: ' ', // this will prevent the error text from shifting
         ),
       );
 
@@ -110,7 +120,14 @@ class _LoginFormState extends State<LoginForm> {
         onEditingComplete: () =>
             FocusScope.of(context).requestFocus(_passwordFocusNode),
         decoration: fieldState.decoration.copyWith(
+          labelStyle: fieldState.showError
+              ? fieldState.decoration.labelStyle
+              : fieldState.decoration.labelStyle
+                  ?.copyWith(color: DefaultTextStyle.of(context).style.color),
           labelText: context.l10n.field.email,
+          hintText: context.l10n.featureLogin.emailHint,
+          hintStyle: context.designSystem.typography.h2Reg16,
+          helperText: ' ', // this will prevent the error text from shifting
         ),
       );
 

diff --git a/...li/mason_templates/bricks/feature_login/__brick__/lib/feature_login/views/login_page.dart b/...li/mason_templates/bricks/feature_login/__brick__/lib/feature_login/views/login_page.dart
@@ -5,8 +5,7 @@ import 'dart:io' show Platform;{{/enable_social_logins}}
 
 import 'package:flutter/material.dart';
 
-import '../../app_extensions.dart';
-import '../../base/common_ui_components/custom_app_bar.dart';{{#enable_social_logins}}
+import '../../app_extensions.dart';{{#enable_social_logins}}
 import '../../lib_social_logins/ui_components/apple_login_widget.dart';
 import '../../lib_social_logins/ui_components/facebook_login_widget.dart';
 import '../../lib_social_logins/ui_components/google_login_widget.dart';{{/enable_social_logins}}{{#enable_login}}
@@ -18,33 +17,78 @@ class LoginPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) => Scaffold(
         resizeToAvoidBottomInset: false,
-        appBar: customAppBar(
-          context,
-          title: context.l10n.featureLogin.loginPageTitle,
-        ),
         body: SafeArea(
           child: Padding(
             padding: EdgeInsets.symmetric(
               horizontal: context.designSystem.spacing.xxl2,
             ),
-            child: {{^enable_login}}{{^enable_social_logins}}const {{/enable_social_logins}}{{/enable_login}}Column(
-              mainAxisAlignment: MainAxisAlignment.center,
+            child: {{^enable_login}}{{^enable_social_logins}}const {{/enable_social_logins}}{{/enable_login}}Column({{^enable_login}}{{^enable_social_logins}}
+              mainAxisAlignment: MainAxisAlignment.center,{{/enable_social_logins}}{{/enable_login}}
               crossAxisAlignment: CrossAxisAlignment.stretch,
               children: [{{#enable_login}}
-                LoginForm(
-                  title: context.l10n.featureLogin.loginCredentialsHint,
-                ),{{/enable_login}}{{#enable_social_logins}}
-                SizedBox(height: context.designSystem.spacing.xs),
-                const FacebookLoginWidget(),
-                if (Platform.isIOS)
-                  Column(
+                Expanded(
+                  flex: 1,
+                  child: Column(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    crossAxisAlignment: CrossAxisAlignment.stretch,
                     children: [
+                      Text(context.l10n.featureLogin.loginPageTitle,
+                          textAlign: TextAlign.center,
+                          style: context.designSystem.typography.h1Bold24),
+                      SizedBox(height: context.designSystem.spacing.xxxxl),
+                      LoginForm(
+                        title: context.l10n.featureLogin.loginCredentialsHint,
+                      ),{{/enable_login}}{{#enable_social_logins}}
+                      SizedBox(height: context.designSystem.spacing.xs1),
+                      Row(
+                        mainAxisSize: MainAxisSize.max,
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          Expanded(
+                            flex: 1,
+                            child: Divider(
+                                color: context.designSystem.colors.gray),
+                          ),
+                          Padding(
+                            padding: EdgeInsets.symmetric(
+                                horizontal: context.designSystem.spacing.xs),
+                            child: Text(context.l10n.featureLogin.or),
+                          ),
+                          Expanded(
+                            flex: 1,
+                            child: Divider(
+                                color: context.designSystem.colors.gray),
+                          ),
+                        ],
+                      ),
+                      SizedBox(height: context.designSystem.spacing.m),
+                      const FacebookLoginWidget(),
+                      if (Platform.isIOS)
+                        Column(
+                          children: [
+                            SizedBox(height: context.designSystem.spacing.xs),
+                            const AppleLoginWidget(),
+                          ],
+                        ),
                       SizedBox(height: context.designSystem.spacing.xs),
-                      const AppleLoginWidget(),
+                      const GoogleLoginWidget(),{{/enable_social_logins}}{{#enable_login}}
                     ],
                   ),
-                SizedBox(height: context.designSystem.spacing.xs),
-                const GoogleLoginWidget(),{{/enable_social_logins}}{{^enable_login}}{{^enable_social_logins}}
+                ),
+                RichText(
+                    textAlign: TextAlign.center,
+                    text: TextSpan(
+                      text: context.l10n.featureLogin.dontHaveAccount,
+                      style: context.designSystem.typography.h2Reg16.copyWith(color: context.designSystem.colors.gray),
+                      children: [
+                        const TextSpan(text: ' '),
+                        TextSpan(
+                          text: context.l10n.featureLogin.signUpLabel,
+                          style: const TextStyle(fontWeight: FontWeight.bold),
+                        ),
+                      ],
+                    )),
+                SizedBox(height: context.designSystem.spacing.xl),{{/enable_login}}{{^enable_login}}{{^enable_social_logins}}
                 Center(child: Text('No login option has been selected for the project.',textAlign: TextAlign.center,),),{{/enable_social_logins}}{{/enable_login}}
               ],
             ),

diff --git a/...s/rx_bloc_cli/mason_templates/bricks/lib_auth/__brick__/lib/l10n/arb/feature_login/bg.arb b/...s/rx_bloc_cli/mason_templates/bricks/lib_auth/__brick__/lib/l10n/arb/feature_login/bg.arb
@@ -1,11 +1,17 @@
 {
   "@@locale": "bg",
   "loginPageTitle": "Примерно влизане"{{#enable_login}},
-  "logIn" : "Вход с E-mail",
+  "logIn" : "Вход",
   "logOut" : "Излезте",
   "profile" : "Профил",
   "notifications" : "Известия",
-  "loginCredentialsHint" : "Въведете идентификационните си данни за вход: \n Валиден имейл адрес. \n Най-малко 6 знака парола."{{/enable_login}}{{#enable_social_logins}},
+  "loginCredentialsHint" : "Въведете идентификационните си данни за вход:",
+  "emailHint" : "Валиден имейл адрес",
+  "passwordHint" : "Най-малко 6 знака парола",
+  "forgottenPassword" : "Забравихте ли паролата си?",
+  "or" : "или",
+  "dontHaveAccount" : "Нямате акаунт?",
+  "signUpLabel" : "Регистрирайте се!",
   "appleLogin":"Вход с Apple",
   "googleLogin":"Вход с Google",
   "facebookLogin":"Вход с Facebook"{{/enable_social_logins}}

diff --git a/...s/rx_bloc_cli/mason_templates/bricks/lib_auth/__brick__/lib/l10n/arb/feature_login/en.arb b/...s/rx_bloc_cli/mason_templates/bricks/lib_auth/__brick__/lib/l10n/arb/feature_login/en.arb
@@ -1,11 +1,17 @@
 {
   "@@locale": "en",
   "loginPageTitle": "Login sample"{{#enable_login}},
-  "logIn" : "Log in with Email",
+  "logIn" : "Login",
   "logOut" : "Log out",
   "profile" : "Profile",
   "notifications" : "Notifications",
-  "loginCredentialsHint" : "Enter your login credentials: \n A valid email address. \n At least 6 characters password."{{/enable_login}}{{#enable_social_logins}},
+  "loginCredentialsHint" : "Enter your login credentials:",
+  "emailHint" : "A valid email address",
+  "passwordHint" : "At least 6 characters password",
+  "forgottenPassword" : "Forgotten Password?",
+  "or" : "or",
+  "dontHaveAccount" : "Don`t have an account?",
+  "signUpLabel" : "Sign up!",
   "appleLogin":"Sign in with Apple",
   "googleLogin":"Sign in with Google",
   "facebookLogin":"Login with Facebook"{{/enable_social_logins}}

diff --git a/...s/lib_social_logins/__brick__/lib/lib_social_logins/ui_components/apple_login_widget.dart b/...s/lib_social_logins/__brick__/lib/lib_social_logins/ui_components/apple_login_widget.dart
@@ -37,18 +37,21 @@ class AppleLoginWidget extends StatelessWidget {
           state: (bloc) => bloc.states.isLoading,
           builder: (context, snapshot, bloc) => SocialLoginButton(
             isLoading: (snapshot.data ?? false) ? false : true,
-            textStyle: context.designSystem.typography.appleButtonText,
-            backgroundColor: context.designSystem.colors.appleBackground,
+            textStyle: context.designSystem.typography.socialButtonText,
+            backgroundColor: context.designSystem.colors.backgroundColor,
+            borderSide: BorderSide(
+              color: context.designSystem.colors.white,
+              width: 0.3,
+            ),
             text: context.l10n.featureLogin.appleLogin,
-            progressIndicatorColor:
-                context.designSystem.colors.appleButtonText,
+            progressIndicatorColor: context.designSystem.colors.socialButtonText,
             onPressed:
                 (snapshot.data ?? false) ? null : () => bloc.events.login(),
             child: SvgPicture.asset(
               context.designSystem.images.appleLogo,
               height: context.designSystem.spacing.xl,
               colorFilter: ColorFilter.mode(
-                context.designSystem.colors.appleButtonText,
+                context.designSystem.colors.appleBackground,
                 BlendMode.srcIn,
               ),
             ),

diff --git a/...ib_social_logins/__brick__/lib/lib_social_logins/ui_components/facebook_login_widget.dart b/...ib_social_logins/__brick__/lib/lib_social_logins/ui_components/facebook_login_widget.dart
@@ -28,48 +28,52 @@ class FacebookLoginWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final current = Column(
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        children: [
-          AppErrorModalWidget<SocialLoginBlocType>(
-            errorState: (bloc) => bloc.states.errors,
-          ),
-          RxBlocBuilder<SocialLoginBlocType, bool>(
-            state: (bloc) => bloc.states.isLoading,
-            builder: (context, snapshot, bloc) => SocialLoginButton(
-              isLoading: (snapshot.data ?? false) ? false : true,
-              backgroundColor: context.designSystem.colors.facebookBackground,
-              text: context.l10n.featureLogin.facebookLogin,
-              textStyle: context.designSystem.typography.facebookButtonText,
-              progressIndicatorColor:
-                  context.designSystem.colors.facebookTextColor,
-              onPressed:
-                   (snapshot.data ?? false) ? null : () => bloc.events.login(),
-              child: SvgPicture.asset(
-                context.designSystem.images.facebookLogo,
-                colorFilter: ColorFilter.mode(
-                    context.designSystem.colors.facebookTextColor,
-                    BlendMode.srcIn,
-                ),
-                height: context.designSystem.spacing.xl,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        AppErrorModalWidget<SocialLoginBlocType>(
+          errorState: (bloc) => bloc.states.errors,
+        ),
+        RxBlocBuilder<SocialLoginBlocType, bool>(
+          state: (bloc) => bloc.states.isLoading,
+          builder: (context, snapshot, bloc) => SocialLoginButton(
+            isLoading: (snapshot.data ?? false) ? false : true,
+            backgroundColor: context.designSystem.colors.backgroundColor,
+            borderSide: BorderSide(
+              color: context.designSystem.colors.white,
+              width: 0.3,
+            ),
+            text: context.l10n.featureLogin.facebookLogin,
+            textStyle: context.designSystem.typography.socialButtonText,
+            progressIndicatorColor:
+                context.designSystem.colors.socialButtonText,
+            onPressed:
+                (snapshot.data ?? false) ? null : () => bloc.events.login(),
+            child: SvgPicture.asset(
+              context.designSystem.images.facebookLogo,
+              colorFilter: ColorFilter.mode(
+                context.designSystem.colors.facebookBackground,
+                BlendMode.srcIn,
               ),
+              height: context.designSystem.spacing.xl,
             ),
           ),
-        ],
-      );
+        ),
+      ],
+    );
 
     if (isInTestMode) {
       return current;
     }
 
     return MultiProvider(
-        providers: [
-          ..._dataSources,
-          ..._repositories,
-          ..._services,
-          ..._blocs,
-        ],
-        child: current,
-      );
+      providers: [
+        ..._dataSources,
+        ..._repositories,
+        ..._services,
+        ..._blocs,
+      ],
+      child: current,
+    );
   }
 
   List<Provider> get _dataSources => [