ammar/syncrow-app
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/syncrow-app.git synced 2026-10-23 11:47:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implemented sign up and otp screens

Browse Source
This commit is contained in:
Abdullah Alassaf
2024-05-29 01:51:36 +03:00
parent e37d324bb6
commit 28576f2cd5
21 changed files with 395 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/auth/bloc/auth_cubit.dart
+91 -27
View File
@@ -19,8 +19,16 @@ class AuthCubit extends Cubit<AuthState> {
final TextEditingController emailController = TextEditingController();
final TextEditingController passwordController = TextEditingController();
final TextEditingController emailSignUpController = TextEditingController();
final TextEditingController passwordSignUpController = TextEditingController();
// final TextEditingController emailSignUpController = TextEditingController();
// final TextEditingController fullNameController = TextEditingController();
// final TextEditingController passwordSignUpController = TextEditingController();
// final TextEditingController reEnterPasswordSignUpController = TextEditingController();
String fullName = '';
String email = '';
String signUpPassword = '';
String maskedEmail = '';
String otpCode = '';
final loginFormKey = GlobalKey<FormState>();
final signUpFormKey = GlobalKey<FormState>();
bool isPasswordVisible = false;
@@ -46,32 +54,69 @@ class AuthCubit extends Cubit<AuthState> {
/////////////////////////////////////VALIDATORS/////////////////////////////////////
String? passwordValidator(String? value) {
if (value != null) {
if (value.isNotEmpty) {
// if (value.length >= 6) {
return null;
//TODO uncomment this code when the password validation is needed
// if (RegExp(
// r'^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$')
// .hasMatch(value)) {
// return null;
// } else {
// return 'Password must contain at least one uppercase letter, one lowercase letter, one number and one special character';
// }
// } else {
// return 'Password must be at least 6 characters';
// }
} else {
if (value.isEmpty) {
return 'Please enter your password';
}
if (value.isNotEmpty) {
if (!RegExp(r'^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$')
.hasMatch(value)) {
return 'Password must contain at least one uppercase letter, one lowercase letter, one number and one special character';
}
}
}
if (signUpFormKey.currentState != null) {
signUpFormKey.currentState!.save();
}
return null;
}
String? fullNameValidator(String? value) {
if (value == null) return 'Full name is required';
final withoutExtraSpaces = value.replaceAll(RegExp(r"\s+"), ' ').trim();
if (withoutExtraSpaces.length < 2 || withoutExtraSpaces.length > 30) {
return 'Full name must be between 2 and 30 characters long';
}
// Test if it contains anything but alphanumeric spaces and single quote
if (RegExp(r"/[^ a-zA-Z0-9-\']/").hasMatch(withoutExtraSpaces)) {
return 'Only alphanumeric characters, space, dash and single quote are allowed';
}
final parts = withoutExtraSpaces.split(' ');
if (parts.length < 2) return 'Full name must contain first and last names';
if (parts.length > 3) return 'Full name can at most contain 3 parts';
if (parts.any((part) => part.length < 2 || part.length > 30)) {
return 'Full name parts must be between 2 and 30 characters long';
}
if (signUpFormKey.currentState != null) {
signUpFormKey.currentState!.save();
}
return null;
}
String reEnterPasswordCheck(String? value) {
passwordValidator(value);
if (signUpPassword == value) {
if (signUpFormKey.currentState != null) {
signUpFormKey.currentState!.save();
}
return '';
} else {
return 'Passwords do not match';
}
}
String? emailAddressValidator(String? value) {
if (value != null && value.isNotEmpty && value != "") {
if (checkValidityOfEmail(value)) {
if (loginFormKey.currentState != null) {
loginFormKey.currentState!.save();
if (signUpFormKey.currentState != null) {
signUpFormKey.currentState!.save();
}
return null;
} else {
@@ -92,6 +137,23 @@ class AuthCubit extends Cubit<AuthState> {
}
}
// Function to mask the email
String maskEmail(String email) {
final emailParts = email.split('@');
if (emailParts.length != 2) return email;
final localPart = emailParts[0];
final domainPart = emailParts[1];
if (localPart.length < 3) return email;
final start = localPart.substring(0, 2);
final end = localPart.substring(localPart.length - 1);
final maskedLocalPart = '$start******$end';
return '$maskedLocalPart@$domainPart';
}
/////////////////////////////////////API CALLS/////////////////////////////////////
login() async {
emit(AuthLoginLoading());
@@ -128,21 +190,23 @@ class AuthCubit extends Cubit<AuthState> {
emit(AuthLoginLoading());
final response;
try {
List<String> userFullName = fullName.split(' ');
response = await AuthenticationAPI.signUp(
model: SignUpModel(
email: emailController.text.toLowerCase(),
password: passwordController.text,
firstName: '',
lastName: ''),
email: email.toLowerCase(),
password: signUpPassword,
firstName: userFullName[0],
lastName: userFullName[1]),
);
} catch (failure) {
emit(AuthLoginError(message: failure.toString()));
return;
}
if (response['statusCode'] == 201) {
emailController.clear();
passwordController.clear();
emit(AuthLoginSuccess());
if (response) {
maskedEmail = maskEmail(email);
final response = await AuthenticationAPI.sendOtp(body: {'email': email, 'type': 'PASSWORD'});
otpCode = response['otp'];
emit(AuthSignUpSuccess());
} else {
emit(AuthLoginError(message: 'Something went wrong'));
}
lib/features/auth/bloc/auth_state.dart
+4
View File
@@ -20,6 +20,10 @@ class AuthLoginLoading extends AuthLoading {}
class AuthLoginSuccess extends AuthSuccess {}
class AuthOtpSuccess extends AuthSuccess {}
class AuthSignUpSuccess extends AuthSuccess {}
class AuthLoginError extends AuthError {
AuthLoginError({required super.message, super.code});
}
lib/features/auth/view/widgets/login/login_view.dart → lib/features/auth/view/login_view.dart
+4 -4
View File
@@ -2,10 +2,10 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_app/features/auth/bloc/auth_cubit.dart';
import 'package:syncrow_app/features/auth/view/widgets/login/dont_have_an_account.dart';
import 'package:syncrow_app/features/auth/view/widgets/login/login_divider.dart';
import 'package:syncrow_app/features/auth/view/widgets/login/login_form.dart';
import 'package:syncrow_app/features/auth/view/widgets/login/login_with_google_facebook.dart';
import 'package:syncrow_app/features/auth/view/widgets/dont_have_an_account.dart';
import 'package:syncrow_app/features/auth/view/widgets/login_divider.dart';
import 'package:syncrow_app/features/auth/view/widgets/login_form.dart';
import 'package:syncrow_app/features/auth/view/widgets/login_with_google_facebook.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/title_medium.dart';
import 'package:syncrow_app/generated/assets.dart';
import 'package:syncrow_app/navigation/routing_constants.dart';
lib/features/auth/view/otp_view.dart
+221
View File
@@ -0,0 +1,221 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/svg.dart';
import 'package:pin_code_fields/pin_code_fields.dart';
import 'package:syncrow_app/features/auth/bloc/auth_cubit.dart';
import 'package:syncrow_app/features/shared_widgets/default_button.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/title_medium.dart';
import 'package:syncrow_app/generated/assets.dart';
import 'package:syncrow_app/navigation/routing_constants.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/resource_manager/constants.dart';
import 'package:syncrow_app/utils/resource_manager/font_manager.dart';
import 'package:syncrow_app/utils/resource_manager/styles_manager.dart';
class OtpView extends StatelessWidget {
const OtpView({super.key});
@override
Widget build(BuildContext context) {
final formKey = AuthCubit.get(context).signUpFormKey;
return BlocConsumer<AuthCubit, AuthState>(
listener: (context, state) {
if (state is AuthError) {
} else if (state is AuthOtpSuccess) {
Navigator.popAndPushNamed(context, Routes.homeRoute);
}
},
builder: (context, state) {
return SafeArea(
child: Scaffold(
body: Stack(
children: [
Container(
width: MediaQuery.sizeOf(context).width,
height: MediaQuery.sizeOf(context).height,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
Assets.assetsImagesBackground,
),
fit: BoxFit.cover,
),
),
),
Container(
width: MediaQuery.sizeOf(context).width,
height: MediaQuery.sizeOf(context).height,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(Assets.assetsImagesVector),
fit: BoxFit.cover,
opacity: 0.9,
),
),
),
Padding(
padding: const EdgeInsets.only(
right: Constants.defaultPadding,
left: Constants.defaultPadding,
top: Constants.defaultPadding,
),
child: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: SvgPicture.asset(
Assets.assetsImagesLogo,
width: 160,
),
),
const SizedBox(
height: 40,
),
TitleMedium(
text: 'Verification Code',
style: context.titleMedium.copyWith(
fontWeight: FontsManager.extraBold,
color: Colors.white,
),
),
const SizedBox(
height: 20,
),
RichText(
text: TextSpan(
text:
'We have sent the verification codeWe have sent the verification code to',
style: Theme.of(context).textTheme.titleSmall!.copyWith(
color: Colors.white,
fontWeight: FontsManager.regular,
fontSize: 14,
),
children: [
TextSpan(
text: ' ex******[email protected]',
style: Theme.of(context).textTheme.titleSmall!.copyWith(
color: Colors.black,
fontWeight: FontsManager.bold,
fontSize: 14,
),
),
TextSpan(
text: ' change email?',
style: Theme.of(context).textTheme.titleSmall!.copyWith(
color: const Color(0xFF87C7FF),
fontWeight: FontsManager.regular,
fontSize: 14,
),
),
]),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 40,
),
PinCodeTextField(
key: const Key('pin_code_text_field'),
appContext: context,
length: 4,
cursorHeight: 25,
backgroundColor: Colors.transparent,
keyboardType: TextInputType.number,
autoFocus: true,
animationDuration: const Duration(milliseconds: 30),
// controller: AuthCubit.get(context).emailController,
// cursorColor: KeysperColors.primaryBase,
beforeTextPaste: (text) {
// Allow pasting only if all characters are numeric
return int.tryParse(text!) != null;
},
textStyle: Theme.of(context)
.textTheme
.headlineMedium!
.copyWith(color: Colors.black),
hintStyle: Theme.of(context)
.textTheme
.headlineMedium!
.copyWith(color: Colors.grey),
enablePinAutofill: true,
pinTheme: PinTheme(
borderRadius: BorderRadius.circular(8),
inactiveBorderWidth: 1,
disabledBorderWidth: 1,
selectedBorderWidth: 1,
activeBorderWidth: 1,
errorBorderWidth: 1,
borderWidth: 1,
errorBorderColor: Colors.red,
activeColor: Colors.white,
inactiveColor: Colors.white,
activeFillColor: Colors.white,
inactiveFillColor: Colors.white,
selectedFillColor: Colors.white,
disabledColor: Colors.white,
fieldHeight: 50,
fieldWidth: 50,
selectedColor: Colors.white,
shape: PinCodeFieldShape.box,
),
onChanged: (value) async {
// otpCode = value;
// await bloc.onOTPChanged(value);
},
onCompleted: (value) {},
onSubmitted: (value) async {
// await bloc.onOTPSubmitted();
},
),
const SizedBox(height: 40),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: DefaultButton(
isDone: state is AuthLoginSuccess,
isLoading: state is AuthLoading,
customButtonStyle: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
Colors.black.withOpacity(.25),
),
foregroundColor: MaterialStateProperty.all(
Colors.white,
),
),
child: const Text(
'Verify',
),
onPressed: () {
if (formKey.currentState!.validate()) {
if ((state is! AuthLoading)) {
AuthCubit.get(context).signUp();
FocusScope.of(context).unfocus();
}
}
},
),
),
],
)
],
),
],
),
),
),
)
],
),
),
);
},
);
;
}
}
lib/features/auth/view/widgets/sign_up/sign_up_view.dart → lib/features/auth/view/sign_up_view.dart
+37 -28
View File
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/svg.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_form.dart';
import 'package:syncrow_app/features/shared_widgets/default_button.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/title_medium.dart';
@@ -21,14 +21,8 @@ class SignUpView extends StatelessWidget {
final formKey = AuthCubit.get(context).signUpFormKey;
return BlocConsumer<AuthCubit, AuthState>(
listener: (context, state) {
if (state is AuthError) {
// ScaffoldMessenger.of(context).showSnackBar(
// SnackBar(
// content: Text(state.message),
// ),
// );
} else if (state is AuthLoginSuccess) {
Navigator.popAndPushNamed(context, Routes.homeRoute);
if (state is AuthSignUpSuccess) {
Navigator.popAndPushNamed(context, Routes.otpRoute);
}
},
builder: (context, state) {
@@ -92,48 +86,66 @@ class SignUpView extends StatelessWidget {
),
Form(
key: formKey,
autovalidateMode: AutovalidateMode.onUserInteraction,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const BodyMedium(
text: "Full Name",
fontColor: Colors.white,
),
TextFormField(
// autovalidateMode: AutovalidateMode.onUserInteraction,
textInputAction: TextInputAction.done,
keyboardType: TextInputType.name,
scrollPadding: EdgeInsets.zero,
autocorrect: false,
autofillHints: const [AutofillHints.name],
// controller: AuthCubit.get(context).fullNameController,
validator: AuthCubit.get(context).fullNameValidator,
onTapOutside: (event) {
FocusScope.of(context).unfocus();
},
onChanged: (value) {
AuthCubit.get(context).fullName = value;
},
decoration: defaultInputDecoration(context, hint: "Full Name"),
),
const SizedBox(height: 16),
const BodyMedium(
text: "Email",
fontColor: Colors.white,
),
TextFormField(
autovalidateMode: AutovalidateMode.disabled,
textInputAction: TextInputAction.done,
keyboardType: TextInputType.text,
scrollPadding: EdgeInsets.zero,
autocorrect: false,
autofillHints: const [AutofillHints.email],
controller: AuthCubit.get(context).emailController,
validator: (value) {
return AuthCubit.get(context).emailAddressValidator(value);
},
validator: AuthCubit.get(context).emailAddressValidator,
onTapOutside: (event) {
FocusScope.of(context).unfocus();
},
onChanged: (value) {},
onChanged: (value) {
AuthCubit.get(context).email = value;
},
decoration:
defaultInputDecoration(context, hint: "[email protected]"),
),
const SizedBox(height: 15),
const SizedBox(height: 16),
const BodyMedium(
text: "Password",
fontColor: Colors.white,
),
TextFormField(
autovalidateMode: AutovalidateMode.disabled,
textInputAction: TextInputAction.done,
keyboardType: TextInputType.text,
scrollPadding: EdgeInsets.zero,
autocorrect: false,
autofillHints: const [AutofillHints.password],
controller: AuthCubit.get(context).passwordController,
validator: (value) {
return AuthCubit.get(context).passwordValidator(value);
validator: AuthCubit.get(context).passwordValidator,
onChanged: (value) {
AuthCubit.get(context).signUpPassword = value;
},
onTapOutside: (event) {
FocusScope.of(context).unfocus();
@@ -142,22 +154,19 @@ class SignUpView extends StatelessWidget {
decoration: defaultInputDecoration(context,
hint: "At least 8 characters"),
),
const SizedBox(height: 15),
const SizedBox(height: 16),
const BodyMedium(
text: "Re-enter Password",
fontColor: Colors.white,
),
TextFormField(
autovalidateMode: AutovalidateMode.disabled,
textInputAction: TextInputAction.done,
keyboardType: TextInputType.text,
scrollPadding: EdgeInsets.zero,
autocorrect: false,
autofillHints: const [AutofillHints.password],
controller: AuthCubit.get(context).passwordController,
validator: (value) {
return AuthCubit.get(context).passwordValidator(value);
},
onChanged: (value) {},
validator: AuthCubit.get(context).reEnterPasswordCheck,
onTapOutside: (event) {
FocusScope.of(context).unfocus();
},
@@ -187,7 +196,7 @@ class SignUpView extends StatelessWidget {
onPressed: () {
if (formKey.currentState!.validate()) {
if ((state is! AuthLoading)) {
AuthCubit.get(context).login();
AuthCubit.get(context).signUp();
FocusScope.of(context).unfocus();
}
}
lib/features/auth/view/widgets/didnt_get_code/didnt_get_code_view.dart
-10
View File
@@ -1,10 +0,0 @@
import 'package:flutter/material.dart';
class DidntGetCodeView extends StatelessWidget {
const DidntGetCodeView({super.key});
@override
Widget build(BuildContext context) {
return const Placeholder();
}
}
lib/features/auth/view/widgets/login/dont_have_an_account.dart → lib/features/auth/view/widgets/dont_have_an_account.dart
View File
lib/features/auth/view/widgets/login/forget_password.dart → lib/features/auth/view/widgets/forget_password.dart
View File
lib/features/auth/view/widgets/login/login_divider.dart → lib/features/auth/view/widgets/login_divider.dart
View File
lib/features/auth/view/widgets/login/login_form.dart → lib/features/auth/view/widgets/login_form.dart
+1 -1
View File
@@ -1,7 +1,7 @@
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/forget_password.dart';
import 'package:syncrow_app/features/auth/view/widgets/forget_password.dart';
import 'package:syncrow_app/features/shared_widgets/default_button.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
import 'package:syncrow_app/utils/resource_manager/styles_manager.dart';
lib/features/auth/view/widgets/login/login_user_agreement.dart → lib/features/auth/view/widgets/login_user_agreement.dart
View File
lib/features/auth/view/widgets/login/login_with_google_facebook.dart → lib/features/auth/view/widgets/login_with_google_facebook.dart
View File
lib/features/auth/view/widgets/one_time_password/one_time_password_view.dart
-10
View File
@@ -1,10 +0,0 @@
import 'package:flutter/material.dart';
class OneTimePasswordView extends StatelessWidget {
const OneTimePasswordView({super.key});
@override
Widget build(BuildContext context) {
return const Placeholder();
}
}
lib/features/auth/view/widgets/privacy_policy/privacy_policy_view.dart
-10
View File
@@ -1,10 +0,0 @@
import 'package:flutter/material.dart';
class PrivacyPolicyView extends StatelessWidget {
const PrivacyPolicyView({super.key});
@override
Widget build(BuildContext context) {
return const Placeholder();
}
}
lib/features/auth/view/widgets/user_agreement/user_agreement_view.dart
-10
View File
@@ -1,10 +0,0 @@
import 'package:flutter/material.dart';
class UserAgreementView extends StatelessWidget {
const UserAgreementView({super.key});
@override
Widget build(BuildContext context) {
return const Placeholder();
}
}