Files
syncrow-web/lib/pages/auth/view/login_mobile_page.dart
2024-07-18 15:12:06 +03:00

221 lines
9.6 KiB
Dart

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/svg.dart';
import 'package:syncrow_web/utils/assets.dart';
import 'package:syncrow_web/pages/auth/bloc/login_bloc.dart';
import 'package:syncrow_web/pages/auth/bloc/login_event.dart';
import 'package:syncrow_web/pages/auth/bloc/login_state.dart';
import 'package:syncrow_web/pages/home/view/home_page.dart';
class LoginMobilePage extends StatelessWidget {
const LoginMobilePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: BlocProvider(
create: (context) => LoginBloc(),
child: BlocConsumer<LoginBloc, LoginState>(
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);
}
},
),
),
);
}
Widget _buildLoginForm(BuildContext context) {
final loginBloc = BlocProvider.of<LoginBloc>(context);
final TextEditingController _usernameController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
return Center(
child: Stack(
children: [
Container(
width: MediaQuery.sizeOf(context).width,
height: MediaQuery.sizeOf(context).height,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
Assets.background,
),
fit: BoxFit.cover,
),
),
),
Container(
width: MediaQuery.sizeOf(context).width,
height: MediaQuery.sizeOf(context).height,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(Assets.vector),
fit: BoxFit.cover,
opacity: 0.9,
),
),
),
SingleChildScrollView(
child: Container(
margin: const EdgeInsets.all(50),
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.3),
borderRadius: const BorderRadius.all(Radius.circular(20))),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(15.0),
child: SvgPicture.asset(
Assets.loginLogo,
),
),
Container(
margin: const EdgeInsets.all(15),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.3),
borderRadius: const BorderRadius.all(Radius.circular(30))),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 50, vertical: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(height: 15),
const Text(
'Login',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold),
),
const SizedBox(height: 15),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text(
"Email",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold),
),
SizedBox(
child: TextFormField(
decoration: InputDecoration(
labelText: 'Email',
labelStyle: TextStyle(color: Colors.white),
hintText: 'username@gmail.com',
hintStyle: TextStyle(color: Colors.grey),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Colors.white),
),
filled: true,
fillColor: Colors.white,
contentPadding: EdgeInsets.symmetric(
vertical: 16.0, horizontal: 12.0),
),
style: TextStyle(color: Colors.black),
)),
],
),
const SizedBox(height: 15.0),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text(
"Password",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold),
),
SizedBox(
child: TextFormField(
decoration: InputDecoration(
labelText: 'Password',
labelStyle: TextStyle(color: Colors.white),
hintText: 'Password',
hintStyle: TextStyle(color: Colors.grey),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Colors.white),
),
filled: true,
fillColor: Colors.white,
contentPadding: EdgeInsets.symmetric(
vertical: 16.0, horizontal: 12.0),
),
style: TextStyle(color: Colors.black),
)),
const SizedBox(height: 20.0),
const Text(
"Forgot Password?",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold),
),
],
),
const SizedBox(height: 20.0),
ElevatedButton(
onPressed: () async {
// Trigger login event
loginBloc.add(
LoginButtonPressed(
username: _usernameController.text,
password: _passwordController.text,
),
);
},
child: const Text('Login'),
),
],
),
),
),
],
),
),
),
],
),
);
}
}