Vaani/lib/features/onboarding/view/user_login.dart

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:shelfsdk/audiobookshelf_api.dart' show AuthMethod;
import 'package:vaani/api/api_provider.dart' show serverStatusProvider;
import 'package:vaani/api/server_provider.dart'
    show ServerAlreadyExistsException, audiobookShelfServerProvider;
import 'package:vaani/features/onboarding/view/onboarding_single_page.dart'
    show fadeSlideTransitionBuilder;
import 'package:vaani/features/onboarding/view/user_login_with_open_id.dart'
    show UserLoginWithOpenID;
import 'package:vaani/features/onboarding/view/user_login_with_password.dart'
    show UserLoginWithPassword;
import 'package:vaani/features/onboarding/view/user_login_with_token.dart'
    show UserLoginWithToken;
import 'package:vaani/hacks/fix_autofill_losing_focus.dart'
    show InactiveFocusScopeObserver;
import 'package:vaani/models/error_response.dart' show ErrorResponseHandler;
import 'package:vaani/settings/api_settings_provider.dart'
    show apiSettingsProvider;
import 'package:vaani/settings/models/models.dart' as model;

class UserLoginWidget extends HookConsumerWidget {
  const UserLoginWidget({super.key, required this.server, this.onSuccess});

  final Uri server;
  final Function(model.AuthenticatedUser)? onSuccess;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final serverStatusError = useMemoized(() => ErrorResponseHandler(), []);
    final serverStatus = ref.watch(
      serverStatusProvider(server, serverStatusError.storeError),
    );

    return serverStatus.when(
      data: (value) {
        if (value == null) {
          // check the error message
          return Text(serverStatusError.response.body);
        }
        // check available authentication methods and return the correct widget
        return UserLoginMultipleAuth(
          server: server,
          localAvailable:
              value.authMethods?.contains(AuthMethod.local) ?? false,
          openIDAvailable:
              value.authMethods?.contains(AuthMethod.openid) ?? false,
          openIDButtonText: value.authFormData?.authOpenIDButtonText,
          onSuccess: onSuccess,
        );
      },
      loading: () {
        return const Center(child: CircularProgressIndicator());
      },
      error: (error, _) {
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Server is not reachable: $error'),
              ElevatedButton(
                onPressed: () {
                  ref.invalidate(
                    serverStatusProvider(server, serverStatusError.storeError),
                  );
                },
                child: const Text('Try again'),
              ),
            ],
          ),
        );
      },
    );
  }
}

enum AuthMethodChoice { local, openid, authToken }

class UserLoginMultipleAuth extends HookConsumerWidget {
  const UserLoginMultipleAuth({
    super.key,
    required this.server,
    this.localAvailable = false,
    this.openIDAvailable = false,
    this.onPressed,
    this.openIDButtonText,
    this.onSuccess,
  });

  final Uri server;
  final bool localAvailable;
  final bool openIDAvailable;
  final void Function()? onPressed;
  final String? openIDButtonText;
  final Function(model.AuthenticatedUser)? onSuccess;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // will show choice chips for the available authentication methods
    // authToken method is always available
    final methodChoice = useState<AuthMethodChoice>(
      localAvailable ? AuthMethodChoice.local : AuthMethodChoice.authToken,
    );

    model.AudiobookShelfServer addServer() {
      var newServer = model.AudiobookShelfServer(serverUrl: server);
      try {
        // add the server to the list of servers
        ref.read(audiobookShelfServerProvider.notifier).addServer(newServer);
      } on ServerAlreadyExistsException catch (e) {
        newServer = e.server;
      } finally {
        ref
            .read(apiSettingsProvider.notifier)
            .updateState(
              ref.read(apiSettingsProvider).copyWith(activeServer: newServer),
            );
      }
      return newServer;
    }

    return Center(
      child: InactiveFocusScopeObserver(
        child: AutofillGroup(
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Wrap(
                  // mainAxisAlignment: MainAxisAlignment.center,
                  spacing: 10,
                  runAlignment: WrapAlignment.center,
                  runSpacing: 10,
                  alignment: WrapAlignment.center,
                  children:
                      [
                            // a small label to show the user what to do
                            if (localAvailable)
                              ChoiceChip(
                                label: const Text('Local'),
                                selected:
                                    methodChoice.value ==
                                    AuthMethodChoice.local,
                                onSelected: (selected) {
                                  if (selected) {
                                    methodChoice.value = AuthMethodChoice.local;
                                  }
                                },
                              ),
                            if (openIDAvailable)
                              ChoiceChip(
                                label: const Text('OpenID'),
                                selected:
                                    methodChoice.value ==
                                    AuthMethodChoice.openid,
                                onSelected: (selected) {
                                  if (selected) {
                                    methodChoice.value =
                                        AuthMethodChoice.openid;
                                  }
                                },
                              ),
                            ChoiceChip(
                              label: const Text('Token'),
                              selected:
                                  methodChoice.value ==
                                  AuthMethodChoice.authToken,
                              onSelected: (selected) {
                                if (selected) {
                                  methodChoice.value =
                                      AuthMethodChoice.authToken;
                                }
                              },
                            ),
                          ]
                          .animate(interval: 100.ms)
                          .fadeIn(duration: 150.ms, curve: Curves.easeIn),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: AnimatedSwitcher(
                  duration: 200.ms,
                  transitionBuilder: fadeSlideTransitionBuilder,
                  child: switch (methodChoice.value) {
                    AuthMethodChoice.authToken => UserLoginWithToken(
                      server: server,
                      addServer: addServer,
                      onSuccess: onSuccess,
                    ),
                    AuthMethodChoice.local => UserLoginWithPassword(
                      server: server,
                      addServer: addServer,
                      onSuccess: onSuccess,
                    ),
                    AuthMethodChoice.openid => UserLoginWithOpenID(
                      server: server,
                      addServer: addServer,
                      openIDButtonText: openIDButtonText,
                      onSuccess: onSuccess,
                    ),
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}