mirror of
https://github.com/SyncrowIOT/syncrow-app.git
synced 2026-10-24 14:17:55 +00:00
Implemented sign up and otp screens
This commit is contained in:
+4
-4
@@ -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';
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
;
|
||||
}
|
||||
}
|
||||
+37
-28
@@ -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
-1
@@ -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();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user