Implemented sign up and otp screens

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
@@ -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';
+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();
}
}
},
),
),
],
)
],
),
],
),
),
),
)
],
),
),
);
},
);
;
}
}
@@ -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();
}
}
@@ -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();
}
}
@@ -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';
@@ -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();
}
}
@@ -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();
}
}
@@ -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();
}
}