mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-09 22:57:21 +00:00
221 lines
9.6 KiB
Dart
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'),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|