register page merge done

This commit is contained in:
venbaittech 2025-02-08 12:29:39 +05:30
commit 0d4c3cf02e
2 changed files with 347 additions and 313 deletions

View File

@ -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<RegisterScreen> {
class _RegisterScreenState extends ConsumerState<RegisterScreen> {
final _formKey = GlobalKey<FormState>();
final _usernameController = TextEditingController();
final _emailController = TextEditingController();
@ -311,6 +311,7 @@ class _RegisterScreenState extends State<RegisterScreen> {
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<RegisterScreen> {
}
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<RegisterScreen> {
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<RegisterScreen> {
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<RegisterScreen> {
),
),
// 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<RegisterScreen> {
),
),
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<RegisterScreen> {
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<RegisterScreen> {
.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<RegisterScreen> {
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<RegisterScreen> {
'Required',
style: TextStyle(
color: Color(0xFFb22222),
fontSize: 12,
fontSize: registerLocale?.languageCode == 'ar' ? 12 : 14,
),
),
),
@ -953,7 +972,8 @@ class _RegisterScreenState extends State<RegisterScreen> {
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<RegisterScreen> {
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<RegisterScreen> {
],
),
// 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,
),
],
),
),
),
]),
),
),
],
),
);
}
}

View File

@ -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: [