From 85dc5b1a4dbd0d3b78e46c5933fc88261f9dd2d9 Mon Sep 17 00:00:00 2001 From: istalri Date: Fri, 5 Jun 2026 17:28:53 -0400 Subject: [PATCH] better login flow Co-authored-by: Henry-Hiles --- lib/controllers/client_controller.dart | 4 +- lib/helpers/required_validator_helper.dart | 2 + lib/main.dart | 4 +- lib/pages/login_page.dart | 248 ++++++--------------- lib/pages/select_server_page.dart | 169 ++++++++++++++ lib/pages/verify_page.dart | 94 ++++---- lib/widgets/form_text_input.dart | 81 ------- lib/widgets/join_dialog.dart | 7 +- lib/widgets/room_chat.dart | 19 +- lib/widgets/user_popover.dart | 10 +- 10 files changed, 301 insertions(+), 337 deletions(-) create mode 100644 lib/helpers/required_validator_helper.dart create mode 100644 lib/pages/select_server_page.dart delete mode 100644 lib/widgets/form_text_input.dart diff --git a/lib/controllers/client_controller.dart b/lib/controllers/client_controller.dart index 5558beb..fb57735 100644 --- a/lib/controllers/client_controller.dart +++ b/lib/controllers/client_controller.dart @@ -261,12 +261,12 @@ class ClientController extends AsyncNotifier { } } - Future discoverHomeserver(Uri homeserver) async { + Future discoverHomeserver(Uri homeserver) async { try { final response = await _sendCommand("discover_homeserver", { "user_id": "@fake-user:${homeserver.host}", }); - return response["m.homeserver"]?["base_url"]; + return Uri.parse(response["m.homeserver"]?["base_url"]); } catch (error) { return null; } diff --git a/lib/helpers/required_validator_helper.dart b/lib/helpers/required_validator_helper.dart new file mode 100644 index 0000000..d243684 --- /dev/null +++ b/lib/helpers/required_validator_helper.dart @@ -0,0 +1,2 @@ +String? requiredValidator(String? value) => + value == null || value.isEmpty ? "This field is required" : null; diff --git a/lib/main.dart b/lib/main.dart index dcf7b67..dab4e16 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -11,7 +11,7 @@ import "package:nexus/controllers/shared_prefs_controller.dart"; import "package:nexus/helpers/extensions/better_when.dart"; import "package:nexus/helpers/extensions/scheme_to_theme.dart"; import "package:nexus/pages/chat_page.dart"; -import "package:nexus/pages/login_page.dart"; +import "package:nexus/pages/select_server_page.dart"; import "package:nexus/pages/verify_page.dart"; import "package:nexus/widgets/error_dialog.dart"; import "package:nexus/widgets/loading.dart"; @@ -124,7 +124,7 @@ class App extends StatelessWidget { } if (!clientState.isLoggedIn) { - return LoginPage(); + return SelectServerPage(); } else if (!clientState.isVerified) { return VerifyPage(); } else { diff --git a/lib/pages/login_page.dart b/lib/pages/login_page.dart index 58662f4..4969287 100644 --- a/lib/pages/login_page.dart +++ b/lib/pages/login_page.dart @@ -1,205 +1,95 @@ import "package:flutter/material.dart"; import "package:flutter_hooks/flutter_hooks.dart"; -import "package:flutter_svg/flutter_svg.dart"; import "package:hooks_riverpod/hooks_riverpod.dart"; import "package:nexus/controllers/client_controller.dart"; -import "package:nexus/helpers/launch_helper.dart"; -import "package:nexus/models/homeserver.dart"; import "package:nexus/widgets/appbar.dart"; -import "package:nexus/widgets/divider_text.dart"; -import "package:nexus/widgets/loading.dart"; +import "package:nexus/helpers/required_validator_helper.dart"; class LoginPage extends HookConsumerWidget { - const LoginPage({super.key}); + final Uri homeserver; + const LoginPage({super.key, required this.homeserver}); @override Widget build(BuildContext context, WidgetRef ref) { - final theme = Theme.of(context); final client = ref.watch(ClientController.provider.notifier); final isLoading = useState(false); - final homeserver = useState(null); - - final launch = ref.watch(LaunchHelper.provider).launchUrl; - - Future setHomeserver(Uri? newHomeserver) async { - isLoading.value = true; - - homeserver.value = newHomeserver == null - ? null - : await client.discoverHomeserver( - newHomeserver.hasScheme - ? newHomeserver - : Uri.https(newHomeserver.path), - ); - - if (homeserver.value == null && context.mounted) { - ScaffoldMessenger.of(context).showSnackBar( - .new( - content: Text( - "Homeserver verification failed. Is your homeserver down?", - style: TextStyle(color: theme.colorScheme.onErrorContainer), - ), - backgroundColor: theme.colorScheme.errorContainer, - ), - ); - } - isLoading.value = false; - } - - final homeserverUrl = useTextEditingController(); final username = useTextEditingController(); final password = useTextEditingController(); + final inputError = useState(null); + final formKey = useRef(GlobalKey()); + + Future tryLogin() async { + isLoading.value = true; + + try { + if (formKey.value.currentState?.validate() != true) return; + + final error = await client.login( + .new( + username: username.text, + password: password.text, + homeserverUrl: homeserver.origin, + ), + ); + + if (error != null) { + inputError.value = error; + isLoading.value = false; + } else { + if (context.mounted) Navigator.of(context).pop(); + } + } finally { + isLoading.value = false; + } + } + return Scaffold( - appBar: Appbar(), - body: Center( - child: ConstrainedBox( - constraints: .new(maxWidth: 600), - child: ListView( - padding: .symmetric(horizontal: 16, vertical: 64), + appBar: Appbar( + leading: IconButton( + icon: Icon(Icons.arrow_back), + onPressed: Navigator.of(context).pop, + ), + ), + body: AlertDialog( + title: Text("Login to ${homeserver.host}"), + content: Form( + key: formKey.value, + child: Column( + mainAxisSize: .min, + crossAxisAlignment: .start, children: [ - Row( - children: [ - SvgPicture.asset("assets/icon.svg", width: 128), - SizedBox(width: 12), - Expanded( - child: Column( - crossAxisAlignment: .start, - children: [ - Text("Nexus", style: theme.textTheme.displayMedium), - Text( - "A Simple Matrix Client", - style: theme.textTheme.headlineMedium, - overflow: .ellipsis, - ), - ], - ), - ), - ], + TextFormField( + autofocus: true, + textInputAction: .next, + autovalidateMode: .onUserInteraction, + validator: requiredValidator, + decoration: .new(label: Text("Username")), + controller: username, ), - Padding(padding: .symmetric(vertical: 12), child: Divider()), - - DividerText("Enter a homeserver domain:"), - Row( - spacing: 8, - children: [ - Expanded( - child: TextField( - controller: homeserverUrl, - decoration: .new( - labelText: "Homeserver URL (e.g. matrix.org)", - ), - ), - ), - IconButton.filled( - tooltip: "Confirm homeserver choice", - onPressed: isLoading.value - ? null - : () => setHomeserver(.tryParse(homeserverUrl.text)), - icon: Icon(Icons.check), - ), - ], + SizedBox(height: 12), + TextFormField( + textInputAction: .done, + decoration: .new( + label: Text("Password"), + errorText: inputError.value, + errorMaxLines: 5, + ), + autovalidateMode: .onUserInteraction, + validator: requiredValidator, + controller: password, + obscureText: true, ), - - DividerText("Or, choose from some popular homeservers:"), - ...([ - .new( - name: "Matrix.org", - description: - "The Matrix.org Foundation offers the matrix.org homeserver as an easy entry point for anyone wanting to try out Matrix.", - url: .https("matrix.org"), - iconUrl: - "https://raw.githubusercontent.com/element-hq/logos/refs/heads/master/matrix/matrix-favicon${Theme.brightnessOf(context) == Brightness.dark ? "-white" : ""}.png", - ), - .new( - name: "Federated Nexus", - description: - "Federated Nexus is a community resource hosting multiple FOSS (especially federated) services, including Matrix and Forgejo. By the same developers who made Nexus client.", - url: .https("federated.nexus"), - iconUrl: "https://federated.nexus/images/icon.png", - ), - .new( - name: "Unredacted", - description: - "Unredacted is a 501(c)(3) non-profit organization that builds Internet infrastructure and services to help people evade censorship and protect their right to privacy.", - url: .https("unredacted.org", "services/si/matrix"), - iconUrl: "https://unredacted.org/favicon.ico", - ), - ].map( - (homeserver) => Card( - child: ListTile( - title: Text(homeserver.name), - leading: Image.network( - homeserver.iconUrl, - errorBuilder: (_, _, _) => SizedBox.shrink(), - height: 32, - ), - subtitle: Text(homeserver.description), - onTap: isLoading.value - ? null - : () => setHomeserver(homeserver.url), - trailing: IconButton( - tooltip: "Launch homeserver info page", - onPressed: () => launch(homeserver.url), - icon: Icon(Icons.info_outline), - ), - ), - ), - )), - SizedBox(height: 8), - TextButton( - onPressed: () => launch(.https("servers.joinmatrix.org")), - child: Text("See more homeservers..."), - ), - if (isLoading.value) - Padding(padding: .only(top: 32), child: Loading()) - else if (homeserver.value != null) ...[ - DividerText("Then, sign in:"), - SizedBox(height: 4), - TextField( - decoration: .new(label: Text("Username")), - controller: username, - ), - SizedBox(height: 12), - TextField( - decoration: .new(label: Text("Password")), - controller: password, - obscureText: true, - ), - SizedBox(height: 12), - ElevatedButton( - onPressed: () async { - isLoading.value = true; - final error = await client.login( - .new( - username: username.text, - password: password.text, - homeserverUrl: homeserver.value!, - ), - ); - - if (error != null && context.mounted) { - ScaffoldMessenger.of(context).showSnackBar( - .new( - content: Text( - "Login failed. Is your password right?\nError: $error", - style: .new( - color: theme.colorScheme.onErrorContainer, - ), - ), - backgroundColor: theme.colorScheme.errorContainer, - ), - ); - isLoading.value = false; - } - }, - child: Text("Sign In"), - ), - ], ], ), ), + actions: [ + TextButton( + onPressed: isLoading.value ? null : tryLogin, + child: Text("Sign In"), + ), + ], ), ); } diff --git a/lib/pages/select_server_page.dart b/lib/pages/select_server_page.dart new file mode 100644 index 0000000..f0e7dff --- /dev/null +++ b/lib/pages/select_server_page.dart @@ -0,0 +1,169 @@ +import "package:flutter/material.dart"; +import "package:flutter_hooks/flutter_hooks.dart"; +import "package:flutter_svg/flutter_svg.dart"; +import "package:hooks_riverpod/hooks_riverpod.dart"; +import "package:nexus/controllers/client_controller.dart"; +import "package:nexus/helpers/launch_helper.dart"; +import "package:nexus/models/homeserver.dart"; +import "package:nexus/pages/login_page.dart"; +import "package:nexus/widgets/appbar.dart"; +import "package:nexus/widgets/divider_text.dart"; + +class SelectServerPage extends HookConsumerWidget { + const SelectServerPage({super.key}); + + @override + Widget build(BuildContext context, WidgetRef ref) { + final theme = Theme.of(context); + + final launch = ref.watch(LaunchHelper.provider).launchUrl; + + final isLoading = useState(false); + final homeserverUrl = useTextEditingController(); + + Future setHomeserver(Uri? newHomeserver) async { + isLoading.value = true; + + try { + if (newHomeserver?.hasScheme == false) { + newHomeserver = Uri.https(newHomeserver!.path); + } + + final newUrl = newHomeserver == null + ? null + : await ref + .watch(ClientController.provider.notifier) + .discoverHomeserver(newHomeserver); + + if (context.mounted) { + if (newUrl == null) { + ScaffoldMessenger.of(context).showSnackBar( + SnackBar( + content: Text( + "Homeserver verification failed. Is your homeserver down?", + style: .new(color: theme.colorScheme.onErrorContainer), + ), + backgroundColor: theme.colorScheme.errorContainer, + ), + ); + } else { + await Navigator.of(context).push( + MaterialPageRoute(builder: (_) => LoginPage(homeserver: newUrl)), + ); + } + } + } finally { + isLoading.value = false; + } + } + + return Scaffold( + appBar: Appbar(), + body: Center( + child: ConstrainedBox( + constraints: .new(maxWidth: 600), + child: ListView( + children: [ + Row( + children: [ + SvgPicture.asset("assets/icon.svg", width: 128), + SizedBox(width: 12), + Expanded( + child: Column( + crossAxisAlignment: .start, + children: [ + Text("Nexus", style: theme.textTheme.displayMedium), + Text( + "A Simple Matrix Client", + style: theme.textTheme.headlineMedium, + overflow: .ellipsis, + ), + ], + ), + ), + ], + ), + Padding(padding: .symmetric(vertical: 12), child: Divider()), + DividerText("Enter a homeserver domain:"), + Row( + spacing: 8, + children: [ + Expanded( + child: TextField( + textInputAction: .done, + autofocus: true, + onSubmitted: (text) => setHomeserver(.tryParse(text)), + controller: homeserverUrl, + decoration: .new( + labelText: "Homeserver URL", + hintText: "matrix.org", + ), + ), + ), + IconButton.filled( + tooltip: "Confirm homeserver choice", + onPressed: isLoading.value + ? null + : () => setHomeserver(.tryParse(homeserverUrl.text)), + icon: Icon(Icons.check), + ), + ], + ), + DividerText("Or, choose from some popular homeservers:"), + ...([ + .new( + name: "Matrix.org", + description: + "The Matrix.org Foundation offers the matrix.org homeserver as an easy entry point for anyone wanting to try out Matrix.", + url: .https("matrix.org"), + iconUrl: + "https://raw.githubusercontent.com/element-hq/logos/refs/heads/master/matrix/matrix-favicon${Theme.brightnessOf(context) == Brightness.dark ? "-white" : ""}.png", + ), + .new( + name: "Federated Nexus", + description: + "Federated Nexus is a community resource hosting multiple FOSS (especially federated) services, including Matrix and Forgejo. By the same developers who made Nexus client.", + url: .https("federated.nexus"), + iconUrl: "https://federated.nexus/images/icon.png", + ), + .new( + name: "Unredacted", + description: + "Unredacted is a 501(c)(3) non-profit organization that builds Internet infrastructure and services to help people evade censorship and protect their right to privacy.", + url: .https("unredacted.org", "services/si/matrix"), + iconUrl: "https://unredacted.org/favicon.ico", + ), + ].map( + (homeserver) => Card( + child: ListTile( + enabled: !isLoading.value, + title: Text(homeserver.name), + leading: Image.network( + homeserver.iconUrl, + errorBuilder: (_, _, _) => SizedBox.shrink(), + height: 32, + ), + subtitle: Text(homeserver.description), + onTap: isLoading.value + ? null + : () => setHomeserver(homeserver.url), + trailing: IconButton( + tooltip: "Launch homeserver info page", + onPressed: () => launch(homeserver.url), + icon: Icon(Icons.info_outline), + ), + ), + ), + )), + + TextButton( + onPressed: () => launch(.https("servers.joinmatrix.org")), + child: Text("See more homeservers..."), + ), + ], + ), + ), + ), + ); + } +} diff --git a/lib/pages/verify_page.dart b/lib/pages/verify_page.dart index 0469fa4..a2089e3 100644 --- a/lib/pages/verify_page.dart +++ b/lib/pages/verify_page.dart @@ -3,7 +3,7 @@ import "package:flutter_hooks/flutter_hooks.dart"; import "package:hooks_riverpod/hooks_riverpod.dart"; import "package:nexus/controllers/client_controller.dart"; import "package:nexus/widgets/appbar.dart"; -import "package:nexus/widgets/form_text_input.dart"; +import "package:nexus/helpers/required_validator_helper.dart"; class VerifyPage extends HookConsumerWidget { const VerifyPage({super.key}); @@ -11,70 +11,56 @@ class VerifyPage extends HookConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { final passphraseController = useTextEditingController(); - final isVerifying = useState(false); + final isLoading = useState(false); + final inputError = useState(null); + final formKey = useRef(GlobalKey()); + return Scaffold( appBar: Appbar(), body: AlertDialog( title: Text("Verify"), - content: Column( - mainAxisSize: .min, - crossAxisAlignment: .start, - children: [ - Text( - "Enter your recovery key or passphrase below to unlock encrypted events.\nYour passphrase is usually not the same as your password.", - ), - SizedBox(height: 12), - FormTextInput( - required: false, - autofocus: true, - capitalize: true, - controller: passphraseController, - obscure: true, - title: "Recovery Key or Passphrase", - ), - ], + content: Form( + key: formKey.value, + child: Column( + mainAxisSize: .min, + crossAxisAlignment: .start, + children: [ + Text( + "Enter your recovery key or passphrase below to unlock encrypted events.\nYour passphrase is usually not the same as your password.", + ), + SizedBox(height: 12), + TextFormField( + autofocus: true, + controller: passphraseController, + textInputAction: .done, + autovalidateMode: .onUserInteraction, + validator: requiredValidator, + obscureText: true, + decoration: .new( + label: Text("Recovery Key or Passphrase"), + errorText: inputError.value, + ), + ), + ], + ), ), actions: [ TextButton( - onPressed: isVerifying.value + onPressed: isLoading.value ? null : () async { - final scaffoldMessenger = ScaffoldMessenger.of(context); - final snackbar = scaffoldMessenger.showSnackBar( - .new( - content: Text( - "Attempting to verify with recovery key...", - ), - duration: .new(days: 999), - ), - ); + isLoading.value = true; - isVerifying.value = true; - - final error = await ref - .watch(ClientController.provider.notifier) - .verify(passphraseController.text); - - snackbar.close(); - if (error != null) { - isVerifying.value = false; - if (context.mounted) { - scaffoldMessenger.showSnackBar( - .new( - backgroundColor: Theme.of( - context, - ).colorScheme.errorContainer, - content: Text( - "Verification failed. Is your passphrase correct?\nError: $error", - style: .new( - color: Theme.of( - context, - ).colorScheme.onErrorContainer, - ), - ), - ), - ); + try { + if (formKey.value.currentState?.validate() != true) { + return; } + + inputError.value = await ref + .watch(ClientController.provider.notifier) + .verify(passphraseController.text); + } finally { + isLoading.value = false; } }, child: Text("Verify"), diff --git a/lib/widgets/form_text_input.dart b/lib/widgets/form_text_input.dart deleted file mode 100644 index 8b48883..0000000 --- a/lib/widgets/form_text_input.dart +++ /dev/null @@ -1,81 +0,0 @@ -import "package:flutter/material.dart"; -import "package:flutter/services.dart"; - -class FormTextInput extends StatelessWidget { - final List extraValidators; - final TextEditingController? controller; - final TextInputType keyboardType; - final String? initialValue; - final bool readOnly; - final bool obscure; - final String? title; - final int? minLines; - final int? maxLength; - final bool outlined; - final int? maxLines; - final bool capitalize; - final bool required; - final bool autocorrect; - final void Function()? onTap; - final Widget? trailing; - final InputBorder? border; - final List? formatters; - final bool autofocus; - - const FormTextInput({ - super.key, - this.border, - this.controller, - this.autofocus = false, - this.title, - this.obscure = false, - this.readOnly = false, - this.extraValidators = const [], - this.keyboardType = TextInputType.text, - this.initialValue, - this.minLines, - this.capitalize = false, - this.maxLength, - this.formatters, - this.maxLines = 1, - this.outlined = true, - this.trailing, - this.onTap, - this.autocorrect = true, - this.required = true, - }); - - @override - Widget build(BuildContext context) => TextFormField( - autofocus: autofocus, - controller: controller, - keyboardType: keyboardType, - readOnly: readOnly, - minLines: minLines, - maxLines: maxLines, - maxLength: maxLength, - inputFormatters: formatters, - textCapitalization: capitalize ? .sentences : .none, - initialValue: initialValue, - autocorrect: autocorrect, - obscureText: obscure, - onTap: onTap, - decoration: .new( - labelText: title, - border: border ?? (outlined ? null : const UnderlineInputBorder()), - suffixIcon: trailing, - ), - validator: (value) { - if ((value?.isEmpty ?? true) && required) { - return "This field is required"; - } - - for (final validator in extraValidators) { - final reason = validator(value!); - if (reason != null) return reason; - } - - return null; - }, - ); -} diff --git a/lib/widgets/join_dialog.dart b/lib/widgets/join_dialog.dart index e20ab2a..d265595 100644 --- a/lib/widgets/join_dialog.dart +++ b/lib/widgets/join_dialog.dart @@ -6,7 +6,6 @@ import "package:nexus/controllers/client_controller.dart"; import "package:nexus/controllers/key_controller.dart"; import "package:nexus/controllers/spaces_controller.dart"; import "package:nexus/helpers/extensions/link_to_mention.dart"; -import "package:nexus/widgets/form_text_input.dart"; class JoinDialog extends HookWidget { final WidgetRef ref; @@ -23,11 +22,9 @@ class JoinDialog extends HookWidget { children: [ Text("Enter the room alias, Matrix URI, or Matrix.to link."), SizedBox(height: 12), - FormTextInput( - required: false, - capitalize: true, + TextField( controller: roomAlias, - title: "#room:server", + decoration: .new(hintText: "#room:server"), ), ], ), diff --git a/lib/widgets/room_chat.dart b/lib/widgets/room_chat.dart index 9e3d281..beab387 100644 --- a/lib/widgets/room_chat.dart +++ b/lib/widgets/room_chat.dart @@ -22,7 +22,6 @@ import "package:nexus/widgets/member_list.dart"; import "package:nexus/widgets/room_appbar.dart"; import "package:nexus/widgets/flash_wrapper.dart"; import "package:nexus/widgets/error_dialog.dart"; -import "package:nexus/widgets/form_text_input.dart"; import "package:nexus/main.dart"; import "package:nexus/widgets/loading.dart"; import "package:super_sliver_list/super_sliver_list.dart"; @@ -288,11 +287,12 @@ class RoomChat extends HookConsumerWidget { "Are you sure you want to delete this message? This can not be reversed.", ), SizedBox(height: 12), - FormTextInput( - required: false, - capitalize: true, + TextField( controller: deleteReasonController, - title: "Reason for deletion (optional)", + textCapitalization: .sentences, + decoration: .new( + labelText: "Reason for deletion (optional)", + ), ), ], ), @@ -340,11 +340,12 @@ class RoomChat extends HookConsumerWidget { ), SizedBox(height: 12), - FormTextInput( - required: false, - capitalize: true, + TextField( controller: reasonController, - title: "Reason for report (optional)", + textCapitalization: .sentences, + decoration: .new( + labelText: "Reason for report (optional)", + ), ), ], ), diff --git a/lib/widgets/user_popover.dart b/lib/widgets/user_popover.dart index 65fff87..97d88c4 100644 --- a/lib/widgets/user_popover.dart +++ b/lib/widgets/user_popover.dart @@ -14,7 +14,6 @@ import "package:nexus/models/requests/membership_action.dart"; import "package:nexus/widgets/avatar_or_hash.dart"; import "package:nexus/main.dart"; import "package:nexus/widgets/expandable_image.dart"; -import "package:nexus/widgets/form_text_input.dart"; class UserPopover extends ConsumerWidget { final MembershipContent member; @@ -41,11 +40,12 @@ class UserPopover extends ConsumerWidget { children: [ Text("Are you sure you want to ${action.name} $userId?"), SizedBox(height: 12), - FormTextInput( - required: false, - capitalize: true, + TextField( + textCapitalization: .sentences, controller: actionReasonController, - title: "Reason for ${action.name} (optional)", + decoration: .new( + labelText: "Reason for ${action.name} (optional)", + ), ), ], ),