[#8] [UI] As a user, if I fail to log in, I see an error popup

lib/l10n/app_en.arb

@@ -1,7 +1,12 @@
 {
+    "okText": "OK",
     "emailInputHint": "Email",
     "passwordInputHint": "Password",
     "loginButton": "Log in",
     "invalidEmailError": "Please enter the valid email format.",
-    "invalidPasswordError": "Password must be at least 8 characters long."
+    "invalidPasswordError": "Password must be at least 8 characters long.",
+    "unauthorizedError": "Your email or password is incorrect.\nPlease try again.",
+    "noInternetConnectionError": "You seem to be offline.\nPlease try again!",
+    "genericError": "Something went wrong.\nPlease try again!",
+    "loginFailAlertTitle": "Unable to log in"
 }

lib/screens/login/login_form.dart

@@ -12,21 +12,25 @@ class LoginForm extends ConsumerStatefulWidget {
   const LoginForm({Key? key}) : super(key: key);
 
   @override
-  ConsumerState<ConsumerStatefulWidget> createState() => _LoginFormState();
+  ConsumerState<LoginForm> createState() => _LoginFormState();
 }
 
 class _LoginFormState extends ConsumerState<LoginForm> {
   final _formKey = GlobalKey<FormState>();
+  final _emailController = TextEditingController();
+  final _passwordController = TextEditingController();
+
   bool _isFormSubmitted = false;
 
   TextFormField get _emailTextField => TextFormField(
         keyboardType: TextInputType.emailAddress,
         autocorrect: false,
         decoration: PrimaryTextFieldDecoration(
-          hintText: context.localizations?.emailInputHint,
+          hintText: context.localizations.emailInputHint,
           hintTextStyle: context.textTheme.bodyMedium,
         ),
         style: context.textTheme.bodyMedium,
+        controller: _emailController,
         validator: _validateEmail,
         autovalidateMode: _isFormSubmitted
             ? AutovalidateMode.onUserInteraction
@@ -37,10 +41,11 @@ class _LoginFormState extends ConsumerState<LoginForm> {
         autocorrect: false,
         obscureText: true,
         decoration: PrimaryTextFieldDecoration(
-          hintText: context.localizations?.passwordInputHint,
+          hintText: context.localizations.passwordInputHint,
           hintTextStyle: context.textTheme.bodyMedium,
         ),
         style: context.textTheme.bodyMedium,
+        controller: _passwordController,
         validator: _validatePassword,
         autovalidateMode: _isFormSubmitted
             ? AutovalidateMode.onUserInteraction
@@ -50,29 +55,36 @@ class _LoginFormState extends ConsumerState<LoginForm> {
   ElevatedButton get _loginButton => ElevatedButton(
         style: PrimaryButtonStyle(hintTextStyle: context.textTheme.labelMedium),
         onPressed: _submit,
-        child: Text(context.localizations?.loginButton ?? ''),
+        child: Text(context.localizations.loginButton),
       );
 
   String? _validateEmail(String? email) {
     if (!ref.read(loginViewModelProvider.notifier).isValidEmail(email)) {
-      return context.localizations?.invalidEmailError;
+      return context.localizations.invalidEmailError;
     }
     return null;
   }
 
   String? _validatePassword(String? password) {
     if (!ref.read(loginViewModelProvider.notifier).isValidPassword(password)) {
-      return context.localizations?.invalidPasswordError;
+      return context.localizations.invalidPasswordError;
     }
     return null;
   }
 
   void _submit() {
     setState(() => _isFormSubmitted = true);
-    if (_formKey.currentState?.validate() == true) {
-      context.dismissKeyboard();
-      // TODO: Integrate with API
+    bool isFormValidated = _formKey.currentState?.validate() ?? false;
+
+    if (!isFormValidated) {
+      return;
     }
+
+    context.dismissKeyboard();
+    ref.read(loginViewModelProvider.notifier).login(
+          email: _emailController.text,
+          password: _passwordController.text,
+        );
   }
 
   @override

lib/screens/login/login_screen.dart

@@ -1,21 +1,25 @@
 import 'dart:ui';
 
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:survey_flutter/gen/assets.gen.dart';
 import 'package:survey_flutter/screens/login/login_form.dart';
+import 'package:survey_flutter/screens/login/login_view_model.dart';
 import 'package:survey_flutter/theme/app_constants.dart';
+import 'package:survey_flutter/uimodels/app_error.dart';
 import 'package:survey_flutter/utils/build_context_ext.dart';
+import 'package:survey_flutter/widgets/alert_dialog.dart';
 
 const routePathLoginScreen = '/login';
 
-class LoginScreen extends StatefulWidget {
+class LoginScreen extends ConsumerStatefulWidget {
   const LoginScreen({Key? key}) : super(key: key);
 
   @override
-  State<StatefulWidget> createState() => _LoginScreenState();
+  ConsumerState<LoginScreen> createState() => _LoginScreenState();
 }
 
-class _LoginScreenState extends State<LoginScreen>
+class _LoginScreenState extends ConsumerState<LoginScreen>
     with TickerProviderStateMixin {
   final _animationDuration = const Duration(milliseconds: 600);
 
@@ -110,6 +114,31 @@ class _LoginScreenState extends State<LoginScreen>
 
   @override
   Widget build(BuildContext context) {
+    ref.listen<AsyncValue<void>>(loginViewModelProvider, (_, next) {
+      next.maybeWhen(
+        data: (_) {
+          // TODO: Navigate to the Home screen
+        },
+        error: (error, _) {
+          showAlertDialog(
+            context: context,
+            title: context.localizations.loginFailAlertTitle,
+            message: (error as AppError?)?.description(context) ?? '',
+            actions: [
+              TextButton(
+                style: ButtonStyle(
+                  foregroundColor: MaterialStateProperty.all(Colors.black),
+                ),
+                child: Text(context.localizations.okText),
+                onPressed: () => Navigator.pop(context),
+              )
+            ],
+          );
+        },
+        orElse: () {},
+      );
+    });
+
     return GestureDetector(
       onTap: () => context.dismissKeyboard(),
       child: Scaffold(

lib/screens/login/login_view_model.dart

@@ -1,12 +1,14 @@
+import 'dart:async';
+
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:survey_flutter/uimodels/app_error.dart';
+import 'package:survey_flutter/utils/internet_connection_manager.dart';
 
 final loginViewModelProvider =
-    StateNotifierProvider.autoDispose<LoginViewModel, void>((_) {
-  return LoginViewModel();
-});
+    AsyncNotifierProvider.autoDispose<LoginViewModel, void>(LoginViewModel.new);
 
-class LoginViewModel extends StateNotifier<void> {
-  LoginViewModel() : super([]);
+class LoginViewModel extends AutoDisposeAsyncNotifier<void> {
+  late InternetConnectionManager internetConnectionManager;
 
   bool isValidEmail(String? email) {
     // Just use a simple rule, no fancy Regex!
@@ -16,4 +18,36 @@
   bool isValidPassword(String? password) {
     return !(password == null || password.length < 8);
   }
+
+  login({required String email, required String password}) async {
+    state = const AsyncLoading();
+    // TODO: Integrate with API
+
+    // Handling error part:
+
+    // If it returns unauthorized error (401)
+    //state = const AsyncError(
+    //  AppError.unauthorized,
+    //  StackTrace.empty,
+    //);
+
+    // If it returns timeout error, then check Internet connection
+    internetConnectionManager = ref.read(internetConnectionManagerProvider);
+    final isConnected = await internetConnectionManager.hasConnection();
+
+    if (!isConnected) {
+      state = const AsyncError(
+        AppError.noInternetConnection,
+        StackTrace.empty,
+      );
+    } else {
+      state = const AsyncError(
+        AppError.generic,
+        StackTrace.empty,
+      );
+    }
+  }
+
+  @override
+  FutureOr<void> build() {}
 }

lib/theme/app_theme.dart

@@ -15,6 +15,11 @@ class AppTheme {
             fontSize: 17,
             fontWeight: FontWeight.bold,
           ),
+          labelLarge: TextStyle(
+            color: Colors.white,
+            fontSize: 20,
+            fontWeight: FontWeight.bold,
+          ),
         ),
         textSelectionTheme: const TextSelectionThemeData(
           cursorColor: Colors.white,

lib/uimodels/app_error.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+import 'package:survey_flutter/utils/build_context_ext.dart';
+
+enum AppError {
+  unauthorized,
+  noInternetConnection,
+  generic,
+}
+
+extension AppErrorExtension on AppError {
+  String description(BuildContext context) {
+    switch (this) {
+      case AppError.unauthorized:
+        return context.localizations.unauthorizedError;
+      case AppError.noInternetConnection:
+        return context.localizations.noInternetConnectionError;
+      case AppError.generic:
+        return context.localizations.genericError;
+    }
+  }
+}

lib/utils/build_context_ext.dart

@@ -1,11 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations_en.dart';
 
 extension BuildContextExtension on BuildContext {
   TextTheme get textTheme => Theme.of(this).textTheme;
 
-  AppLocalizations? get localizations => AppLocalizations.of(this);
+  AppLocalizations get localizations =>
+      AppLocalizations.of(this) ?? AppLocalizationsEn();
 
   dismissKeyboard() {
     FocusNode currentFocusNode = FocusScope.of(this);
     if (!currentFocusNode.hasPrimaryFocus) {

lib/utils/internet_connection_manager.dart

@@ -0,0 +1,20 @@
+import 'package:internet_connection_checker/internet_connection_checker.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+abstract class InternetConnectionManager {
+  Future<bool> hasConnection();
+}
+
+final internetConnectionManagerProvider =
+    Provider<InternetConnectionManager>((_) {
+  return InternetConnectionManagerImpl();
+});
+
+class InternetConnectionManagerImpl extends InternetConnectionManager {
+  final InternetConnectionChecker _internetConnectionChecker =
+      InternetConnectionChecker();
+
+  @override
+  Future<bool> hasConnection() async =>
+      _internetConnectionChecker.hasConnection;
+}

lib/widgets/alert_dialog.dart

@@ -0,0 +1,37 @@
+import 'dart:io';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:survey_flutter/utils/build_context_ext.dart';
+
+Future<void> showAlertDialog({
+  required BuildContext context,
+  required String title,
+  required String message,
+  required List<Widget> actions,
+}) async {
+  if (Platform.isIOS) {
+    await showCupertinoDialog(
+      context: context,
+      builder: (BuildContext context) => CupertinoAlertDialog(
+        title: Text(title),
+        content: Text(message),
+        actions: actions,
+      ),
+    );
+  } else if (Platform.isAndroid) {
+    await showDialog(
+      context: context,
+      barrierDismissible: false,
+      builder: (BuildContext context) => AlertDialog(
+        title: Text(title),
+        titleTextStyle:
+            context.textTheme.labelLarge?.copyWith(color: Colors.black),
+        content: Text(message),
+        contentTextStyle:
+            context.textTheme.labelMedium?.copyWith(color: Colors.black),
+        actions: actions,
+      ),
+    );
+  }
+}

pubspec.lock

@@ -404,6 +404,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  internet_connection_checker:
+    dependency: "direct main"
+    description:
+      name: internet_connection_checker
+      sha256: "1c683e63e89c9ac66a40748b1b20889fd9804980da732bf2b58d6d5456c8e876"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.0+1"
   intl:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -46,6 +46,7 @@ dependencies:
   japx: ^2.0.5
   equatable: ^2.0.0
   injectable: ^1.5.0
+  internet_connection_checker: ^1.0.0+1
 
 dev_dependencies:
   build_runner: ^2.4.4

test/mocks/generate_mocks.dart

@@ -1,9 +1,18 @@
 import 'package:dio/dio.dart';
-import 'package:survey_flutter/api/authentication_api_service.dart';
 import 'package:mockito/annotations.dart';
+import 'package:survey_flutter/api/authentication_api_service.dart';
 import 'package:survey_flutter/repositories/authentication_repository.dart';
+import 'package:survey_flutter/utils/internet_connection_manager.dart';
+
+import '../utils/async_listener.dart';
 
-@GenerateMocks([AuthenticationApiService, AuthenticationRepository, DioError])
+@GenerateMocks([
+  AsyncListener,
+  AuthenticationApiService,
+  AuthenticationRepository,
+  DioError,
+  InternetConnectionManager,
+])
 main() {
   // empty class to generate mock repository classes
 }