zl-q
322 lines
13 KiB
Dart
322 lines
13 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:flutter_bloc/flutter_bloc.dart';
|
|
import 'package:formz/formz.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
|
|
import '../../../../app/di/injection.dart';
|
|
import '../../../../app/router/app_routes.dart';
|
|
import '../../../../core/l10n/l10n.dart';
|
|
import '../../../../core/theme/design_tokens.dart';
|
|
import '../../../../shared/widgets/app_button.dart';
|
|
import '../../../../shared/widgets/banner/app_banner.dart';
|
|
import '../../../../shared/widgets/confirm_sheet.dart';
|
|
import '../../../../shared/widgets/link_button.dart';
|
|
import '../../../../shared/widgets/phone_prefix_selector.dart';
|
|
import '../../../../shared/widgets/toast/toast_type.dart';
|
|
import '../../data/repositories/auth_repository.dart';
|
|
import '../../presentation/bloc/auth_bloc.dart';
|
|
import '../../presentation/bloc/auth_event.dart';
|
|
import '../../presentation/cubits/login_cubit.dart';
|
|
import '../widgets/auth_field.dart';
|
|
import '../widgets/auth_page_scaffold.dart';
|
|
|
|
class LoginScreen extends StatelessWidget {
|
|
const LoginScreen({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return BlocProvider(
|
|
create: (context) => LoginCubit(sl<AuthRepository>()),
|
|
child: const LoginView(),
|
|
);
|
|
}
|
|
}
|
|
|
|
class LoginView extends StatefulWidget {
|
|
const LoginView({super.key});
|
|
|
|
@override
|
|
State<LoginView> createState() => _LoginViewState();
|
|
}
|
|
|
|
class _LoginViewState extends State<LoginView> {
|
|
static const _dialCodes = <String>['+86', '+1', '+44', '+81', '+65'];
|
|
|
|
final _phoneController = TextEditingController();
|
|
final _codeController = TextEditingController();
|
|
bool _agreedToTerms = false;
|
|
|
|
@override
|
|
void dispose() {
|
|
_phoneController.dispose();
|
|
_codeController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
Future<void> _handleLogin() async {
|
|
if (!_agreedToTerms) {
|
|
final confirmed = await _showAgreementDialog();
|
|
if (!confirmed || !mounted) return;
|
|
setState(() => _agreedToTerms = true);
|
|
}
|
|
|
|
final cubit = context.read<LoginCubit>();
|
|
cubit.phoneChanged(_phoneController.text);
|
|
cubit.codeChanged(_codeController.text);
|
|
|
|
if (!cubit.state.isValid) {
|
|
return;
|
|
}
|
|
|
|
final response = await cubit.submit();
|
|
if (response != null && mounted) {
|
|
context.read<AuthBloc>().add(AuthLoggedIn(user: response.user));
|
|
context.go(AppRoutes.homeMain);
|
|
}
|
|
}
|
|
|
|
Future<void> _handleSendCode() async {
|
|
final cubit = context.read<LoginCubit>();
|
|
cubit.phoneChanged(_phoneController.text);
|
|
final sent = await cubit.sendCode();
|
|
if (!mounted || !sent) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
Future<bool> _showAgreementDialog() async {
|
|
final l10n = context.l10n;
|
|
return await showConfirmSheet(
|
|
context,
|
|
title: l10n.authAgreementTitle,
|
|
message: l10n.authAgreementMessage,
|
|
confirmText: l10n.commonConfirm,
|
|
cancelText: l10n.commonCancel,
|
|
);
|
|
}
|
|
|
|
Widget _buildAgreementCheckbox() {
|
|
final colorScheme = Theme.of(context).colorScheme;
|
|
|
|
return Center(
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
Semantics(
|
|
label: context.l10n.authAgreementSemantics,
|
|
checked: _agreedToTerms,
|
|
button: true,
|
|
child: InkWell(
|
|
borderRadius: BorderRadius.circular(AppRadius.sm),
|
|
onTap: () => setState(() => _agreedToTerms = !_agreedToTerms),
|
|
child: SizedBox(
|
|
width: 44,
|
|
height: 44,
|
|
child: Center(
|
|
child: Container(
|
|
width: 20,
|
|
height: 20,
|
|
margin: const EdgeInsets.only(right: AppSpacing.sm),
|
|
decoration: BoxDecoration(
|
|
color: _agreedToTerms
|
|
? colorScheme.primary
|
|
: colorScheme.surface.withValues(alpha: 0),
|
|
borderRadius: BorderRadius.circular(4),
|
|
border: Border.all(
|
|
color: _agreedToTerms
|
|
? colorScheme.primary
|
|
: colorScheme.onSurfaceVariant,
|
|
width: 1.5,
|
|
),
|
|
),
|
|
child: _agreedToTerms
|
|
? Icon(
|
|
Icons.check,
|
|
size: 14,
|
|
color: colorScheme.onPrimary,
|
|
)
|
|
: null,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
RichText(
|
|
text: TextSpan(
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
color: colorScheme.onSurfaceVariant,
|
|
),
|
|
children: [
|
|
TextSpan(text: context.l10n.authAgreementPrefix),
|
|
TextSpan(
|
|
text: context.l10n.authAgreementTerms,
|
|
style: TextStyle(
|
|
color: colorScheme.primary,
|
|
decoration: TextDecoration.underline,
|
|
),
|
|
),
|
|
TextSpan(text: context.l10n.authAgreementAnd),
|
|
TextSpan(
|
|
text: context.l10n.authAgreementPrivacy,
|
|
style: TextStyle(
|
|
color: colorScheme.primary,
|
|
decoration: TextDecoration.underline,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return AuthPageScaffold(
|
|
resizeOnKeyboard: false,
|
|
mainContentKey: const Key('login_main_content'),
|
|
mainContent: LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
final bottomInset = MediaQuery.of(context).viewInsets.bottom;
|
|
final minContentHeight = constraints.hasBoundedHeight
|
|
? constraints.maxHeight
|
|
: AppSpacing.none;
|
|
return SingleChildScrollView(
|
|
padding: EdgeInsets.fromLTRB(
|
|
AppSpacing.lg,
|
|
0,
|
|
AppSpacing.lg,
|
|
bottomInset + AppSpacing.lg,
|
|
),
|
|
child: ConstrainedBox(
|
|
constraints: BoxConstraints(minHeight: minContentHeight),
|
|
child: Center(
|
|
child: ConstrainedBox(
|
|
constraints: const BoxConstraints(maxWidth: 320),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
const AuthHeroHeader(showBrand: true),
|
|
SizedBox(height: AppSpacing.xxl),
|
|
BlocBuilder<LoginCubit, LoginState>(
|
|
builder: (context, state) {
|
|
final fieldError = state.phone.displayError != null
|
|
? state.phone.error
|
|
: state.code.displayError != null
|
|
? state.code.error
|
|
: null;
|
|
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
AuthSection(
|
|
child: Column(
|
|
crossAxisAlignment:
|
|
CrossAxisAlignment.stretch,
|
|
children: [
|
|
AuthField(
|
|
hint: context.l10n.authPhoneHint,
|
|
controller: _phoneController,
|
|
onChanged: (value) {
|
|
context.read<LoginCubit>().phoneChanged(
|
|
value,
|
|
);
|
|
},
|
|
keyboardType: TextInputType.phone,
|
|
prefix: PhonePrefixSelector(
|
|
value: state.dialCode,
|
|
items: _dialCodes,
|
|
onChanged: (value) {
|
|
context
|
|
.read<LoginCubit>()
|
|
.dialCodeChanged(value);
|
|
},
|
|
),
|
|
inputFormatters: [
|
|
FilteringTextInputFormatter.digitsOnly,
|
|
LengthLimitingTextInputFormatter(14),
|
|
],
|
|
),
|
|
SizedBox(height: AppSpacing.lg),
|
|
AuthField(
|
|
hint: context.l10n.authCodeHint,
|
|
controller: _codeController,
|
|
onChanged: (value) {
|
|
context.read<LoginCubit>().codeChanged(
|
|
value,
|
|
);
|
|
},
|
|
keyboardType: TextInputType.number,
|
|
inputFormatters: [
|
|
FilteringTextInputFormatter.digitsOnly,
|
|
LengthLimitingTextInputFormatter(6),
|
|
],
|
|
suffixIcon: Padding(
|
|
padding: const EdgeInsets.only(
|
|
right: AppSpacing.md,
|
|
),
|
|
child: LinkButton(
|
|
text: state.resendCooldownSeconds > 0
|
|
? '${state.resendCooldownSeconds}s'
|
|
: context.l10n.authSendCode,
|
|
onTap: state.canSendCode
|
|
? _handleSendCode
|
|
: null,
|
|
),
|
|
),
|
|
),
|
|
if (state.errorMessage != null ||
|
|
fieldError != null)
|
|
Padding(
|
|
padding: const EdgeInsets.only(
|
|
top: AppSpacing.md,
|
|
),
|
|
child: AppBanner(
|
|
message:
|
|
state.errorMessage ?? fieldError!,
|
|
type: state.errorMessage != null
|
|
? ToastType.error
|
|
: ToastType.warning,
|
|
title: state.errorMessage != null
|
|
? context.l10n.authLoginFailed
|
|
: context.l10n.authCheckInput,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
SizedBox(height: AppSpacing.xxl),
|
|
AppButton(
|
|
text: context.l10n.authLoginOrRegister,
|
|
onPressed:
|
|
state.status ==
|
|
FormzSubmissionStatus.inProgress
|
|
? null
|
|
: _handleLogin,
|
|
isLoading:
|
|
state.status ==
|
|
FormzSubmissionStatus.inProgress,
|
|
),
|
|
SizedBox(height: AppSpacing.xxl * 2),
|
|
_buildAgreementCheckbox(),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|