WIP - Redesigned login flow

lib/features/login/view/login_page.dart

@@ -2,14 +2,17 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_form_builder/flutter_form_builder.dart';
 import 'package:paperless_api/paperless_api.dart';
-import 'package:paperless_mobile/extensions/flutter_extensions.dart';
 import 'package:paperless_mobile/features/login/bloc/authentication_cubit.dart';
 import 'package:paperless_mobile/features/login/view/widgets/client_certificate_form_field.dart';
 import 'package:paperless_mobile/features/login/view/widgets/server_address_form_field.dart';
+import 'package:paperless_mobile/features/login/view/widgets/server_connection_page.dart';
 import 'package:paperless_mobile/features/login/view/widgets/user_credentials_form_field.dart';
 import 'package:paperless_mobile/generated/l10n.dart';
 import 'package:paperless_mobile/util.dart';
 
+import 'widgets/never_scrollable_scroll_behavior.dart';
+import 'widgets/server_login_page.dart';
+
 class LoginPage extends StatefulWidget {
   const LoginPage({Key? key}) : super(key: key);
 
@@ -20,53 +23,73 @@ class LoginPage extends StatefulWidget {
 class _LoginPageState extends State<LoginPage> {
   final _formKey = GlobalKey<FormBuilderState>();
 
-  bool _isLoginLoading = false;
+  final PageController _pageController = PageController();
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      resizeToAvoidBottomInset: true,
-      appBar: AppBar(
-        title: Text(S.of(context).loginPageTitle),
-        bottom: _isLoginLoading
-            ? const PreferredSize(
-                preferredSize: Size(double.infinity, 4),
-                child: LinearProgressIndicator(),
-              )
-            : null,
-      ),
-      body: Padding(
-        padding: const EdgeInsets.all(8.0),
-        child: FormBuilder(
-          key: _formKey,
-          child: ListView(
-            children: [
-              const ServerAddressFormField().padded(),
-              const UserCredentialsFormField(),
-              Align(
-                alignment: Alignment.centerLeft,
-                child: Padding(
-                  padding: const EdgeInsets.only(top: 16.0),
-                  child: Text(
-                    S.of(context).loginPageAdvancedLabel,
-                    style: Theme.of(context).textTheme.bodyLarge,
-                  ).padded(),
-                ),
-              ),
-              const ClientCertificateFormField(),
-              LayoutBuilder(builder: (context, constraints) {
-                return Padding(
-                  padding: const EdgeInsets.all(8.0),
-                  child: SizedBox(
-                    width: constraints.maxWidth,
-                    child: _buildLoginButton(),
-                  ),
-                );
-              }),
-            ],
-          ),
+      resizeToAvoidBottomInset: false, // appBar: AppBar(
+      //   title: Text(S.of(context).loginPageTitle),
+      //   bottom: _isLoginLoading
+      //       ? const PreferredSize(
+      //           preferredSize: Size(double.infinity, 4),
+      //           child: LinearProgressIndicator(),
+      //         )
+      //       : null,
+      // ),
+      body: FormBuilder(
+        key: _formKey,
+        child: PageView(
+          controller: _pageController,
+          scrollBehavior: NeverScrollableScrollBehavior(),
+          children: [
+            ServerConnectionPage(
+              formBuilderKey: _formKey,
+              onContinue: () {
+                _pageController.nextPage(
+                    duration: const Duration(milliseconds: 300),
+                    curve: Curves.easeInOut);
+              },
+            ),
+            ServerLoginPage(
+              formBuilderKey: _formKey,
+              onDone: _login,
+            ),
+          ],
         ),
       ),
+      // Padding(
+      //   padding: const EdgeInsets.all(8.0),
+      //   child: FormBuilder(
+      //     key: _formKey,
+      //     child: ListView(
+      //       children: [
+      //         const ServerAddressFormField().padded(),
+      //         const UserCredentialsFormField(),
+      //         Align(
+      //           alignment: Alignment.centerLeft,
+      //           child: Padding(
+      //             padding: const EdgeInsets.only(top: 16.0),
+      //             child: Text(
+      //               S.of(context).loginPageAdvancedLabel,
+      //               style: Theme.of(context).textTheme.bodyLarge,
+      //             ).padded(),
+      //           ),
+      //         ),
+      //         const ClientCertificateFormField(),
+      //         LayoutBuilder(builder: (context, constraints) {
+      //           return Padding(
+      //             padding: const EdgeInsets.all(8.0),
+      //             child: SizedBox(
+      //               width: constraints.maxWidth,
+      //               child: _buildLoginButton(),
+      //             ),
+      //           );
+      //         }),
+      //       ],
+      //     ),
+      //   ),
+      // ),
     );
   }
 
@@ -89,7 +112,6 @@ class _LoginPageState extends State<LoginPage> {
   void _login() async {
     FocusScope.of(context).unfocus();
     if (_formKey.currentState?.saveAndValidate() ?? false) {
-      setState(() => _isLoginLoading = true);
       final form = _formKey.currentState!.value;
       try {
         await context.read<AuthenticationCubit>().login(
@@ -104,9 +126,7 @@ class _LoginPageState extends State<LoginPage> {
         showGenericError(context, error.values.first, stackTrace);
       } catch (unknownError, stackTrace) {
         showGenericError(context, unknownError.toString(), stackTrace);
-      } finally {
-        setState(() => _isLoginLoading = false);
-      }
+      } finally {}
     }
   }
 }

lib/features/login/view/widgets/client_certificate_form_field.dart

@@ -10,7 +10,12 @@ import 'package:paperless_mobile/generated/l10n.dart';
 
 class ClientCertificateFormField extends StatefulWidget {
   static const fkClientCertificate = 'clientCertificate';
-  const ClientCertificateFormField({Key? key}) : super(key: key);
+
+  final void Function(ClientCertificate? cert) onChanged;
+  const ClientCertificateFormField({
+    Key? key,
+    required this.onChanged,
+  }) : super(key: key);
 
   @override
   State<ClientCertificateFormField> createState() =>
@@ -19,11 +24,13 @@ class ClientCertificateFormField extends StatefulWidget {
 
 class _ClientCertificateFormFieldState
     extends State<ClientCertificateFormField> {
+  RestorableString? _selectedFilePath;
   File? _selectedFile;
   @override
   Widget build(BuildContext context) {
     return FormBuilderField<ClientCertificate?>(
       key: const ValueKey('login-client-cert'),
+      onChanged: widget.onChanged,
       initialValue: null,
       validator: (value) {
         if (value == null) {
@@ -38,54 +45,59 @@ class _ClientCertificateFormFieldState
         return null;
       },
       builder: (field) {
-        return ExpansionTile(
-          title: Text(S.of(context).loginPageClientCertificateSettingLabel),
-          subtitle: Text(
-              S.of(context).loginPageClientCertificateSettingDescriptionText),
-          children: [
-            InputDecorator(
-              decoration: InputDecoration(
-                errorText: field.errorText,
-                border: InputBorder.none,
-              ),
-              child: Column(
-                children: [
-                  ListTile(
-                    leading: ElevatedButton(
-                      onPressed: () => _onSelectFile(field),
-                      child: Text(S.of(context).genericActionSelectText),
-                    ),
-                    title: _buildSelectedFileText(field),
-                    trailing: AbsorbPointer(
-                      absorbing: field.value == null,
-                      child: _selectedFile != null
-                          ? IconButton(
-                              icon: const Icon(Icons.close),
-                              onPressed: () => setState(() {
-                                _selectedFile = null;
-                                field.didChange(null);
-                              }),
-                            )
-                          : null,
-                    ),
-                  ),
-                  if (_selectedFile != null) ...[
-                    ObscuredInputTextFormField(
-                      key: const ValueKey('login-client-cert-passphrase'),
-                      initialValue: field.value?.passphrase,
-                      onChanged: (value) => field.didChange(
-                        field.value?.copyWith(passphrase: value),
+        final theme =
+            Theme.of(context).copyWith(dividerColor: Colors.transparent); //new
+        return Theme(
+          data: theme,
+          child: ExpansionTile(
+            title: Text(S.of(context).loginPageClientCertificateSettingLabel),
+            subtitle: Text(
+                S.of(context).loginPageClientCertificateSettingDescriptionText),
+            children: [
+              InputDecorator(
+                decoration: InputDecoration(
+                  errorText: field.errorText,
+                  border: InputBorder.none,
+                ),
+                child: Column(
+                  children: [
+                    ListTile(
+                      leading: ElevatedButton(
+                        onPressed: () => _onSelectFile(field),
+                        child: Text(S.of(context).genericActionSelectText),
                       ),
-                      label: S
-                          .of(context)
-                          .loginPageClientCertificatePassphraseLabel,
-                    ).padded(),
-                  ] else
-                    ...[]
-                ],
+                      title: _buildSelectedFileText(field),
+                      trailing: AbsorbPointer(
+                        absorbing: field.value == null,
+                        child: _selectedFile != null
+                            ? IconButton(
+                                icon: const Icon(Icons.close),
+                                onPressed: () => setState(() {
+                                  _selectedFile = null;
+                                  field.didChange(null);
+                                }),
+                              )
+                            : null,
+                      ),
+                    ),
+                    if (_selectedFile != null) ...[
+                      ObscuredInputTextFormField(
+                        key: const ValueKey('login-client-cert-passphrase'),
+                        initialValue: field.value?.passphrase,
+                        onChanged: (value) => field.didChange(
+                          field.value?.copyWith(passphrase: value),
+                        ),
+                        label: S
+                            .of(context)
+                            .loginPageClientCertificatePassphraseLabel,
+                      ).padded(),
+                    ] else
+                      ...[]
+                  ],
+                ),
               ),
-            ),
-          ],
+            ],
+          ),
         );
       },
       name: ClientCertificateFormField.fkClientCertificate,

lib/features/login/view/widgets/never_scrollable_scroll_behavior.dart

@@ -0,0 +1,8 @@
+import 'package:flutter/widgets.dart';
+
+class NeverScrollableScrollBehavior extends ScrollBehavior {
+  @override
+  ScrollPhysics getScrollPhysics(BuildContext context) {
+    return const NeverScrollableScrollPhysics();
+  }
+}

lib/features/login/view/widgets/server_address_form_field.dart

@@ -1,15 +1,18 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_form_builder/flutter_form_builder.dart';
-import 'package:paperless_mobile/core/service/connectivity_status.service.dart';
-import 'package:paperless_mobile/generated/l10n.dart';
 import 'package:form_builder_validators/form_builder_validators.dart';
+import 'package:paperless_mobile/core/service/connectivity_status_service.dart';
+import 'package:paperless_mobile/features/login/model/client_certificate.dart';
+import 'package:paperless_mobile/generated/l10n.dart';
 import 'package:provider/provider.dart';
 
 class ServerAddressFormField extends StatefulWidget {
   static const String fkServerAddress = "serverAddress";
+
+  final void Function(String address) onDone;
   const ServerAddressFormField({
     Key? key,
+    required this.onDone,
   }) : super(key: key);
 
   @override
@@ -17,13 +20,7 @@ class ServerAddressFormField extends StatefulWidget {
 }
 
 class _ServerAddressFormFieldState extends State<ServerAddressFormField> {
-  static const _ipv4Regex = r"((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}";
-  static const _ipv6Regex =
-      r"(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))";
-  static final _urlRegex = RegExp(
-      r"^(https?:\/\/)(([\da-z\.-]+)\.([a-z\.]{2,6})|(((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4})|((([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))))(:\d{1,5})?([\/\w \.-]*)*\/?$");
   final TextEditingController _textEditingController = TextEditingController();
-  ReachabilityStatus _reachabilityStatus = ReachabilityStatus.undefined;
 
   @override
   Widget build(BuildContext context) {
@@ -31,75 +28,25 @@ class _ServerAddressFormFieldState extends State<ServerAddressFormField> {
       key: const ValueKey('login-server-address'),
       controller: _textEditingController,
       name: ServerAddressFormField.fkServerAddress,
-      validator: FormBuilderValidators.compose(
-        [
-          FormBuilderValidators.required(
-            errorText:
-                S.of(context).loginPageServerUrlValidatorMessageRequiredText,
-          ),
-          FormBuilderValidators.match(
-            _urlRegex.pattern,
-            errorText: S
-                .of(context)
-                .loginPageServerUrlValidatorMessageInvalidAddressText,
-          ),
-        ],
+      validator: FormBuilderValidators.required(
+        errorText: S.of(context).loginPageServerUrlValidatorMessageRequiredText,
       ),
       decoration: InputDecoration(
-        suffixIcon: _buildIsReachableIcon(),
         hintText: "http://192.168.1.50:8000",
         labelText: S.of(context).loginPageServerUrlFieldLabel,
       ),
-      onChanged: _updateIsAddressReachableStatus,
       onSubmitted: (value) {
         if (value == null) return;
         // Remove trailing slash if it is a valid address.
-        final address = value.trim();
+        String address = value.trim();
+        address = _replaceTrailingSlashes(address);
         _textEditingController.text = address;
-        if (_urlRegex.hasMatch(address) && address.endsWith("/")) {
-          _textEditingController.text = address.replaceAll(RegExp(r'\/$'), '');
-        }
+        widget.onDone(address);
       },
     );
   }
 
-  Widget? _buildIsReachableIcon() {
-    switch (_reachabilityStatus) {
-      case ReachabilityStatus.reachable:
-        return const Icon(
-          Icons.done,
-          color: Colors.green,
-        );
-      case ReachabilityStatus.notReachable:
-        return Icon(
-          Icons.close,
-          color: Theme.of(context).colorScheme.error,
-        );
-      case ReachabilityStatus.testing:
-        return const RefreshProgressIndicator();
-      case ReachabilityStatus.undefined:
-        return null;
-    }
-  }
-
-  void _updateIsAddressReachableStatus(String? address) async {
-    if (address == null || !_urlRegex.hasMatch(address)) {
-      setState(() {
-        _reachabilityStatus = ReachabilityStatus.undefined;
-      });
-      return;
-    }
-    //https://stackoverflow.com/questions/49648022/check-whether-there-is-an-internet-connection-available-on-flutter-app
-    setState(() => _reachabilityStatus = ReachabilityStatus.testing);
-    final isReachable = await context
-        .read<ConnectivityStatusService>()
-        .isServerReachable(address.trim());
-    setState(
-      () => _reachabilityStatus = isReachable
-          ? ReachabilityStatus.reachable
-          : ReachabilityStatus.notReachable,
-    );
+  String _replaceTrailingSlashes(String src) {
+    return src.replaceAll(RegExp(r'^\/+|\/+$'), '');
   }
 }
-
-enum ReachabilityStatus { reachable, notReachable, testing, undefined }

lib/features/login/view/widgets/server_connection_page.dart

@@ -0,0 +1,133 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_form_builder/flutter_form_builder.dart';
+import 'package:paperless_mobile/core/service/connectivity_status_service.dart';
+import 'package:paperless_mobile/core/widgets/paperless_logo.dart';
+import 'package:paperless_mobile/extensions/flutter_extensions.dart';
+import 'package:paperless_mobile/features/login/model/reachability_status.dart';
+import 'package:paperless_mobile/features/login/view/widgets/client_certificate_form_field.dart';
+import 'package:paperless_mobile/features/login/view/widgets/server_address_form_field.dart';
+import 'package:paperless_mobile/generated/l10n.dart';
+import 'package:provider/provider.dart';
+
+class ServerConnectionPage extends StatefulWidget {
+  final GlobalKey<FormBuilderState> formBuilderKey;
+  final void Function() onContinue;
+
+  const ServerConnectionPage({
+    super.key,
+    required this.formBuilderKey,
+    required this.onContinue,
+  });
+
+  @override
+  State<ServerConnectionPage> createState() => _ServerConnectionPageState();
+}
+
+class _ServerConnectionPageState extends State<ServerConnectionPage> {
+  ReachabilityStatus _reachabilityStatus = ReachabilityStatus.unknown;
+
+  @override
+  Widget build(BuildContext context) {
+    final logoHeight = MediaQuery.of(context).size.width / 2;
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(S.of(context).loginPageTitle),
+      ),
+      resizeToAvoidBottomInset: true,
+      body: Column(
+        children: [
+          ServerAddressFormField(
+            onDone: (address) {
+              _updateReachability();
+            },
+          ).padded(),
+          ClientCertificateFormField(
+            onChanged: (_) => _updateReachability(),
+          ).padded(),
+          _buildStatusIndicator(),
+        ],
+      ).padded(),
+      bottomNavigationBar: BottomAppBar(
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.end,
+          children: [
+            FilledButton(
+              child: Text("Continue"),
+              onPressed: _reachabilityStatus == ReachabilityStatus.reachable
+                  ? widget.onContinue
+                  : null,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Future<void> _updateReachability() async {
+    final status = await context
+        .read<ConnectivityStatusService>()
+        .isPaperlessServerReachable(
+          widget.formBuilderKey.currentState!
+              .getRawValue(ServerAddressFormField.fkServerAddress),
+          widget.formBuilderKey.currentState?.getRawValue(
+            ClientCertificateFormField.fkClientCertificate,
+          ),
+        );
+    setState(() => _reachabilityStatus = status);
+  }
+
+  Widget _buildStatusIndicator() {
+    Color errorColor = Theme.of(context).colorScheme.error;
+    switch (_reachabilityStatus) {
+      case ReachabilityStatus.unknown:
+        return Container();
+      case ReachabilityStatus.reachable:
+        return _buildIconText(
+          Icons.done,
+          "Connection established.",
+          Colors.green,
+        );
+      case ReachabilityStatus.notReachable:
+        return _buildIconText(
+          Icons.close,
+          "Could not establish a connection to the server.",
+          errorColor,
+        );
+      case ReachabilityStatus.unknownHost:
+        return _buildIconText(
+          Icons.close,
+          "Host could not be resolved.",
+          errorColor,
+        );
+      case ReachabilityStatus.missingClientCertificate:
+        return _buildIconText(
+          Icons.close,
+          "A client certificate was expected but not sent. Please provide a certificate.",
+          errorColor,
+        );
+      case ReachabilityStatus.invalidClientCertificateConfiguration:
+        return _buildIconText(
+          Icons.close,
+          "Incorrect or missing client certificate passphrase.",
+          errorColor,
+        );
+    }
+  }
+
+  Widget _buildIconText(
+    IconData icon,
+    String text, [
+    Color? color,
+  ]) {
+    return ListTile(
+      title: Text(
+        text,
+        style: Theme.of(context).textTheme.bodySmall?.copyWith(color: color),
+      ),
+      leading: Icon(
+        icon,
+        color: color,
+      ),
+    );
+  }
+}

lib/features/login/view/widgets/server_login_page.dart

@@ -0,0 +1,49 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_form_builder/flutter_form_builder.dart';
+import 'package:paperless_mobile/extensions/flutter_extensions.dart';
+import 'package:paperless_mobile/features/login/view/widgets/server_address_form_field.dart';
+import 'package:paperless_mobile/features/login/view/widgets/user_credentials_form_field.dart';
+
+class ServerLoginPage extends StatefulWidget {
+  final VoidCallback onDone;
+  final GlobalKey<FormBuilderState> formBuilderKey;
+  const ServerLoginPage({
+    super.key,
+    required this.onDone,
+    required this.formBuilderKey,
+  });
+
+  @override
+  State<ServerLoginPage> createState() => _ServerLoginPageState();
+}
+
+class _ServerLoginPageState extends State<ServerLoginPage> {
+  @override
+  Widget build(BuildContext context) {
+    final serverAddress = (widget.formBuilderKey.currentState
+            ?.getRawValue(ServerAddressFormField.fkServerAddress) as String?)
+        ?.replaceAll(RegExp(r'https?://'), '');
+    return Scaffold(
+      appBar: AppBar(
+        title: Text("Sign In"),
+      ),
+      body: ListView(
+        children: [
+          Text("Sign in to $serverAddress").padded(),
+          UserCredentialsFormField(),
+        ],
+      ),
+      bottomNavigationBar: BottomAppBar(
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.end,
+          children: [
+            FilledButton(
+              onPressed: widget.onDone,
+              child: Text("Sign In"),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}