added design forgot password
This commit is contained in:
llsajjad
@@ -0,0 +1,167 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/svg.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:tm_app/core/utils/size_config.dart';
|
||||
import 'package:tm_app/views/forget_password_create/strings/forgot_password_create_strings.dart';
|
||||
import 'package:tm_app/views/forget_password_otp.dart/pages/m_forget_password_otp.dart_page.dart';
|
||||
|
||||
import '../../../core/constants/assets.dart';
|
||||
import '../../../core/theme/colors.dart';
|
||||
import '../../../view_models/auth_view_model.dart';
|
||||
import '../../login/widgets/login_textfield.dart';
|
||||
import '../../shared/base_button.dart';
|
||||
|
||||
class DesktopForgotPasswordCreatePage extends StatelessWidget {
|
||||
const DesktopForgotPasswordCreatePage({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(
|
||||
ForgotPasswordCreateStrings.forgotPasswordTitle,
|
||||
style: TextStyle(
|
||||
fontSize: 28.0.sp(),
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.grey80,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 16.0.h()),
|
||||
Text(
|
||||
ForgotPasswordCreateStrings.forgotPasswordSubtitle,
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 14.0.sp(),
|
||||
fontWeight: FontWeight.w400,
|
||||
color: AppColors.grey60,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 40.0.h()),
|
||||
LoginTextField(
|
||||
controller: viewModel.newPasswordController,
|
||||
focusNode: viewModel.newPasswordFocus,
|
||||
label: ForgotPasswordCreateStrings.createNewPassword,
|
||||
iconPath: AssetsManager.passwordIcon,
|
||||
isPassword: true,
|
||||
obscureText: viewModel.obscureForgotPassword,
|
||||
onToggleVisibility:
|
||||
viewModel.toggleForgotPasswordVisibility,
|
||||
),
|
||||
SizedBox(height: 16.0.h()),
|
||||
Container(
|
||||
alignment: Alignment.centerLeft,
|
||||
padding: EdgeInsets.only(left: 16.0.w()),
|
||||
child: Text(
|
||||
ForgotPasswordCreateStrings.atLast5Character,
|
||||
style: TextStyle(
|
||||
fontSize: 14.0.sp(),
|
||||
color: AppColors.grey60,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 6.0.h()),
|
||||
Container(
|
||||
alignment: Alignment.centerLeft,
|
||||
padding: EdgeInsets.only(left: 16.0.w()),
|
||||
child: Text(
|
||||
ForgotPasswordCreateStrings.atLeast1uppercase,
|
||||
style: TextStyle(
|
||||
fontSize: 14.0.sp(),
|
||||
color: AppColors.grey60,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 6.0.h()),
|
||||
Container(
|
||||
alignment: Alignment.centerLeft,
|
||||
padding: EdgeInsets.only(left: 16.0.w()),
|
||||
child: Text(
|
||||
ForgotPasswordCreateStrings.atLeast1lowercase,
|
||||
style: TextStyle(
|
||||
fontSize: 14.0.sp(),
|
||||
color: AppColors.grey60,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 6.0.h()),
|
||||
Container(
|
||||
alignment: Alignment.centerLeft,
|
||||
padding: EdgeInsets.only(left: 16.0.w()),
|
||||
child: Text(
|
||||
ForgotPasswordCreateStrings.atLeastSpecial,
|
||||
style: TextStyle(
|
||||
fontSize: 14.0.sp(),
|
||||
color: AppColors.grey60,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 80.0.h()),
|
||||
viewModel.isLoading
|
||||
? BaseButton(
|
||||
isEnabled: false,
|
||||
text: ForgotPasswordCreateStrings.resetLink,
|
||||
onPressed: null,
|
||||
)
|
||||
: BaseButton(
|
||||
isEnabled: viewModel.isNewPasswordValid,
|
||||
text: ForgotPasswordCreateStrings.resetLink,
|
||||
onPressed:
|
||||
viewModel.isNewPasswordValid
|
||||
? () async {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder:
|
||||
(context) =>
|
||||
const MobileForgotPasswordOtpPage(),
|
||||
),
|
||||
);
|
||||
}
|
||||
: null,
|
||||
),
|
||||
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
context.pop();
|
||||
},
|
||||
child: Text(
|
||||
ForgotPasswordCreateStrings.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_create/pages/d_forget_password_create_page.dart';
|
||||
import 'package:tm_app/views/forget_password_create/pages/m_forget_password_create_page.dart';
|
||||
import 'package:tm_app/views/forget_password_create/pages/t_forget_password_create_page.dart';
|
||||
|
||||
import '../../shared/responsive_builder.dart';
|
||||
|
||||
class ForgotPasswordCreateScreen extends StatelessWidget {
|
||||
const ForgotPasswordCreateScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ResponsiveBuilder(
|
||||
mobile: MobileForgotPasswordCreatePage(),
|
||||
tablet: TabletForgotPasswordCreatePage(),
|
||||
desktop: DesktopForgotPasswordCreatePage(),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/svg.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:tm_app/core/utils/size_config.dart';
|
||||
import 'package:tm_app/views/forget_password_create/strings/forgot_password_create_strings.dart';
|
||||
import 'package:tm_app/views/forget_password_otp.dart/pages/m_forget_password_otp.dart_page.dart';
|
||||
|
||||
import '../../../core/constants/assets.dart';
|
||||
import '../../../core/theme/colors.dart';
|
||||
import '../../../view_models/auth_view_model.dart';
|
||||
import '../../login/widgets/login_textfield.dart';
|
||||
import '../../shared/base_button.dart';
|
||||
|
||||
class MobileForgotPasswordCreatePage extends StatelessWidget {
|
||||
const MobileForgotPasswordCreatePage({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(
|
||||
ForgotPasswordCreateStrings.forgotPasswordTitle,
|
||||
style: TextStyle(
|
||||
fontSize: 28.0.sp(),
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.grey80,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 16.0.h()),
|
||||
Text(
|
||||
ForgotPasswordCreateStrings.forgotPasswordSubtitle,
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 14.0.sp(),
|
||||
fontWeight: FontWeight.w400,
|
||||
color: AppColors.grey60,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 40.0.h()),
|
||||
LoginTextField(
|
||||
controller: viewModel.newPasswordController,
|
||||
focusNode: viewModel.newPasswordFocus,
|
||||
label: ForgotPasswordCreateStrings.createNewPassword,
|
||||
iconPath: AssetsManager.passwordIcon,
|
||||
isPassword: true,
|
||||
obscureText: viewModel.obscureForgotPassword,
|
||||
onToggleVisibility:
|
||||
viewModel.toggleForgotPasswordVisibility,
|
||||
),
|
||||
SizedBox(height: 16.0.h()),
|
||||
Container(
|
||||
alignment: Alignment.centerLeft,
|
||||
padding: EdgeInsets.only(left: 16.0.w()),
|
||||
child: Text(
|
||||
ForgotPasswordCreateStrings.atLast5Character,
|
||||
style: TextStyle(
|
||||
fontSize: 14.0.sp(),
|
||||
color: AppColors.grey60,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 6.0.h()),
|
||||
Container(
|
||||
alignment: Alignment.centerLeft,
|
||||
padding: EdgeInsets.only(left: 16.0.w()),
|
||||
child: Text(
|
||||
ForgotPasswordCreateStrings.atLeast1uppercase,
|
||||
style: TextStyle(
|
||||
fontSize: 14.0.sp(),
|
||||
color: AppColors.grey60,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 6.0.h()),
|
||||
Container(
|
||||
alignment: Alignment.centerLeft,
|
||||
padding: EdgeInsets.only(left: 16.0.w()),
|
||||
child: Text(
|
||||
ForgotPasswordCreateStrings.atLeast1lowercase,
|
||||
style: TextStyle(
|
||||
fontSize: 14.0.sp(),
|
||||
color: AppColors.grey60,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 6.0.h()),
|
||||
Container(
|
||||
alignment: Alignment.centerLeft,
|
||||
padding: EdgeInsets.only(left: 16.0.w()),
|
||||
child: Text(
|
||||
ForgotPasswordCreateStrings.atLeastSpecial,
|
||||
style: TextStyle(
|
||||
fontSize: 14.0.sp(),
|
||||
color: AppColors.grey60,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 80.0.h()),
|
||||
viewModel.isLoading
|
||||
? BaseButton(
|
||||
isEnabled: false,
|
||||
text: ForgotPasswordCreateStrings.resetLink,
|
||||
onPressed: null,
|
||||
)
|
||||
: BaseButton(
|
||||
isEnabled: viewModel.isNewPasswordValid,
|
||||
text: ForgotPasswordCreateStrings.resetLink,
|
||||
onPressed:
|
||||
viewModel.isNewPasswordValid
|
||||
? () async {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder:
|
||||
(context) =>
|
||||
const MobileForgotPasswordOtpPage(),
|
||||
),
|
||||
);
|
||||
}
|
||||
: null,
|
||||
),
|
||||
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
context.pop();
|
||||
},
|
||||
child: Text(
|
||||
ForgotPasswordCreateStrings.backToSignInButton,
|
||||
style: TextStyle(
|
||||
fontSize: 14.0.sp(),
|
||||
fontWeight: FontWeight.w500,
|
||||
color: AppColors.mainBlue,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/svg.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:tm_app/core/utils/size_config.dart';
|
||||
import 'package:tm_app/views/forget_password_create/strings/forgot_password_create_strings.dart';
|
||||
import 'package:tm_app/views/forget_password_otp.dart/pages/m_forget_password_otp.dart_page.dart';
|
||||
|
||||
import '../../../core/constants/assets.dart';
|
||||
import '../../../core/theme/colors.dart';
|
||||
import '../../../view_models/auth_view_model.dart';
|
||||
import '../../login/widgets/login_textfield.dart';
|
||||
import '../../shared/base_button.dart';
|
||||
|
||||
class TabletForgotPasswordCreatePage extends StatelessWidget {
|
||||
const TabletForgotPasswordCreatePage({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(
|
||||
ForgotPasswordCreateStrings.forgotPasswordTitle,
|
||||
style: TextStyle(
|
||||
fontSize: 28.0.sp(),
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.grey80,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 16.0.h()),
|
||||
Text(
|
||||
ForgotPasswordCreateStrings.forgotPasswordSubtitle,
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 14.0.sp(),
|
||||
fontWeight: FontWeight.w400,
|
||||
color: AppColors.grey60,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 40.0.h()),
|
||||
LoginTextField(
|
||||
controller: viewModel.newPasswordController,
|
||||
focusNode: viewModel.newPasswordFocus,
|
||||
label: ForgotPasswordCreateStrings.createNewPassword,
|
||||
iconPath: AssetsManager.passwordIcon,
|
||||
isPassword: true,
|
||||
obscureText: viewModel.obscureForgotPassword,
|
||||
onToggleVisibility:
|
||||
viewModel.toggleForgotPasswordVisibility,
|
||||
),
|
||||
SizedBox(height: 16.0.h()),
|
||||
Container(
|
||||
alignment: Alignment.centerLeft,
|
||||
padding: EdgeInsets.only(left: 16.0.w()),
|
||||
child: Text(
|
||||
ForgotPasswordCreateStrings.atLast5Character,
|
||||
style: TextStyle(
|
||||
fontSize: 14.0.sp(),
|
||||
color: AppColors.grey60,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 6.0.h()),
|
||||
Container(
|
||||
alignment: Alignment.centerLeft,
|
||||
padding: EdgeInsets.only(left: 16.0.w()),
|
||||
child: Text(
|
||||
ForgotPasswordCreateStrings.atLeast1uppercase,
|
||||
style: TextStyle(
|
||||
fontSize: 14.0.sp(),
|
||||
color: AppColors.grey60,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 6.0.h()),
|
||||
Container(
|
||||
alignment: Alignment.centerLeft,
|
||||
padding: EdgeInsets.only(left: 16.0.w()),
|
||||
child: Text(
|
||||
ForgotPasswordCreateStrings.atLeast1lowercase,
|
||||
style: TextStyle(
|
||||
fontSize: 14.0.sp(),
|
||||
color: AppColors.grey60,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 6.0.h()),
|
||||
Container(
|
||||
alignment: Alignment.centerLeft,
|
||||
padding: EdgeInsets.only(left: 16.0.w()),
|
||||
child: Text(
|
||||
ForgotPasswordCreateStrings.atLeastSpecial,
|
||||
style: TextStyle(
|
||||
fontSize: 14.0.sp(),
|
||||
color: AppColors.grey60,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 80.0.h()),
|
||||
viewModel.isLoading
|
||||
? BaseButton(
|
||||
isEnabled: false,
|
||||
text: ForgotPasswordCreateStrings.resetLink,
|
||||
onPressed: null,
|
||||
)
|
||||
: BaseButton(
|
||||
isEnabled: viewModel.isNewPasswordValid,
|
||||
text: ForgotPasswordCreateStrings.resetLink,
|
||||
onPressed:
|
||||
viewModel.isNewPasswordValid
|
||||
? () async {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder:
|
||||
(context) =>
|
||||
const MobileForgotPasswordOtpPage(),
|
||||
),
|
||||
);
|
||||
}
|
||||
: null,
|
||||
),
|
||||
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
context.pop();
|
||||
},
|
||||
child: Text(
|
||||
ForgotPasswordCreateStrings.backToSignInButton,
|
||||
style: TextStyle(
|
||||
fontSize: 14.0.sp(),
|
||||
fontWeight: FontWeight.w500,
|
||||
color: AppColors.mainBlue,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
class ForgotPasswordCreateStrings {
|
||||
ForgotPasswordCreateStrings._();
|
||||
static const String forgotPasswordTitle = 'Forgot Password';
|
||||
static const String forgotPasswordSubtitle = 'Change your password';
|
||||
static const String createNewPassword = 'Create new password';
|
||||
static const String backToSignInButton = 'Back to Sign In';
|
||||
static const String resetLink = 'Reset Link';
|
||||
static const String atLast5Character = '• At least 5 characters';
|
||||
static const String atLeast1uppercase = '• At least one uppercase letter (A–Z)';
|
||||
static const String atLeast1lowercase = '• At least one lowercase letter (a–z)';
|
||||
static const String atLeastSpecial = '• At least one special character: ! @ # \$ % & * ^';
|
||||
}
|
||||
Reference in New Issue
Block a user