Added form validation for login view

This commit is contained in:
Mohammad Salameh
2024-03-07 15:33:14 +03:00
parent f734801e94
commit d70c370c2e
3 changed files with 105 additions and 45 deletions

View File

@ -1,6 +1,7 @@
import 'dart:convert';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_app/features/auth/model/token.dart';
import 'package:syncrow_app/features/auth/model/user_model.dart';
@ -18,6 +19,8 @@ class AuthCubit extends Cubit<AuthState> {
TextEditingController passwordController = TextEditingController();
bool isPasswordVisible = false;
GlobalKey<FormState> formKey = GlobalKey<FormState>();
void changePasswordVisibility() {
isPasswordVisible = !isPasswordVisible;
emit(AuthPasswordVisibilityChanged());

View File

@ -0,0 +1,93 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_app/features/auth/bloc/auth_cubit.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
class LoginForm extends StatelessWidget {
const LoginForm({
super.key,
});
@override
Widget build(BuildContext context) {
return BlocBuilder<AuthCubit, AuthState>(
builder: (context, state) {
return Form(
key: AuthCubit.get(context).formKey,
child: Column(
children: [
TextFormField(
controller: AuthCubit.get(context).emailController,
validator: (value) {
if (value != null) {
if (value.isEmpty) {
return 'Please enter your email';
}
//Regex for email validation
if (!RegExp(
r'^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$')
.hasMatch(value)) {
return 'Please enter a valid email';
}
}
return null;
},
onTapOutside: (event) {
AuthCubit.get(context).formKey.currentState!.validate();
},
decoration: InputDecoration(
labelText: 'Email',
enabledBorder: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(10),
),
filled: true,
fillColor: ColorsManager.backgroundColor.withAlpha(100),
floatingLabelBehavior: FloatingLabelBehavior.never,
contentPadding: const EdgeInsets.all(10),
),
),
const SizedBox(height: 10),
TextFormField(
controller: AuthCubit.get(context).passwordController,
validator: (value) {
if (value != null) {
if (value.isEmpty) {
return 'Please enter your password';
}
}
return null;
},
onTapOutside: (event) {
AuthCubit.get(context).formKey.currentState!.validate();
},
obscureText: !AuthCubit.get(context).isPasswordVisible,
decoration: InputDecoration(
labelText: 'Password',
enabledBorder: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(10),
),
suffixIcon: IconButton(
icon: Icon(
AuthCubit.get(context).isPasswordVisible
? Icons.visibility
: Icons.visibility_off,
),
onPressed: () {
AuthCubit.get(context).changePasswordVisibility();
},
),
filled: true,
fillColor: ColorsManager.backgroundColor.withAlpha(100),
floatingLabelBehavior: FloatingLabelBehavior.never,
contentPadding: const EdgeInsets.all(10),
),
),
],
),
);
},
);
}
}

View File

@ -1,11 +1,11 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_app/features/auth/bloc/auth_cubit.dart';
import 'package:syncrow_app/features/auth/view/widgets/login/login_form.dart';
import 'package:syncrow_app/features/auth/view/widgets/login/login_user_agreement.dart';
import 'package:syncrow_app/features/shared_widgets/default_text_button.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/title_medium.dart';
import 'package:syncrow_app/navigation/routing_constants.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
import 'package:syncrow_app/utils/resource_manager/constants.dart';
class LoginView extends StatelessWidget {
@ -44,48 +44,7 @@ class LoginView extends StatelessWidget {
const SizedBox(
height: 10,
),
TextField(
controller: AuthCubit.get(context).emailController,
decoration: InputDecoration(
labelText: 'Email',
enabledBorder: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(10),
),
filled: true,
fillColor: ColorsManager.backgroundColor.withAlpha(100),
floatingLabelBehavior: FloatingLabelBehavior.never,
contentPadding: const EdgeInsets.all(10),
),
),
const SizedBox(
height: 10,
),
TextField(
controller: AuthCubit.get(context).passwordController,
obscureText: !AuthCubit.get(context).isPasswordVisible,
decoration: InputDecoration(
labelText: 'Password',
enabledBorder: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(10),
),
suffixIcon: IconButton(
icon: Icon(
AuthCubit.get(context).isPasswordVisible
? Icons.visibility
: Icons.visibility_off,
),
onPressed: () {
AuthCubit.get(context).changePasswordVisibility();
},
),
filled: true,
fillColor: ColorsManager.backgroundColor.withAlpha(100),
floatingLabelBehavior: FloatingLabelBehavior.never,
contentPadding: const EdgeInsets.all(10),
),
),
const LoginForm(),
const SizedBox(height: 10),
const LoginUserAgreement(),
const SizedBox(height: 10),
@ -99,8 +58,13 @@ class LoginView extends StatelessWidget {
enabled: AuthCubit.get(context).agreeToTerms,
text: "Login",
onPressed: () {
AuthCubit.get(context).login();
FocusScope.of(context).unfocus();
if (AuthCubit.get(context)
.formKey
.currentState!
.validate()) {
AuthCubit.get(context).login();
FocusScope.of(context).unfocus();
}
},
),
),