From efb90988355d738de810c18d352a5a070f995882 Mon Sep 17 00:00:00 2001 From: yaso Date: Fri, 6 Jun 2025 10:11:51 +0200 Subject: [PATCH] . --- .../package_tools/package_tool_one.dart | 14 +- .../mih_text_form_field.dart | 346 +++++++++--------- Frontend/lib/mih_env/env.dart | 12 +- .../authentication/forgot_password.dart | 12 +- .../mih_packages/authentication/register.dart | 93 +++-- .../package_tools/mih_personal_profile.dart | 250 +++++++------ 6 files changed, 373 insertions(+), 354 deletions(-) diff --git a/Frontend/lib/mih_components/mih_package_components/Example/package_tools/package_tool_one.dart b/Frontend/lib/mih_components/mih_package_components/Example/package_tools/package_tool_one.dart index 9debc4cc..7954db41 100644 --- a/Frontend/lib/mih_components/mih_package_components/Example/package_tools/package_tool_one.dart +++ b/Frontend/lib/mih_components/mih_package_components/Example/package_tools/package_tool_one.dart @@ -94,9 +94,10 @@ class _PackageToolOneState extends State { @override Widget build(BuildContext context) { + double screenWidth = MediaQuery.of(context).size.width; return MihPackageToolBody( borderOn: false, - bodyItem: getBody(), + bodyItem: getBody(screenWidth), ); } @@ -119,12 +120,15 @@ class _PackageToolOneState extends State { }); } - Widget getBody() { + Widget getBody(double width) { return Stack( children: [ - Padding( - padding: const EdgeInsets.symmetric(horizontal: 10.0), - child: MihSingleChildScroll( + MihSingleChildScroll( + child: Padding( + padding: + MzanziInnovationHub.of(context)!.theme.screenType == "desktop" + ? EdgeInsets.symmetric(horizontal: width * 0.2) + : EdgeInsets.symmetric(horizontal: width * 0.075), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, diff --git a/Frontend/lib/mih_components/mih_package_components/mih_text_form_field.dart b/Frontend/lib/mih_components/mih_package_components/mih_text_form_field.dart index d10452ac..082f4ee0 100644 --- a/Frontend/lib/mih_components/mih_package_components/mih_text_form_field.dart +++ b/Frontend/lib/mih_components/mih_package_components/mih_text_form_field.dart @@ -84,190 +84,194 @@ class _MihTextFormFieldState extends State { @override Widget build(BuildContext context) { - return SizedBox( - width: widget.width, - height: widget.height, - child: Theme( - data: Theme.of(context).copyWith( - textSelectionTheme: TextSelectionThemeData( - selectionColor: widget.inputColor.withValues(alpha: 0.3), - selectionHandleColor: widget.inputColor, + return Center( + child: SizedBox( + width: widget.width, + height: widget.height, + child: Theme( + data: Theme.of(context).copyWith( + textSelectionTheme: TextSelectionThemeData( + selectionColor: widget.inputColor.withValues(alpha: 0.3), + selectionHandleColor: widget.inputColor, + ), ), - ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - widget.hintText, - textAlign: TextAlign.left, - style: TextStyle( - color: widget.fillColor, - fontSize: 15, - fontWeight: FontWeight.bold, - ), - ), - Visibility( - visible: !widget.requiredText, - child: Text( - "(Optional)", - textAlign: TextAlign.right, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + widget.hintText, + textAlign: TextAlign.left, style: TextStyle( color: widget.fillColor, fontSize: 15, fontWeight: FontWeight.bold, ), ), - ), - ], - ), - const SizedBox(height: 4), - FormField( - initialValue: widget.controller.text, - validator: widget.validator, - autovalidateMode: AutovalidateMode.onUserInteraction, - builder: (field) { - _formFieldState = field; - return Column( - crossAxisAlignment: - CrossAxisAlignment.start, // <-- Add this line - children: [ - Material( - elevation: widget.elevation ?? 4.0, - borderRadius: - BorderRadius.circular(widget.borderRadius ?? 8.0), - child: SizedBox( - height: - widget.height != null ? widget.height! - 25 : null, - child: TextFormField( - controller: widget.controller, - cursorColor: widget.inputColor, - autofillHints: widget.autofillHints, - textAlign: TextAlign.start, - textAlignVertical: widget.multiLineInput == true - ? TextAlignVertical.top - : TextAlignVertical.center, - obscureText: widget.passwordMode == true - ? _obscureText - : false, - expands: widget.passwordMode == true - ? false - : (widget.multiLineInput ?? false), - maxLines: widget.passwordMode == true ? 1 : null, - readOnly: widget.readOnly ?? false, - keyboardType: widget.numberMode == true - ? TextInputType.number - : null, - inputFormatters: widget.numberMode == true - ? [FilteringTextInputFormatter.digitsOnly] - : null, - style: TextStyle( - color: widget.inputColor, - fontWeight: FontWeight.w500, - ), - decoration: InputDecoration( - suffixIcon: widget.passwordMode == true - ? IconButton( - icon: Icon( - _obscureText - ? Icons.visibility_off - : Icons.visibility, - color: widget.inputColor, - ), - onPressed: () { - setState(() { - _obscureText = !_obscureText; - }); - }, - ) - : null, - errorStyle: const TextStyle( - height: 0, fontSize: 0), // <-- Add this line - contentPadding: const EdgeInsets.symmetric( - horizontal: 10.0, vertical: 8.0), - filled: true, - fillColor: widget.fillColor, - border: OutlineInputBorder( - borderRadius: BorderRadius.circular( - widget.borderRadius ?? 8.0), - borderSide: field.hasError - ? BorderSide( - color: MzanziInnovationHub.of(context)! - .theme - .errorColor(), - width: 2.0, - ) - : BorderSide.none, - ), - enabledBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular( - widget.borderRadius ?? 8.0), - borderSide: BorderSide.none, - ), - focusedBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular( - widget.borderRadius ?? 8.0), - borderSide: BorderSide( - color: field.hasError - ? MzanziInnovationHub.of(context)! - .theme - .errorColor() - : widget.inputColor, - width: 3.0, - ), - ), - errorBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular( - widget.borderRadius ?? 8.0), - borderSide: BorderSide( - color: MzanziInnovationHub.of(context)! - .theme - .errorColor(), - width: 3.0, - ), - ), - focusedErrorBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular( - widget.borderRadius ?? 8.0), - borderSide: BorderSide( - color: MzanziInnovationHub.of(context)! - .theme - .errorColor(), - width: 3.0, - ), - ), - ), - onChanged: (value) { - field.didChange(value); - }, - ), + Visibility( + visible: !widget.requiredText, + child: Text( + "(Optional)", + textAlign: TextAlign.right, + style: TextStyle( + color: widget.fillColor, + fontSize: 15, + fontWeight: FontWeight.bold, ), ), - if (field.hasError) - Row( - children: [ - Padding( - padding: const EdgeInsets.only(left: 8.0, top: 4.0), - child: Text( - field.errorText ?? '', - style: TextStyle( - fontSize: 12, - color: MzanziInnovationHub.of(context)! - .theme - .errorColor(), - fontWeight: FontWeight.bold, + ), + ], + ), + const SizedBox(height: 4), + FormField( + initialValue: widget.controller.text, + validator: widget.validator, + autovalidateMode: AutovalidateMode.onUserInteraction, + builder: (field) { + _formFieldState = field; + return Column( + crossAxisAlignment: + CrossAxisAlignment.start, // <-- Add this line + children: [ + Material( + elevation: widget.elevation ?? 4.0, + borderRadius: + BorderRadius.circular(widget.borderRadius ?? 8.0), + child: SizedBox( + height: widget.height != null + ? widget.height! - 25 + : null, + child: TextFormField( + controller: widget.controller, + cursorColor: widget.inputColor, + autofillHints: widget.autofillHints, + textAlign: TextAlign.start, + textAlignVertical: widget.multiLineInput == true + ? TextAlignVertical.top + : TextAlignVertical.center, + obscureText: widget.passwordMode == true + ? _obscureText + : false, + expands: widget.passwordMode == true + ? false + : (widget.multiLineInput ?? false), + maxLines: widget.passwordMode == true ? 1 : null, + readOnly: widget.readOnly ?? false, + keyboardType: widget.numberMode == true + ? TextInputType.number + : null, + inputFormatters: widget.numberMode == true + ? [FilteringTextInputFormatter.digitsOnly] + : null, + style: TextStyle( + color: widget.inputColor, + fontWeight: FontWeight.w500, + ), + decoration: InputDecoration( + suffixIcon: widget.passwordMode == true + ? IconButton( + icon: Icon( + _obscureText + ? Icons.visibility_off + : Icons.visibility, + color: widget.inputColor, + ), + onPressed: () { + setState(() { + _obscureText = !_obscureText; + }); + }, + ) + : null, + errorStyle: const TextStyle( + height: 0, fontSize: 0), // <-- Add this line + contentPadding: const EdgeInsets.symmetric( + horizontal: 10.0, vertical: 8.0), + filled: true, + fillColor: widget.fillColor, + border: OutlineInputBorder( + borderRadius: BorderRadius.circular( + widget.borderRadius ?? 8.0), + borderSide: field.hasError + ? BorderSide( + color: MzanziInnovationHub.of(context)! + .theme + .errorColor(), + width: 2.0, + ) + : BorderSide.none, + ), + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular( + widget.borderRadius ?? 8.0), + borderSide: BorderSide.none, + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular( + widget.borderRadius ?? 8.0), + borderSide: BorderSide( + color: field.hasError + ? MzanziInnovationHub.of(context)! + .theme + .errorColor() + : widget.inputColor, + width: 3.0, + ), + ), + errorBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular( + widget.borderRadius ?? 8.0), + borderSide: BorderSide( + color: MzanziInnovationHub.of(context)! + .theme + .errorColor(), + width: 3.0, + ), + ), + focusedErrorBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular( + widget.borderRadius ?? 8.0), + borderSide: BorderSide( + color: MzanziInnovationHub.of(context)! + .theme + .errorColor(), + width: 3.0, + ), ), ), + onChanged: (value) { + field.didChange(value); + }, ), - ], + ), ), - ], - ); - }, - ), - ], + if (field.hasError) + Row( + children: [ + Padding( + padding: + const EdgeInsets.only(left: 8.0, top: 4.0), + child: Text( + field.errorText ?? '', + style: TextStyle( + fontSize: 12, + color: MzanziInnovationHub.of(context)! + .theme + .errorColor(), + fontWeight: FontWeight.bold, + ), + ), + ), + ], + ), + ], + ); + }, + ), + ], + ), ), ), ); diff --git a/Frontend/lib/mih_env/env.dart b/Frontend/lib/mih_env/env.dart index 842552b8..903bcfe5 100644 --- a/Frontend/lib/mih_env/env.dart +++ b/Frontend/lib/mih_env/env.dart @@ -15,13 +15,13 @@ abstract class AppEnviroment { case Enviroment.dev: { //================= Android Dev Urls ================= - baseApiUrl = "http://10.0.2.2:8080"; - baseFileUrl = "http://10.0.2.2:9000"; - baseAiUrl = "http://10.0.2.2:11434"; + // baseApiUrl = "http://10.0.2.2:8080"; + // baseFileUrl = "http://10.0.2.2:9000"; + // baseAiUrl = "http://10.0.2.2:11434"; //================= Web Dev Urls ================= - // baseApiUrl = "http://localhost:8080"; - // baseFileUrl = "http://localhost:9000"; - // baseAiUrl = "http://localhost:11434"; + baseApiUrl = "http://localhost:8080"; + baseFileUrl = "http://localhost:9000"; + baseAiUrl = "http://localhost:11434"; break; } case Enviroment.prod: diff --git a/Frontend/lib/mih_packages/authentication/forgot_password.dart b/Frontend/lib/mih_packages/authentication/forgot_password.dart index 3b6f5771..99282085 100644 --- a/Frontend/lib/mih_packages/authentication/forgot_password.dart +++ b/Frontend/lib/mih_packages/authentication/forgot_password.dart @@ -204,7 +204,7 @@ class _ForgotPasswordState extends State { ); } - MIHBody getBody() { + MIHBody getBody(double width) { return MIHBody( borderOn: false, bodyItems: [ @@ -222,7 +222,12 @@ class _ForgotPasswordState extends State { child: SingleChildScrollView( physics: const BouncingScrollPhysics(), child: Padding( - padding: const EdgeInsets.all(25.0), + padding: MzanziInnovationHub.of(context)!.theme.screenType == + "desktop" + ? EdgeInsets.symmetric( + vertical: 25, horizontal: width * 0.2) + : EdgeInsets.symmetric( + vertical: 25, horizontal: width * 0.075), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ @@ -320,11 +325,12 @@ class _ForgotPasswordState extends State { @override Widget build(BuildContext context) { + double screenWidth = MediaQuery.of(context).size.width; return MIHLayoutBuilder( actionButton: getActionButton(), header: getHeader(), secondaryActionButton: null, - body: getBody(), + body: getBody(screenWidth), actionDrawer: null, secondaryActionDrawer: null, bottomNavBar: null, diff --git a/Frontend/lib/mih_packages/authentication/register.dart b/Frontend/lib/mih_packages/authentication/register.dart index 50112e8d..e0581428 100644 --- a/Frontend/lib/mih_packages/authentication/register.dart +++ b/Frontend/lib/mih_packages/authentication/register.dart @@ -303,7 +303,7 @@ class _RegisterState extends State { ); } - MIHBody getBody() { + MIHBody getBody(double width) { return MIHBody( borderOn: false, bodyItems: [ @@ -323,7 +323,10 @@ class _RegisterState extends State { child: SingleChildScrollView( physics: const BouncingScrollPhysics(), child: Padding( - padding: const EdgeInsets.all(25.0), + padding: MzanziInnovationHub.of(context)!.theme.screenType == + "desktop" + ? EdgeInsets.symmetric(horizontal: width * 0.2) + : EdgeInsets.symmetric(horizontal: width * 0.075), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ @@ -415,62 +418,55 @@ class _RegisterState extends State { const SizedBox(height: 20), // sign up button Center( - child: MihButton( - onPressed: () { - if (_formKey.currentState!.validate()) { - submitFormInput(); - } - }, - buttonColor: MzanziInnovationHub.of(context)! - .theme - .successColor(), - width: 300, - child: Text( - "Create New Account", - style: TextStyle( - color: MzanziInnovationHub.of(context)! - .theme - .primaryColor(), - fontSize: 20, - fontWeight: FontWeight.bold, - ), - ), - ), - ), - - const SizedBox(height: 10), - //register text - SizedBox( - width: 300.0, - //height: 100.0, - child: Row( - mainAxisAlignment: MainAxisAlignment.end, + child: Wrap( + alignment: WrapAlignment.center, + runAlignment: WrapAlignment.center, + spacing: 10, + runSpacing: 10, children: [ - const Text( - 'Already a User?', - style: - TextStyle(fontSize: 18, color: Colors.grey), - ), - const SizedBox( - width: 6, - ), - GestureDetector( - onTap: widget.onTap, + MihButton( + onPressed: () { + if (_formKey.currentState!.validate()) { + submitFormInput(); + } + }, + buttonColor: MzanziInnovationHub.of(context)! + .theme + .successColor(), + width: 300, child: Text( - 'Sign In', + "Create New Account", style: TextStyle( - fontSize: 18, color: MzanziInnovationHub.of(context)! .theme - .secondaryColor(), + .primaryColor(), + fontSize: 20, fontWeight: FontWeight.bold, ), ), - ) + ), + MihButton( + onPressed: widget.onTap, + buttonColor: MzanziInnovationHub.of(context)! + .theme + .secondaryColor(), + width: 300, + child: Text( + "I have an account", + style: TextStyle( + color: MzanziInnovationHub.of(context)! + .theme + .primaryColor(), + fontSize: 20, + fontWeight: FontWeight.bold, + ), + ), + ), ], ), - //here ), + + //here ], ) ], @@ -494,11 +490,12 @@ class _RegisterState extends State { @override Widget build(BuildContext context) { + double screenWidth = MediaQuery.of(context).size.width; return MIHLayoutBuilder( actionButton: getActionButton(), header: getHeader(), secondaryActionButton: getSecondaryActionButton(), - body: getBody(), + body: getBody(screenWidth), actionDrawer: null, secondaryActionDrawer: null, bottomNavBar: null, diff --git a/Frontend/lib/mih_packages/mzansi_profile/personal_profile/package_tools/mih_personal_profile.dart b/Frontend/lib/mih_packages/mzansi_profile/personal_profile/package_tools/mih_personal_profile.dart index 85a8817f..d25763ea 100644 --- a/Frontend/lib/mih_packages/mzansi_profile/personal_profile/package_tools/mih_personal_profile.dart +++ b/Frontend/lib/mih_packages/mzansi_profile/personal_profile/package_tools/mih_personal_profile.dart @@ -235,146 +235,154 @@ class _MihPersonalProfileState extends State { @override Widget build(BuildContext context) { + double screenWidth = MediaQuery.of(context).size.width; return MihPackageToolBody( borderOn: false, innerHorizontalPadding: 10, - bodyItem: getBody(), + bodyItem: getBody(screenWidth), ); } - Widget getBody() { + Widget getBody(double width) { return MihSingleChildScroll( - child: Column( - children: [ - MihForm( - formKey: _formKey, - formFields: [ - Center( - child: MihCircleAvatar( - imageFile: propicPreview, - width: 150, - editable: true, - fileNameController: proPicController, - userSelectedfile: proPic, - frameColor: - MzanziInnovationHub.of(context)!.theme.secondaryColor(), - backgroundColor: - MzanziInnovationHub.of(context)!.theme.primaryColor(), - onChange: (selectedImage) { - setState(() { - proPic = selectedImage; - }); - }, + child: Padding( + padding: MzanziInnovationHub.of(context)!.theme.screenType == "desktop" + ? EdgeInsets.symmetric(horizontal: width * 0.2) + : EdgeInsets.symmetric(horizontal: width * 0.075), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + MihForm( + formKey: _formKey, + formFields: [ + Center( + child: MihCircleAvatar( + imageFile: propicPreview, + width: 150, + editable: true, + fileNameController: proPicController, + userSelectedfile: proPic, + frameColor: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + backgroundColor: + MzanziInnovationHub.of(context)!.theme.primaryColor(), + onChange: (selectedImage) { + setState(() { + proPic = selectedImage; + }); + }, + ), ), - ), - const SizedBox(height: 25.0), - Visibility( - visible: false, - child: MihTextFormField( + const SizedBox(height: 25.0), + Visibility( + visible: false, + child: MihTextFormField( + fillColor: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + inputColor: + MzanziInnovationHub.of(context)!.theme.primaryColor(), + controller: proPicController, + multiLineInput: false, + requiredText: true, + readOnly: true, + hintText: "Selected File Name", + ), + ), + const SizedBox(height: 10.0), + MihTextFormField( fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(), inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(), - controller: proPicController, + controller: usernameController, multiLineInput: false, requiredText: true, - readOnly: true, - hintText: "Selected File Name", - ), - ), - const SizedBox(height: 10.0), - MihTextFormField( - fillColor: - MzanziInnovationHub.of(context)!.theme.secondaryColor(), - inputColor: - MzanziInnovationHub.of(context)!.theme.primaryColor(), - controller: usernameController, - multiLineInput: false, - requiredText: true, - hintText: "Username", - validator: (value) { - return MihValidationServices().validateUsername(value); - }, - ), - const SizedBox(height: 10.0), - MihTextFormField( - fillColor: - MzanziInnovationHub.of(context)!.theme.secondaryColor(), - inputColor: - MzanziInnovationHub.of(context)!.theme.primaryColor(), - controller: fnameController, - multiLineInput: false, - requiredText: true, - hintText: "First Name", - validator: (value) { - return MihValidationServices().isEmpty(value); - }, - ), - const SizedBox(height: 10.0), - MihTextFormField( - fillColor: - MzanziInnovationHub.of(context)!.theme.secondaryColor(), - inputColor: - MzanziInnovationHub.of(context)!.theme.primaryColor(), - controller: lnameController, - multiLineInput: false, - requiredText: true, - hintText: "Last Name", - validator: (value) { - return MihValidationServices().isEmpty(value); - }, - ), - const SizedBox(height: 10.0), - Row( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - const Text( - "Activate Business Account", - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 20, - ), - ), - const SizedBox( - width: 10, - ), - Switch( - value: businessUser, - onChanged: (bool value) { - setState(() { - businessUser = value; - }); - }, - ), - ], - ), - const SizedBox(height: 30.0), - Center( - child: MihButton( - onPressed: () { - //Add validation here - if (_formKey.currentState!.validate()) { - submitForm(); - } + hintText: "Username", + validator: (value) { + return MihValidationServices().validateUsername(value); }, - buttonColor: + ), + const SizedBox(height: 10.0), + MihTextFormField( + fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(), - width: 300, - child: Text( - "Update", - style: TextStyle( - color: - MzanziInnovationHub.of(context)!.theme.primaryColor(), - fontSize: 20, - fontWeight: FontWeight.bold, + inputColor: + MzanziInnovationHub.of(context)!.theme.primaryColor(), + controller: fnameController, + multiLineInput: false, + requiredText: true, + hintText: "First Name", + validator: (value) { + return MihValidationServices().isEmpty(value); + }, + ), + const SizedBox(height: 10.0), + MihTextFormField( + fillColor: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + inputColor: + MzanziInnovationHub.of(context)!.theme.primaryColor(), + controller: lnameController, + multiLineInput: false, + requiredText: true, + hintText: "Last Name", + validator: (value) { + return MihValidationServices().isEmpty(value); + }, + ), + const SizedBox(height: 10.0), + Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + const Text( + "Activate Business Account", + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 20, + ), + ), + const SizedBox( + width: 10, + ), + Switch( + value: businessUser, + onChanged: (bool value) { + setState(() { + businessUser = value; + }); + }, + ), + ], + ), + const SizedBox(height: 30.0), + Center( + child: MihButton( + onPressed: () { + //Add validation here + if (_formKey.currentState!.validate()) { + submitForm(); + } + }, + buttonColor: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + width: 300, + child: Text( + "Update", + style: TextStyle( + color: MzanziInnovationHub.of(context)! + .theme + .primaryColor(), + fontSize: 20, + fontWeight: FontWeight.bold, + ), ), ), ), - ), - ], - ), - ], + ], + ), + ], + ), ), ); }