fix onboarding to single page

lib/main.dart

@@ -40,15 +40,20 @@ class MyApp extends ConsumerWidget {
       return apiSettings.activeUser == null || servers.isEmpty;
     }
 
+    var routerConfig = MyAppRouter(needOnboarding: needOnboarding()).config;
+    // if (needOnboarding()) {
+    //   routerConfig.goNamed(Routes.onboarding);
+    // }
+
+
     return MaterialApp.router(
       theme: lightTheme,
       darkTheme: darkTheme,
       themeMode: ref.watch(appSettingsProvider).isDarkMode
           ? ThemeMode.dark
           : ThemeMode.light,
-      routerConfig: MyAppRouter(needOnboarding: needOnboarding()).config,
+      routerConfig: routerConfig,
       // routerConfig: _router.config,
-
     );
   }
 }

lib/pages/navigation.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+class AppNavigation extends HookConsumerWidget {
+  const AppNavigation({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final currentIndex = useState(0);
+    return Scaffold(
+      bottomNavigationBar: BottomNavigationBar(
+        currentIndex: currentIndex.value,
+        onTap: (value) => currentIndex.value = value,
+        items: const [
+          BottomNavigationBarItem(
+            icon: Icon(Icons.home),
+            label: 'Home',
+          ),
+          BottomNavigationBarItem(
+            icon: Icon(Icons.business),
+            label: 'Business',
+          ),
+          BottomNavigationBarItem(
+            icon: Icon(Icons.school),
+            label: 'School',
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages/onboarding/onboarding.dart

@@ -1,89 +0,0 @@
-import 'package:coast/coast.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:whispering_pages/pages/onboarding/server_setup.dart';
-import 'package:whispering_pages/pages/onboarding/user_login.dart';
-import 'package:whispering_pages/settings/api_settings_provider.dart';
-
-const _serverTag = 'server';
-
-class OnboardingPage extends StatefulHookConsumerWidget {
-  const OnboardingPage({super.key});
-
-  @override
-  OnboardingPageState createState() => OnboardingPageState();
-}
-
-class OnboardingPageState extends ConsumerState<OnboardingPage> {
-  final coastController = CoastController();
-
-  @override
-  void dispose() {
-    coastController.dispose();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final apiSettings = ref.watch(apiSettingsProvider);
-
-    final serverUriController = useTextEditingController(
-      text: apiSettings.activeServer?.serverUrl.toString(),
-    );
-
-    bool isUserLoginAvailable() {
-      return apiSettings.activeServer != null;
-    }
-
-    // ignore: invalid_use_of_protected_member
-    if (isUserLoginAvailable()) {
-      try {
-        coastController.animateTo(
-          beach: 1,
-          duration: const Duration(milliseconds: 500),
-          curve: Curves.easeInOut,
-        );
-      } catch (e) {
-        debugPrint('Error: $e');
-      }
-    }
-
-    final beaches = [
-      Beach(
-        builder: (context) => FirstTimeServerSetupPage(
-          controller: serverUriController,
-          heroServerTag: _serverTag,
-        ),
-      ),
-      isUserLoginAvailable()
-          ? Beach(
-              builder: (context) => FirstTimeUserLoginPage(
-                serverUriController: serverUriController,
-                heroServerTag: _serverTag,
-              ),
-            )
-          : null,
-    ].nonNulls.toList();
-    const activeStep = 0;
-    return Scaffold(
-      body: Stack(
-        children: [
-          Padding(
-            padding: const EdgeInsets.all(8.0),
-            child: Coast(
-              beaches: beaches,
-              controller: coastController,
-              observers: [
-                CrabController(),
-              ],
-            ),
-          ),
-          Positioned(
-            child: Container(),
-          ),
-        ],
-      ),
-    );
-  }
-}

lib/pages/onboarding/onboarding_single_page.dart

@@ -0,0 +1,215 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:url_launcher/url_launcher.dart';
+import 'package:whispering_pages/api/api_provider.dart';
+import 'package:whispering_pages/api/authenticated_user_provider.dart';
+import 'package:whispering_pages/api/server_provider.dart';
+import 'package:whispering_pages/settings/api_settings_provider.dart';
+import 'package:whispering_pages/settings/models/models.dart' as model;
+import 'package:whispering_pages/widgets/add_new_server.dart';
+import 'package:whispering_pages/widgets/user_login.dart';
+
+class OnboardingSinglePage extends HookConsumerWidget {
+  const OnboardingSinglePage({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final apiSettings = ref.watch(apiSettingsProvider);
+    final serverUriController = useTextEditingController(
+      text: apiSettings.activeServer?.serverUrl.toString() ?? '',
+    );
+    final api = ref
+        .watch(audiobookshelfApiProvider(Uri.https(serverUriController.text)));
+
+    final isUserLoginAvailable = useState(apiSettings.activeServer != null);
+
+    final usernameController = useTextEditingController();
+    final passwordController = useTextEditingController();
+
+    // reverse the animation if the user is not logged in
+    void addServer() {
+      var newServer = serverUriController.text.isEmpty
+          ? null
+          : model.AudiobookShelfServer(
+              serverUrl: Uri.parse(serverUriController.text),
+            );
+      try {
+        // add the server to the list of servers
+        if (newServer != null) {
+          ref.read(audiobookShelfServerProvider.notifier).addServer(
+                newServer,
+              );
+        }
+        // else remove the server from the list of servers
+        else if (apiSettings.activeServer != null) {
+          ref
+              .read(audiobookShelfServerProvider.notifier)
+              .removeServer(apiSettings.activeServer!);
+        }
+      } on ServerAlreadyExistsException catch (e) {
+        newServer = e.server;
+      } finally {
+        ref.read(apiSettingsProvider.notifier).updateState(
+              apiSettings.copyWith(
+                activeServer: newServer,
+              ),
+            );
+      }
+    }
+
+    /// Login to the server and save the user
+    Future<void> loginAndSave() async {
+      final username = usernameController.text;
+      final password = passwordController.text;
+      final success = await api.login(username: username, password: password);
+      if (success != null) {
+        // save the server
+        addServer();
+        var authenticatedUser = model.AuthenticatedUser(
+          server: model.AudiobookShelfServer(
+            serverUrl: Uri.parse(serverUriController.text),
+          ),
+          id: success.user.id,
+          password: password,
+          username: username,
+          authToken: api.token!,
+        );
+        // add the user to the list of users
+        ref.read(authenticatedUserProvider.notifier).addUser(authenticatedUser);
+
+        // set the active user
+        ref.read(apiSettingsProvider.notifier).updateState(
+              apiSettings.copyWith(
+                activeUser: authenticatedUser,
+              ),
+            );
+      } else {
+        ScaffoldMessenger.of(context).showSnackBar(
+          const SnackBar(
+            content: Text('Login failed'),
+          ),
+        );
+        // give focus back to the username field
+      }
+    }
+
+    return Scaffold(
+      body: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Text(
+              'Welcome to Whispering Pages',
+              style: Theme.of(context).textTheme.headlineSmall,
+            ),
+          ),
+          const SizedBox.square(
+            dimension: 16.0,
+          ),
+          Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Text(
+              'Please enter the URL of your AudiobookShelf Server',
+              style: Theme.of(context).textTheme.bodyMedium,
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: AddNewServer(
+              controller: serverUriController,
+              allowEmpty: true,
+              onPressed: () {
+                isUserLoginAvailable.value =
+                    serverUriController.text.isNotEmpty;
+              },
+            ),
+          ),
+          AnimatedSwitcher(
+            duration: 500.ms,
+            transitionBuilder: (child, animation) {
+              return FadeTransition(
+                opacity: animation,
+                child: SlideTransition(
+                  position: Tween<Offset>(
+                    begin: const Offset(0, 0.3),
+                    end: const Offset(0, 0),
+                  ).animate(animation),
+                  child: child,
+                ),
+              );
+            },
+            child: isUserLoginAvailable.value
+                ? UserLogin(
+                    passwordController: passwordController,
+                    usernameController: usernameController,
+                    onPressed: loginAndSave,
+                  )
+                // ).animate().fade(duration: 600.ms).slideY(begin: 0.3, end: 0)
+                : const RedirectToABS().animate().fadeIn().slideY(
+                      curve: Curves.easeInOut,
+                      duration: 500.ms,
+                    ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class RedirectToABS extends StatelessWidget {
+  const RedirectToABS({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return FittedBox(
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          // a simple text with hyper link to only the "click here" part
+          const Text('Do not have a server? '),
+          // a simple text with hyper link to the github page
+          TextButton(
+            autofocus: false,
+            isSemanticButton: false,
+            style: ButtonStyle(
+              elevation: MaterialStateProperty.all(0),
+              padding: MaterialStateProperty.all(
+                const EdgeInsets.all(0),
+              ),
+            ),
+            onPressed: () async {
+              // open the github page
+              // ignore: avoid_print
+              print('Opening the github page');
+              await _launchUrl(
+                Uri.parse(
+                  'https://www.audiobookshelf.org',
+                ),
+              );
+            },
+            child: const Text('Click here'),
+          ),
+          const Text(' to know how to setup a server.'),
+        ],
+      ),
+    );
+  }
+}
+
+Future<void> _launchUrl(Uri url) async {
+  if (!await launchUrl(
+    url,
+    mode: LaunchMode.inAppWebView,
+    webOnlyWindowName: '_blank',
+  )) {
+    // throw Exception('Could not launch $url');
+    debugPrint('Could not launch $url');
+  }
+}

lib/pages/onboarding/server_setup.dart

@@ -1,66 +0,0 @@
-import 'package:coast/coast.dart';
-import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:whispering_pages/api/server_provider.dart';
-import 'package:whispering_pages/settings/models/audiobookshelf_server.dart' as model;
-import 'package:whispering_pages/settings/api_settings_provider.dart';
-import 'package:whispering_pages/widgets/add_new_server.dart';
-
-class FirstTimeServerSetupPage extends HookConsumerWidget {
-  const FirstTimeServerSetupPage({
-    super.key,
-    required this.controller,
-    required this.heroServerTag,
-  });
-  final TextEditingController controller;
-  final String heroServerTag;
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final apiSettings = ref.watch(apiSettingsProvider);
-    return Center(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          const Text('Welcome to Whispering Pages'),
-          Crab(
-            tag: heroServerTag,
-            child: AddNewServer(
-              controller: controller,
-              allowEmpty: true,
-              onPressed: () {
-                var newServer = controller.text.isEmpty
-                    ? null
-                    : model.AudiobookShelfServer(
-                        serverUrl: Uri.parse(controller.text),
-                      );
-                try {
-                  // add the server to the list of servers
-                  if (newServer != null) {
-                    ref.read(audiobookShelfServerProvider.notifier).addServer(
-                          newServer,
-                        );
-                  }
-                  // else remove the server from the list of servers
-                  else if (apiSettings.activeServer != null) {
-                    ref
-                        .read(audiobookShelfServerProvider.notifier)
-                        .removeServer(apiSettings.activeServer!);
-                  }
-                } on ServerAlreadyExistsException catch (e) {
-                  newServer = e.server;
-                } finally {
-                  ref.read(apiSettingsProvider.notifier).updateState(
-                        apiSettings.copyWith(
-                          activeServer: newServer,
-                        ),
-                      );
-                }
-              },
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-}

lib/pages/onboarding/user_login.dart

@@ -1,94 +0,0 @@
-import 'package:coast/coast.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:whispering_pages/api/api_provider.dart';
-import 'package:whispering_pages/api/authenticated_user_provider.dart'
-    show authenticatedUserProvider;
-import 'package:whispering_pages/settings/models/audiobookshelf_server.dart';
-import 'package:whispering_pages/settings/models/authenticated_user.dart';
-import 'package:whispering_pages/settings/api_settings_provider.dart';
-import 'package:whispering_pages/widgets/add_new_server.dart';
-import 'package:whispering_pages/widgets/user_login.dart';
-
-
-/// Once the user has selected a server, they can login to it.
-class FirstTimeUserLoginPage extends HookConsumerWidget {
-  const FirstTimeUserLoginPage({
-    super.key,
-    required this.serverUriController,
-    required this.heroServerTag,
-  });
-
-  final TextEditingController serverUriController;
-  final String heroServerTag;
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final usernameController = useTextEditingController();
-    final passwordController = useTextEditingController();
-
-    final apiSettings = ref.watch(apiSettingsProvider);
-    final api = ref
-        .watch(audiobookshelfApiProvider(Uri.https(serverUriController.text)));
-
-    /// Login to the server and save the user
-    void loginAndSave() async {
-      final username = usernameController.text;
-      final password = passwordController.text;
-      final success = await api.login(username: username, password: password);
-      // debugPrint('Login success: $success');
-      if (success != null) {
-        var authenticatedUser = AuthenticatedUser(
-          server: AudiobookShelfServer(
-            serverUrl: Uri.parse(serverUriController.text),
-          ),
-          id: success.user.id,
-          password: password,
-          username: username,
-          authToken: api.token!,
-        );
-        // add the user to the list of users
-        ref.read(authenticatedUserProvider.notifier).addUser(authenticatedUser);
-
-        // set the active user
-        ref.read(apiSettingsProvider.notifier).updateState(
-              apiSettings.copyWith(
-                activeUser: authenticatedUser,
-              ),
-            );
-      } else {
-        ScaffoldMessenger.of(context).showSnackBar(
-          const SnackBar(
-            content: Text('Login failed'),
-          ),
-        );
-        // give focus back to the username field
-      }
-    }
-
-    return Center(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Crab(
-            tag: heroServerTag,
-            child: AddNewServer(
-              controller: serverUriController,
-              onPressed: () {},
-              readOnly: true,
-            ),
-          ),
-          const SizedBox(height: 30),
-          const Text('Login to server'),
-          const SizedBox(height: 30),
-          UserLogin(
-            usernameController: usernameController,
-            passwordController: passwordController,
-            onPressed: loginAndSave,
-          ),
-        ],
-      ),
-    );
-  }
-}

lib/router/router.dart

@@ -2,7 +2,7 @@ import 'package:go_router/go_router.dart';
 import 'package:whispering_pages/pages/home_page.dart';
 import 'package:whispering_pages/pages/library_item_page.dart';
 import 'package:whispering_pages/pages/library_page.dart';
-import 'package:whispering_pages/pages/onboarding/onboarding.dart';
+import 'package:whispering_pages/pages/onboarding/onboarding_single_page.dart';
 
 part 'constants.dart';
 
@@ -17,7 +17,7 @@ class MyAppRouter {
           GoRoute(
             path: '/login',
             name: Routes.onboarding,
-            builder: (context, state) => const OnboardingPage(),
+            builder: (context, state) => const OnboardingSinglePage(),
           ),
           GoRoute(
             path: '/',
@@ -44,7 +44,7 @@ class MyAppRouter {
         ],
         redirect: (context, state) {
           if (needOnboarding) {
-            return context.namedLocation(Routes.onboarding);
+            return config.namedLocation(Routes.onboarding);
           }
           return null;
         },

lib/widgets/user_login.dart

@@ -42,75 +42,78 @@ class UserLogin extends HookConsumerWidget {
     return Center(
       child: InactiveFocusScopeObserver(
         child: AutofillGroup(
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              TextFormField(
-                controller: usernameController,
-                autofocus: true,
-                autofillHints: const [AutofillHints.username],
-                textInputAction: TextInputAction.next,
-                decoration: InputDecoration(
-                  labelText: 'Username',
-                  labelStyle: TextStyle(
-                    color: Theme.of(context)
-                        .colorScheme
-                        .onBackground
-                        .withOpacity(0.8),
-                  ),
-                  border: const OutlineInputBorder(),
-                ),
-              ),
-              const SizedBox(height: 10),
-              TextFormField(
-                controller: passwordController,
-                autofillHints: const [AutofillHints.password],
-                textInputAction: TextInputAction.done,
-                obscureText: !isPasswordVisible.value,
-                onFieldSubmitted: onPressed != null
-                    ? (_) {
-                        onPressed!();
-                      }
-                    : null,
-                decoration: InputDecoration(
-                  labelText: 'Password',
-                  labelStyle: TextStyle(
-                    color: Theme.of(context)
-                        .colorScheme
-                        .onBackground
-                        .withOpacity(0.8),
-                  ),
-                  border: const OutlineInputBorder(),
-                  suffixIcon: ColorFiltered(
-                    colorFilter: ColorFilter.mode(
-                      Theme.of(context).colorScheme.primary.withOpacity(0.8),
-                      BlendMode.srcIn,
+          child: Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                TextFormField(
+                  controller: usernameController,
+                  autofocus: true,
+                  autofillHints: const [AutofillHints.username],
+                  textInputAction: TextInputAction.next,
+                  decoration: InputDecoration(
+                    labelText: 'Username',
+                    labelStyle: TextStyle(
+                      color: Theme.of(context)
+                          .colorScheme
+                          .onBackground
+                          .withOpacity(0.8),
                     ),
-                    child: InkWell(
-                      borderRadius: BorderRadius.circular(50),
-                      onTap: () {
-                        isPasswordVisible.value = !isPasswordVisible.value;
-                      },
-                      child: Container(
-                        margin: const EdgeInsets.only(left: 8, right: 8),
-                        child: Lottie.asset(
-                          'assets/animations/Animation - 1714930099660.json',
-                          controller: isPasswordVisibleAnimationController,
+                    border: const OutlineInputBorder(),
+                  ),
+                ),
+                const SizedBox(height: 10),
+                TextFormField(
+                  controller: passwordController,
+                  autofillHints: const [AutofillHints.password],
+                  textInputAction: TextInputAction.done,
+                  obscureText: !isPasswordVisible.value,
+                  onFieldSubmitted: onPressed != null
+                      ? (_) {
+                          onPressed!();
+                        }
+                      : null,
+                  decoration: InputDecoration(
+                    labelText: 'Password',
+                    labelStyle: TextStyle(
+                      color: Theme.of(context)
+                          .colorScheme
+                          .onBackground
+                          .withOpacity(0.8),
+                    ),
+                    border: const OutlineInputBorder(),
+                    suffixIcon: ColorFiltered(
+                      colorFilter: ColorFilter.mode(
+                        Theme.of(context).colorScheme.primary.withOpacity(0.8),
+                        BlendMode.srcIn,
+                      ),
+                      child: InkWell(
+                        borderRadius: BorderRadius.circular(50),
+                        onTap: () {
+                          isPasswordVisible.value = !isPasswordVisible.value;
+                        },
+                        child: Container(
+                          margin: const EdgeInsets.only(left: 8, right: 8),
+                          child: Lottie.asset(
+                            'assets/animations/Animation - 1714930099660.json',
+                            controller: isPasswordVisibleAnimationController,
+                          ),
                         ),
                       ),
                     ),
-                  ),
-                  suffixIconConstraints: const BoxConstraints(
-                    maxHeight: 45,
+                    suffixIconConstraints: const BoxConstraints(
+                      maxHeight: 45,
+                    ),
                   ),
                 ),
-              ),
-              const SizedBox(height: 30),
-              ElevatedButton(
-                onPressed: onPressed,
-                child: const Text('Login'),
-              ),
-            ],
+                const SizedBox(height: 30),
+                ElevatedButton(
+                  onPressed: onPressed,
+                  child: const Text('Login'),
+                ),
+              ],
+            ),
           ),
         ),
       ),