From 969bee73e1d190b9ceda435c142230bd0abfaf96 Mon Sep 17 00:00:00 2001 From: Elham Rababah Date: Wed, 1 Apr 2020 13:31:32 +0300 Subject: [PATCH] change password UI --- lib/lookups/auth_lookup.dart | 2 +- lib/routes.dart | 40 +++-- lib/screens/auth/change_password_screen.dart | 24 +++ lib/widgets/auth/auth_header.dart | 90 ++++++++--- lib/widgets/auth/change_password.dart | 159 +++++++++++++++++++ pubspec.yaml | 1 + 6 files changed, 274 insertions(+), 42 deletions(-) create mode 100644 lib/screens/auth/change_password_screen.dart create mode 100644 lib/widgets/auth/change_password.dart diff --git a/lib/lookups/auth_lookup.dart b/lib/lookups/auth_lookup.dart index f3e3e3fc..bc4d3821 100644 --- a/lib/lookups/auth_lookup.dart +++ b/lib/lookups/auth_lookup.dart @@ -1 +1 @@ -enum loginType { knownUser, unknownUser } \ No newline at end of file +enum loginType { knownUser, unknownUser, changePassword, verifyPassword } diff --git a/lib/routes.dart b/lib/routes.dart index f26e18b8..fe88c286 100644 --- a/lib/routes.dart +++ b/lib/routes.dart @@ -9,35 +9,31 @@ import './screens/medicine/medicine_search_screen.dart'; import './screens/my_schedule_screen.dart'; import './screens/patients/patient_search_screen.dart'; import './screens/patients/patients_list_screen.dart'; +import './screens/auth/change_password_screen.dart'; const String HOME = '/'; const String LOGIN = 'login'; +const String CHANGE_PASSWORD = 'change-password'; const String INIT_ROUTE = LOGIN; const String MY_SCHEDULE = 'my-schedule'; -const String QR_READER = 'qr_reader'; +const String QR_READER = 'qr-reader'; const String PATIENT_SEARCH = 'patients/patient-search'; const String PATIENTS = 'patients/patients'; -const String BLOOD_BANK = 'blood_bank'; -const String DOCTOR_REPLY = 'doctor_reply'; -const String MEDICINE_SEARCH='medicine_search'; -const String SETTINGS ='settings'; - - - - +const String BLOOD_BANK = 'blood-bank'; +const String DOCTOR_REPLY = 'doctor-reply'; +const String MEDICINE_SEARCH = 'medicine-search'; +const String SETTINGS = 'settings'; var routes = { - HOME:(_)=>HomeScreen(), - INIT_ROUTE:(_)=>Loginsreen(), - MY_SCHEDULE:(_)=>MyScheduleScreen(), - PATIENT_SEARCH:(_)=>PatientSearchScreen(), - PATIENTS:(_)=>PatientsListScreen(), - QR_READER:(_)=>QrReaderScreen(), - BLOOD_BANK:(_)=>BloodBankScreen(), - DOCTOR_REPLY:(_)=>DoctorReplyScreen(), - MEDICINE_SEARCH:(_)=>MedicineSearchScreen(), - SETTINGS:(_)=>SettingsScreen() - - - + HOME: (_) => HomeScreen(), + INIT_ROUTE: (_) => Loginsreen(), + MY_SCHEDULE: (_) => MyScheduleScreen(), + PATIENT_SEARCH: (_) => PatientSearchScreen(), + PATIENTS: (_) => PatientsListScreen(), + QR_READER: (_) => QrReaderScreen(), + BLOOD_BANK: (_) => BloodBankScreen(), + DOCTOR_REPLY: (_) => DoctorReplyScreen(), + MEDICINE_SEARCH: (_) => MedicineSearchScreen(), + SETTINGS: (_) => SettingsScreen(), + CHANGE_PASSWORD: (_) => ChangePasswordScreen() }; diff --git a/lib/screens/auth/change_password_screen.dart b/lib/screens/auth/change_password_screen.dart new file mode 100644 index 00000000..507c6afc --- /dev/null +++ b/lib/screens/auth/change_password_screen.dart @@ -0,0 +1,24 @@ +import 'package:doctor_app_flutter/lookups/auth_lookup.dart'; +import 'package:doctor_app_flutter/widgets/auth/auth_header.dart'; +import 'package:flutter/material.dart'; +import '../../widgets/auth/change_password.dart'; +class ChangePasswordScreen extends StatelessWidget { + @override + Widget build(BuildContext context) { + // return Container()]; + return Scaffold( + backgroundColor: Colors.white, + body: SingleChildScrollView( + child: Container( + margin: EdgeInsetsDirectional.fromSTEB(30, 0, 0, 0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + AuthHeader(loginType.changePassword), + ChangePassword(), + ], + ), + ), + )); + } +} diff --git a/lib/widgets/auth/auth_header.dart b/lib/widgets/auth/auth_header.dart index efd351cf..2f3876bd 100644 --- a/lib/widgets/auth/auth_header.dart +++ b/lib/widgets/auth/auth_header.dart @@ -1,8 +1,9 @@ -import '../../config/size_config.dart'; -import '../../lookups/auth_lookup.dart'; import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; +import '../../config/size_config.dart'; +import '../../lookups/auth_lookup.dart'; + class AuthHeader extends StatelessWidget { var userType; AuthHeader(this.userType); @@ -25,13 +26,7 @@ class AuthHeader extends StatelessWidget { ? EdgeInsetsDirectional.fromSTEB(0, 50, 0, 0) : EdgeInsetsDirectional.fromSTEB( SizeConfig.screenWidth * 0.13, 0, 0, 0), - child: Image.asset( - 'assets/images/login_icon.png', - fit: BoxFit.cover, - height: SizeConfig.isMobile - ? null - : SizeConfig.screenWidth * 0.09, - ), + child: buildImageLogo(), ), SizedBox( height: 10, @@ -41,14 +36,7 @@ class AuthHeader extends StatelessWidget { ? null : EdgeInsetsDirectional.fromSTEB( SizeConfig.screenWidth * 0.13, 0, 0, 0), - child: Text( - "LOGIN", - style: TextStyle( - fontSize: SizeConfig.isMobile - ? 30 - : SizeConfig.screenWidth * 0.035, - fontWeight: FontWeight.w800), - ), + child: buildTextUnderLogo(context), ) ], ), @@ -81,7 +69,66 @@ class AuthHeader extends StatelessWidget { return screen; } + Image buildImageLogo() { + String img = 'assets/images/login_icon.png'; + if (userType == loginType.unknownUser) { + img = 'assets/images/welcome_login_icon.png'; + } + + return Image.asset( + img, + fit: BoxFit.cover, + height: SizeConfig.isMobile ? null : SizeConfig.screenWidth * 0.09, + ); + } + + Widget buildTextUnderLogo(context) { + if (userType == loginType.knownUser || userType == loginType.unknownUser) { + return Text( + "LOGIN", + style: TextStyle( + fontSize: SizeConfig.isMobile ? 30 : SizeConfig.screenWidth * 0.035, + fontWeight: FontWeight.w800), + ); + } else { + String text1; + String text2; + if (userType == loginType.changePassword) { + text1 = 'Change'; + text2 = 'Password!'; + } + if (userType == loginType.verifyPassword) { + text1 = 'verify'; + text2 = 'Your Account!'; + } + + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + text1, + style: TextStyle( + fontSize: + SizeConfig.isMobile ? 30 : SizeConfig.screenWidth * 0.035, + fontWeight: FontWeight.w800), + ), + Text( + text2, + style: TextStyle( + color: Theme.of(context).primaryColor, + fontSize: + SizeConfig.isMobile ? 30 : SizeConfig.screenWidth * 0.035, + fontWeight: FontWeight.w800), + ) + ], + ); + } + } + Container buildDrAppContainer(BuildContext context) { + if (userType == loginType.changePassword || userType == loginType.verifyPassword ) { + return Container(); + } return Container( margin: SizeConfig.isMobile ? null @@ -98,6 +145,9 @@ class AuthHeader extends StatelessWidget { } Text buildDrSulText(BuildContext context) { + if (userType == loginType.changePassword || userType == loginType.verifyPassword ) { + return Text(''); + } return Text( 'Dr Sulaiman Al Habib', style: TextStyle( @@ -108,12 +158,14 @@ class AuthHeader extends StatelessWidget { ); } - Text buildWelText() { + Widget buildWelText() { String text = 'Welcome to '; if (userType == loginType.unknownUser) { text = 'Welcome Back to '; } - + if (userType == loginType.changePassword || userType == loginType.verifyPassword ) { + return Text(''); + } return Text( text, style: TextStyle( diff --git a/lib/widgets/auth/change_password.dart b/lib/widgets/auth/change_password.dart new file mode 100644 index 00000000..5c231f6a --- /dev/null +++ b/lib/widgets/auth/change_password.dart @@ -0,0 +1,159 @@ +import 'package:doctor_app_flutter/config/size_config.dart'; +import 'package:flutter/material.dart'; +import 'package:hexcolor/hexcolor.dart'; + +class ChangePassword extends StatelessWidget { + final changePassFormKey = GlobalKey(); + var changePassFormValues = { + 'currentPass': null, + 'newPass': null, + 'repeatedPass': null + }; + + @override + Widget build(BuildContext context) { + return Form( + key: changePassFormKey, + child: Container( + width: SizeConfig.widthMultiplier * 90, + child: + Column(crossAxisAlignment: CrossAxisAlignment.start, children: < + Widget>[ + buildSizedBox(), + TextFormField( + keyboardType: TextInputType.number, + decoration: InputDecoration( + // ts/images/password_icon.png + prefixIcon: Image.asset('assets/images/password_icon.png'), + hintText: 'Current Password', + hintStyle: + TextStyle(fontSize: 2 * SizeConfig.textMultiplier), + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.all(Radius.circular(20)), + borderSide: BorderSide(color: Hexcolor('#CCCCCC')), + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.all(Radius.circular(10.0)), + borderSide: + BorderSide(color: Theme.of(context).primaryColor), + ) + //BorderRadius.all(Radius.circular(20)); + ), + validator: (value) { + if (value.isEmpty) { + return 'Please enter your Current Password'; + } + return null; + }, + onSaved: (value) { + // changePassFormValues. = value; + }, + ), + buildSizedBox(40), + // buildSizedBox(), + Text( + "New Password", + style: TextStyle( + fontSize: 2.8 * SizeConfig.textMultiplier, + fontWeight: FontWeight.w800), + ), + buildSizedBox(10.0), + // Text() + TextFormField( + keyboardType: TextInputType.number, + decoration: InputDecoration( + // ts/images/password_icon.png + prefixIcon: Image.asset('assets/images/password_icon.png'), + hintText: 'New Password', + hintStyle: + TextStyle(fontSize: 2 * SizeConfig.textMultiplier), + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.all(Radius.circular(20)), + borderSide: BorderSide(color: Hexcolor('#CCCCCC')), + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.all(Radius.circular(10.0)), + borderSide: + BorderSide(color: Theme.of(context).primaryColor), + ) + //BorderRadius.all(Radius.circular(20)); + ), + validator: (value) { + if (value.isEmpty) { + return 'Please enter your New Password'; + } + return null; + }, + onSaved: (value) { + // userInfo.UserID = value; + }, + ), + buildSizedBox(), + TextFormField( + keyboardType: TextInputType.number, + decoration: InputDecoration( + prefixIcon: Image.asset('assets/images/password_icon.png'), + hintText: 'Repeat Password', + hintStyle: + TextStyle(fontSize: 2 * SizeConfig.textMultiplier), + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.all(Radius.circular(20)), + borderSide: BorderSide(color: Hexcolor('#CCCCCC')), + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.all(Radius.circular(10.0)), + borderSide: + BorderSide(color: Theme.of(context).primaryColor), + ) + //BorderRadius.all(Radius.circular(20)); + ), + validator: (value) { + if (value.isEmpty) { + return 'Please enter your Repeat Password'; + } + return null; + }, + onSaved: (value) { + // userInfo.UserID = value; + }, + ), + buildSizedBox(), + RaisedButton( + onPressed:changePass, + elevation: 0.0, + child: Container( + width: double.infinity, + height: 50, + child: Center( + child: Text( + 'Change Password' + .toUpperCase(), + // textAlign: TextAlign.center, + style: TextStyle( + color: Colors.white, + fontSize: 2.5 * SizeConfig.textMultiplier), + ), + ), + ), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(10), + side: BorderSide(width: 0.5, color: Hexcolor('#CCCCCC'))), + ), + SizedBox( + height: 10, + ), + ]))); + } + + SizedBox buildSizedBox([double height = 20]) { + return SizedBox( + height: height, + ); + } + changePass(){ + if(changePassFormKey.currentState.validate()){ + changePassFormKey.currentState.save(); + // call Api + } + } +} diff --git a/pubspec.yaml b/pubspec.yaml index 24d55e61..4845112c 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -68,6 +68,7 @@ flutter: - assets/images/verification_sms_lg_icon.png - assets/images/verification_whatsapp_lg_icon.png - assets/images/close_icon.png + - assets/images/welcome_login_icon.png # - images/a_dot_ham.jpeg # An image asset can refer to one or more resolution-specific "variants", see