Merge pull request #34 from flutter-news-app-full-source-code/enhance_auth_feature

Enhance auth feature

Author: fulleni

lib/authentication/bloc/authentication_bloc.dart

@@ -20,6 +20,8 @@ import 'package:equatable/equatable.dart';
 part 'authentication_event.dart';
 part 'authentication_state.dart';
 
+const _requestCodeCooldownDuration = Duration(seconds: 60);
+
 /// {@template authentication_bloc}
 /// Bloc responsible for managing the authentication state of the application.
 /// {@endtemplate}
@@ -40,6 +42,7 @@ class AuthenticationBloc
     );
     on<AuthenticationVerifyCodeRequested>(_onAuthenticationVerifyCodeRequested);
     on<AuthenticationSignOutRequested>(_onAuthenticationSignOutRequested);
+    on<AuthenticationCooldownCompleted>(_onAuthenticationCooldownCompleted);
   }
 
   final AuthRepository _authenticationRepository;
@@ -72,18 +75,32 @@ class AuthenticationBloc
     AuthenticationRequestSignInCodeRequested event,
     Emitter<AuthenticationState> emit,
   ) async {
+    // Prevent request if already in cooldown
+    if (state.cooldownEndTime != null &&
+        state.cooldownEndTime!.isAfter(DateTime.now())) {
+      return;
+    }
+
     emit(state.copyWith(status: AuthenticationStatus.requestCodeLoading));
     try {
       await _authenticationRepository.requestSignInCode(
         event.email,
         isDashboardLogin: true,
       );
+      final cooldownEndTime = DateTime.now().add(_requestCodeCooldownDuration);
       emit(
         state.copyWith(
           status: AuthenticationStatus.codeSentSuccess,
           email: event.email,
+          cooldownEndTime: cooldownEndTime,
         ),
       );
+
+      // Start a timer to transition out of cooldown
+      Timer(
+        _requestCodeCooldownDuration,
+        () => add(const AuthenticationCooldownCompleted()),
+      );
     } on InvalidInputException catch (e) {
       emit(state.copyWith(status: AuthenticationStatus.failure, exception: e));
     } on UnauthorizedException catch (e) {
@@ -181,6 +198,18 @@ class AuthenticationBloc
     }
   }
 
+  void _onAuthenticationCooldownCompleted(
+    AuthenticationCooldownCompleted event,
+    Emitter<AuthenticationState> emit,
+  ) {
+    emit(
+      state.copyWith(
+        status: AuthenticationStatus.initial,
+        clearCooldownEndTime: true,
+      ),
+    );
+  }
+
   @override
   Future<void> close() {
     _userAuthSubscription.cancel();

lib/authentication/bloc/authentication_event.dart

@@ -68,3 +68,11 @@ final class _AuthenticationStatusChanged extends AuthenticationEvent {
   @override
   List<Object?> get props => [user];
 }
+
+/// {@template authentication_cooldown_completed}
+/// Event triggered when the sign-in code request cooldown has completed.
+/// {@endtemplate}
+final class AuthenticationCooldownCompleted extends AuthenticationEvent {
+  /// {@macro authentication_cooldown_completed}
+  const AuthenticationCooldownCompleted();
+}

lib/authentication/bloc/authentication_state.dart

@@ -36,6 +36,7 @@ final class AuthenticationState extends Equatable {
     this.user,
     this.email,
     this.exception,
+    this.cooldownEndTime,
   });
 
   /// The current status of the authentication process.
@@ -50,8 +51,11 @@ final class AuthenticationState extends Equatable {
   /// The error describing an authentication failure, if any.
   final HttpException? exception;
 
+  /// The time when the cooldown for requesting a new code ends.
+  final DateTime? cooldownEndTime;
+
   @override
-  List<Object?> get props => [status, user, email, exception];
+  List<Object?> get props => [status, user, email, exception, cooldownEndTime];
 
   /// Creates a copy of this [AuthenticationState] with the given fields
   /// replaced with the new values.
@@ -60,12 +64,16 @@ final class AuthenticationState extends Equatable {
     User? user,
     String? email,
     HttpException? exception,
+    DateTime? cooldownEndTime,
+    bool clearCooldownEndTime = false,
   }) {
     return AuthenticationState(
       status: status ?? this.status,
       user: user ?? this.user,
       email: email ?? this.email,
       exception: exception ?? this.exception,
+      cooldownEndTime:
+          clearCooldownEndTime ? null : cooldownEndTime ?? this.cooldownEndTime,
     );
   }
 }

lib/authentication/view/email_code_verification_page.dart

@@ -1,10 +1,10 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_news_app_web_dashboard_full_source_code/app/bloc/app_bloc.dart';
 import 'package:flutter_news_app_web_dashboard_full_source_code/app/config/config.dart';
 import 'package:flutter_news_app_web_dashboard_full_source_code/authentication/bloc/authentication_bloc.dart';
 import 'package:flutter_news_app_web_dashboard_full_source_code/l10n/l10n.dart';
+import 'package:pinput/pinput.dart';
 import 'package:ui_kit/ui_kit.dart';
 
 /// {@template email_code_verification_page}
@@ -131,10 +131,12 @@ class _EmailCodeVerificationFormState
     extends State<_EmailCodeVerificationForm> {
   final _formKey = GlobalKey<FormState>();
   final _codeController = TextEditingController();
+  final _focusNode = FocusNode();
 
   @override
   void dispose() {
     _codeController.dispose();
+    _focusNode.dispose();
     super.dispose();
   }
 
@@ -153,39 +155,48 @@ class _EmailCodeVerificationFormState
   Widget build(BuildContext context) {
     final l10n = AppLocalizationsX(context).l10n;
     final textTheme = Theme.of(context).textTheme;
+    final colorScheme = Theme.of(context).colorScheme;
+
+    final defaultPinTheme = PinTheme(
+      width: 56,
+      height: 60,
+      textStyle: textTheme.headlineSmall,
+      decoration: BoxDecoration(
+        color: colorScheme.surface,
+        borderRadius: BorderRadius.circular(8),
+        border: Border.all(color: colorScheme.onSurface.withOpacity(0.12)),
+      ),
+    );
 
     return Form(
       key: _formKey,
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
-          Padding(
-            // No horizontal padding needed if column is stretched
-            // padding: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
-            padding: EdgeInsets.zero,
-            child: TextFormField(
-              controller: _codeController,
-              decoration: InputDecoration(
-                labelText: l10n.emailCodeVerificationHint,
-                // border: const OutlineInputBorder(),
-                counterText: '',
+          Pinput(
+            length: 6,
+            controller: _codeController,
+            focusNode: _focusNode,
+            defaultPinTheme: defaultPinTheme,
+            onCompleted: (pin) => _submitForm(),
+            validator: (value) {
+              if (value == null || value.isEmpty) {
+                return l10n.emailCodeValidationEmptyError;
+              }
+              if (value.length != 6) {
+                return l10n.emailCodeValidationLengthError;
+              }
+              return null;
+            },
+            focusedPinTheme: defaultPinTheme.copyWith(
+              decoration: defaultPinTheme.decoration!.copyWith(
+                border: Border.all(color: colorScheme.primary),
+              ),
+            ),
+            errorPinTheme: defaultPinTheme.copyWith(
+              decoration: defaultPinTheme.decoration!.copyWith(
+                border: Border.all(color: colorScheme.error),
               ),
-              keyboardType: TextInputType.number,
-              inputFormatters: [FilteringTextInputFormatter.digitsOnly],
-              maxLength: 6,
-              textAlign: TextAlign.center,
-              style: textTheme.headlineSmall,
-              enabled: !widget.isLoading,
-              validator: (value) {
-                if (value == null || value.isEmpty) {
-                  return l10n.emailCodeValidationEmptyError;
-                }
-                if (value.length != 6) {
-                  return l10n.emailCodeValidationLengthError;
-                }
-                return null;
-              },
-              onFieldSubmitted: widget.isLoading ? null : (_) => _submitForm(),
             ),
           ),
           const SizedBox(height: AppSpacing.xxl),