import 'package:flutter/cupertino.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_svg/svg.dart'; import 'package:syncrow_web/pages/auth/bloc/auth_bloc.dart'; import 'package:syncrow_web/pages/auth/bloc/auth_event.dart'; import 'package:syncrow_web/pages/auth/bloc/auth_state.dart'; import 'package:syncrow_web/pages/auth/view/forget_password_page.dart'; import 'package:syncrow_web/pages/common/default_button.dart'; import 'package:syncrow_web/pages/common/first_layer.dart'; import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/constants/assets.dart'; import 'package:syncrow_web/pages/home/view/home_page.dart'; import 'package:syncrow_web/utils/style.dart'; class LoginWebPage extends StatelessWidget { const LoginWebPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( body: BlocProvider( create: (context) => AuthBloc(), child: BlocConsumer( listener: (context, state) { if (state is LoginSuccess) { // Navigate to home screen after successful login Navigator.pushReplacement( context, MaterialPageRoute(builder: (context) => const HomePage()), ); } else if (state is LoginFailure) { // Show error message ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text(state.error), ), ); } }, builder: (context, state) { if (state is LoginLoading) { return const Center(child: CircularProgressIndicator()); } else { return _buildLoginForm(context,state); } }, ), ), ); } Widget _buildLoginForm(BuildContext context,AuthState state) { final loginBloc = BlocProvider.of(context); return FirstLayer( second: Container( margin: const EdgeInsets.all(50), decoration: BoxDecoration( color: Colors.black.withOpacity(0.3), borderRadius: const BorderRadius.all(Radius.circular(20)), ), child: Center( child: ListView( shrinkWrap: true, children: [ Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ const Spacer(), Expanded( flex: 2, child: SvgPicture.asset( Assets.loginLogo, ), ), const Spacer(), Container( decoration: BoxDecoration( color: Colors.white.withOpacity(0.1), borderRadius: const BorderRadius.all(Radius.circular(30)), border: Border.all(color: ColorsManager.graysColor.withOpacity(0.2))), child: Form( key: loginBloc.loginFormKey, child: Padding( padding: const EdgeInsets.symmetric(horizontal: 50, vertical: 20), child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.start, children: [ const SizedBox(height: 15), const Text( 'Login', style: TextStyle( color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold), ), const SizedBox(height: 30), Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start, children: [ Text( "Country/Region", style: smallTextStyle, ), SizedBox( width: MediaQuery.of(context).size.width * 0.2, child: DropdownButtonFormField( validator:loginBloc.validateRegion , icon: const Icon( Icons.keyboard_arrow_down_outlined, ), decoration: textBoxDecoration()!.copyWith( hintText: null, ), hint: const Align( alignment: Alignment.centerLeft, child: Text( 'Select your region/country', textAlign: TextAlign.center, ), ), isDense: true, style: const TextStyle(color: Colors.black), items:loginBloc.regions.map((String region) { return DropdownMenuItem( value: region, child: Text(region), ); }).toList(), onChanged: (String? value) { print(value); }, ), ) ], ), const SizedBox(height: 20.0), Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start, children: [ Text("Email", style: smallTextStyle, ), SizedBox( width: MediaQuery.sizeOf(context).width * 0.2, child: TextFormField( validator:loginBloc.validateEmail , controller:loginBloc.loginEmailController, decoration: textBoxDecoration()!.copyWith(hintText: 'Enter your email'), style: const TextStyle(color: Colors.black), ), ), ], ), const SizedBox(height: 20.0), Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start, children: [ Text("Password", style: smallTextStyle,), SizedBox( width: MediaQuery.sizeOf(context).width * 0.2, child: TextFormField( validator:loginBloc.validatePassword, obscureText:loginBloc.obscureText, keyboardType: TextInputType.visiblePassword, controller:loginBloc.loginPasswordController, decoration: textBoxDecoration()!.copyWith( hintText: 'At least 8 characters', suffixIcon: IconButton(onPressed: () { loginBloc.add(PasswordVisibleEvent(newValue: loginBloc.obscureText)); }, icon: SizedBox( child: SvgPicture.asset( loginBloc.obscureText? Assets.visiblePassword : Assets.invisiblePassword, height: 15, width: 15, ), ), ) ), style: const TextStyle(color: Colors.black), ), ), ], ), const SizedBox( height: 10, ), SizedBox( width: MediaQuery.of(context).size.width * 0.2, child: Row( mainAxisAlignment: MainAxisAlignment.end, children: [ InkWell( onTap: () { Navigator.of(context).push(MaterialPageRoute(builder: (context) => const ForgetPasswordPage(),)); }, child: Text( "Forgot Password?", style: smallTextStyle, ), ), ], ), ), Row( children: [ Transform.scale( scale: 1.2, // Adjust the scale as needed child: Checkbox( fillColor: MaterialStateProperty.all(Colors.white), activeColor: Colors.white, value:loginBloc.isChecked, checkColor: Colors.black, shape: const CircleBorder(), onChanged: (bool? newValue) { loginBloc.add(CheckBoxEvent(newValue: newValue)); }, ), ), SizedBox( width: MediaQuery.sizeOf(context).width * 0.2, child: RichText( text: TextSpan( text: 'Agree to ', style: const TextStyle(color: Colors.white), children: [ TextSpan( text: '(Terms of Service)', style: const TextStyle( color: Colors.black), recognizer: TapGestureRecognizer() ..onTap = () { loginBloc.launchURL( 'https://example.com/terms'); }, ), TextSpan( text: ' (Legal Statement)', style: const TextStyle(color: Colors.black), recognizer: TapGestureRecognizer() ..onTap = () { loginBloc.launchURL( 'https://example.com/legal'); }, ), TextSpan( text: ' (Privacy Statement)', style: const TextStyle( color: Colors.black), recognizer: TapGestureRecognizer() ..onTap = () { loginBloc.launchURL( 'https://example.com/privacy'); }, ), ], ), ), ), ], ), const SizedBox(height: 20.0), SizedBox( width: MediaQuery.sizeOf(context).width * 0.2, child: DefaultButton( backgroundColor: loginBloc.isChecked? ColorsManager.btnColor:ColorsManager.grayColor, child: const Text('Sign in'), onPressed: () { if (loginBloc.loginFormKey.currentState!.validate()) { loginBloc.add(LoginButtonPressed( username: loginBloc.loginEmailController.text, password: loginBloc.loginPasswordController.text, ), ); } }, ), ), // Padding( // padding: const EdgeInsets.all(5.0), // child: SizedBox( // width: MediaQuery.sizeOf(context).width * 0.2, // child: Row( // mainAxisAlignment: MainAxisAlignment.center, // crossAxisAlignment: CrossAxisAlignment.center, // children: [ // Expanded(child: Image.asset(Assets.liftLine)), // Expanded( // child: Padding( // padding: const EdgeInsets.all(5.0), // child: Text('Or sign in with', // style: smallTextStyle.copyWith(fontSize: 10), // ), // ) // ), // Expanded(child: Image.asset(Assets.rightLine)), // ], // ), // ), // ), // SizedBox( // width: MediaQuery.sizeOf(context).width * 0.2, // child: Row( // crossAxisAlignment: CrossAxisAlignment.center, // children: [ // Expanded( // child: Container( // decoration: containerDecoration, // child:InkWell( // child: Padding( // padding: const EdgeInsets.all(8.0), // child: Row( // mainAxisAlignment: MainAxisAlignment.spaceAround, // crossAxisAlignment: CrossAxisAlignment.center, // children: [ // SvgPicture.asset( // Assets.google, // fit: BoxFit.cover, // ), // const Flexible( // child: Text('Google', // style: TextStyle(color: Colors.black), // ), // ), // ], // ), // ), // onTap: () {}, // ), // ), // ), // SizedBox(width: 10,), // Expanded( // child: Container( // decoration: containerDecoration, // child:InkWell( // child: Padding( // padding: const EdgeInsets.all(8.0), // child: Row( // mainAxisAlignment: MainAxisAlignment.spaceAround, // crossAxisAlignment: CrossAxisAlignment.center, // children: [ // SvgPicture.asset( // Assets.facebook, // fit: BoxFit.cover, // ), // const Flexible( // child: Text('Facebook', // style: TextStyle(color: Colors.black), // ), // ), // ], // ), // ), // onTap: () {}, // ), // ), // ), // // ], // ), // ), // SizedBox( // width: MediaQuery.sizeOf(context).width * 0.2, // child: const Row( // mainAxisAlignment: MainAxisAlignment.center, // crossAxisAlignment: CrossAxisAlignment.center, // children: [ // Flexible( // child: Text( // "Don't you have an account? ", // style: TextStyle(color: Colors.white), // )), // Flexible( // child: Text( // "Sign up", // )), // ], // ), // ) ], ), ), ) ), const Spacer(), ], ), ], )), ), ); } }