added design forgot password

This commit is contained in:
llsajjad
2025-09-08 10:00:46 +03:30
parent 837bde1677
commit bb1dbd5bbe
17 changed files with 1133 additions and 85 deletions
@@ -0,0 +1,133 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:go_router/go_router.dart';
import 'package:pinput/pinput.dart';
import 'package:provider/provider.dart';
import 'package:tm_app/core/utils/size_config.dart';
import 'package:tm_app/views/forget_password_create/pages/forgot_password_create_screen.dart';
import '../../../core/constants/assets.dart';
import '../../../core/theme/colors.dart';
import '../../../view_models/auth_view_model.dart';
import '../../shared/base_button.dart';
import '../strings/forgot_password_otp_strings.dart';
class DesktopForgotPasswordOtpPage extends StatelessWidget {
const DesktopForgotPasswordOtpPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.backgroundColor,
body: Center(
child: SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 24.0.w()),
child: Consumer<AuthViewModel>(
builder: (context, viewModel, _) {
return Center(
child: SizedBox(
width: 364,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 22.0.w()),
child: SvgPicture.asset(
AssetsManager.logoBig,
width: double.infinity,
height: 50.0.h(),
),
),
SizedBox(height: 72.0.h()),
Text(
ForgotPasswordOtpStrings.forgotPasswordTitle,
style: TextStyle(
fontSize: 28.0.sp(),
fontWeight: FontWeight.bold,
color: AppColors.grey80,
),
),
SizedBox(height: 16.0.h()),
Text(
ForgotPasswordOtpStrings.forgotPasswordSubtitle,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14.0.sp(),
fontWeight: FontWeight.w400,
color: AppColors.grey60,
),
),
SizedBox(height: 40.0.h()),
Pinput(
controller: viewModel.otpController,
length: 5,
pinAnimationType: PinAnimationType.scale,
onCompleted: (value) {
debugPrint('OTP: $value');
},
defaultPinTheme: PinTheme(
width: 50.0.w(),
height: 50.0.h(),
textStyle: TextStyle(
fontSize: 20.0.sp(),
fontWeight: FontWeight.bold,
),
decoration: BoxDecoration(
color: AppColors.grey0,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: AppColors.grey40),
),
),
),
SizedBox(height: 24.0.h()),
viewModel.isLoading
? BaseButton(
isEnabled: false,
text: ForgotPasswordOtpStrings.resetLink,
onPressed: null,
)
: BaseButton(
isEnabled:
viewModel.canSubmitOtpPage, // 👈 شرط جدید
text: ForgotPasswordOtpStrings.resetLink,
onPressed:
viewModel.canSubmitOtpPage
? () async {
Navigator.push(
context,
MaterialPageRoute(
builder:
(context) =>
const ForgotPasswordCreateScreen(),
),
);
}
: null,
),
SizedBox(height: 12.0),
TextButton(
onPressed: () {
context.pop();
},
child: Text(
ForgotPasswordOtpStrings.backToSignInButton,
style: TextStyle(
fontSize: 14.0.sp(),
fontWeight: FontWeight.w500,
color: AppColors.mainBlue,
),
),
),
],
),
),
);
},
),
),
),
);
}
}
@@ -0,0 +1,19 @@
import 'package:flutter/material.dart';
import 'package:tm_app/views/forget_password_otp.dart/pages/d_forget_password_otp.dart_page.dart';
import 'package:tm_app/views/forget_password_otp.dart/pages/m_forget_password_otp.dart_page.dart';
import 'package:tm_app/views/forget_password_otp.dart/pages/t_forget_password_otp.dart_page.dart';
import '../../shared/responsive_builder.dart';
class ForgotPasswordOtpScreen extends StatelessWidget {
const ForgotPasswordOtpScreen({super.key});
@override
Widget build(BuildContext context) {
return ResponsiveBuilder(
mobile: MobileForgotPasswordOtpPage(),
tablet: TabletForgotPasswordOtpPage(),
desktop: DesktopForgotPasswordOtpPage(),
);
}
}
@@ -0,0 +1,125 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:go_router/go_router.dart';
import 'package:pinput/pinput.dart';
import 'package:provider/provider.dart';
import 'package:tm_app/core/utils/size_config.dart';
import 'package:tm_app/views/forget_password_create/pages/forgot_password_create_screen.dart';
import '../../../core/constants/assets.dart';
import '../../../core/theme/colors.dart';
import '../../../view_models/auth_view_model.dart';
import '../../shared/base_button.dart';
import '../strings/forgot_password_otp_strings.dart';
class MobileForgotPasswordOtpPage extends StatelessWidget {
const MobileForgotPasswordOtpPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.backgroundColor,
body: Center(
child: SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 24.0.w()),
child: Consumer<AuthViewModel>(
builder: (context, viewModel, _) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 22.0.w()),
child: SvgPicture.asset(
AssetsManager.logoBig,
width: double.infinity,
height: 50.0.h(),
),
),
SizedBox(height: 72.0.h()),
Text(
ForgotPasswordOtpStrings.forgotPasswordTitle,
style: TextStyle(
fontSize: 28.0.sp(),
fontWeight: FontWeight.bold,
color: AppColors.grey80,
),
),
SizedBox(height: 16.0.h()),
Text(
ForgotPasswordOtpStrings.forgotPasswordSubtitle,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14.0.sp(),
fontWeight: FontWeight.w400,
color: AppColors.grey60,
),
),
SizedBox(height: 40.0.h()),
Pinput(
controller: viewModel.otpController,
length: 5,
pinAnimationType: PinAnimationType.scale,
onCompleted: (value) {
debugPrint('OTP: $value');
},
defaultPinTheme: PinTheme(
width: 50.0.w(),
height: 50.0.h(),
textStyle: TextStyle(
fontSize: 20.0.sp(),
fontWeight: FontWeight.bold,
),
decoration: BoxDecoration(
color: AppColors.grey0,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: AppColors.grey40),
),
),
),
SizedBox(height: 24.0.h()),
viewModel.isLoading
? BaseButton(
isEnabled: false,
text: ForgotPasswordOtpStrings.resetLink,
onPressed: null,
)
: BaseButton(
isEnabled: viewModel.canSubmitOtpPage,
text: ForgotPasswordOtpStrings.resetLink,
onPressed:
viewModel.canSubmitOtpPage
? () async {
Navigator.push(
context,
MaterialPageRoute(
builder:
(context) =>
const ForgotPasswordCreateScreen(),
),
);
}
: null,
),
TextButton(
onPressed: () {
context.pop();
},
child: Text(
ForgotPasswordOtpStrings.backToSignInButton,
style: TextStyle(
fontSize: 14.0.sp(),
fontWeight: FontWeight.w500,
color: AppColors.mainBlue,
),
),
),
],
);
},
),
),
),
);
}
}
@@ -0,0 +1,133 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:go_router/go_router.dart';
import 'package:pinput/pinput.dart';
import 'package:provider/provider.dart';
import 'package:tm_app/core/utils/size_config.dart';
import 'package:tm_app/views/forget_password_create/pages/forgot_password_create_screen.dart';
import '../../../core/constants/assets.dart';
import '../../../core/theme/colors.dart';
import '../../../view_models/auth_view_model.dart';
import '../../shared/base_button.dart';
import '../strings/forgot_password_otp_strings.dart';
class TabletForgotPasswordOtpPage extends StatelessWidget {
const TabletForgotPasswordOtpPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.backgroundColor,
body: Center(
child: SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 24.0.w()),
child: Consumer<AuthViewModel>(
builder: (context, viewModel, _) {
return Center(
child: SizedBox(
width: 364,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 22.0.w()),
child: SvgPicture.asset(
AssetsManager.logoBig,
width: double.infinity,
height: 50.0.h(),
),
),
SizedBox(height: 72.0.h()),
Text(
ForgotPasswordOtpStrings.forgotPasswordTitle,
style: TextStyle(
fontSize: 28.0.sp(),
fontWeight: FontWeight.bold,
color: AppColors.grey80,
),
),
SizedBox(height: 16.0.h()),
Text(
ForgotPasswordOtpStrings.forgotPasswordSubtitle,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14.0.sp(),
fontWeight: FontWeight.w400,
color: AppColors.grey60,
),
),
SizedBox(height: 40.0.h()),
Pinput(
controller: viewModel.otpController,
length: 5,
pinAnimationType: PinAnimationType.scale,
onCompleted: (value) {
debugPrint('OTP: $value');
},
defaultPinTheme: PinTheme(
width: 50.0.w(),
height: 50.0.h(),
textStyle: TextStyle(
fontSize: 20.0.sp(),
fontWeight: FontWeight.bold,
),
decoration: BoxDecoration(
color: AppColors.grey0,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: AppColors.grey40),
),
),
),
SizedBox(height: 24.0.h()),
viewModel.isLoading
? BaseButton(
isEnabled: false,
text: ForgotPasswordOtpStrings.resetLink,
onPressed: null,
)
: BaseButton(
isEnabled:
viewModel.canSubmitOtpPage, // 👈 شرط جدید
text: ForgotPasswordOtpStrings.resetLink,
onPressed:
viewModel.canSubmitOtpPage
? () async {
Navigator.push(
context,
MaterialPageRoute(
builder:
(context) =>
const ForgotPasswordCreateScreen(),
),
);
}
: null,
),
SizedBox(height: 12.0),
TextButton(
onPressed: () {
context.pop();
},
child: Text(
ForgotPasswordOtpStrings.backToSignInButton,
style: TextStyle(
fontSize: 14.0.sp(),
fontWeight: FontWeight.w500,
color: AppColors.mainBlue,
),
),
),
],
),
),
);
},
),
),
),
);
}
}
@@ -0,0 +1,8 @@
class ForgotPasswordOtpStrings {
ForgotPasswordOtpStrings._();
static const String forgotPasswordTitle = 'Forgot Password';
static const String forgotPasswordSubtitle =
'Enter the code sent to your email to reset your password.';
static const String backToSignInButton = 'Back to Sign In';
static const String resetLink = 'Reset Link';
}