something

lib/pages/onboarding/onboarding.dart

@@ -0,0 +1,89 @@
+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/server_setup.dart

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,94 @@
+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,
+          ),
+        ],
+      ),
+    );
+  }
+}