From 99348f3d9379a184323c5cb702269ebfeb4757d0 Mon Sep 17 00:00:00 2001 From: VINISTAN Date: Sat, 8 Feb 2025 00:27:13 +0530 Subject: [PATCH] Registration Page toggle position adjusted & pink background removed during scroll --- lib/config/my_router.dart | 4 +- .../auth_verification/registration.dart | 1367 +++++++++-------- .../routes/auth_routes/login_route.dart | 38 +- 3 files changed, 719 insertions(+), 690 deletions(-) diff --git a/lib/config/my_router.dart b/lib/config/my_router.dart index 3bed1c02..aa7bfb5b 100644 --- a/lib/config/my_router.dart +++ b/lib/config/my_router.dart @@ -336,8 +336,8 @@ final GoRouter router = GoRouter( routes: [ GoRoute( path: '/', - //builder: (context, state) => LoginRoute(), - builder: (context, state) => RegisterScreen(), + builder: (context, state) => LoginRoute(), + ), // GoRoute( // path: '/', diff --git a/lib/presentation/Screens/auth_verification/registration.dart b/lib/presentation/Screens/auth_verification/registration.dart index cd1babd9..31e17ba4 100644 --- a/lib/presentation/Screens/auth_verification/registration.dart +++ b/lib/presentation/Screens/auth_verification/registration.dart @@ -336,710 +336,717 @@ class _RegisterScreenState extends State { } return Scaffold( - appBar: AppBar( - actions: [ + + body: + + Column( + children: [ Consumer( builder: (context, ref, _) { final locale = ref.watch(localeProvider); // Current locale - return MyToggle( - isOn: locale?.languageCode == 'en', - knobTextWhenOn: 'ع', - knobTextWhenOff: 'EN', - pathColorWhenOn: Colors.grey.shade300, - pathColorWhenOff: Colors.grey.shade300, - onTap: () { - ref.read(localeProvider.notifier).toggleLocale(); - }, - ); - // IconButton( - // icon: Icon(locale?.languageCode == 'en' - // ? Icons.toggle_off_outlined - // : Icons.toggle_on_outlined,), - // onPressed: () { - // ref.read(localeProvider.notifier).toggleLocale(); - // }, - // ); + return + Align( + alignment: AlignmentDirectional.topEnd, + child: MyToggle( + isOn: locale?.languageCode == 'en', + knobTextWhenOn: 'ع', + knobTextWhenOff: 'EN', + pathColorWhenOn: Colors.grey.shade300, + pathColorWhenOff: Colors.grey.shade300, + onTap: () { + ref.read(localeProvider.notifier).toggleLocale(); + }, + ), + ); }, ), - ], - backgroundColor: Colors.white, - ), - backgroundColor: Colors.white, - body: registrationSuccess - ? Padding( - padding: const EdgeInsets.all(20.0), + Container( + height: MediaQuery.of(context).size.height/1.2, + child: SingleChildScrollView( child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - SizedBox(height: screenheight / 8), - buildIconContainer(Icons.report, Color(0xFF7DAFBC)), - SizedBox(height: 20), - Text( - context.translate( - 'Your registration is pending for verification.', - 'تسجيلك في انتظار التحقق.'), - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 16, - fontWeight: FontWeight.w500, - color: Color(0xFF414042)), - ), - SizedBox(height: 10), - Text( - context.translate( - 'Kindly verify your mail to proceed further.', - 'يرجى التحقق من البريد الخاص بك للمضي قدما.'), - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 14, - color: Color(0xFF898C81), - ), - ), - SizedBox(height: 10), - ElevatedButton( - onPressed: () => {context.go('/')}, - child: Text( - context.translate('Go to Login', 'اذهب إلى تسجيل الدخول'), - ), - ), - SizedBox(height: screenheight / 5), - Center( - child: Container( - height: screenheight / 16, - width: screenwidth / 2.5, - decoration: BoxDecoration( - image: DecorationImage( - image: AssetImage( - "assets/splash_screen/logo.png"), // Background image asset - fit: BoxFit.fill, - ), - ), - )) - ], - ), - ) - : registrationFailed - ? Padding( - padding: const EdgeInsets.all(20.0), - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - SizedBox(height: screenheight / 8), - buildIconContainer(Icons.report, Colors.red), - SizedBox(height: 20), - Text( - context.translate('Sorry ${_usernameController.text}!', - 'آسف ${_usernameController.text}!'), - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 16, - fontWeight: FontWeight.w500, - color: Color(0xFF414042)), - ), - SizedBox(height: 10), - Text( - context.translate( - 'Your registration process failed. For further assistance, please contact support.', - 'فشلت عملية التسجيل الخاصة بك. لمزيد من المساعدة، يرجى الاتصال بالدعم.'), - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 14, - color: Color(0xFF898C81), - ), - ), - SizedBox(height: 10), - ElevatedButton( - onPressed: () => { - setState(() { - registrationFailed = false; - registrationSuccess = false; - _usernameController.clear(); - _emailController.clear(); - _passwordController.clear(); - _confirmpasswordController.clear(); - isChecked = false; - }) - }, - child: Text( - context.translate('Retry', 'أعد المحاولة'), - ), - ), - SizedBox(height: screenheight / 5), - Center( - child: Container( - height: screenheight / 16, - width: screenwidth / 2.5, - decoration: BoxDecoration( - image: DecorationImage( - image: AssetImage( - "assets/splash_screen/logo.png"), // Background image asset - fit: BoxFit.fill, - ), - ), - )) - ], - ), - ) - : Form( - key: _formKey, - child: SingleChildScrollView( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - SizedBox(height: screenheight / 60), - Text( - // 'Register', - AppLocalizations.of(context)!.register_title, - style: TextStyle( - fontSize: 32, fontWeight: FontWeight.w400), - ), - SizedBox(height: 10), - Text(AppLocalizations.of(context)!.register_details), + children : [ - SizedBox(height: 20), - // Display this if registration is pending approval - Padding( - padding: const EdgeInsets.only( - top: 5.0, bottom: 10, left: 30, right: 30), - child: TextFormField( - controller: _usernameController, - // focusNode: _focusNodes[0], - decoration: InputDecoration( - // hintText: _showHints[0] ? 'Username' : null, - hintText: _showHints[0] - ? AppLocalizations.of(context)!.register_name - : null, - prefixIconConstraints: const BoxConstraints( - maxWidth: 25 + 16 + 10, - maxHeight: 25 + (8 * 2), - ), - prefixIcon: Padding( - padding: const EdgeInsetsDirectional.only( - start: 16, - end: 10, - ), - child: Image.asset( - MiscIconAssetPath.person, - fit: BoxFit.fitHeight, - height: 25, - width: 25, - color: - MyTheme.topicColor(IndicatorTopic.economy) - .shade300, - ), - ), - - // prefixIcon: Icon( - // Icons.person, - // color: Color(0xFF90B0D5), - // - // ), - // border: OutlineInputBorder(), - enabledBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: BorderSide( - color: MyTheme.topicColor( - IndicatorTopic.economy) - .shade400, - width: 1), // Enabled border - ), - focusedBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: BorderSide( - color: Colors.deepPurple, - width: 2), // Focused border - ), - errorBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: BorderSide( - color: Color(0xFFb22222), - width: 1), // Error border - ), - focusedErrorBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: BorderSide( - color: Color(0xFFb22222), - width: 1), // Match the error color - ), - counterText: '', - hintStyle: TextStyle(color: Color(0xFFC3C6CB)), - ), - validator: _validateUsername, - maxLength: - 40, // Set the maximum length to 20 characters - maxLengthEnforcement: MaxLengthEnforcement.enforced, - ), - ), - SizedBox(height: 15), - Padding( - padding: const EdgeInsets.only( - top: 5.0, bottom: 10, left: 30, right: 30), - child: TextFormField( - controller: _emailController, - // focusNode: _focusNodes[1], - decoration: InputDecoration( - // hintText: 'Enter your email', - hintText: _showHints[1] - ? AppLocalizations.of(context)! - .enter_your_email - : null, - // _showHints[1] ? 'Enter your email' : null, - prefixIconConstraints: const BoxConstraints( - maxWidth: 25 + 16 + 10, - maxHeight: 25 + (8 * 2), - ), - prefixIcon: Padding( - padding: const EdgeInsetsDirectional.only( - start: 16, - end: 10, - ), - child: Image.asset( - MiscIconAssetPath.vector, - fit: BoxFit.fitHeight, - height: 20, - width: 25, - color: - MyTheme.topicColor(IndicatorTopic.economy) - .shade100, - ), - ), - - // border: OutlineInputBorder(), - enabledBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: BorderSide( - color: MyTheme.topicColor( - IndicatorTopic.economy) - .shade400, - width: 1), - ), - focusedBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: BorderSide( - color: Colors.deepPurple, - width: 2), // Focused border - ), - errorBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: BorderSide( - color: Color(0xFFb22222), - width: 1), // Error border - ), - focusedErrorBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: BorderSide( - color: Color(0xFFb22222), - width: 1), // Match the error color - ), - counterText: '', - hintStyle: TextStyle(color: Color(0xFFC3C6CB)), - ), - validator: _validateEmail, - maxLength: 320, - maxLengthEnforcement: MaxLengthEnforcement.enforced, - inputFormatters: [ - LengthLimitingTextInputFormatter( - 320), // Limit to 320 characters - ], - ), - ), - SizedBox(height: 15), - Padding( - padding: const EdgeInsets.only( - top: 5.0, bottom: 10, left: 30, right: 30), - child: TextFormField( - controller: _passwordController, - // focusNode: _focusNodes[2], - obscureText: _obscurePassword, - decoration: InputDecoration( - hintText: _showHints[2] - ? AppLocalizations.of(context)! - .enter_your_password - : null, - // _showHints[2] ? 'Enter your password' : null, - prefixIconConstraints: const BoxConstraints( - maxWidth: 25 + 16 + 10, - maxHeight: 25 + (8 * 2), - ), - prefixIcon: Padding( - padding: const EdgeInsetsDirectional.only( - start: 16, - end: 10, - ), - child: Image.asset( - MiscIconAssetPath.lock, - fit: BoxFit.fitHeight, - height: 25, - width: 25, - color: - MyTheme.topicColor(IndicatorTopic.economy) - .shade300, - ), - ), - - // prefixIcon: Icon( - // Icons.lock, - // color: Color(0xFF90B0D5), - // ), - suffixIcon: IconButton( - // icon: Icon( - // _obscurePassword - // ? Icons.visibility_off - // : Icons.visibility, - // color: Color(0xFF9EA2A9), - // ), - - icon: Image.asset( - _obscurePassword - ? MiscIconAssetPath.visibilityOff - : MiscIconAssetPath.visibleOn, - - color: Color( - 0xFF9EA2A9), // Apply color if needed, but keep in mind `Image.asset` might not support color directly. - width: 24, - height: 24, - ), - - onPressed: () { - setState(() { - _obscurePassword = !_obscurePassword; - }); - }, - ), - // border: OutlineInputBorder(), - enabledBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: BorderSide( - color: MyTheme.topicColor( - IndicatorTopic.economy) - .shade400, - width: 1), - ), - focusedBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: BorderSide( - color: Colors.deepPurple, - width: 2), // Focused border - ), - errorBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: BorderSide( - color: Color(0xFFb22222), - width: 1), // Error border - ), - focusedErrorBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: BorderSide( - color: Color(0xFFb22222), - width: 1), // Match the error color - ), - - counterText: '', - hintStyle: TextStyle(color: Color(0xFFC3C6CB)), - ), - validator: _validatePassword, - maxLength: 40, - maxLengthEnforcement: MaxLengthEnforcement.enforced, - ), - ), - SizedBox(height: 15), - Padding( - padding: const EdgeInsets.only( - top: 5.0, bottom: 10, left: 30, right: 30), - child: TextFormField( - controller: _confirmpasswordController, - // focusNode: _focusNodes[3], - obscureText: _obscureConfirmPassword, - decoration: InputDecoration( - hintText: _showHints[3] - ? AppLocalizations.of(context)! - .register_Confirm_password - : null, - // _showHints[3] ? 'Confirm password' : null, - prefixIconConstraints: const BoxConstraints( - maxWidth: 25 + 16 + 10, - maxHeight: 25 + (8 * 2), - ), - prefixIcon: Padding( - padding: const EdgeInsetsDirectional.only( - start: 16, - end: 10, - ), - child: Image.asset( - MiscIconAssetPath.lock, - fit: BoxFit.fitHeight, - height: 25, - width: 25, - color: - MyTheme.topicColor(IndicatorTopic.economy) - .shade300, - ), - ), - - suffixIcon: IconButton( - icon: Image.asset( - _obscureConfirmPassword - ? MiscIconAssetPath.visibilityOff - : MiscIconAssetPath.visibleOn, - - color: Color( - 0xFF9EA2A9), // Apply color if needed, but keep in mind `Image.asset` might not support color directly. - width: 24, - height: 24, - ), - onPressed: () { - setState(() { - _obscureConfirmPassword = - !_obscureConfirmPassword; - }); - }, - ), - // border: OutlineInputBorder( - // borderSide: BorderSide(color: Colors.blue, width: 2), // Default border color - // ), - enabledBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: BorderSide( - color: MyTheme.topicColor( - IndicatorTopic.economy) - .shade400, - width: 1), - ), - focusedBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: BorderSide( - color: Colors.deepPurple, - width: 2), // Focused border - ), - errorBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: BorderSide( - color: Color(0xFFb22222), - width: 1), // Error border - ), - focusedErrorBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10), - borderSide: BorderSide( - color: Color(0xFFb22222), - width: 1), // Match the error color - ), - counterText: '', - hintStyle: TextStyle(color: Color(0xFFC3C6CB)), - ), - validator: _validateConfirmPassword, - maxLength: 40, - maxLengthEnforcement: MaxLengthEnforcement.enforced, - inputFormatters: [ - LengthLimitingTextInputFormatter( - 64), // Limit to 40 characters - ], - ), - ), - SizedBox(height: 10), - Padding( - padding: const EdgeInsets.only( - top: 1.0, bottom: 10, left: 25, right: 30), - child: Row( - mainAxisAlignment: MainAxisAlignment.start, + registrationSuccess + ? Padding( + padding: const EdgeInsets.all(20.0), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, children: [ - Checkbox( - value: isChecked, - onChanged: (value) { - setState(() { - isChecked = value ?? false; - showError = false; - }); - }, - side: BorderSide( - color: showError - ? Color(0xFFD83731) - : Color(0xFF7DAFBC), - width: 1, + SizedBox(height: screenheight / 8), + buildIconContainer(Icons.report, Color(0xFF7DAFBC)), + SizedBox(height: 20), + Text( + context.translate( + 'Your registration is pending for verification.', + 'تسجيلك في انتظار التحقق.'), + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w500, + color: Color(0xFF414042)), + ), + SizedBox(height: 10), + Text( + context.translate( + 'Kindly verify your mail to proceed further.', + 'يرجى التحقق من البريد الخاص بك للمضي قدما.'), + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 14, + color: Color(0xFF898C81), ), ), - Expanded( - child: Text.rich( - TextSpan( - text: AppLocalizations.of(context)!.agree, - // text: 'I agree to ', - children: [ - TextSpan( - text: AppLocalizations.of(context)! - .terms_conditions, - // text: 'Terms & Conditions', - style: TextStyle( - fontWeight: FontWeight.bold, - color: Color(0xFF985400), - // Makes the text bold - decoration: - TextDecoration.underline, - decorationColor: Color(0xFF985400), - decorationThickness: 1), - ), - TextSpan( - text: AppLocalizations.of(context)! - .t_and), - TextSpan( - text: AppLocalizations.of(context)! - .privacy_policy, - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 14, - fontFamily: 'Roboto', - color: Color(0xFF985400), - decoration: - TextDecoration.underline, - decorationColor: Color(0xFF648CBA), - decorationThickness: 1), - ), - TextSpan( - text: AppLocalizations.of(context)! - .conditions), - ], - ), - ), - ), - ], - ), - ), - if (showError) - Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Padding( - padding: const EdgeInsets.only(left: 30.0), + SizedBox(height: 10), + ElevatedButton( + onPressed: () => {context.go('/')}, child: Text( - 'Required', - style: TextStyle( - color: Color(0xFFb22222), - fontSize: 12, - ), + context.translate('Go to Login', 'اذهب إلى تسجيل الدخول'), ), ), + SizedBox(height: screenheight / 5), + Center( + child: Container( + height: screenheight / 16, + width: screenwidth / 2.5, + decoration: BoxDecoration( + image: DecorationImage( + image: AssetImage( + "assets/splash_screen/logo.png"), // Background image asset + fit: BoxFit.fill, + ), + ), + )) ], ), - SizedBox(height: 20), - Padding( - padding: const EdgeInsets.only( - top: 5.0, bottom: 10, left: 30, right: 30), - child: SizedBox( - width: screenwidth / 1, - child: ElevatedButton( - onPressed: isRegistering ? null : _registerUser, - style: ElevatedButton.styleFrom( - backgroundColor: Color( - 0xFFA7887A), // Brownish color for Register - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(10), - ), - ), - child: Row( - mainAxisSize: MainAxisSize.min, + ) + : registrationFailed + ? Padding( + padding: const EdgeInsets.all(20.0), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, children: [ + SizedBox(height: screenheight / 8), + buildIconContainer(Icons.report, Colors.red), + SizedBox(height: 20), Text( - // "Register", - AppLocalizations.of(context)! - .register_title, + context.translate('Sorry ${_usernameController.text}!', + 'آسف ${_usernameController.text}!'), + textAlign: TextAlign.center, style: TextStyle( - fontSize: 16, color: Colors.white), + fontSize: 16, + fontWeight: FontWeight.w500, + color: Color(0xFF414042)), ), - SizedBox(width: 8), - const Icon( - Icons.chevron_right_outlined, - color: Colors - .white, // Set your desired color here - ) - ], - ), - ), - ), - ), - SizedBox(height: 15), - Text( - AppLocalizations.of(context)!.account_confirmation, - style: TextStyle( - fontSize: 14, color: Colors.grey[600]), - ), - SizedBox(height: 15), - Padding( - padding: const EdgeInsets.only( - top: 5.0, bottom: 10, left: 30, right: 30), - child: SizedBox( - width: screenwidth / 1, - child: ElevatedButton( - onPressed: () { - context.go('/'); - }, - style: ElevatedButton.styleFrom( - backgroundColor: Color( - 0xFF82AFCB), // Blueish color for Login - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(10), - ), - ), - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - Text( - AppLocalizations.of(context)!.login_title, - style: TextStyle( - fontSize: 16, color: Colors.white), - ), - SizedBox(width: 8), - const Icon( - Icons.chevron_right_outlined, - color: Colors - .white, // Set your desired color here - ) + SizedBox(height: 10), + Text( + context.translate( + 'Your registration process failed. For further assistance, please contact support.', + 'فشلت عملية التسجيل الخاصة بك. لمزيد من المساعدة، يرجى الاتصال بالدعم.'), + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 14, + color: Color(0xFF898C81), + ), + ), + SizedBox(height: 10), + ElevatedButton( + onPressed: () => { + setState(() { + registrationFailed = false; + registrationSuccess = false; + _usernameController.clear(); + _emailController.clear(); + _passwordController.clear(); + _confirmpasswordController.clear(); + isChecked = false; + }) + }, + child: Text( + context.translate('Retry', 'أعد المحاولة'), + ), + ), + SizedBox(height: screenheight / 5), + Center( + child: Container( + height: screenheight / 16, + width: screenwidth / 2.5, + decoration: BoxDecoration( + image: DecorationImage( + image: AssetImage( + "assets/splash_screen/logo.png"), // Background image asset + fit: BoxFit.fill, + ), + ), + )) ], ), + ) - // child: GestureDetector( - // onTap: () { - // // Navigate to LoginRoute - // context.go('/'); - // }, - // child: Row( - // mainAxisSize: MainAxisSize.min, - // children: [ - // Text( - // "Login", - // style: TextStyle( - // fontSize: 16, - // color: Colors.white, - // ), - // ), - // SizedBox(width: 8), - // Icon(Icons.arrow_forward, - // color: Colors.white), - // ], - // ), - // ), + : Form( + key: _formKey, + child: SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + SizedBox(height: screenheight / 60), + Text( + // 'Register', + AppLocalizations.of(context)!.register_title, + style: TextStyle( + fontSize: 32, fontWeight: FontWeight.w400), + ), + SizedBox(height: 10), + Text(AppLocalizations.of(context)!.register_details), + + SizedBox(height: 20), + // Display this if registration is pending approval + Padding( + padding: const EdgeInsets.only( + top: 5.0, bottom: 10, left: 30, right: 30), + child: TextFormField( + controller: _usernameController, + // focusNode: _focusNodes[0], + decoration: InputDecoration( + // hintText: _showHints[0] ? 'Username' : null, + hintText: _showHints[0] + ? AppLocalizations.of(context)!.register_name + : null, + prefixIconConstraints: const BoxConstraints( + maxWidth: 25 + 16 + 10, + maxHeight: 25 + (8 * 2), + ), + prefixIcon: Padding( + padding: const EdgeInsetsDirectional.only( + start: 16, + end: 10, + ), + child: Image.asset( + MiscIconAssetPath.person, + fit: BoxFit.fitHeight, + height: 25, + width: 25, + color: + MyTheme.topicColor(IndicatorTopic.economy) + .shade300, + ), + ), + + // prefixIcon: Icon( + // Icons.person, + // color: Color(0xFF90B0D5), + // + // ), + // border: OutlineInputBorder(), + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide( + color: MyTheme.topicColor( + IndicatorTopic.economy) + .shade400, + width: 1), // Enabled border + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide( + color: Colors.deepPurple, + width: 2), // Focused border + ), + errorBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide( + color: Color(0xFFb22222), + width: 1), // Error border + ), + focusedErrorBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide( + color: Color(0xFFb22222), + width: 1), // Match the error color + ), + counterText: '', + hintStyle: TextStyle(color: Color(0xFFC3C6CB)), + ), + validator: _validateUsername, + maxLength: + 40, // Set the maximum length to 20 characters + maxLengthEnforcement: MaxLengthEnforcement.enforced, + ), + ), + SizedBox(height: 15), + Padding( + padding: const EdgeInsets.only( + top: 5.0, bottom: 10, left: 30, right: 30), + child: TextFormField( + controller: _emailController, + // focusNode: _focusNodes[1], + decoration: InputDecoration( + // hintText: 'Enter your email', + hintText: _showHints[1] + ? AppLocalizations.of(context)! + .enter_your_email + : null, + // _showHints[1] ? 'Enter your email' : null, + prefixIconConstraints: const BoxConstraints( + maxWidth: 25 + 16 + 10, + maxHeight: 25 + (8 * 2), + ), + prefixIcon: Padding( + padding: const EdgeInsetsDirectional.only( + start: 16, + end: 10, + ), + child: Image.asset( + MiscIconAssetPath.vector, + fit: BoxFit.fitHeight, + height: 20, + width: 25, + color: + MyTheme.topicColor(IndicatorTopic.economy) + .shade100, + ), + ), + + // border: OutlineInputBorder(), + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide( + color: MyTheme.topicColor( + IndicatorTopic.economy) + .shade400, + width: 1), + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide( + color: Colors.deepPurple, + width: 2), // Focused border + ), + errorBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide( + color: Color(0xFFb22222), + width: 1), // Error border + ), + focusedErrorBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide( + color: Color(0xFFb22222), + width: 1), // Match the error color + ), + counterText: '', + hintStyle: TextStyle(color: Color(0xFFC3C6CB)), + ), + validator: _validateEmail, + maxLength: 320, + maxLengthEnforcement: MaxLengthEnforcement.enforced, + inputFormatters: [ + LengthLimitingTextInputFormatter( + 320), // Limit to 320 characters + ], + ), + ), + SizedBox(height: 15), + Padding( + padding: const EdgeInsets.only( + top: 5.0, bottom: 10, left: 30, right: 30), + child: TextFormField( + controller: _passwordController, + // focusNode: _focusNodes[2], + obscureText: _obscurePassword, + decoration: InputDecoration( + hintText: _showHints[2] + ? AppLocalizations.of(context)! + .enter_your_password + : null, + // _showHints[2] ? 'Enter your password' : null, + prefixIconConstraints: const BoxConstraints( + maxWidth: 25 + 16 + 10, + maxHeight: 25 + (8 * 2), + ), + prefixIcon: Padding( + padding: const EdgeInsetsDirectional.only( + start: 16, + end: 10, + ), + child: Image.asset( + MiscIconAssetPath.lock, + fit: BoxFit.fitHeight, + height: 25, + width: 25, + color: + MyTheme.topicColor(IndicatorTopic.economy) + .shade300, + ), + ), + + // prefixIcon: Icon( + // Icons.lock, + // color: Color(0xFF90B0D5), + // ), + suffixIcon: IconButton( + // icon: Icon( + // _obscurePassword + // ? Icons.visibility_off + // : Icons.visibility, + // color: Color(0xFF9EA2A9), + // ), + + icon: Image.asset( + _obscurePassword + ? MiscIconAssetPath.visibilityOff + : MiscIconAssetPath.visibleOn, + + color: Color( + 0xFF9EA2A9), // Apply color if needed, but keep in mind `Image.asset` might not support color directly. + width: 24, + height: 24, + ), + + onPressed: () { + setState(() { + _obscurePassword = !_obscurePassword; + }); + }, + ), + // border: OutlineInputBorder(), + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide( + color: MyTheme.topicColor( + IndicatorTopic.economy) + .shade400, + width: 1), + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide( + color: Colors.deepPurple, + width: 2), // Focused border + ), + errorBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide( + color: Color(0xFFb22222), + width: 1), // Error border + ), + focusedErrorBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide( + color: Color(0xFFb22222), + width: 1), // Match the error color + ), + + counterText: '', + hintStyle: TextStyle(color: Color(0xFFC3C6CB)), + ), + validator: _validatePassword, + maxLength: 40, + maxLengthEnforcement: MaxLengthEnforcement.enforced, + ), + ), + SizedBox(height: 15), + Padding( + padding: const EdgeInsets.only( + top: 5.0, bottom: 10, left: 30, right: 30), + child: TextFormField( + controller: _confirmpasswordController, + // focusNode: _focusNodes[3], + obscureText: _obscureConfirmPassword, + decoration: InputDecoration( + hintText: _showHints[3] + ? AppLocalizations.of(context)! + .register_Confirm_password + : null, + // _showHints[3] ? 'Confirm password' : null, + prefixIconConstraints: const BoxConstraints( + maxWidth: 25 + 16 + 10, + maxHeight: 25 + (8 * 2), + ), + prefixIcon: Padding( + padding: const EdgeInsetsDirectional.only( + start: 16, + end: 10, + ), + child: Image.asset( + MiscIconAssetPath.lock, + fit: BoxFit.fitHeight, + height: 25, + width: 25, + color: + MyTheme.topicColor(IndicatorTopic.economy) + .shade300, + ), + ), + + suffixIcon: IconButton( + icon: Image.asset( + _obscureConfirmPassword + ? MiscIconAssetPath.visibilityOff + : MiscIconAssetPath.visibleOn, + + color: Color( + 0xFF9EA2A9), // Apply color if needed, but keep in mind `Image.asset` might not support color directly. + width: 24, + height: 24, + ), + onPressed: () { + setState(() { + _obscureConfirmPassword = + !_obscureConfirmPassword; + }); + }, + ), + // border: OutlineInputBorder( + // borderSide: BorderSide(color: Colors.blue, width: 2), // Default border color + // ), + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide( + color: MyTheme.topicColor( + IndicatorTopic.economy) + .shade400, + width: 1), + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide( + color: Colors.deepPurple, + width: 2), // Focused border + ), + errorBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide( + color: Color(0xFFb22222), + width: 1), // Error border + ), + focusedErrorBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide( + color: Color(0xFFb22222), + width: 1), // Match the error color + ), + counterText: '', + hintStyle: TextStyle(color: Color(0xFFC3C6CB)), + ), + validator: _validateConfirmPassword, + maxLength: 40, + maxLengthEnforcement: MaxLengthEnforcement.enforced, + inputFormatters: [ + LengthLimitingTextInputFormatter( + 64), // Limit to 40 characters + ], + ), + ), + SizedBox(height: 10), + Padding( + padding: const EdgeInsets.only( + top: 1.0, bottom: 10, left: 25, right: 30), + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Checkbox( + value: isChecked, + onChanged: (value) { + setState(() { + isChecked = value ?? false; + showError = false; + }); + }, + side: BorderSide( + color: showError + ? Color(0xFFD83731) + : Color(0xFF7DAFBC), + width: 1, + ), + ), + Expanded( + child: Text.rich( + TextSpan( + text: AppLocalizations.of(context)!.agree, + // text: 'I agree to ', + children: [ + TextSpan( + text: AppLocalizations.of(context)! + .terms_conditions, + // text: 'Terms & Conditions', + style: TextStyle( + fontWeight: FontWeight.bold, + color: Color(0xFF985400), + // Makes the text bold + decoration: + TextDecoration.underline, + decorationColor: Color(0xFF985400), + decorationThickness: 1), + ), + TextSpan( + text: AppLocalizations.of(context)! + .t_and), + TextSpan( + text: AppLocalizations.of(context)! + .privacy_policy, + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 14, + fontFamily: 'Roboto', + color: Color(0xFF985400), + decoration: + TextDecoration.underline, + decorationColor: Color(0xFF648CBA), + decorationThickness: 1), + ), + TextSpan( + text: AppLocalizations.of(context)! + .conditions), + ], + ), + ), + ), + ], + ), + ), + if (showError) + Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Padding( + padding: const EdgeInsets.only(left: 30.0), + child: Text( + 'Required', + style: TextStyle( + color: Color(0xFFb22222), + fontSize: 12, + ), + ), + ), + ], + ), + SizedBox(height: 20), + Padding( + padding: const EdgeInsets.only( + top: 5.0, bottom: 10, left: 30, right: 30), + child: SizedBox( + width: screenwidth / 1, + child: ElevatedButton( + onPressed: isRegistering ? null : _registerUser, + style: ElevatedButton.styleFrom( + backgroundColor: Color( + 0xFFA7887A), // Brownish color for Register + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(10), + ), + ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text( + // "Register", + AppLocalizations.of(context)! + .register_title, + style: TextStyle( + fontSize: 16, color: Colors.white), + ), + SizedBox(width: 8), + const Icon( + Icons.chevron_right_outlined, + color: Colors + .white, // Set your desired color here + ) + ], + ), + ), + ), + ), + SizedBox(height: 15), + Text( + AppLocalizations.of(context)!.account_confirmation, + style: TextStyle( + fontSize: 14, color: Colors.grey[600]), + ), + SizedBox(height: 15), + Padding( + padding: const EdgeInsets.only( + top: 5.0, bottom: 10, left: 30, right: 30), + child: SizedBox( + width: screenwidth / 1, + child: ElevatedButton( + onPressed: () { + context.go('/'); + }, + style: ElevatedButton.styleFrom( + backgroundColor: Color( + 0xFF82AFCB), // Blueish color for Login + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(10), + ), + ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text( + AppLocalizations.of(context)!.login_title, + style: TextStyle( + fontSize: 16, color: Colors.white), + ), + SizedBox(width: 8), + const Icon( + Icons.chevron_right_outlined, + color: Colors + .white, // Set your desired color here + ) + ], + ), + + // child: GestureDetector( + // onTap: () { + // // Navigate to LoginRoute + // context.go('/'); + // }, + // child: Row( + // mainAxisSize: MainAxisSize.min, + // children: [ + // Text( + // "Login", + // style: TextStyle( + // fontSize: 16, + // color: Colors.white, + // ), + // ), + // SizedBox(width: 8), + // Icon(Icons.arrow_forward, + // color: Colors.white), + // ], + // ), + // ), + ), + ), + ), + SizedBox( + height: 10, + ), + Center( + child: Container( + height: screenheight / 16, + width: screenwidth / 3, + decoration: BoxDecoration( + image: DecorationImage( + image: AssetImage( + "assets/splash_screen/logo.png"), // Background image asset + fit: BoxFit.fill, + ), + ), + )), + SizedBox( + height: 20, + ), + ], + ), ), ), - ), - SizedBox( - height: 10, - ), - Center( - child: Container( - height: screenheight / 16, - width: screenwidth / 3, - decoration: BoxDecoration( - image: DecorationImage( - image: AssetImage( - "assets/splash_screen/logo.png"), // Background image asset - fit: BoxFit.fill, - ), - ), - )), - SizedBox( - height: 20, - ), - ], - ), - ), - ), + ]), + ), + ), + ], + ), ); } } diff --git a/lib/presentation/routes/auth_routes/login_route.dart b/lib/presentation/routes/auth_routes/login_route.dart index e4f1ee20..54a4e143 100644 --- a/lib/presentation/routes/auth_routes/login_route.dart +++ b/lib/presentation/routes/auth_routes/login_route.dart @@ -591,14 +591,16 @@ class LoginRoute extends HookConsumerWidget { height: 40, ); final screenWidth = MediaQuery.of(context).size.width; + final listViewHorizontalPadding = screenWidth < 700 ? 30 : 30 + (screenWidth - 700) / 2; final scaffoldBody = ListView( - padding: EdgeInsets.symmetric( - horizontal: listViewHorizontalPadding.toDouble(), - ), + // padding: EdgeInsets.symmetric( + // horizontal: listViewHorizontalPadding.toDouble(), + // ), children: [ - 36.verticalSpace, + 10.verticalSpace, + Align( alignment: AlignmentDirectional.topEnd, child: MyToggle( @@ -613,15 +615,35 @@ class LoginRoute extends HookConsumerWidget { ), ), 16.verticalSpace, - helloAndPleaseLoginTexts, + Padding( + padding: EdgeInsets.symmetric( + horizontal: listViewHorizontalPadding.toDouble(), + ), + child: helloAndPleaseLoginTexts, + ), 42.verticalSpace, - form, + Padding( + padding: EdgeInsets.symmetric( + horizontal: listViewHorizontalPadding.toDouble(), + ), + child: form, + ), 15.verticalSpace, - dontHaveAnAccountRegisterBtn, + Padding( + padding: EdgeInsets.symmetric( + horizontal: listViewHorizontalPadding.toDouble(), + ), + child: dontHaveAnAccountRegisterBtn, + ), 20.verticalSpace, // continueAsGuestBtn, 95.verticalSpace, - fcscBanner, + Padding( + padding: EdgeInsets.symmetric( + horizontal: listViewHorizontalPadding.toDouble(), + ), + child: fcscBanner, + ), ], ); // final bgScaffold = Scaffold(