Create a login page that redirects to the browser: #1237

lib/domain/constants/router_paths.dart

@@ -2,6 +2,7 @@
 class RouterPaths {
   static const String startup = "/startup";
   static const String faq = "/faq";
+  static const String login = "/login";
   static const String root = "/root";
   static const String defaultSchedule = "/schedule/default";
   static const String gradeDetails = "/student/grade/details";

lib/l10n/intl_en.arb

@@ -47,6 +47,7 @@
   "close_button_text": "Close",
 
   "startup_viewmodel_acquire_token_fail": "Connection failed after multiple attempts. Please try again.",
+  "login_viewmodel_acquire_token_fail": "Connection failed due to cancellation. Please try again.",
 
   "title_schedule": "Schedule",
   "title_student": "Student",
@@ -57,6 +58,7 @@
   "title_ets_mobile": "ÉTSMobile",
 
   "login_title": "Login",
+  "login_startup_title": "Please sign in to continue",
   "login_prompt_universal_code": "Universal Code",
   "login_prompt_password": "Password",
   "login_action_sign_in": "Sign in",

lib/l10n/intl_fr.arb

@@ -46,6 +46,7 @@
   "close_button_text": "Fermer",
 
   "startup_viewmodel_acquire_token_fail": "Échec de la connexion après plusieurs tentatives. Veuillez réessayer.",
+  "login_viewmodel_acquire_token_fail": "Échec de la connexion à cause de l'annulation. Veuillez réessayer.",
 
   "title_schedule": "Horaire",
   "title_student": "Étudiant",
@@ -56,6 +57,7 @@
   "title_ets_mobile": "ÉTSMobile",
 
   "login_title": "Connexion",
+  "login_startup_title": "Veuillez vous authentifier pour continuer",
   "login_prompt_universal_code": "Code universel",
   "login_prompt_password": "Mot de passe",
   "login_action_sign_in": "Se connecter",

lib/router.dart

@@ -11,6 +11,7 @@ import 'package:notredame/ui/ets/events/author/widgets/author_view.dart';
 import 'package:notredame/ui/ets/events/news/widgets/news_view.dart';
 import 'package:notredame/ui/ets/events/news_details/widgets/news_details_view.dart';
 import 'package:notredame/ui/ets/quick_links/security_info/widgets/security_view.dart';
+import 'package:notredame/ui/login/widgets/login_view.dart';
 import 'package:notredame/ui/more/about/widgets/about_view.dart';
 import 'package:notredame/ui/more/contributors/widgets/contributors_view.dart';
 import 'package:notredame/ui/more/faq/widgets/faq_view.dart';
@@ -100,6 +101,11 @@ Route<dynamic> generateRoute(RouteSettings routeSettings) {
         settings: RouteSettings(name: routeSettings.name),
         builder: (_) => const ChooseLanguageView(),
       );
+    case RouterPaths.login:
+      return MaterialPageRoute(
+        settings: RouteSettings(name: routeSettings.name),
+        builder: (_) => const LoginView(),
+      );
     default:
       return PageRouteBuilder(
         settings: RouteSettings(name: routeSettings.name),

lib/ui/choose_language/widgets/choose_language_view.dart

@@ -53,7 +53,7 @@ class _ChooseLanguageViewState extends State<ChooseLanguageView> {
           child: ListView(
             shrinkWrap: true,
             children: <Widget>[
-              Icon(Icons.language, size: 80, color: context.theme.appColors.loginAccent),
+              Icon(Icons.language, size: 80, color: context.theme.appColors.splashScreenLogo),
               Padding(
                 padding: const EdgeInsets.only(left: 20, top: 60),
                 child: Align(

lib/ui/core/themes/app_colors_extension.dart

@@ -30,7 +30,7 @@ class AppColorsExtension extends ThemeExtension<AppColorsExtension> {
     required this.dayIndicatorWeekView,
     required this.dayIndicatorDayView,
     required this.loginMain,
-    required this.loginAccent,
+    required this.splashScreenLogo,
     required this.inputError,
     required this.mapLegend,
   });
@@ -62,7 +62,7 @@ class AppColorsExtension extends ThemeExtension<AppColorsExtension> {
   final Color dayIndicatorWeekView;
   final Color dayIndicatorDayView;
   final Color loginMain;
-  final Color loginAccent;
+  final Color splashScreenLogo;
   final Color inputError;
   final Color mapLegend;
 
@@ -95,7 +95,7 @@ class AppColorsExtension extends ThemeExtension<AppColorsExtension> {
     Color? dayIndicatorWeekView,
     Color? dayIndicatorDayView,
     Color? loginMain,
-    Color? loginAccent,
+    Color? splashScreenLogo,
     Color? inputError,
     Color? mapLegend,
   }) {
@@ -127,7 +127,7 @@ class AppColorsExtension extends ThemeExtension<AppColorsExtension> {
       dayIndicatorWeekView: dayIndicatorWeekView ?? this.dayIndicatorWeekView,
       dayIndicatorDayView: dayIndicatorDayView ?? this.dayIndicatorDayView,
       loginMain: loginMain ?? this.loginMain,
-      loginAccent: loginAccent ?? this.loginAccent,
+      splashScreenLogo: splashScreenLogo ?? this.splashScreenLogo,
       inputError: inputError ?? this.inputError,
       mapLegend: mapLegend ?? this.mapLegend,
     );
@@ -169,7 +169,7 @@ class AppColorsExtension extends ThemeExtension<AppColorsExtension> {
       dayIndicatorWeekView: _lerp(dayIndicatorWeekView, other.dayIndicatorWeekView, t),
       dayIndicatorDayView: _lerp(dayIndicatorDayView, other.dayIndicatorDayView, t),
       loginMain: _lerp(loginMain, other.loginMain, t),
-      loginAccent: _lerp(loginAccent, other.loginAccent, t),
+      splashScreenLogo: _lerp(splashScreenLogo, other.splashScreenLogo, t),
       inputError: _lerp(inputError, other.inputError, t),
       mapLegend: _lerp(mapLegend, other.mapLegend, t),
     );

lib/ui/core/themes/app_theme.dart

@@ -114,7 +114,7 @@ class AppTheme with ChangeNotifier {
     dayIndicatorWeekView: const Color(0x83ef3e45),
     dayIndicatorDayView: AppPalette.grey.lightGrey,
     loginMain: AppPalette.etsLightRed,
-    loginAccent: AppPalette.grey.white,
+    splashScreenLogo: AppPalette.grey.white,
     inputError: Colors.amberAccent,
     mapLegend: const Color(0xfffffdfd),
   );
@@ -208,7 +208,7 @@ class AppTheme with ChangeNotifier {
     dayIndicatorWeekView: const Color(0x96ef3e45),
     dayIndicatorDayView: AppPalette.grey.darkGrey,
     loginMain: AppPalette.grey.white,
-    loginAccent: AppPalette.etsLightRed,
+    splashScreenLogo: AppPalette.etsLightRed,
     inputError: Colors.redAccent,
     mapLegend: const Color(0xff121212),
   );

lib/ui/login/view_model/login_viewmodel.dart

@@ -0,0 +1,41 @@
+//
+
+// Package imports:
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:msal_auth/msal_auth.dart';
+import 'package:stacked/stacked.dart';
+
+// Project imports:
+import 'package:notredame/data/repositories/settings_repository.dart';
+import 'package:notredame/data/services/analytics_service.dart';
+import 'package:notredame/data/services/auth_service.dart';
+import 'package:notredame/data/services/navigation_service.dart';
+import 'package:notredame/domain/constants/router_paths.dart';
+import 'package:notredame/l10n/app_localizations.dart';
+import 'package:notredame/locator.dart';
+
+class LoginViewModel extends BaseViewModel {
+  /// Localization class of the application.
+  final AppIntl _appIntl;
+
+  final SettingsRepository _settingsManager = locator<SettingsRepository>();
+  final AuthService _authService = locator<AuthService>();
+  final NavigationService navigationService = locator<NavigationService>();
+  final AnalyticsService _analyticsService = locator<AnalyticsService>();
+
+  LoginViewModel({required AppIntl intl}) : _appIntl = intl;
+
+  Future authenticate() async {
+    AuthenticationResult? token;
+    token = (await _authService.acquireToken()).$1;
+
+    if (token == null) {
+      Fluttertoast.showToast(msg: _appIntl.login_viewmodel_acquire_token_fail);
+      await _analyticsService.logError('LoginViewmodel', 'Failed to acquire token due to cancellation');
+      return;
+    }
+
+    _settingsManager.isLoggedIn = true;
+    navigationService.pushNamedAndRemoveUntil(RouterPaths.startup);
+  }
+}

lib/ui/login/widgets/login_view.dart

@@ -0,0 +1,120 @@
+// Flutter imports:
+import 'package:flutter/material.dart';
+
+// Package imports:
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:stacked/stacked.dart';
+
+// Project imports:
+import 'package:notredame/domain/constants/router_paths.dart';
+import 'package:notredame/l10n/app_localizations.dart';
+import 'package:notredame/ui/core/themes/app_palette.dart';
+import 'package:notredame/ui/login/view_model/login_viewmodel.dart';
+
+class LoginView extends StatefulWidget {
+  const LoginView({super.key});
+
+  @override
+  State<LoginView> createState() => _LoginViewState();
+}
+
+class _LoginViewState extends State<LoginView> {
+  bool _isLoading = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return ViewModelBuilder<LoginViewModel>.reactive(
+      viewModelBuilder: () => LoginViewModel(intl: AppIntl.of(context)!),
+      builder: (context, model, child) => Scaffold(
+        body: Container(
+          width: double.infinity,
+          height: double.infinity,
+          decoration: const BoxDecoration(
+            gradient: LinearGradient(
+              begin: Alignment.topCenter,
+              end: Alignment.bottomCenter,
+              colors: [AppPalette.etsLightRed, AppPalette.etsDarkRed],
+            ),
+          ),
+          child: Center(
+            child: Padding(
+              padding: const EdgeInsets.all(30.0),
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
+                  Padding(
+                    padding: const EdgeInsets.only(bottom: 20),
+                    child: Hero(
+                      tag: 'ets_logo',
+                      child: SvgPicture.asset(
+                        "assets/images/ets_white_logo.svg",
+                        excludeFromSemantics: true,
+                        width: 90,
+                        height: 90,
+                        colorFilter: ColorFilter.mode(AppPalette.grey.white, BlendMode.srcIn),
+                      ),
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.only(bottom: 30),
+                    child: Text(
+                      AppIntl.of(context)!.login_startup_title,
+                      style: TextStyle(fontWeight: FontWeight.normal, fontSize: 18, color: AppPalette.grey.white),
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.only(bottom: 40),
+                    child: Stack(
+                      alignment: Alignment.centerRight,
+                      children: [
+                        ElevatedButton.icon(
+                          onPressed: () async {
+                            setState(() => _isLoading = true);
+                            await model.authenticate();
+                            setState(() => _isLoading = false);
+                          },
+                          icon: const FaIcon(FontAwesomeIcons.lockOpen, color: Colors.white),
+                          label: Text(
+                            AppIntl.of(context)!.login_action_sign_in,
+                            style: TextStyle(color: AppPalette.grey.white, fontSize: 16, fontWeight: FontWeight.bold),
+                          ),
+                          style: ElevatedButton.styleFrom(
+                            backgroundColor: AppPalette.grey.black,
+                            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+                            minimumSize: const Size(300, 50),
+                          ),
+                        ),
+                        if (_isLoading) ...[
+                          CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(AppPalette.grey.white)),
+                        ],
+                      ],
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.only(bottom: 20),
+                    child: ElevatedButton.icon(
+                      onPressed: () {
+                        model.navigationService.pushNamed(RouterPaths.faq);
+                      },
+                      icon: const FaIcon(FontAwesomeIcons.question, color: Colors.white),
+                      label: Text(
+                        "FAQ",
+                        style: TextStyle(color: AppPalette.grey.white, fontSize: 13, fontWeight: FontWeight.bold),
+                      ),
+                      style: ElevatedButton.styleFrom(
+                        backgroundColor: AppPalette.grey.darkGrey,
+                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/ui/startup/view_model/startup_viewmodel.dart

@@ -1,5 +1,4 @@
 // Package imports:
-import 'package:fluttertoast/fluttertoast.dart';
 import 'package:msal_auth/msal_auth.dart';
 import 'package:stacked/stacked.dart';
 
@@ -50,22 +49,7 @@ class StartUpViewModel extends BaseViewModel {
       _settingsManager.isLoggedIn = true;
       _navigationService.pushNamedAndRemoveUntil(RouterPaths.root);
     } else {
-      AuthenticationResult? token;
-      int attempts = 0;
-      const maxAttempts = 3;
-
-      while (token == null && attempts < maxAttempts) {
-        attempts++;
-        token = (await _authService.acquireToken()).$1;
-        if (token == null && attempts >= maxAttempts) {
-          Fluttertoast.showToast(msg: intl.startup_viewmodel_acquire_token_fail, toastLength: Toast.LENGTH_LONG);
-          await _analyticsService.logError('StartupViewmodel', 'Failed to acquire token after $maxAttempts attempts');
-          return;
-        }
-      }
-
-      _settingsManager.isLoggedIn = true;
-      _navigationService.pushNamedAndRemoveUntil(RouterPaths.root);
+      _navigationService.pushNamedAndRemoveUntil(RouterPaths.login);
     }
   }
 

lib/ui/startup/widgets/startup_view.dart

@@ -41,7 +41,7 @@ class StartUpView extends StatelessWidget {
                     excludeFromSemantics: true,
                     width: 90,
                     height: 90,
-                    colorFilter: ColorFilter.mode(context.theme.appColors.loginAccent, BlendMode.srcIn),
+                    colorFilter: ColorFilter.mode(context.theme.appColors.splashScreenLogo, BlendMode.srcIn),
                   ),
                 ),
                 const SizedBox(height: 15),

test/ui/login/view_model/login_viewmodel_test.dart

@@ -0,0 +1,65 @@
+// Package imports:
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mockito/mockito.dart';
+
+// Project imports:
+import 'package:notredame/data/repositories/settings_repository.dart';
+import 'package:notredame/data/repositories/user_repository.dart';
+import 'package:notredame/data/services/analytics_service.dart';
+import 'package:notredame/data/services/auth_service.dart';
+import 'package:notredame/data/services/navigation_service.dart';
+import 'package:notredame/data/services/networking_service.dart';
+import 'package:notredame/domain/constants/router_paths.dart';
+import 'package:notredame/l10n/app_localizations.dart';
+import 'package:notredame/ui/login/view_model/login_viewmodel.dart';
+import '../../../data/mocks/repositories/settings_repository_mock.dart';
+import '../../../data/mocks/services/auth_service_mock.dart';
+import '../../../data/mocks/services/navigation_service_mock.dart';
+import '../../../data/mocks/services/networking_service_mock.dart';
+import '../../../helpers.dart';
+
+void main() {
+  late NavigationServiceMock navigationServiceMock;
+  late SettingsRepositoryMock settingsRepositoryMock;
+  late NetworkingServiceMock networkingServiceMock;
+  late AuthServiceMock authServiceMock;
+
+  late LoginViewModel viewModel;
+  late AppIntl appIntl;
+
+  group('LoginViewModel - ', () {
+    setUp(() async {
+      setupAnalyticsServiceMock();
+      navigationServiceMock = setupNavigationServiceMock();
+      settingsRepositoryMock = setupSettingsRepositoryMock();
+      networkingServiceMock = setupNetworkingServiceMock();
+      authServiceMock = setupAuthServiceMock();
+
+      appIntl = await setupAppIntl();
+      viewModel = LoginViewModel(intl: appIntl);
+    });
+
+    tearDown(() {
+      unregister<AuthService>();
+      unregister<NetworkingService>();
+      unregister<UserRepository>();
+      unregister<SettingsRepository>();
+      unregister<NavigationService>();
+      unregister<AnalyticsService>();
+    });
+
+    test('silent sign in failed redirect to startup', () async {
+      NetworkingServiceMock.stubHasConnectivity(networkingServiceMock);
+      SettingsRepositoryMock.stubIsLocaleDefined(settingsRepositoryMock, toReturn: true);
+      AuthServiceMock.stubCreatePublicClientApplication(authServiceMock);
+      AuthServiceMock.stubAcquireTokenSilent(authServiceMock, success: false);
+      AuthServiceMock.stubAcquireToken(authServiceMock, success: true);
+
+      await viewModel.authenticate();
+
+      verify(authServiceMock.acquireToken()).called(1);
+      verify(navigationServiceMock.pushNamedAndRemoveUntil(RouterPaths.startup));
+      verify(settingsRepositoryMock.isLoggedIn = true).called(1);
+    });
+  });
+}