diff --git a/lib/presentation/Screens/auth_verification/registration.dart b/lib/presentation/Screens/auth_verification/registration.dart index 01389fc0..7e33bbba 100644 --- a/lib/presentation/Screens/auth_verification/registration.dart +++ b/lib/presentation/Screens/auth_verification/registration.dart @@ -15,12 +15,12 @@ import 'package:uae_stat/presentation/components/indicators/locale_provider.dart import '../../components/my_toggle.dart'; import '../../routes/auth_routes/login_route.dart'; -class RegisterScreen extends StatefulWidget { +class RegisterScreen extends ConsumerStatefulWidget { @override _RegisterScreenState createState() => _RegisterScreenState(); } -class _RegisterScreenState extends State { +class _RegisterScreenState extends ConsumerState { final _formKey = GlobalKey(); final _usernameController = TextEditingController(); final _emailController = TextEditingController(); @@ -311,6 +311,7 @@ class _RegisterScreenState extends State { Widget build(BuildContext context) { double screenheight = MediaQuery.of(context).size.height; double screenwidth = MediaQuery.of(context).size.width; + final registerLocale = ref.watch(localeProvider); Widget buildIconContainer(IconData icon, Color iconColor) { return Container( @@ -336,198 +337,207 @@ class _RegisterScreenState extends State { } return Scaffold( - appBar: AppBar( - actions: [ - 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(); - // }, - // ); - }, - ), - ], - backgroundColor: Colors.white, - ), - backgroundColor: Colors.white, - body: registrationSuccess - ? Padding( - padding: const EdgeInsets.all(20.0), - 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), - 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), + body: + + Column( + children: [ + Align( + alignment: AlignmentDirectional.topEnd, + child: 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(); + // }, + // ); + }, + ), + ), + Container( + height: MediaQuery.of(context).size.height/1.2, + child: SingleChildScrollView( + child: Column( + children : [ + + registrationSuccess + ? Padding( + padding: const EdgeInsets.all(20.0), + 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)), ), - 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, + 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), + + 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, @@ -562,7 +572,9 @@ class _RegisterScreenState extends State { width: 1), // Match the error color ), counterText: '', - hintStyle: TextStyle(color: Color(0xFFC3C6CB)), + hintStyle: TextStyle(color: Color(0xFFC3C6CB), + fontSize: registerLocale?.languageCode == 'ar' ? 14 : 16, + ), ), validator: _validateUsername, maxLength: @@ -632,7 +644,9 @@ class _RegisterScreenState extends State { width: 1), // Match the error color ), counterText: '', - hintStyle: TextStyle(color: Color(0xFFC3C6CB)), + hintStyle: TextStyle(color: Color(0xFFC3C6CB), + fontSize: registerLocale?.languageCode == 'ar' ? 14 : 16, + ), ), validator: _validateEmail, maxLength: 320, @@ -677,65 +691,67 @@ class _RegisterScreenState extends State { ), ), - // prefixIcon: Icon( - // Icons.lock, - // color: Color(0xFF90B0D5), - // ), - suffixIcon: IconButton( - // icon: Icon( - // _obscurePassword - // ? Icons.visibility_off - // : Icons.visibility, - // color: Color(0xFF9EA2A9), - // ), + // 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, + 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, - ), + 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 - ), + 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)), + hintStyle: TextStyle(color: Color(0xFFC3C6CB), + fontSize: registerLocale?.languageCode == 'ar' ? 14 : 16, + ), ), validator: _validatePassword, maxLength: 40, @@ -776,11 +792,11 @@ class _RegisterScreenState extends State { ), ), - suffixIcon: IconButton( - icon: Image.asset( - _obscureConfirmPassword - ? MiscIconAssetPath.visibilityOff - : MiscIconAssetPath.visibleOn, + 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. @@ -824,7 +840,9 @@ class _RegisterScreenState extends State { width: 1), // Match the error color ), counterText: '', - hintStyle: TextStyle(color: Color(0xFFC3C6CB)), + hintStyle: TextStyle(color: Color(0xFFC3C6CB), + fontSize: registerLocale?.languageCode == 'ar' ? 14 : 16, + ), ), validator: _validateConfirmPassword, maxLength: 40, @@ -873,7 +891,8 @@ class _RegisterScreenState extends State { .terms_conditions, // text: 'Terms & Conditions', style: TextStyle( - fontWeight: FontWeight.w500, + fontSize: registerLocale?.languageCode == 'ar' ? 12 : 14, + fontWeight: FontWeight.bold, color: Color(0xFF985400), // Makes the text bold // decoration: @@ -891,8 +910,8 @@ class _RegisterScreenState extends State { text: AppLocalizations.of(context)! .privacy_policy, style: TextStyle( - fontWeight: FontWeight.w500, - fontSize: 14, + fontWeight: FontWeight.bold, + fontSize: registerLocale?.languageCode == 'ar' ? 12 : 14, fontFamily: 'Roboto', color: Color(0xFF985400), // decoration: @@ -924,7 +943,7 @@ class _RegisterScreenState extends State { 'Required', style: TextStyle( color: Color(0xFFb22222), - fontSize: 12, + fontSize: registerLocale?.languageCode == 'ar' ? 12 : 14, ), ), ), @@ -953,7 +972,8 @@ class _RegisterScreenState extends State { AppLocalizations.of(context)! .register_title, style: TextStyle( - fontSize: 16, color: Colors.white), + fontSize: registerLocale?.languageCode == 'ar' ? 14 : 16, + color: Colors.white), ), SizedBox(width: 8), const Icon( @@ -970,7 +990,8 @@ class _RegisterScreenState extends State { Text( AppLocalizations.of(context)!.account_confirmation, style: TextStyle( - fontSize: 14, color: Colors.grey[600]), + fontSize: registerLocale?.languageCode == 'ar' ? 12 : 14, + color: Colors.grey[600]), ), SizedBox(height: 15), Padding( @@ -1006,52 +1027,57 @@ class _RegisterScreenState extends State { ], ), - // 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), - // ], - // ), - // ), + // 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 65eb6226..9f956b3d 100644 --- a/lib/presentation/routes/auth_routes/login_route.dart +++ b/lib/presentation/routes/auth_routes/login_route.dart @@ -145,7 +145,7 @@ class LoginRoute extends HookConsumerWidget { 'إعادة تعيين كلمة المرور', ), style: TextStyle( - fontSize: 20, + fontSize: locale?.languageCode == 'ar' ? 18 : 20, color: Color(0xFF898C81), fontWeight: FontWeight.w600), ), @@ -160,7 +160,7 @@ class LoginRoute extends HookConsumerWidget { 'عنوان البريد الإلكتروني', ), labelStyle: TextStyle( - fontSize: 16, + fontSize: locale?.languageCode == 'ar' ? 13 : 16, color: Color(0xFF898C81), // For label text color // fontWeight: FontWeight.w600, ), @@ -254,10 +254,10 @@ class LoginRoute extends HookConsumerWidget { style: TextStyle( fontFamily: context.translate( 'Roboto', - 'NotoKufi', + 'Roboto', ), fontWeight: FontWeight.bold, - fontSize: 14, + fontSize: locale?.languageCode == 'ar' ? 12 : 14, color: Color(0xFF985400), ), ), @@ -418,9 +418,9 @@ class LoginRoute extends HookConsumerWidget { TextStyle( fontFamily: context.translate( 'Roboto', - 'NotoKufi', + 'Roboto', ), - fontSize: 16, + fontSize: locale?.languageCode == 'ar' ? 14 : 16, fontWeight: FontWeight.w600, ), ), @@ -442,6 +442,14 @@ class LoginRoute extends HookConsumerWidget { 'Login', 'تسجيل الدخول', ), + style: TextStyle( + fontFamily: context.translate( + 'Roboto', + 'Roboto', + ), + fontSize: locale?.languageCode == 'ar' ? 16: 18, + fontWeight: FontWeight.bold, + ) ), 6.horizontalSpace, const Icon( @@ -511,9 +519,9 @@ class LoginRoute extends HookConsumerWidget { style: TextStyle( fontFamily: context.translate( 'Roboto', - 'NotoKufi', + 'Roboto', ), - fontSize: 40, + fontSize: locale?.languageCode == 'ar' ? 38 : 40, fontWeight: FontWeight.w300, ), ), @@ -527,7 +535,7 @@ class LoginRoute extends HookConsumerWidget { style: TextStyle( fontFamily: context.translate( 'Roboto', - 'NotoKufi', + 'Roboto', ), fontSize: context.translate(18.0, 14.0), color: const Color(0xff898C81), @@ -544,9 +552,9 @@ class LoginRoute extends HookConsumerWidget { style: TextStyle( fontFamily: context.translate( 'Roboto', - 'NotoKufi', + 'Roboto', ), - fontSize: 14, + fontSize: locale?.languageCode == 'ar' ? 12 : 14, fontWeight: FontWeight.bold, ), children: [