second commit
This commit is contained in:
549
lib/presentation/auth/screens/login_screen.dart
Normal file
549
lib/presentation/auth/screens/login_screen.dart
Normal file
@@ -0,0 +1,549 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:flutter_animate/flutter_animate.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
import '../../../app/providers.dart';
|
||||
import '../../../core/router/app_router.dart';
|
||||
import '../../../core/theme/app_colors.dart';
|
||||
import '../../../core/theme/app_dimens.dart';
|
||||
import '../../../core/utils/validators.dart';
|
||||
import '../../../core/widgets/primary_button.dart';
|
||||
import '../providers/auth_controller.dart';
|
||||
|
||||
/// Store sign-in. The terminal shows this until a valid account is entered.
|
||||
class LoginScreen extends ConsumerStatefulWidget {
|
||||
const LoginScreen({super.key});
|
||||
|
||||
@override
|
||||
ConsumerState<LoginScreen> createState() => _LoginScreenState();
|
||||
}
|
||||
|
||||
class _LoginScreenState extends ConsumerState<LoginScreen> {
|
||||
final _formKey = GlobalKey<FormState>();
|
||||
final _email = TextEditingController(text: DemoCredentials.email);
|
||||
final _password = TextEditingController(text: DemoCredentials.password);
|
||||
|
||||
bool _obscure = true;
|
||||
bool _rememberTerminal = true;
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_email.dispose();
|
||||
_password.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
Future<void> _submit() async {
|
||||
FocusScope.of(context).unfocus();
|
||||
if (!(_formKey.currentState?.validate() ?? false)) return;
|
||||
|
||||
final ok = await ref.read(authControllerProvider.notifier).signIn(
|
||||
email: _email.text,
|
||||
password: _password.text,
|
||||
);
|
||||
|
||||
if (ok && mounted) context.go(AppRoutes.welcome);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: AppColors.background,
|
||||
body: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
// Below this there isn't room for the brand panel beside the form.
|
||||
final showBrandPanel = constraints.maxWidth >= 1000;
|
||||
|
||||
return Row(
|
||||
children: [
|
||||
if (showBrandPanel)
|
||||
const Expanded(flex: 5, child: _BrandPanel()),
|
||||
Expanded(
|
||||
flex: 4,
|
||||
child: _FormPanel(
|
||||
formKey: _formKey,
|
||||
email: _email,
|
||||
password: _password,
|
||||
obscure: _obscure,
|
||||
rememberTerminal: _rememberTerminal,
|
||||
showCompactLogo: !showBrandPanel,
|
||||
onToggleObscure: () => setState(() => _obscure = !_obscure),
|
||||
onToggleRemember: (v) =>
|
||||
setState(() => _rememberTerminal = v ?? true),
|
||||
onSubmit: _submit,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _BrandPanel extends StatelessWidget {
|
||||
const _BrandPanel();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: const BoxDecoration(gradient: AppColors.primaryGradient),
|
||||
child: SafeArea(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(AppSpacing.giant),
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 42,
|
||||
height: 42,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(11),
|
||||
),
|
||||
alignment: Alignment.center,
|
||||
child: const Text(
|
||||
'N',
|
||||
style: TextStyle(
|
||||
color: AppColors.primary,
|
||||
fontSize: 23,
|
||||
fontWeight: FontWeight.w800,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: AppSpacing.md),
|
||||
const Flexible(
|
||||
child: Text(
|
||||
'Nearle POS',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: -0.4,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: AppSpacing.giant),
|
||||
const Text(
|
||||
'Billing that keeps up\nwith your counter.',
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 34,
|
||||
height: 1.25,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: -1,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.lg),
|
||||
Text(
|
||||
'Scanner-first billing, GST-ready invoices and loyalty '
|
||||
'built in — for supermarkets, pharmacies and retail.',
|
||||
style: TextStyle(
|
||||
color: Colors.white.withValues(alpha: 0.78),
|
||||
fontSize: 15,
|
||||
height: 1.6,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.giant),
|
||||
const _Feature(
|
||||
icon: Icons.qr_code_scanner_rounded,
|
||||
title: 'Scan and go',
|
||||
body: 'No dialogs between items. Barcode to bill instantly.',
|
||||
),
|
||||
const _Feature(
|
||||
icon: Icons.receipt_long_rounded,
|
||||
title: 'GST compliant',
|
||||
body: 'Per-slab tax split into CGST and SGST on every bill.',
|
||||
),
|
||||
const _Feature(
|
||||
icon: Icons.stars_rounded,
|
||||
title: 'Loyalty that runs itself',
|
||||
body: 'Tiers and points applied without cashier input.',
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
).animate().fadeIn(duration: 300.ms);
|
||||
}
|
||||
}
|
||||
|
||||
class _Feature extends StatelessWidget {
|
||||
const _Feature({
|
||||
required this.icon,
|
||||
required this.title,
|
||||
required this.body,
|
||||
});
|
||||
|
||||
final IconData icon;
|
||||
final String title;
|
||||
final String body;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: AppSpacing.xl),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Container(
|
||||
width: 38,
|
||||
height: 38,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.16),
|
||||
borderRadius: AppRadius.brSm,
|
||||
),
|
||||
child: Icon(icon, color: Colors.white, size: 19),
|
||||
),
|
||||
const SizedBox(width: AppSpacing.lg),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
title,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
body,
|
||||
style: TextStyle(
|
||||
color: Colors.white.withValues(alpha: 0.72),
|
||||
fontSize: 13,
|
||||
height: 1.5,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _FormPanel extends ConsumerWidget {
|
||||
const _FormPanel({
|
||||
required this.formKey,
|
||||
required this.email,
|
||||
required this.password,
|
||||
required this.obscure,
|
||||
required this.rememberTerminal,
|
||||
required this.showCompactLogo,
|
||||
required this.onToggleObscure,
|
||||
required this.onToggleRemember,
|
||||
required this.onSubmit,
|
||||
});
|
||||
|
||||
final GlobalKey<FormState> formKey;
|
||||
final TextEditingController email;
|
||||
final TextEditingController password;
|
||||
final bool obscure;
|
||||
final bool rememberTerminal;
|
||||
final bool showCompactLogo;
|
||||
final VoidCallback onToggleObscure;
|
||||
final ValueChanged<bool?> onToggleRemember;
|
||||
final VoidCallback onSubmit;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final auth = ref.watch(authControllerProvider);
|
||||
final session = ref.watch(cashierSessionProvider);
|
||||
final busy = auth is Authenticating;
|
||||
|
||||
return SafeArea(
|
||||
child: Center(
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(AppSpacing.xxl),
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 420),
|
||||
child: Form(
|
||||
key: formKey,
|
||||
autovalidateMode: AutovalidateMode.onUserInteraction,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (showCompactLogo) ...[
|
||||
Center(
|
||||
child: Container(
|
||||
width: 52,
|
||||
height: 52,
|
||||
decoration: BoxDecoration(
|
||||
gradient: AppColors.primaryGradient,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
),
|
||||
alignment: Alignment.center,
|
||||
child: const Text(
|
||||
'N',
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 26,
|
||||
fontWeight: FontWeight.w800,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.xxl),
|
||||
],
|
||||
|
||||
Text(
|
||||
'Sign in to your store',
|
||||
style: Theme.of(context).textTheme.headlineSmall,
|
||||
),
|
||||
const SizedBox(height: AppSpacing.xs),
|
||||
const Text(
|
||||
'Use the credentials issued when your outlet was '
|
||||
'registered.',
|
||||
style: TextStyle(
|
||||
fontSize: 13.5,
|
||||
color: AppColors.textSecondary,
|
||||
height: 1.5,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.xxxl),
|
||||
|
||||
const _Label('Store email'),
|
||||
TextFormField(
|
||||
controller: email,
|
||||
keyboardType: TextInputType.emailAddress,
|
||||
textInputAction: TextInputAction.next,
|
||||
enabled: !busy,
|
||||
validator: (v) => (v ?? '').trim().isEmpty
|
||||
? 'Store email is required'
|
||||
: Validators.emailOptional(v),
|
||||
decoration: const InputDecoration(
|
||||
hintText: 'store@example.in',
|
||||
prefixIcon: Icon(Icons.storefront_outlined),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.lg),
|
||||
|
||||
const _Label('Password'),
|
||||
TextFormField(
|
||||
controller: password,
|
||||
obscureText: obscure,
|
||||
enabled: !busy,
|
||||
textInputAction: TextInputAction.done,
|
||||
onFieldSubmitted: (_) => onSubmit(),
|
||||
validator: (v) => (v ?? '').isEmpty
|
||||
? 'Password is required'
|
||||
: ((v ?? '').length < 6
|
||||
? 'Password looks too short'
|
||||
: null),
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Enter your password',
|
||||
prefixIcon: const Icon(Icons.lock_outline_rounded),
|
||||
suffixIcon: IconButton(
|
||||
onPressed: onToggleObscure,
|
||||
icon: Icon(
|
||||
obscure
|
||||
? Icons.visibility_outlined
|
||||
: Icons.visibility_off_outlined,
|
||||
size: 20,
|
||||
),
|
||||
tooltip: obscure ? 'Show password' : 'Hide password',
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
|
||||
// Wrap, not Row — on a narrow tablet these would collide.
|
||||
Wrap(
|
||||
alignment: WrapAlignment.spaceBetween,
|
||||
crossAxisAlignment: WrapCrossAlignment.center,
|
||||
children: [
|
||||
InkWell(
|
||||
onTap: busy
|
||||
? null
|
||||
: () => onToggleRemember(!rememberTerminal),
|
||||
borderRadius: AppRadius.brXs,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 22,
|
||||
height: 22,
|
||||
child: Checkbox(
|
||||
value: rememberTerminal,
|
||||
onChanged: busy ? null : onToggleRemember,
|
||||
visualDensity: VisualDensity.compact,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: AppSpacing.sm),
|
||||
const Text(
|
||||
'Remember this terminal',
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: busy ? null : () {},
|
||||
child: const Text('Forgot password?'),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
if (auth is AuthFailure) ...[
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
Container(
|
||||
padding: const EdgeInsets.all(AppSpacing.md),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.dangerSurface,
|
||||
borderRadius: AppRadius.brSm,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
const Icon(Icons.error_outline_rounded,
|
||||
color: AppColors.danger, size: 18),
|
||||
const SizedBox(width: AppSpacing.sm),
|
||||
Expanded(
|
||||
child: Text(
|
||||
auth.message,
|
||||
style: const TextStyle(
|
||||
color: AppColors.danger,
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
).animate().shake(duration: 320.ms, hz: 3),
|
||||
],
|
||||
|
||||
const SizedBox(height: AppSpacing.xl),
|
||||
PrimaryButton(
|
||||
label: 'Sign in',
|
||||
icon: Icons.login_rounded,
|
||||
large: true,
|
||||
busy: busy,
|
||||
onPressed: onSubmit,
|
||||
),
|
||||
|
||||
const SizedBox(height: AppSpacing.xl),
|
||||
_DemoHint(
|
||||
onFill: busy
|
||||
? null
|
||||
: () {
|
||||
email.text = DemoCredentials.email;
|
||||
password.text = DemoCredentials.password;
|
||||
},
|
||||
),
|
||||
|
||||
const SizedBox(height: AppSpacing.xxl),
|
||||
Center(
|
||||
child: Text(
|
||||
'Terminal ${session.terminalId}',
|
||||
style: const TextStyle(
|
||||
fontSize: 11.5,
|
||||
color: AppColors.textTertiary,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _Label extends StatelessWidget {
|
||||
const _Label(this.text);
|
||||
|
||||
final String text;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: AppSpacing.sm),
|
||||
child: Text(
|
||||
text,
|
||||
style: const TextStyle(
|
||||
fontSize: 12.5,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _DemoHint extends StatelessWidget {
|
||||
const _DemoHint({this.onFill});
|
||||
|
||||
final VoidCallback? onFill;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(AppSpacing.md),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.primarySurface,
|
||||
borderRadius: AppRadius.brSm,
|
||||
border: Border.all(color: AppColors.primaryBorder),
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Icon(Icons.info_outline_rounded,
|
||||
size: 17, color: AppColors.primary),
|
||||
const SizedBox(width: AppSpacing.sm),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Text(
|
||||
'Demo account',
|
||||
style: TextStyle(
|
||||
fontSize: 12.5,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.primary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
SelectableText(
|
||||
'${DemoCredentials.email} · ${DemoCredentials.password}',
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: onFill,
|
||||
style: TextButton.styleFrom(
|
||||
minimumSize: const Size(0, 32),
|
||||
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.sm),
|
||||
),
|
||||
child: const Text('Fill', style: TextStyle(fontSize: 12.5)),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user