Skip to content

Commit

Permalink
FEAT(fga-eps-mds/2024.2-ARANDU-DOC#58):Tela_de_login ( logo e google )
Browse files Browse the repository at this point in the history
  • Loading branch information
@Joao151104
Joao151104 committed Dec 6, 2024
1 parent 5621402 commit 6210bae
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 220 deletions.
195 changes: 77 additions & 118 deletions lib/ui/login/view/LoginView.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@ import 'package:provider/provider.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

import 'package:aranduapp/ui/login/viewModel/LoginViewModel.dart';

import 'package:aranduapp/ui/recover_account/view/RecoverAccount.dart';
import 'package:aranduapp/ui/register_account/view/RegisterAccount.dart';

import 'package:aranduapp/ui/shared/TitleSlogan.dart';
import 'package:aranduapp/ui/shared/TextEmail.dart';
import 'package:aranduapp/ui/shared/ErrorPopUp.dart';
Expand Down Expand Up @@ -46,20 +48,18 @@ class _LoginState extends State<_Login> {
LoginViewModel viewModel = Provider.of<LoginViewModel>(context);

return Scaffold(
body: FutureBuilder(
future: _future,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return _loadingScreen(viewModel);
} else if (!snapshot.hasError) {
viewModel.loginWithDeviceAuth();
return _authDevice(viewModel);
} else {
return _emailAndPassword(viewModel);
}
},
),
);
body: FutureBuilder(
future: _future,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return _loadingScreen(viewModel);
} else if (!snapshot.hasError) {
viewModel.loginWithDeviceAuth();
return _authDevice(viewModel);
} else {
return _emailAndPassword(viewModel);
}
}));
}

Widget _loadingScreen(LoginViewModel viewModel) {
Expand Down Expand Up @@ -104,36 +104,30 @@ class _LoginState extends State<_Login> {
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 20),
child: const TitleSlogan(),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 50),
child: _formSection(viewModel),
),
_forgotPasswordLink(context),
Padding(
padding: const EdgeInsets.only(top: 20),
child: _loginButtonSection(context, viewModel),
),
Padding(
padding: const EdgeInsets.only(top: 20),
child: _createAccountLink(context),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: DividerWithText(text: 'OU'),
),
// Google logo button
Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: GoogleLoginButton(
onTap: () {},
const Expanded(
child: Center(
child: TitleSlogan(),
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [_formSection(viewModel), _forgotPasswordLink(context)],
)),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_loginButtonSection(context, viewModel),
_createAccountLink(context)
],
)),
_orDivider(),
GoogleLoginButton(onTap: () {
print("login com o google");
})
],
),
),
Expand All @@ -145,19 +139,13 @@ class _LoginState extends State<_Login> {
key: viewModel.formKey,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: TextEmail(
padding: const EdgeInsets.symmetric(horizontal: 60),
controller: viewModel.emailController,
),
TextEmail(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
controller: viewModel.emailController,
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: TextPassWord(
padding: const EdgeInsets.symmetric(horizontal: 60),
controller: viewModel.passwordController,
),
TextPassWord(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
controller: viewModel.passwordController,
),
],
),
Expand All @@ -174,14 +162,14 @@ class _LoginState extends State<_Login> {
);
},
child: Align(
alignment: Alignment.center,
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.only(top: 13, right: 20),
child: Text(
'Esqueceu a senha ?',
'esqueceu a senha ?',
textAlign: TextAlign.right,
style: Theme.of(context).textTheme.bodySmall!.apply(
color: Colors.blue,
color: Theme.of(context).colorScheme.primary,
),
),
),
Expand All @@ -191,33 +179,23 @@ class _LoginState extends State<_Login> {

Widget _loginButtonSection(BuildContext context, LoginViewModel viewModel) {
return SizedBox(
width: 315,
width: 291,
height: 64,
child: ElevatedButton(
onPressed: () {
viewModel
.loginWithEmailAndPassword()
.catchError((e) => showDialog<Object>(
context: context,
builder: (BuildContext context) =>
ErrorPopUp(content: Text('$e')),
));
},
style: ElevatedButton.styleFrom(
backgroundColor: Color(0xfffb923c),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
),
child: Consumer<LoginViewModel>(
builder: (context, value, child) => value.isLoading
? const CircularProgressIndicator(value: null)
: const Text(
'Entrar',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
onPressed: () {
viewModel
.loginWithEmailAndPassword()
.catchError((e) => showDialog<Object>(
context: context,
builder: (BuildContext context) =>
ErrorPopUp(content: Text('$e')),
));
},
child: Consumer<LoginViewModel>(
builder: (context, value, child) => value.isLoading
? const CircularProgressIndicator(value: null)
: const Text('Entrar'),
)),
);
}

Expand All @@ -243,7 +221,7 @@ class _LoginState extends State<_Login> {
child: Text(
' Crie a sua conta',
style: Theme.of(context).textTheme.bodySmall!.apply(
color: Colors.blue,
color: Theme.of(context).colorScheme.primary,
),
),
),
Expand All @@ -252,48 +230,29 @@ class _LoginState extends State<_Login> {
),
);
}
}

// Widget para Divider com texto
class DividerWithText extends StatelessWidget {
final String text;
const DividerWithText({Key? key, required this.text}) : super(key: key);

@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Divider(
color: Colors.grey,
thickness: 1,
indent: 30,
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Text(
text,
style: TextStyle(
color: Colors.grey[600],
fontWeight: FontWeight.bold,
Widget _orDivider() {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Row(
children: <Widget>[
const Expanded(child: Divider()),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Text(
'ou',
style: Theme.of(context).textTheme.bodyMedium!.apply(
color: Theme.of(context).colorScheme.primary,
),
),
),
),
Expanded(
child: Divider(
color: Colors.grey,
thickness: 1,
endIndent: 30,
),
),
],
const Expanded(child: Divider()),
],
),
);
}
}

// Widget para o botão do Google
class GoogleLoginButton extends StatelessWidget {
final VoidCallback onTap;
const GoogleLoginButton({Key? key, required this.onTap}) : super(key: key);
Expand All @@ -313,7 +272,7 @@ class GoogleLoginButton extends StatelessWidget {
child: Icon(
FontAwesomeIcons.google, // Ícone do Google
size: 20,
color: Colors.blue, // Cor do ícone
color: Theme.of(context).colorScheme.primary, // Cor do ícone
),
),
);
Expand Down
41 changes: 10 additions & 31 deletions lib/ui/shared/TextEmail.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,45 +3,24 @@ import 'package:flutter/material.dart';
class TextEmail extends StatelessWidget {
final TextEditingController controller;
final EdgeInsetsGeometry padding;
final Color lightBackgroundColor; // Cor de fundo para modo claro.
final Color darkBackgroundColor; // Cor de fundo para modo escuro.

static final RegExp emailRegex = RegExp(r'^[\w-\.]+@([\w-]+\.)+\w{2,4}$');

const TextEmail({
super.key,
required this.padding,
required this.controller,
this.lightBackgroundColor = const Color(0xfff7f8f8), // Padrão: modo claro.
this.darkBackgroundColor = const Color(0xff1e1e1e), // Padrão: modo escuro.
});
const TextEmail({super.key, required this.padding, required this.controller});

@override
Widget build(BuildContext context) {
// Verifica se o tema é escuro.
final bool isDarkMode = Theme.of(context).brightness == Brightness.dark;

return Padding(
padding: padding,
child: Container(
decoration: BoxDecoration(
color: isDarkMode ? darkBackgroundColor : lightBackgroundColor,
borderRadius: BorderRadius.circular(8), // Bordas arredondadas.
),
child: TextFormField(
validator: (value) => value == null || emailRegex.hasMatch(value)
? null
: 'E-mail inválido',
controller: controller,
decoration: InputDecoration(
border: InputBorder.none, // Remove a borda padrão.
prefixIcon: Icon(
Icons.email_outlined,
color: const Color(0xffada4a5),
),
labelText: 'E-mail',
),
),
child: TextFormField(
validator: (value) => value == null || emailRegex.hasMatch(value)
? null
: 'E-mail inválido',
controller: controller,
decoration: InputDecoration(
prefixIcon: Icon(Icons.email_outlined,
color: Theme.of(context).colorScheme.primary),
labelText: 'E-mail'),
),
);
}
Expand Down
Loading

0 comments on commit 6210bae

Please sign in to comment.