diff --git a/lib/features/onboarding/view/onboarding_single_page.dart b/lib/features/onboarding/view/onboarding_single_page.dart index bd69fb0..7f071a0 100644 --- a/lib/features/onboarding/view/onboarding_single_page.dart +++ b/lib/features/onboarding/view/onboarding_single_page.dart @@ -13,6 +13,37 @@ class OnboardingSinglePage extends HookConsumerWidget { super.key, }); + @override + Widget build(BuildContext context, WidgetRef ref) { + return Scaffold( + body: LayoutBuilder( + builder: (BuildContext context, BoxConstraints constraints) { + return Center( + child: SingleChildScrollView( + child: ConstrainedBox( + constraints: BoxConstraints( + maxWidth: 600, + minWidth: + constraints.maxWidth < 600 ? constraints.maxWidth : 0, + ), + child: const Padding( + padding: EdgeInsets.symmetric(vertical: 20.0), + child: SafeArea(child: OnboardingBody()), + ), + ), + ), + ); + }, + ), + ); + } +} + +class OnboardingBody extends HookConsumerWidget { + const OnboardingBody({ + super.key, + }); + @override Widget build(BuildContext context, WidgetRef ref) { final apiSettings = ref.watch(apiSettingsProvider); @@ -39,65 +70,65 @@ class OnboardingSinglePage extends HookConsumerWidget { ); } - return Scaffold( - body: SingleChildScrollView( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Padding( - padding: const EdgeInsets.all(8.0), - child: Text( - 'Welcome to Vaani', - style: Theme.of(context).textTheme.headlineSmall, - ), - ), - const SizedBox.square( - dimension: 16.0, - ), - Padding( - padding: const EdgeInsets.all(8.0), - child: AnimatedSwitcher( - duration: 500.ms, - transitionBuilder: fadeSlideTransitionBuilder, - child: canUserLogin.value - ? Text( - 'Server connected, please login', - key: const ValueKey('connected'), - style: Theme.of(context).textTheme.bodyMedium, - ) - : Text( - 'Please enter the URL of your AudiobookShelf Server', - key: const ValueKey('not_connected'), - style: Theme.of(context).textTheme.bodyMedium, - ), - ), - ), - Padding( - padding: const EdgeInsets.all(8.0), - child: AddNewServer( - controller: serverUriController, - allowEmpty: true, - onPressed: () { - canUserLogin.value = serverUriController.text.isNotEmpty; - }, - ), - ), - AnimatedSwitcher( - duration: 500.ms, - transitionBuilder: fadeSlideTransitionBuilder, - child: canUserLogin.value - ? UserLoginWidget( - server: audiobookshelfUri, - ) - // ).animate().fade(duration: 600.ms).slideY(begin: 0.3, end: 0) - : const RedirectToABS().animate().fadeIn().slideY( - curve: Curves.easeInOut, - duration: 500.ms, - ), - ), - ], + return Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Padding( + padding: const EdgeInsets.all(8.0), + child: Text( + 'Welcome to Vaani', + style: Theme.of(context).textTheme.headlineSmall, + ), ), - ), + const SizedBox.square( + dimension: 16.0, + ), + Padding( + padding: const EdgeInsets.all(8.0), + child: AnimatedSwitcher( + duration: 500.ms, + transitionBuilder: fadeSlideTransitionBuilder, + child: canUserLogin.value + ? Text( + 'Server connected, please login', + key: const ValueKey('connected'), + style: Theme.of(context).textTheme.bodyMedium, + ) + : Text( + 'Please enter the URL of your AudiobookShelf Server', + key: const ValueKey('not_connected'), + style: Theme.of(context).textTheme.bodyMedium, + ), + ), + ), + Padding( + padding: const EdgeInsets.all(8.0), + child: AddNewServer( + controller: serverUriController, + allowEmpty: true, + onPressed: () { + canUserLogin.value = serverUriController.text.isNotEmpty; + }, + ), + ), + const SizedBox.square( + dimension: 16.0, + ), + AnimatedSwitcher( + duration: 500.ms, + transitionBuilder: fadeSlideTransitionBuilder, + child: canUserLogin.value + ? UserLoginWidget( + server: audiobookshelfUri, + ) + // ).animate().fade(duration: 600.ms).slideY(begin: 0.3, end: 0) + : const RedirectToABS().animate().fadeIn().slideY( + curve: Curves.easeInOut, + duration: 500.ms, + ), + ), + ], ); } } diff --git a/lib/features/onboarding/view/user_login.dart b/lib/features/onboarding/view/user_login.dart index 2b3d575..c534d0d 100644 --- a/lib/features/onboarding/view/user_login.dart +++ b/lib/features/onboarding/view/user_login.dart @@ -130,11 +130,11 @@ class UserLoginMultipleAuth extends HookConsumerWidget { return Center( child: InactiveFocusScopeObserver( child: AutofillGroup( - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Column( - children: [ - Wrap( + child: Column( + children: [ + Padding( + padding: const EdgeInsets.all(8.0), + child: Wrap( // mainAxisAlignment: MainAxisAlignment.center, spacing: 10, runAlignment: WrapAlignment.center, @@ -174,10 +174,11 @@ class UserLoginMultipleAuth extends HookConsumerWidget { ), ], ), - const SizedBox.square( - dimension: 8, - ), - switch (methodChoice.value) { + ), + + Padding( + padding: const EdgeInsets.all(8.0), + child: switch (methodChoice.value) { AuthMethodChoice.authToken => UserLoginWithToken( server: server, addServer: addServer, @@ -192,8 +193,8 @@ class UserLoginMultipleAuth extends HookConsumerWidget { openIDButtonText: openIDButtonText, ), }, - ], - ), + ), + ], ), ), ), diff --git a/lib/features/onboarding/view/user_login_with_password.dart b/lib/features/onboarding/view/user_login_with_password.dart index 7628959..533b37b 100644 --- a/lib/features/onboarding/view/user_login_with_password.dart +++ b/lib/features/onboarding/view/user_login_with_password.dart @@ -29,6 +29,7 @@ class UserLoginWithPassword extends HookConsumerWidget { final usernameController = useTextEditingController(); final passwordController = useTextEditingController(); final isPasswordVisibleAnimationController = useAnimationController( + initialValue: 1, duration: const Duration(milliseconds: 500), ); @@ -92,76 +93,73 @@ class UserLoginWithPassword extends HookConsumerWidget { return Center( child: InactiveFocusScopeObserver( child: AutofillGroup( - 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 - .onSurface - .withOpacity(0.8), - ), - border: const OutlineInputBorder(), + 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 + .onSurface + .withOpacity(0.8), ), + border: const OutlineInputBorder(), ), - const SizedBox(height: 10), - TextFormField( - controller: passwordController, - autofillHints: const [AutofillHints.password], - textInputAction: TextInputAction.done, - obscureText: !isPasswordVisible.value, - onFieldSubmitted: (_) { - loginAndSave(); - }, - decoration: InputDecoration( - labelText: 'Password', - labelStyle: TextStyle( - color: Theme.of(context) - .colorScheme - .onSurface - .withOpacity(0.8), + ), + const SizedBox(height: 10), + TextFormField( + controller: passwordController, + autofillHints: const [AutofillHints.password], + textInputAction: TextInputAction.done, + obscureText: !isPasswordVisible.value, + onFieldSubmitted: (_) { + loginAndSave(); + }, + decoration: InputDecoration( + labelText: 'Password', + labelStyle: TextStyle( + color: Theme.of(context) + .colorScheme + .onSurface + .withOpacity(0.8), + ), + border: const OutlineInputBorder(), + suffixIcon: ColorFiltered( + colorFilter: ColorFilter.mode( + Theme.of(context).colorScheme.primary.withOpacity(0.8), + BlendMode.srcIn, ), - 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, - ), + 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: loginAndSave, - child: const Text('Login'), - ), - ], - ), + ), + const SizedBox(height: 30), + ElevatedButton( + onPressed: loginAndSave, + child: const Text('Login'), + ), + ], ), ), ), diff --git a/shelfsdk b/shelfsdk index ac8e94d..5cc545c 160000 --- a/shelfsdk +++ b/shelfsdk @@ -1 +1 @@ -Subproject commit ac8e94df7b28c4334165a11c3b445cd0cc497495 +Subproject commit 5cc545ca87c05615473ab9c363cfa29e341d1e2a