diff --git a/lib/images/checked.png b/lib/images/checked.png new file mode 100644 index 0000000..951ed8f Binary files /dev/null and b/lib/images/checked.png differ diff --git a/lib/images/white_logo.png b/lib/images/white_logo.png new file mode 100644 index 0000000..ce4bc7f Binary files /dev/null and b/lib/images/white_logo.png differ diff --git a/lib/main.dart b/lib/main.dart index b55fd30..289a107 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,7 +1,6 @@ import 'package:flluter2cpi/pages/Login_page/components/guest_box_view_model.dart'; +import 'package:flluter2cpi/pages/New_password/new_password_vm.dart'; import 'package:flluter2cpi/pages/School_year/school_year_view_model.dart'; -import 'package:flluter2cpi/pages/Sign_up/sign_up_view.dart'; -import 'package:flluter2cpi/pages/Login_page/login.dart'; import 'package:flluter2cpi/pages/Sign_up/sign_up_view_model.dart'; import 'package:flluter2cpi/pages/Login_page/view_model.dart'; import 'package:flluter2cpi/routes.dart'; @@ -9,6 +8,8 @@ import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:provider/provider.dart'; +import 'pages/New_password/new_password_v.dart'; + void main() { runApp(const MyApp()); } @@ -34,16 +35,20 @@ class MyApp extends StatelessWidget { ), ChangeNotifierProvider( create: (context) => View(), - ) + ), + ChangeNotifierProvider( + create: (context) => NewPasswordViewModel(), + ), ], builder: (context, child) { return MaterialApp( - debugShowCheckedModeBanner: false, - theme: ThemeData(useMaterial3: true), - routes: generateRoutes(context), - home:const SafeArea( - child: SignUp(), - )); + debugShowCheckedModeBanner: false, + theme: ThemeData(useMaterial3: true), + routes: generateRoutes(context), + home: const SafeArea( + child: NewPassword(), + ), + ); }); }); } diff --git a/lib/pages/Login_page/components/guest_box_view.dart b/lib/pages/Login_page/components/guest_box_view.dart index bf0c32b..9ac8751 100644 --- a/lib/pages/Login_page/components/guest_box_view.dart +++ b/lib/pages/Login_page/components/guest_box_view.dart @@ -37,40 +37,38 @@ class GuestBox extends StatelessWidget { child: SingleChildScrollView( child: Column( children: [ - Padding( - padding: const EdgeInsets.symmetric(horizontal: 15.0).w, - child: Material( - color: Colors.transparent, - child: Form( - autovalidateMode: AutovalidateMode.onUserInteraction, - child: TextFormField( - controller: state.fullNameController, - validator: (value) => state.nameValidator(value), - textCapitalization: TextCapitalization.words, - keyboardType: TextInputType.name, + Material( + color: Colors.transparent, + child: Form( + autovalidateMode: AutovalidateMode.onUserInteraction, + child: TextFormField( + controller: state.fullNameController, + validator: (value) => state.nameValidator(value), + textCapitalization: TextCapitalization.words, + keyboardType: TextInputType.name, - cursorColor: Colors.black, - - decoration: InputDecoration( - fillColor: const Color.fromRGBO(239, 238, 238, 1), - filled: true, - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(10.r), - ), + cursorColor: Colors.black, + + decoration: InputDecoration( + contentPadding: EdgeInsets.only(left: 12.w, top: 14.h, bottom: 14.h), + fillColor: const Color.fromRGBO(239, 238, 238, 1), + filled: true, + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(10.r), + ), - focusedBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10.r), - ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10.r), + ), - hintText: "Full name", - suffixIcon: Icon( - FluentIcons.person_12_filled, - size: iconSize, - color: Colors.black, - ), - hintStyle: - const TextStyle(color: Color.fromRGBO(0, 0, 0, 0.61)), + hintText: "Full name", + suffixIcon: Icon( + FluentIcons.person_12_filled, + size: iconSize, + color: Colors.black, ), + hintStyle: + const TextStyle(color: Color.fromRGBO(0, 0, 0, 0.61)), ), ), ), diff --git a/lib/pages/Login_page/login.dart b/lib/pages/Login_page/login.dart index e61bda3..bcce151 100644 --- a/lib/pages/Login_page/login.dart +++ b/lib/pages/Login_page/login.dart @@ -1,8 +1,5 @@ -import 'dart:js'; -import 'dart:ui'; import 'package:flluter2cpi/pages/Login_page/components/guest.dart'; import 'package:google_fonts/google_fonts.dart'; -import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:fluentui_system_icons/fluentui_system_icons.dart'; @@ -10,21 +7,25 @@ import 'package:provider/provider.dart'; import 'view_model.dart'; class Login extends StatelessWidget { -GlobalKey forme=GlobalKey(); -send(){ - //var formdata=forme.currentState; - // if (formdata.validate()){print("valid");}else{print("invalid");} -} + GlobalKey forme = GlobalKey(); + + Login({super.key}); + send() { + //var formdata=forme.currentState; + // if (formdata.validate()){print("valid");}else{print("invalid");} + } @override Widget build(BuildContext context) { - + final size = MediaQuery.of(context).size; + final iconSize = ((size.height / 844) + (size.width / 390)) / 2; return SafeArea( child: Scaffold( - appBar: AppBar(), + extendBodyBehindAppBar: true, + appBar: AppBar(backgroundColor: Colors.transparent), body: Container( - height: 844.h, - width: 390.w,//the heigh of the frame + height: MediaQuery.of(context).size.height, + width: MediaQuery.of(context).size.width, //the heigh of the frame decoration: const BoxDecoration( gradient: LinearGradient( colors: [ @@ -42,111 +43,179 @@ send(){ child: Padding( padding: EdgeInsets.symmetric(horizontal: 11.w), child: SingleChildScrollView( - child: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [ - SizedBox( - height: 30.h, - ), - SizedBox( - height: 90.h, - width: 85.w, - child: Image.asset('images/logo.png'), - ), - SizedBox(height: 20.h), - SizedBox( - height: 39.h, - width: 170.w, - child: Image.asset( - 'images/guide_text.png', - ), - ), - SizedBox(height: 70.h, width: 20.w), - ListTile( - title: Text( - 'Login', - style: GoogleFonts.poppins( - fontSize: 32.sp, fontWeight: FontWeight.w700, color: Colors.white), - ), - ), - Padding( - padding: const EdgeInsets.only(bottom: 57, right: 16, left: 16, top: 16), - child: Form( - child: FrostedGlassBox( - width: 358.0.w, - height: 660.h, - child: Container(key: forme, - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - - - - Consumer(builder:(context, val, child) => Column( + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox( + height: 20.h, + ), + SizedBox( + height: 90.h, + width: 85.w, + child: Image.asset( + 'lib/images/g1.png', + fit: BoxFit.contain, + filterQuality: FilterQuality.high, + ), + ), + SizedBox(height: 20.h), + SizedBox( + height: 39.h, + width: 170.w, + child: Image.asset( + 'lib/images/logo.png', + fit: BoxFit.contain, + filterQuality: FilterQuality.high, + ), + ), + SizedBox(height: 40.h), + // ListTile( + Padding( + padding: EdgeInsets.only(left: 16.w), + child: SizedBox( + width: MediaQuery.of(context).size.width, + child: Text( + 'Login', + style: GoogleFonts.poppins( + fontSize: 32.sp, + fontWeight: FontWeight.w700, + color: Colors.white), + ), + ), + ), + //), + Padding( + padding: EdgeInsets.only( + bottom: 57.h, right: 16.w, left: 16.w, top: 16.h), + child: Form( + child: FrostedGlassBox( + width: 358.0.w, + height: 500.h, + child: Container( + key: forme, + child: Column( + mainAxisAlignment: MainAxisAlignment.start, children: [ - TextFormField(controller: val.email_controler, - autovalidateMode: AutovalidateMode.onUserInteraction, - validator:(String? value)=>val.validate(value), - - - - enabled: true, - keyboardType: TextInputType.text, - textInputAction: TextInputAction.done, - decoration: InputDecoration( - suffixIcon:const Icon( - Icons.email_rounded, - color: Colors.black, - ), - filled: true, - fillColor: Colors.white, - contentPadding: - const EdgeInsets.only(left: 20.14, right: 120.57, top: 15), - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(10.r), - ) ,focusedBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10.r), - ), - hintText: 'Email', - hintStyle: GoogleFonts.poppins( - fontSize: 14.sp, fontWeight: FontWeight.w500,color: Color.fromRGBO(0, 0, 0, 0.61)), - ), - ), - SizedBox(height: 20.h), - TextFormField( - enabled: true, - keyboardType: TextInputType.text, - textInputAction: TextInputAction.done, - obscureText:val.eyeoff, - decoration: InputDecoration( - suffixIcon: InkWell( - onTap: ()=>val.switchState(), - child: const Icon( - FluentIcons.eye_12_filled, - color: Colors.black, + Consumer( + builder: (context, val, child) => Column( + children: [ + TextFormField( + controller: val.email_controler, + autovalidateMode: AutovalidateMode + .onUserInteraction, + validator: (String? value) => + val.validate(value), + enabled: true, + keyboardType: TextInputType.text, + textInputAction: TextInputAction.done, + style: GoogleFonts.poppins( + fontSize: 15.sp, + fontWeight: FontWeight.w500, + color: const Color.fromRGBO( + 0, 0, 0, 1), + ), + cursorColor: + const Color.fromRGBO(0, 0, 0, 1), + decoration: InputDecoration( + suffixIcon: Padding( + padding: EdgeInsets.only(right: 13.w), + child: Icon( + FluentIcons.mail_24_filled, + size: 25 * iconSize, + color: Colors.black, + ), + ), + filled: true, + fillColor: Colors.white, + contentPadding: EdgeInsets.only( + left: 12.w, + top: 14.h, + bottom: 14.h), + border: OutlineInputBorder( + borderRadius: + BorderRadius.circular(10.r), + ), + focusedBorder: OutlineInputBorder( + borderRadius: + BorderRadius.circular(10.r), + ), + hintText: 'Email', + hintStyle: GoogleFonts.poppins( + fontSize: 14.sp, + fontWeight: FontWeight.w500, + color: const Color.fromRGBO( + 0, 0, 0, 0.61), + ), + ), ), - ), - filled: true, - fillColor: Colors.white, - - contentPadding: - const EdgeInsets.only(left: 20.14, right: 12.57, top: 15), - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(10.r), - ) ,focusedBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(10.r), - ), - hintText: 'Password', - hintStyle: GoogleFonts.poppins( - fontSize: 14.sp, fontWeight: FontWeight.w500,color:const Color.fromRGBO(0, 0, 0, 0.61)), + SizedBox(height: 20.h), + TextFormField( + enabled: true, + keyboardType: TextInputType.text, + textInputAction: TextInputAction.done, + obscureText: val.eyeoff, + cursorColor: + const Color.fromRGBO(0, 0, 0, 1), + style: GoogleFonts.poppins( + fontSize: 15.sp, + fontWeight: FontWeight.w500, + color: const Color.fromRGBO( + 0, 0, 0, 1), + ), + decoration: InputDecoration( + suffixIcon: InkWell( + onTap: () => val.switchState(), + child: val.eyeoff + ? Padding( + padding: EdgeInsets.only(right: 13.w), + child: Icon( + FluentIcons.eye_24_filled, + size: 25 * iconSize, + color: Colors.black, + ), + ) + : Padding( + padding: EdgeInsets.only(right: 13.w), + child: Icon( + FluentIcons + .eye_off_24_filled, + size: 25 * iconSize, + color: Colors.black, + ), + ), + ), + filled: true, + fillColor: Colors.white, + contentPadding: EdgeInsets.only( + left: 12.w, + top: 14.h, + bottom: 14.h), + border: OutlineInputBorder( + borderRadius: + BorderRadius.circular(10.r), + ), + focusedBorder: OutlineInputBorder( + borderRadius: + BorderRadius.circular(10.r), + ), + hintText: 'Password', + hintStyle: GoogleFonts.poppins( + fontSize: 14.sp, + fontWeight: FontWeight.w500, + color: const Color.fromRGBO( + 0, 0, 0, 0.61), + ), + ), + ), + ], ), ), - ], - ),), - - Padding( - padding: const EdgeInsets.only( - left: 140.0, top: 5.0, right: 7, bottom: 16), - child: SizedBox( - width: 110.w, + Padding( + padding: EdgeInsets.only( + left: 180.0.w, + top: 5.0.h, + // right: 7.w, + bottom: 16.h), child: InkWell( onTap: () { print("taped"); @@ -159,113 +228,126 @@ send(){ fontSize: 11.sp, fontWeight: FontWeight.w700), ), - )), - ), - ElevatedButton( - style: ElevatedButton.styleFrom( - foregroundColor: Colors.white, - backgroundColor: const Color.fromRGBO(0, 200, 152, 1), - padding: - (EdgeInsets.symmetric(vertical: 10.h, horizontal: 72.5.w)), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(17.r))), - onPressed: send, - child: Text( - 'Login', - style: GoogleFonts.poppins( - fontSize: 29.sp, fontWeight: FontWeight.w700), - )), - SizedBox(height: 31.h), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - "Don't you have an account yet ?", - style: GoogleFonts.poppins( - fontSize: 12.sp, - color: Colors.white, - fontWeight: FontWeight.w300), - ), - InkWell( - child: Text( - "Register", - style: GoogleFonts.poppins( - fontSize: 14.sp, - fontWeight: FontWeight.w700, - color: Colors.white), ), - onTap: () {}, ), - ], - ), - SizedBox( - height: 47.h, - ), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const Expanded( - child: Divider( - color: Color.fromRGBO(100, 98, 98, 1), - thickness: 1, - ), + ElevatedButton( + style: ElevatedButton.styleFrom( + foregroundColor: Colors.white, + backgroundColor: const Color.fromRGBO( + 32, 197, 122, 1), + padding: EdgeInsets.symmetric( + vertical: 10.h, + horizontal: 72.5.w, + ), + shape: RoundedRectangleBorder( + borderRadius: + BorderRadius.circular(15.r), + ), + ), + onPressed: send, + child: Text( + 'Login', + style: GoogleFonts.poppins( + fontSize: 20.sp, + fontWeight: FontWeight.w700, + ), + )), + SizedBox(height: 31.h), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + "Don't you have an account yet ?", + style: GoogleFonts.poppins( + fontSize: 12.sp, + color: Colors.white, + fontWeight: FontWeight.w300), + ), + InkWell( + child: Text( + " Register", + style: GoogleFonts.poppins( + fontSize: 14.sp, + fontWeight: FontWeight.w700, + color: Colors.white), + ), + onTap: () => Navigator.of(context) + .pushNamed("SignUp"), + ), + ], ), SizedBox( - width: 16.5.w, + height: 12.h, ), - Text( - "OR", - style: GoogleFonts.inter( - fontSize: 15.sp, - fontWeight: FontWeight.w700, - color: Colors.white), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Expanded( + child: Divider( + color: Color.fromRGBO(100, 98, 98, 1), + thickness: 1, + ), + ), + SizedBox( + width: 16.5.w, + ), + Text( + "OR", + style: GoogleFonts.inter( + fontSize: 15.sp, + fontWeight: FontWeight.w700, + color: Colors.white), + ), + SizedBox( + width: 16.5.w, + ), + const Expanded( + child: Divider( + color: Color.fromRGBO(100, 98, 98, 1), + thickness: 1, + ), + ), + ], ), SizedBox( - width: 16.5.w, + height: 9.h, ), - const Expanded( - child: Divider( - color: Color.fromRGBO(100, 98, 98, 1), - thickness: 1, + ElevatedButton( + style: ElevatedButton.styleFrom( + shape: RoundedRectangleBorder( + borderRadius: + BorderRadius.circular(20.r), + side: const BorderSide( + color: Color.fromRGBO(0, 200, 152, 1), + ), + ), + padding: EdgeInsets.symmetric( + vertical: 15.h, + horizontal: 66 + .w), //shape:MaterialStateProperty.all(BorderSide(color: )), + + backgroundColor: Colors.grey.shade900, ), - ), - ], - ), - SizedBox( - height: 9.h, - ), - ElevatedButton( - style: ElevatedButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(20.r), - side: const BorderSide( - color: Color.fromRGBO(0, 200, 152, 1), + onPressed: () { + showDialogg(context); + }, + child: Text( + "Enter as guest", + style: GoogleFonts.inter( + fontSize: 15.sp, + fontWeight: FontWeight.w700, + color: const Color.fromRGBO( + 205, 205, 205, 1), + ), ), ), - padding: EdgeInsets.symmetric( - vertical: 15.h, - horizontal: 66.w), //shape:MaterialStateProperty.all(BorderSide(color: )), - - backgroundColor: Colors.grey.shade900, - ), - onPressed: () { - showDialogg(context); - }, - child: Text( - "Enter as guest", - style: GoogleFonts.inter( - fontSize: 15.sp, - fontWeight: FontWeight.w700, - color: const Color.fromRGBO(205, 205, 205, 1)), - ), + ], ), - ], + ), ), ), ), - ), - ), - ]), + ]), ), )), ), @@ -283,34 +365,44 @@ class FrostedGlassBox extends StatelessWidget { final double width, height; final Widget child; - const FrostedGlassBox({required this.width, required this.height, required this.child}); + const FrostedGlassBox( + {super.key, + required this.width, + required this.height, + required this.child}); @override Widget build(BuildContext context) { return ClipRRect( borderRadius: BorderRadius.circular(20.0), - child: Container( + child: SizedBox( width: width, - height: height, + // height: height, child: Stack( children: [ - BackdropFilter( - filter: ImageFilter.blur( - sigmaX: 7.0, - sigmaY: 7.0, - ), - child: Container(width: width, height: height, child: Text(" ")), - ), + // BackdropFilter( + // filter: ImageFilter.blur( + // sigmaX: 7.0, + // sigmaY: 7.0, + // ), + // child: SizedBox( + // width: width, height: height, child: const Text(" ")), + // ), Container( - padding: EdgeInsets.only(top: 35, bottom: 22, left: 16, right: 16), + padding: const EdgeInsets.only( + top: 35, bottom: 22, left: 16, right: 16), decoration: BoxDecoration( boxShadow: [ BoxShadow( - color: Colors.grey.withOpacity(0.20), blurRadius: 30, offset: Offset(2, 2)) + color: Colors.grey.withOpacity(0.20), + blurRadius: 30, + offset: const Offset(2, 2)) ], borderRadius: BorderRadius.circular(20.0.r), - border: Border.all(color: Color.fromRGBO(4, 38, 30, 0.06), width: 1.0.w), - gradient: LinearGradient( + border: Border.all( + color: const Color.fromRGBO(4, 38, 30, 0.06), + width: 1.0.w), + gradient: const LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [ diff --git a/lib/pages/New_password/components/CustomTextField2.dart b/lib/pages/New_password/components/CustomTextField2.dart new file mode 100644 index 0000000..8d41713 --- /dev/null +++ b/lib/pages/New_password/components/CustomTextField2.dart @@ -0,0 +1,89 @@ +import 'package:fluentui_system_icons/fluentui_system_icons.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:google_fonts/google_fonts.dart'; +import 'package:provider/provider.dart'; + +import '../new_password_vm.dart'; + +class CustomTextField2 extends StatelessWidget { + final String hint; + final TextEditingController controller; + + const CustomTextField2( + {super.key, required this.hint, required this.controller}); + + @override + Widget build(BuildContext context) { + final size = MediaQuery.of(context).size; + final iconSize = 25 * (((size.height / 844) + (size.width / 390)) / 2); + return Consumer( + builder: (context, state, child) => TextFormField( + controller: controller, + autovalidateMode: AutovalidateMode.onUserInteraction, + + + validator: hint == "Confirm password" + ? (value) => state.confirmPasswordValidator(value) + : null, + + // for the text typed by the user + style: GoogleFonts.poppins( + fontSize: 15.sp, + fontWeight: FontWeight.w500, + color: const Color.fromRGBO(0, 0, 0, 1), + ), + // + obscureText: hint == "New password" + ? !state.eyeOpenedPassword + : !state.eyeOpenedConfirmPassword, + // cursor + cursorColor: const Color.fromRGBO(0, 0, 0, 1), + decoration: InputDecoration( + contentPadding: EdgeInsets.only(left: 12.w, top: 14.h, bottom: 14.h), + fillColor: const Color.fromRGBO(239, 238, 238, 1), + filled: true, + suffixIcon: Padding( + padding: EdgeInsets.only(right: 13.w), + child: InkWell( + radius: iconSize / 2, + onTap: () => hint == "New password" + ? state.swithPassworState() + : state.swithConfirmPassworState(), + child: (hint == "New password") + ? state.eyeOpenedPassword + ? Icon(FluentIcons.eye_off_24_filled, size: iconSize) + : Icon(FluentIcons.eye_24_filled, size: iconSize) + : state.eyeOpenedConfirmPassword + ? Icon(FluentIcons.eye_off_24_filled, size: iconSize) + : Icon(FluentIcons.eye_24_filled, size: iconSize), + ), + ), + suffixIconColor: const Color.fromRGBO(33, 33, 33, 1), + + ///for the hint + hintMaxLines: 1, + hintText: hint, + hintStyle: GoogleFonts.poppins( + fontSize: 14.sp, + fontWeight: FontWeight.w500, + color: const Color.fromRGBO(0, 0, 0, 0.61), + ), + //for the outlined border + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(10.r), + ), + errorStyle: GoogleFonts.poppins( + fontSize: 13.sp, + fontWeight: FontWeight.w400, + color: Colors.red, + ), + + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10.r), + ), + ), + ), + ); + } +} diff --git a/lib/pages/New_password/new_password_v.dart b/lib/pages/New_password/new_password_v.dart new file mode 100644 index 0000000..2e8725a --- /dev/null +++ b/lib/pages/New_password/new_password_v.dart @@ -0,0 +1,249 @@ +import 'package:flluter2cpi/pages/New_password/new_password_vm.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:google_fonts/google_fonts.dart'; +import 'package:provider/provider.dart'; + +import 'components/CustomTextField2.dart'; + +class NewPassword extends StatefulWidget { + const NewPassword({super.key}); + + @override + State createState() => _NewPasswordState(); +} + +class _NewPasswordState extends State { + GlobalKey formKey = GlobalKey(); + @override + Widget build(BuildContext context) { +// +// + final size = MediaQuery.of(context).size; + final state = Provider.of(context, listen: false); +// +// + return Scaffold( + body: Container( + height: size.height, + width: size.width, //the heigh of the frame + decoration: const BoxDecoration( + gradient: LinearGradient( + colors: [ + Color.fromRGBO(3, 117, 89, 0.85), + Color.fromRGBO(1, 61, 46, 0.8), + // Color.fromRGBO(1,61,46,0.88), + // // Color.fromRGBO(41,45,54,0.97), + // // Color.fromRGBO(39,42,48,0.98), + Color.fromRGBO(24, 26, 32, 0.97), + Color.fromRGBO(0, 0, 0, 0.96), + Color.fromRGBO(0, 0, 0, 1), + ], + begin: Alignment.topLeft, + end: Alignment.bottomRight, + ), + ), + child: Padding( + padding: EdgeInsets.symmetric(horizontal: 10.w), + child: SingleChildScrollView( + child: Column( + children: [ + SizedBox( + height: 43.h, + ), + SizedBox( + height: 90.h, + width: 85.w, + child: Image.asset( + "lib/images/g1.png", + fit: BoxFit.contain, + filterQuality: FilterQuality.high, + ), + ), + SizedBox(height: 20.h), + SizedBox( + height: 39.h, + width: 170.w, + child: Image.asset( + "lib/images/logo.png", + fit: BoxFit.contain, + filterQuality: FilterQuality.high, + ), + ), + SizedBox(height: 42.h), + Container( + width: 371.w, + padding: EdgeInsets.symmetric(horizontal: 16.w), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(25.r), + gradient: const LinearGradient( + colors: [ + Color.fromRGBO(41, 45, 54, 0.47), + Color.fromRGBO(41, 45, 54, 0), + ], + ), + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox(height: 33.h), + Align( + alignment: Alignment.topLeft, + child: Text( + "Set new password", + style: GoogleFonts.poppins( + fontSize: 25.sp, + fontWeight: FontWeight.w700, + color: Colors.white, + ), + ), + ), + SizedBox(height: 22.h), + Align( + alignment: Alignment.topLeft, + child: Text( + "Enter your new password bellow", + style: GoogleFonts.poppins( + fontSize: 16.sp, + fontWeight: FontWeight.w500, + color: Colors.white, + ), + ), + ), + SizedBox(height: 15.h), + Container( + width: 343.w, + padding: EdgeInsets.symmetric(horizontal: 9.w), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(25.r), + color: const Color.fromRGBO(62, 67, 79, 1), + ), + child: Form( + key: formKey, + child: Column( + children: [ + SizedBox(height: 37.h), + CustomTextField2( + hint: "New password", + controller: state.newPasswordController), + SizedBox(height: 35.h), + CustomTextField2( + hint: "Confirm password", + controller: state.confirmPasswordController), + SizedBox(height: 37.h), + ], + ), + ), + ), + SizedBox(height: 39.h), + ElevatedButton( + onPressed: () { + if (Navigator.of(context).canPop()) { + Navigator.of(context).pop(); + } + if (formKey.currentState != null) { + if (formKey.currentState!.validate()) { + showModalBottomSheet( + backgroundColor: Colors.transparent, + context: context, + builder: (context) { + return Container( + width: size.width, + decoration: BoxDecoration( + color: + const Color.fromRGBO(41, 45, 54, 1), + borderRadius: BorderRadius.only( + topLeft: Radius.circular(40.r), + topRight: Radius.circular(40.r)), + ), + child: Wrap( + crossAxisAlignment: WrapCrossAlignment.center, + runAlignment: WrapAlignment.center, + direction: Axis.vertical, + children: [ + SizedBox(height: 37.h), + SizedBox( + height: 90.w, + width: 90.w, + child: Image.asset( + "lib/images/checked.png", + filterQuality: FilterQuality.high, + fit: BoxFit.contain, + ), + ), + SizedBox(height: 22.h), + Text( + "Password Updated", + style: GoogleFonts.poppins( + fontSize: 20.sp, + fontWeight: FontWeight.w700, + color: Colors.white, + ), + ), + SizedBox(height: 30.h), + ElevatedButton( + onPressed: () { + /*add your backend code here */ + Navigator.of(context) + .pushReplacementNamed("LogIn"); + }, + style: ElevatedButton.styleFrom( + backgroundColor: + const Color.fromRGBO( + 32, 197, 122, 1), + foregroundColor: + const Color.fromRGBO( + 255, 255, 255, 0.91), + textStyle: GoogleFonts.poppins( + fontSize: 20.sp, + fontWeight: FontWeight.w700), + padding: EdgeInsets.symmetric( + vertical: 10.h, + horizontal: 54.w), + shape: RoundedRectangleBorder( + borderRadius: + BorderRadius.circular(15.r), + ), + ), + child: const Text( + "Return to login", + ), + ), + SizedBox(height: 37.h), + ], + ), + ); + }, + ); + } + } + }, + style: ElevatedButton.styleFrom( + backgroundColor: + const Color.fromRGBO(32, 197, 122, 1), + foregroundColor: + const Color.fromRGBO(255, 255, 255, 0.91), + textStyle: GoogleFonts.poppins( + fontSize: 20.sp, fontWeight: FontWeight.w700), + padding: EdgeInsets.symmetric( + vertical: 10.h, horizontal: 39.w), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(15.r), + ), + ), + child: const Text( + "Submit password", + ), + ), + SizedBox(height: 33.h), + ], + ), + ), + ], + ), + ), + ), + ), + ); + } +} diff --git a/lib/pages/New_password/new_password_vm.dart b/lib/pages/New_password/new_password_vm.dart new file mode 100644 index 0000000..c30326b --- /dev/null +++ b/lib/pages/New_password/new_password_vm.dart @@ -0,0 +1,26 @@ +import 'package:flutter/material.dart'; + +class NewPasswordViewModel extends ChangeNotifier { + bool eyeOpenedPassword = false; + bool eyeOpenedConfirmPassword = false; + final TextEditingController newPasswordController = TextEditingController(); + final TextEditingController confirmPasswordController = + TextEditingController(); + + swithPassworState() { + eyeOpenedPassword = !eyeOpenedPassword; + notifyListeners(); + } + + swithConfirmPassworState() { + eyeOpenedConfirmPassword = !eyeOpenedConfirmPassword; + notifyListeners(); + } + + String? confirmPasswordValidator(String? confirmPassWord) { + if (confirmPassWord != newPasswordController.text) { + return "not the same password"; + } + return null; + } +} diff --git a/lib/pages/School_year/school_year.view.dart b/lib/pages/School_year/school_year.view.dart index 98800cc..c5b72b0 100644 --- a/lib/pages/School_year/school_year.view.dart +++ b/lib/pages/School_year/school_year.view.dart @@ -44,7 +44,6 @@ class SchoolYear extends StatelessWidget { children: [ SizedBox( height: 43.h, - ), SizedBox( height: 90.h, @@ -56,9 +55,6 @@ class SchoolYear extends StatelessWidget { ), ), SizedBox(height: 20.h), - - - SizedBox(height: 10.h), SizedBox( height: 39.h, @@ -101,11 +97,7 @@ class SchoolYear extends StatelessWidget { children: [ SizedBox( height: 40.h, - ), - - - Text( "Welcome to Guide", style: GoogleFonts.poppins( @@ -113,7 +105,6 @@ class SchoolYear extends StatelessWidget { fontWeight: FontWeight.w700, color: Colors.white), ), - SizedBox(height: 26.h), Text( "Before we continue. Please enter your school year.", @@ -124,14 +115,12 @@ class SchoolYear extends StatelessWidget { ), SizedBox(height: 37.h), Container( - height: 231.h, width: 343.w, padding: EdgeInsets.symmetric(horizontal: 9.w), decoration: BoxDecoration( borderRadius: BorderRadius.circular(25.r), color: const Color.fromRGBO(62, 67, 79, 1), ), - child: SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.center, @@ -140,9 +129,7 @@ class SchoolYear extends StatelessWidget { SizedBox(height: 50.h), //DropDownButton const YearSelecter(), - SizedBox( - height: 9.h, - ), + SizedBox(height: 9.h), // // @@ -165,7 +152,7 @@ class SchoolYear extends StatelessWidget { ), ); } else { - return const Text(""); + return const Text(" "); } }, ), @@ -174,10 +161,9 @@ class SchoolYear extends StatelessWidget { // // // continue button - SizedBox(height: 15.h), + SizedBox(height: 10.h), ElevatedButton( onPressed: () { - // state.setYear = null; state.pressButton(); }, style: ElevatedButton.styleFrom( @@ -186,8 +172,9 @@ class SchoolYear extends StatelessWidget { foregroundColor: const Color.fromRGBO( 255, 255, 255, 0.91), textStyle: GoogleFonts.poppins( - fontSize: 20.sp, - fontWeight: FontWeight.w700), + fontSize: 20.sp, + fontWeight: FontWeight.w700, + ), padding: EdgeInsets.symmetric( vertical: 10.h, horizontal: 82.w), shape: RoundedRectangleBorder( @@ -196,12 +183,11 @@ class SchoolYear extends StatelessWidget { ), child: const Text("Continue"), ), - SizedBox(height: 30.h) + SizedBox(height: 50.h) ], ), - - - ),), + ), + ), SizedBox( height: 85.h, ), @@ -210,7 +196,6 @@ class SchoolYear extends StatelessWidget { ), ), ], - ), ), ), diff --git a/lib/pages/Sign_up/Components/custom_text_field.dart b/lib/pages/Sign_up/Components/custom_text_field.dart index a31e001..f1785a5 100644 --- a/lib/pages/Sign_up/Components/custom_text_field.dart +++ b/lib/pages/Sign_up/Components/custom_text_field.dart @@ -19,10 +19,10 @@ class CustomTextField extends StatelessWidget { return Consumer( builder: (context, state, child) => TextFormField( controller: controller, - autovalidateMode: AutovalidateMode.onUserInteraction, + autovalidateMode: AutovalidateMode.onUserInteraction, autofocus: false, - - keyboardType: hint == "First name" || hint == "Last name" + + keyboardType: hint == "Full name" ? TextInputType.name : TextInputType.emailAddress, textInputAction: TextInputAction.done, @@ -69,7 +69,10 @@ class CustomTextField extends StatelessWidget { hint != "Full name") ? Icon(FluentIcons.mail_24_filled, size: iconSize) : hint == "Full name" - ? Icon(FluentIcons.person_24_filled,size: iconSize,) + ? Icon( + FluentIcons.person_24_filled, + size: iconSize, + ) : InkWell( radius: iconSize / 2, onTap: () => hint == "Password" @@ -85,7 +88,8 @@ class CustomTextField extends StatelessWidget { ? Icon(FluentIcons.eye_off_24_filled, size: iconSize) : Icon(FluentIcons.eye_24_filled, - size: iconSize)), + size: iconSize), + ), ), suffixIconColor: const Color.fromRGBO(33, 33, 33, 1), @@ -101,7 +105,12 @@ class CustomTextField extends StatelessWidget { border: OutlineInputBorder( borderRadius: BorderRadius.circular(10.r), ), - + errorStyle: GoogleFonts.poppins( + fontSize: 13.sp, + fontWeight: FontWeight.w400, + color: Colors.red, + ), + focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(10.r), ), diff --git a/lib/pages/Sign_up/sign_up_view.dart b/lib/pages/Sign_up/sign_up_view.dart index 5b85684..ba5faca 100644 --- a/lib/pages/Sign_up/sign_up_view.dart +++ b/lib/pages/Sign_up/sign_up_view.dart @@ -94,7 +94,7 @@ class _SignUpState extends State { filterQuality: FilterQuality.high, ), ), - SizedBox(height:60.h), + SizedBox(height: 60.h), Text( "Create new account", style: GoogleFonts.poppins( @@ -139,22 +139,22 @@ class _SignUpState extends State { hint: "Full name", controller: state.fullNameController, ), - SizedBox(height: 25.h), + SizedBox(height: 30.h), CustomTextField( hint: "Email", controller: state.emailController, ), - SizedBox(height: 25.h), + SizedBox(height: 30.h), CustomTextField( hint: "Password", controller: state.passwordController, ), - SizedBox(height: 25.h), + SizedBox(height: 30.h), CustomTextField( hint: "Confirm password", controller: state.confirmPasswordController, ), - SizedBox(height: 40.h), + SizedBox(height: 50.h), ElevatedButton( onPressed: () { if (formState.currentState != null) { @@ -163,7 +163,8 @@ class _SignUpState extends State { } else { ScaffoldMessenger.of(context).showSnackBar( SnackBar( - dismissDirection: DismissDirection.horizontal, + dismissDirection: + DismissDirection.horizontal, content: Text( "please make sure there is no error.", style: GoogleFonts.poppins( @@ -180,20 +181,21 @@ class _SignUpState extends State { style: ElevatedButton.styleFrom( backgroundColor: const Color.fromRGBO(32, 197, 122, 1), - foregroundColor: const Color.fromRGBO(255, 255, 255, 0.91), + foregroundColor: + const Color.fromRGBO(255, 255, 255, 0.91), textStyle: GoogleFonts.poppins( fontSize: 20.sp, fontWeight: FontWeight.w700), padding: EdgeInsets.symmetric( - vertical: 12.h, horizontal: 62.5.w), + vertical: 10.h, horizontal: 62.5.w), shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(12.r), + borderRadius: BorderRadius.circular(15.r), ), ), - child: const Text("Register now",), - ), - SizedBox( - height: 25.h, + child: const Text( + "Register now", + ), ), + SizedBox(height: 25.h), Row( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min, @@ -254,16 +256,17 @@ class _SignUpState extends State { ), SizedBox(height: 7.h), InkWell( - onTap: ()=>{showDialogg(context)}, + onTap: () => {showDialogg(context)}, child: CircleAvatar( radius: 31.4.r, - backgroundColor: const Color.fromRGBO(180, 28, 28, 1), + backgroundColor: + const Color.fromRGBO(180, 28, 28, 1), child: CircleAvatar( radius: 30.r, backgroundColor: const Color.fromRGBO(217, 217, 217, 1), child: Padding( - padding: EdgeInsets.all(8.w), + padding: EdgeInsets.all(5.w), child: Image.asset( "lib/images/google.png", fit: BoxFit.contain,