refactor: Improve LoginController and LoginScreen structure and readability
This commit is contained in:
parent
ad4b24dd78
commit
08991f2095
@ -6,51 +6,65 @@ import 'package:marco/helpers/widgets/my_form_validator.dart';
|
|||||||
import 'package:marco/helpers/widgets/my_validators.dart';
|
import 'package:marco/helpers/widgets/my_validators.dart';
|
||||||
|
|
||||||
class LoginController extends MyController {
|
class LoginController extends MyController {
|
||||||
MyFormValidator basicValidator = MyFormValidator();
|
// Form validator
|
||||||
|
final MyFormValidator basicValidator = MyFormValidator();
|
||||||
|
|
||||||
bool showPassword = false, isChecked = false;
|
// UI states
|
||||||
RxBool isLoading = false.obs; // Add reactive loading state
|
final RxBool isLoading = false.obs;
|
||||||
|
final RxBool showPassword = false.obs;
|
||||||
|
final RxBool isChecked = false.obs;
|
||||||
|
|
||||||
|
// Dummy credentials
|
||||||
final String _dummyEmail = "admin@marcoaiot.com";
|
final String _dummyEmail = "admin@marcoaiot.com";
|
||||||
final String _dummyPassword = "User@123";
|
final String _dummyPassword = "User@123";
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void onInit() {
|
void onInit() {
|
||||||
basicValidator.addField('username', required: true, label: "User_Name", validators: [MyEmailValidator()], controller: TextEditingController(text: _dummyEmail));
|
|
||||||
basicValidator.addField('password', required: true, label: "Password", validators: [MyLengthValidator(min: 6, max: 10)], controller: TextEditingController(text: _dummyPassword));
|
|
||||||
super.onInit();
|
super.onInit();
|
||||||
|
|
||||||
|
basicValidator.addField(
|
||||||
|
'username',
|
||||||
|
required: true,
|
||||||
|
label: "User_Name",
|
||||||
|
validators: [MyEmailValidator()],
|
||||||
|
controller: TextEditingController(text: _dummyEmail),
|
||||||
|
);
|
||||||
|
|
||||||
|
basicValidator.addField(
|
||||||
|
'password',
|
||||||
|
required: true,
|
||||||
|
label: "Password",
|
||||||
|
validators: [MyLengthValidator(min: 6, max: 10)],
|
||||||
|
controller: TextEditingController(text: _dummyPassword),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
void onChangeCheckBox(bool? value) {
|
void onChangeCheckBox(bool? value) {
|
||||||
isChecked = value ?? isChecked;
|
isChecked.value = value ?? isChecked.value;
|
||||||
update();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
void onChangeShowPassword() {
|
void onChangeShowPassword() {
|
||||||
showPassword = !showPassword;
|
showPassword.toggle();
|
||||||
update();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Future<void> onLogin() async {
|
Future<void> onLogin() async {
|
||||||
if (basicValidator.validateForm()) {
|
if (!basicValidator.validateForm()) return;
|
||||||
// Set loading to true
|
|
||||||
isLoading.value = true;
|
|
||||||
update();
|
|
||||||
|
|
||||||
var errors = await AuthService.loginUser(basicValidator.getData());
|
isLoading.value = true;
|
||||||
if (errors != null) {
|
|
||||||
basicValidator.addErrors(errors);
|
|
||||||
basicValidator.validateForm();
|
|
||||||
basicValidator.clearErrors();
|
|
||||||
} else {
|
|
||||||
String nextUrl = Uri.parse(ModalRoute.of(Get.context!)?.settings.name ?? "").queryParameters['next'] ?? "/home";
|
|
||||||
Get.toNamed(nextUrl);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set loading to false after the API call is complete
|
final errors = await AuthService.loginUser(basicValidator.getData());
|
||||||
isLoading.value = false;
|
|
||||||
update();
|
if (errors != null) {
|
||||||
|
basicValidator.addErrors(errors);
|
||||||
|
basicValidator.validateForm();
|
||||||
|
basicValidator.clearErrors();
|
||||||
|
} else {
|
||||||
|
final currentRoute = ModalRoute.of(Get.context!)?.settings.name ?? "";
|
||||||
|
final nextUrl = Uri.parse(currentRoute).queryParameters['next'] ?? "/home";
|
||||||
|
Get.toNamed(nextUrl);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
isLoading.value = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
void goToForgotPassword() {
|
void goToForgotPassword() {
|
||||||
|
|||||||
@ -20,11 +20,11 @@ class LoginScreen extends StatefulWidget {
|
|||||||
}
|
}
|
||||||
|
|
||||||
class _LoginScreenState extends State<LoginScreen> with UIMixin {
|
class _LoginScreenState extends State<LoginScreen> with UIMixin {
|
||||||
late LoginController controller;
|
late final LoginController controller;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void initState() {
|
void initState() {
|
||||||
controller = Get.put(LoginController());
|
controller = Get.put(LoginController(), tag: 'login_controller');
|
||||||
super.initState();
|
super.initState();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -32,204 +32,201 @@ class _LoginScreenState extends State<LoginScreen> with UIMixin {
|
|||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return AuthLayout(
|
return AuthLayout(
|
||||||
child: GetBuilder<LoginController>(
|
child: GetBuilder<LoginController>(
|
||||||
init: controller,
|
|
||||||
tag: 'login_controller',
|
tag: 'login_controller',
|
||||||
builder: (controller) {
|
builder: (_) {
|
||||||
return Obx(() {
|
return Obx(() {
|
||||||
return controller.isLoading.value
|
if (controller.isLoading.value) {
|
||||||
? Center(child: CircularProgressIndicator()) // Show loading spinner when isLoading is true
|
return const Center(child: CircularProgressIndicator());
|
||||||
: Form(
|
}
|
||||||
key: controller.basicValidator.formKey,
|
|
||||||
child: SingleChildScrollView(
|
|
||||||
padding: MySpacing.xy(2, 40),
|
|
||||||
child: Container(
|
|
||||||
width: double.infinity,
|
|
||||||
padding: MySpacing.all(24),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: theme.colorScheme.primary.withOpacity(0.02),
|
|
||||||
borderRadius: BorderRadius.circular(8),
|
|
||||||
border: Border.all(
|
|
||||||
color: contentTheme.primary.withOpacity(0.5),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
/// Logo
|
|
||||||
Center(
|
|
||||||
child: Image.asset(
|
|
||||||
Images.logoDark,
|
|
||||||
height: 120,
|
|
||||||
fit: BoxFit.contain,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
MySpacing.height(20),
|
|
||||||
|
|
||||||
/// Welcome Text
|
return Form(
|
||||||
Center(
|
key: controller.basicValidator.formKey,
|
||||||
child: MyText.bodyLarge("Welcome Back!", fontWeight: 600),
|
child: SingleChildScrollView(
|
||||||
),
|
padding: MySpacing.xy(2, 40),
|
||||||
MySpacing.height(4),
|
child: Container(
|
||||||
Center(
|
width: double.infinity,
|
||||||
child: MyText.bodySmall("Please sign in to continue."),
|
padding: MySpacing.all(24),
|
||||||
),
|
decoration: BoxDecoration(
|
||||||
MySpacing.height(20),
|
color: theme.colorScheme.primary.withOpacity(0.02),
|
||||||
|
borderRadius: BorderRadius.circular(8),
|
||||||
/// Email Field
|
border: Border.all(
|
||||||
MyText.bodySmall("Email Address", fontWeight: 600),
|
color: contentTheme.primary.withOpacity(0.5),
|
||||||
MySpacing.height(8),
|
),
|
||||||
Material(
|
),
|
||||||
elevation: 2,
|
child: Column(
|
||||||
shadowColor: contentTheme.secondary.withAlpha(30),
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
borderRadius: BorderRadius.circular(12),
|
children: [
|
||||||
child: TextFormField(
|
/// Logo
|
||||||
validator:
|
Center(
|
||||||
controller.basicValidator.getValidation('username'),
|
child: Image.asset(
|
||||||
controller:
|
Images.logoDark,
|
||||||
controller.basicValidator.getController('username'),
|
height: 120,
|
||||||
keyboardType: TextInputType.emailAddress,
|
fit: BoxFit.contain,
|
||||||
style: MyTextStyle.labelMedium(),
|
|
||||||
decoration: InputDecoration(
|
|
||||||
hintText: "Enter your email",
|
|
||||||
hintStyle: MyTextStyle.bodySmall(xMuted: true),
|
|
||||||
filled: true,
|
|
||||||
fillColor: theme.cardColor,
|
|
||||||
border: OutlineInputBorder(
|
|
||||||
borderRadius: BorderRadius.circular(2),
|
|
||||||
borderSide: BorderSide.none,
|
|
||||||
),
|
|
||||||
prefixIcon: const Icon(LucideIcons.mail, size: 18),
|
|
||||||
contentPadding: MySpacing.xy(12, 16),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
MySpacing.height(16),
|
|
||||||
|
|
||||||
/// Password Field Label
|
|
||||||
MyText.bodySmall("Password", fontWeight: 600),
|
|
||||||
MySpacing.height(8),
|
|
||||||
Material(
|
|
||||||
elevation: 2,
|
|
||||||
shadowColor: contentTheme.secondary.withAlpha(25),
|
|
||||||
borderRadius: BorderRadius.circular(12),
|
|
||||||
child: TextFormField(
|
|
||||||
validator:
|
|
||||||
controller.basicValidator.getValidation('password'),
|
|
||||||
controller:
|
|
||||||
controller.basicValidator.getController('password'),
|
|
||||||
keyboardType: TextInputType.visiblePassword,
|
|
||||||
obscureText: !controller.showPassword,
|
|
||||||
style: MyTextStyle.labelMedium(),
|
|
||||||
decoration: InputDecoration(
|
|
||||||
hintText: "Enter your password",
|
|
||||||
hintStyle: MyTextStyle.bodySmall(xMuted: true),
|
|
||||||
filled: true,
|
|
||||||
fillColor: theme.cardColor,
|
|
||||||
border: OutlineInputBorder(
|
|
||||||
borderRadius: BorderRadius.circular(2),
|
|
||||||
borderSide: BorderSide.none,
|
|
||||||
),
|
|
||||||
prefixIcon: const Icon(LucideIcons.lock, size: 18),
|
|
||||||
suffixIcon: InkWell(
|
|
||||||
onTap: controller.onChangeShowPassword,
|
|
||||||
child: Icon(
|
|
||||||
controller.showPassword
|
|
||||||
? LucideIcons.eye
|
|
||||||
: LucideIcons.eye_off,
|
|
||||||
size: 18,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
contentPadding: MySpacing.all(3),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
|
|
||||||
MySpacing.height(16),
|
|
||||||
|
|
||||||
/// Remember Me + Forgot Password
|
|
||||||
Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
||||||
children: [
|
|
||||||
InkWell(
|
|
||||||
onTap: () => controller
|
|
||||||
.onChangeCheckBox(!controller.isChecked),
|
|
||||||
child: Row(
|
|
||||||
children: [
|
|
||||||
Checkbox(
|
|
||||||
onChanged: controller.onChangeCheckBox,
|
|
||||||
value: controller.isChecked,
|
|
||||||
shape: RoundedRectangleBorder(
|
|
||||||
borderRadius: BorderRadius.circular(4),
|
|
||||||
),
|
|
||||||
fillColor: WidgetStatePropertyAll(
|
|
||||||
contentTheme.secondary),
|
|
||||||
checkColor: contentTheme.onPrimary,
|
|
||||||
visualDensity: getCompactDensity,
|
|
||||||
materialTapTargetSize:
|
|
||||||
MaterialTapTargetSize.shrinkWrap,
|
|
||||||
),
|
|
||||||
MySpacing.width(8),
|
|
||||||
MyText.bodySmall("Remember Me"),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
MyButton.text(
|
|
||||||
onPressed: controller.goToForgotPassword,
|
|
||||||
elevation: 0,
|
|
||||||
padding: MySpacing.xy(8, 0),
|
|
||||||
splashColor: contentTheme.secondary.withAlpha(36),
|
|
||||||
child: MyText.bodySmall(
|
|
||||||
'Forgot password?',
|
|
||||||
fontWeight: 600,
|
|
||||||
color: contentTheme.secondary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
MySpacing.height(28),
|
|
||||||
|
|
||||||
/// Login Button
|
|
||||||
Center(
|
|
||||||
child: MyButton.rounded(
|
|
||||||
onPressed: controller.onLogin,
|
|
||||||
elevation: 2,
|
|
||||||
padding: MySpacing.xy(24, 16),
|
|
||||||
borderRadiusAll: 16,
|
|
||||||
backgroundColor: Colors.blueAccent,
|
|
||||||
child: MyText.labelMedium(
|
|
||||||
'Login',
|
|
||||||
fontWeight: 600,
|
|
||||||
color: contentTheme.onPrimary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
MySpacing.height(16),
|
|
||||||
|
|
||||||
/// Register Link
|
|
||||||
Center(
|
|
||||||
child: MyButton.text(
|
|
||||||
onPressed: () {
|
|
||||||
OrganizationFormBottomSheet.show(context);
|
|
||||||
},
|
|
||||||
elevation: 0,
|
|
||||||
padding: MySpacing.xy(12, 8),
|
|
||||||
splashColor:
|
|
||||||
contentTheme.secondary.withAlpha(30),
|
|
||||||
child: MyText.bodySmall(
|
|
||||||
"Request a Demo",
|
|
||||||
color: contentTheme.secondary,
|
|
||||||
fontWeight: 600,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
MySpacing.height(20),
|
||||||
);
|
|
||||||
|
/// Welcome
|
||||||
|
Center(child: MyText.bodyLarge("Welcome Back!", fontWeight: 600)),
|
||||||
|
MySpacing.height(4),
|
||||||
|
Center(child: MyText.bodySmall("Please sign in to continue.")),
|
||||||
|
MySpacing.height(20),
|
||||||
|
|
||||||
|
/// Email
|
||||||
|
MyText.bodySmall("Email Address", fontWeight: 600),
|
||||||
|
MySpacing.height(8),
|
||||||
|
_buildInputField(
|
||||||
|
controller.basicValidator.getController('username')!,
|
||||||
|
controller.basicValidator.getValidation('username'),
|
||||||
|
hintText: "Enter your email",
|
||||||
|
icon: LucideIcons.mail,
|
||||||
|
keyboardType: TextInputType.emailAddress,
|
||||||
|
),
|
||||||
|
MySpacing.height(16),
|
||||||
|
|
||||||
|
/// Password
|
||||||
|
MyText.bodySmall("Password", fontWeight: 600),
|
||||||
|
MySpacing.height(8),
|
||||||
|
Obx(() {
|
||||||
|
return _buildInputField(
|
||||||
|
controller.basicValidator.getController('password')!,
|
||||||
|
controller.basicValidator.getValidation('password'),
|
||||||
|
hintText: "Enter your password",
|
||||||
|
icon: LucideIcons.lock,
|
||||||
|
obscureText: !controller.showPassword.value,
|
||||||
|
suffix: IconButton(
|
||||||
|
icon: Icon(
|
||||||
|
controller.showPassword.value
|
||||||
|
? LucideIcons.eye
|
||||||
|
: LucideIcons.eye_off,
|
||||||
|
size: 18,
|
||||||
|
),
|
||||||
|
onPressed: controller.onChangeShowPassword,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
MySpacing.height(16),
|
||||||
|
|
||||||
|
/// Remember me + Forgot password
|
||||||
|
Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: [
|
||||||
|
Obx(() {
|
||||||
|
return InkWell(
|
||||||
|
onTap: () =>
|
||||||
|
controller.onChangeCheckBox(!controller.isChecked.value),
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
Checkbox(
|
||||||
|
value: controller.isChecked.value,
|
||||||
|
onChanged: controller.onChangeCheckBox,
|
||||||
|
shape: RoundedRectangleBorder(
|
||||||
|
borderRadius: BorderRadius.circular(4),
|
||||||
|
),
|
||||||
|
fillColor: WidgetStatePropertyAll(contentTheme.secondary),
|
||||||
|
checkColor: contentTheme.onPrimary,
|
||||||
|
visualDensity: getCompactDensity,
|
||||||
|
materialTapTargetSize:
|
||||||
|
MaterialTapTargetSize.shrinkWrap,
|
||||||
|
),
|
||||||
|
MySpacing.width(8),
|
||||||
|
MyText.bodySmall("Remember Me"),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
MyButton.text(
|
||||||
|
onPressed: controller.goToForgotPassword,
|
||||||
|
elevation: 0,
|
||||||
|
padding: MySpacing.xy(8, 0),
|
||||||
|
splashColor: contentTheme.secondary.withAlpha(36),
|
||||||
|
child: MyText.bodySmall(
|
||||||
|
'Forgot password?',
|
||||||
|
fontWeight: 600,
|
||||||
|
color: contentTheme.secondary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
MySpacing.height(28),
|
||||||
|
|
||||||
|
/// Login button
|
||||||
|
Center(
|
||||||
|
child: MyButton.rounded(
|
||||||
|
onPressed: controller.onLogin,
|
||||||
|
elevation: 2,
|
||||||
|
padding: MySpacing.xy(24, 16),
|
||||||
|
borderRadiusAll: 16,
|
||||||
|
backgroundColor: Colors.blueAccent,
|
||||||
|
child: MyText.labelMedium(
|
||||||
|
'Login',
|
||||||
|
fontWeight: 600,
|
||||||
|
color: contentTheme.onPrimary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
MySpacing.height(16),
|
||||||
|
|
||||||
|
/// Request demo
|
||||||
|
Center(
|
||||||
|
child: MyButton.text(
|
||||||
|
onPressed: () {
|
||||||
|
OrganizationFormBottomSheet.show(context);
|
||||||
|
},
|
||||||
|
elevation: 0,
|
||||||
|
padding: MySpacing.xy(12, 8),
|
||||||
|
splashColor: contentTheme.secondary.withAlpha(30),
|
||||||
|
child: MyText.bodySmall(
|
||||||
|
"Request a Demo",
|
||||||
|
color: contentTheme.secondary,
|
||||||
|
fontWeight: 600,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Widget _buildInputField(
|
||||||
|
TextEditingController controller,
|
||||||
|
FormFieldValidator<String>? validator, {
|
||||||
|
required String hintText,
|
||||||
|
required IconData icon,
|
||||||
|
TextInputType keyboardType = TextInputType.text,
|
||||||
|
bool obscureText = false,
|
||||||
|
Widget? suffix,
|
||||||
|
}) {
|
||||||
|
return Material(
|
||||||
|
elevation: 2,
|
||||||
|
shadowColor: contentTheme.secondary.withAlpha(30),
|
||||||
|
borderRadius: BorderRadius.circular(12),
|
||||||
|
child: TextFormField(
|
||||||
|
controller: controller,
|
||||||
|
validator: validator,
|
||||||
|
obscureText: obscureText,
|
||||||
|
keyboardType: keyboardType,
|
||||||
|
style: MyTextStyle.labelMedium(),
|
||||||
|
decoration: InputDecoration(
|
||||||
|
hintText: hintText,
|
||||||
|
hintStyle: MyTextStyle.bodySmall(xMuted: true),
|
||||||
|
filled: true,
|
||||||
|
fillColor: theme.cardColor,
|
||||||
|
border: OutlineInputBorder(
|
||||||
|
borderRadius: BorderRadius.circular(2),
|
||||||
|
borderSide: BorderSide.none,
|
||||||
|
),
|
||||||
|
prefixIcon: Icon(icon, size: 18),
|
||||||
|
suffixIcon: suffix,
|
||||||
|
contentPadding: MySpacing.xy(12, 16),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user