feat(login): refactor login option screen to include demo request button and improve layout

This commit is contained in:
Vaibhav Surve 2025-07-09 11:53:30 +05:30
parent aac65104ab
commit f4135a77d8
2 changed files with 61 additions and 45 deletions

View File

@ -8,7 +8,7 @@ import 'package:marco/helpers/widgets/my_button.dart';
import 'package:marco/helpers/widgets/my_spacing.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/helpers/widgets/my_text_style.dart';
import 'package:marco/view/auth/request_demo_bottom_sheet.dart';
import 'package:marco/helpers/services/api_endpoints.dart';
class EmailLoginForm extends StatefulWidget {
@ -136,22 +136,7 @@ class _EmailLoginFormState extends State<EmailLoginForm> with UIMixin {
),
),
),
MySpacing.height(16),
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.brandRed,
fontWeight: 600,
),
),
),
],
),
);

View File

@ -5,6 +5,7 @@ import 'package:marco/images.dart';
import 'package:marco/view/auth/email_login_form.dart';
import 'package:marco/view/auth/otp_login_form.dart';
import 'package:marco/helpers/services/api_endpoints.dart';
import 'package:marco/view/auth/request_demo_bottom_sheet.dart';
enum LoginOption { email, otp }
@ -26,21 +27,25 @@ class WelcomeScreen extends StatelessWidget {
builder: (_) => Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
insetPadding: const EdgeInsets.all(24),
child: Padding(
padding: const EdgeInsets.all(24),
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 420),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
MyText(
option == LoginOption.email ? "Login with Email" : "Login with OTP",
fontSize: 20,
fontWeight: 700,
),
const SizedBox(height: 20),
option == LoginOption.email ? EmailLoginForm() : const OTPLoginScreen(),
],
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(24),
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 420),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
MyText(
option == LoginOption.email ? "Login with Email" : "Login with OTP",
fontSize: 20,
fontWeight: 700,
),
const SizedBox(height: 20),
option == LoginOption.email
? EmailLoginForm()
: const OTPLoginScreen(),
],
),
),
),
),
@ -59,17 +64,21 @@ class WelcomeScreen extends StatelessWidget {
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: screenWidth < 500 ? double.infinity : 420),
constraints: BoxConstraints(
maxWidth: screenWidth < 500 ? double.infinity : 420,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// App Logo
// Logo
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: const [BoxShadow(color: Colors.black26, blurRadius: 8)],
boxShadow: const [
BoxShadow(color: Colors.black26, blurRadius: 8),
],
),
child: Image.asset(Images.logoDark, height: 60),
),
@ -112,22 +121,27 @@ class WelcomeScreen extends StatelessWidget {
const SizedBox(height: 36),
// Login Buttons
_buildLoginButton(
_buildActionButton(
context,
label: "Login with Username",
icon: LucideIcons.mail,
option: LoginOption.email,
),
const SizedBox(height: 16),
_buildLoginButton(
_buildActionButton(
context,
label: "Login with OTP",
icon: LucideIcons.message_square,
option: LoginOption.otp,
),
const SizedBox(height: 16),
_buildActionButton(
context,
label: "Request a Demo",
icon: LucideIcons.phone_call,
option: null,
),
const SizedBox(height: 36),
// Version Info
MyText(
'App version 1.0.0',
@ -143,24 +157,41 @@ class WelcomeScreen extends StatelessWidget {
);
}
Widget _buildLoginButton(BuildContext context,
{required String label, required IconData icon, required LoginOption option}) {
Widget _buildActionButton(
BuildContext context, {
required String label,
required IconData icon,
LoginOption? option, // nullable for "Request a Demo"
}) {
return SizedBox(
width: double.infinity,
child: ElevatedButton.icon(
icon: Icon(icon, size: 20, color: Colors.white),
label: Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: MyText(label, fontSize: 16, fontWeight: 600, color: Colors.white),
child: MyText(
label,
fontSize: 16,
fontWeight: 600,
color: Colors.white,
),
),
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFFB71C1C),
side: const BorderSide(color: Colors.white70),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
elevation: 4,
),
onPressed: () => _showLoginDialog(context, option),
onPressed: () {
if (option == null) {
OrganizationFormBottomSheet.show(context);
} else {
_showLoginDialog(context, option);
}
},
),
);
}
}
}