Server selection and login are on different pages. #33

Manually merged
Henry-Hiles merged 8 commits from istalri/nexus:better-login into better-login 2026-06-05 16:44:35 -04:00
5 changed files with 327 additions and 184 deletions

View file

@ -261,12 +261,12 @@ class ClientController extends AsyncNotifier<int> {
}
}
Future<String?> discoverHomeserver(Uri homeserver) async {
Future<Uri?> 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;
}

View file

@ -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) {
Henry-Hiles marked this conversation as resolved Outdated

you changed this to have two spaces between the ) and {, not sure why

you changed this to have two spaces between the ) and {, not sure why

yeah that one was probably an typo

yeah that one was probably an typo
return LoginPage();
return SelectServerPage();
} else if (!clientState.isVerified) {
Henry-Hiles marked this conversation as resolved Outdated

I don't think this logic needs to be changed this much. If you can keep the previous logic, but instead show ServerSelectPage instead of login, we can take a different approach to push the login.

I don't think this logic needs to be changed this much. If you can keep the previous logic, but instead show ServerSelectPage instead of login, we can take a different approach to push the login.
return VerifyPage();
} else {

View file

@ -1,206 +1,135 @@
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/models/requests/login_request.dart";
import "package:nexus/widgets/appbar.dart";
Henry-Hiles marked this conversation as resolved

Lets take in final Uri homeserver as an argument here, instead of using ClientStateController.

Lets take in `final Uri homeserver` as an argument here, instead of using `ClientStateController`.
import "package:nexus/widgets/divider_text.dart";
import "package:nexus/widgets/loading.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 isLoggingIn = useState(false);
final hasError = useState(false);
final passwordFocusNode = useFocusNode();
Henry-Hiles marked this conversation as resolved Outdated

This will be redundant when it takes in a URI.

This will be redundant when it takes in a URI.

These focusnodes shouldnt be needed. Perhaps we just need a Form()

These focusnodes shouldnt be needed. Perhaps we just need a `Form()`

TODO: This is still open but you said you wanted to look into it. Is this still the case?

TODO: This is still open but you said you wanted to look into it. Is this still the case?
final isLoading = useState(false);
final homeserver = useState<String?>(null);
final theme = Theme.of(context);
Henry-Hiles marked this conversation as resolved Outdated

Uh, no it's not. The "safe"/normal way is to set autofocus on the text field.

Uh, no it's not. The "safe"/normal way is to set `autofocus` on the text field.

Damn, alright learned something new. Stackoverlfow entries are probably too old :D

Damn, alright learned something new. Stackoverlfow entries are probably too old :D
final launch = ref.watch(LaunchHelper.provider).launchUrl;
final username = useTextEditingController();
final password = useTextEditingController();
Future<void> setHomeserver(Uri? newHomeserver) async {
isLoading.value = true;
Future<void> tryLogin() async {
if (isLoggingIn.value) return;
isLoggingIn.value = true;
hasError.value = false;
homeserver.value = newHomeserver == null
? null
: await client.discoverHomeserver(
newHomeserver.hasScheme
? newHomeserver
: Uri.https(newHomeserver.path),
);
final error = await client.login(
LoginRequest(
username: username.text,
password: password.text,
homeserverUrl: homeserver.origin,
),
);
if (homeserver.value == null && context.mounted) {
if (!context.mounted) return;
if (error != null) {
hasError.value = true;
ScaffoldMessenger.of(context).showSnackBar(
.new(
SnackBar(
content: Text(
"Homeserver verification failed. Is your homeserver down?",
"Login failed. Is your password right?\nError: $error",
style: TextStyle(color: theme.colorScheme.onErrorContainer),
),
backgroundColor: theme.colorScheme.errorContainer,
),
);
isLoggingIn.value = false;
} else {
Navigator.of(context).pop();
}
isLoading.value = false;
passwordFocusNode.requestFocus();
isLoggingIn.value = false;
}
final homeserverUrl = useTextEditingController();
final username = useTextEditingController();
final password = useTextEditingController();
return Scaffold(
appBar: Appbar(),
body: Center(
child: ConstrainedBox(
constraints: .new(maxWidth: 600),
child: ListView(
padding: .symmetric(horizontal: 16, vertical: 64),
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(
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),
),
],
),
DividerText("Or, choose from some popular homeservers:"),
...(<Homeserver>[
.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"),
),
],
],
),
appBar: Appbar(
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: Navigator.of(context).pop,
istalri marked this conversation as resolved Outdated
- onPressed: () => Navigator.pop(context),
+ onPressed: Navigator.of(context).pop,
```diff - onPressed: () => Navigator.pop(context), + onPressed: Navigator.of(context).pop, ```
istalri marked this conversation as resolved Outdated
- onPressed: () => Navigator.of(context).pop(),
+ onPressed: Navigator.of(context).pop,
```diff - onPressed: () => Navigator.of(context).pop(), + onPressed: Navigator.of(context).pop, ```
),
Henry-Hiles marked this conversation as resolved Outdated

bad formatting here. make sure you format your code :)

bad formatting here. make sure you format your code :)

Yeah I totally forgot. Autoformatting is good? like ctrl + shift + i?

Yeah I totally forgot. Autoformatting is good? like ctrl + shift + i?

Yeah, that should work great. I have it set to format on save.

Yeah, that should work great. I have it set to format on save.
),
istalri marked this conversation as resolved

prefer Navigator.of(context).pop()

prefer `Navigator.of(context).pop()`
body: AlertDialog(
title: Text("Login to ${homeserver.host}"),
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Enter your login credentials:"),
SizedBox(height: 12),
TextField(
autofocus: true,
textInputAction: TextInputAction.next,
onChanged: (newVal) {
if (hasError.value) {
hasError.value = false;
}
},
decoration: InputDecoration(
label: Text("Username"),
focusedBorder: hasError.value
? OutlineInputBorder(
borderSide: BorderSide(color: theme.colorScheme.error),
)
: null,
enabledBorder: hasError.value
? OutlineInputBorder(
borderSide: BorderSide(color: theme.colorScheme.error),
)
: null,
),
controller: username,
),
SizedBox(height: 12),
TextField(
focusNode: passwordFocusNode,
textInputAction: TextInputAction.done,
onSubmitted: (_) => tryLogin(),
onChanged: (newVal) {
if (hasError.value) {
hasError.value = false;
}
},
selectAllOnFocus: true,
decoration: InputDecoration(
label: Text("Password"),
focusedBorder: hasError.value
? OutlineInputBorder(
borderSide: BorderSide(color: theme.colorScheme.error),
)
: null,
enabledBorder: hasError.value
? OutlineInputBorder(
borderSide: BorderSide(color: theme.colorScheme.error),
)
: null,
),
controller: password,
obscureText: true,
),
],
),
actions: [
TextButton(
onPressed: hasError.value ? null : tryLogin,
child: Text("Sign In"),
),
],
),
);
}
}

Please keep width as default always, and only override the border at all if hasError is true. Also, does both focusedBorder and enabledBorder need to be set?

Please keep width as default always, and only override the border at all if `hasError` is true. Also, does both `focusedBorder` and `enabledBorder` need to be set?

I guess it depends on how you see it. Technically for the userfield you only need enabledBorder and for the passwordfield you only need focusedBorder. But when you then click into the userfield both error borders will disappear until you click back into the passwordfield.

I guess it depends on how you see it. Technically for the userfield you only need enabledBorder and for the passwordfield you only need focusedBorder. But when you then click into the userfield both error borders will disappear until you click back into the passwordfield.

View file

@ -0,0 +1,214 @@
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";
import "package:nexus/widgets/loading.dart";
class SelectServerPage extends HookConsumerWidget {
const SelectServerPage({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final theme = Theme.of(context);
final client = ref.watch(ClientController.provider.notifier);
final hasError = useState(false);
final isLoading = useState(false);
final homeserverFocusNode = useFocusNode();
final launch = ref.watch(LaunchHelper.provider).launchUrl;
final homeserverUrl = useTextEditingController();
Future<void> setHomeserver(Uri? newHomeserver) async {
isLoading.value = true;
if (newHomeserver?.hasScheme == false) {
newHomeserver = Uri.https(newHomeserver!.path);
}
final newUrl = newHomeserver == null
? null
: await client.discoverHomeserver(newHomeserver);
if (context.mounted) {
if (newUrl == null) {
hasError.value = true;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
"Homeserver verification failed. Is your homeserver down?",
style: TextStyle(color: theme.colorScheme.onErrorContainer),
),
backgroundColor: theme.colorScheme.errorContainer,
),
);
} else {
homeserverUrl.text = newHomeserver!.origin;
Henry-Hiles marked this conversation as resolved

Instead of setting homeserver in client state controller, can we just Navigator.of(context).push the LoginPage, passing in a homeserver as an argument?

Instead of setting homeserver in client state controller, can we just `Navigator.of(context).push` the `LoginPage`, passing in a `homeserver` as an argument?
await Navigator.of(context).push(
Henry-Hiles marked this conversation as resolved Outdated

Might be nice to do that Uri.parse in client.discoverHomeserver, and have that return a Uri.

Might be nice to do that `Uri.parse` in `client.discoverHomeserver`, and have that return a Uri.

Yeah I don't mind. If you feel that's cleaner I will do so.

Yeah I don't mind. If you feel that's cleaner I will do so.

Also, you should use Navigator.of(context).push, and await it.

Also, you should use `Navigator.of(context).push`, and await it.

Makes sense, will do

Makes sense, will do
MaterialPageRoute(builder: (_) => LoginPage(homeserver: newUrl)),
);
}
}
homeserverFocusNode.requestFocus();
isLoading.value = false;
}
return Scaffold(
appBar: Appbar(),
body: isLoading.value
? const Loading()
: Center(
child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: 600),
child: Column(
children: [
Row(
children: [
SvgPicture.asset("assets/icon.svg", width: 128),
SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Nexus",
style: theme.textTheme.displayMedium,
),
Text(
"A Simple Matrix Client",
style: theme.textTheme.headlineMedium,
overflow: TextOverflow.ellipsis,
),
],
),
),
],
),
Padding(
padding: EdgeInsetsGeometry.symmetric(vertical: 12),
child: Divider(),
),
DividerText("Enter a homeserver domain:"),
Row(
spacing: 8,
children: [
Expanded(
child: TextField(
focusNode: homeserverFocusNode,
textInputAction: TextInputAction.done,
onSubmitted: (_) =>
setHomeserver(Uri.tryParse(homeserverUrl.text)),
onChanged: (newVal) {
if (hasError.value) {
hasError.value = false;
}
},
controller: homeserverUrl,
decoration: InputDecoration(
labelText: "Homeserver URL (e.g. matrix.org)",
hintText: "e.g. matrix.org",
focusedBorder: hasError.value
? OutlineInputBorder(
borderSide: BorderSide(
color: theme.colorScheme.error,
),
)
: null,
enabledBorder: hasError.value
? OutlineInputBorder(
borderSide: BorderSide(
color: theme.colorScheme.error,
),
)
: null,
),
),
),
IconButton.filled(
tooltip: "Confirm homeserver choice",
onPressed: isLoading.value || hasError.value
? null
: () => setHomeserver(
Uri.tryParse(homeserverUrl.text),
),
icon: Icon(Icons.check),
),
],
),
Expanded(
child: ListView(
padding: EdgeInsets.only(top: 12),
children: [
DividerText(
"Or, choose from some popular homeservers:",
),
...(<Homeserver>[
Homeserver(
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: Uri.https("matrix.org"),
iconUrl:
"https://raw.githubusercontent.com/element-hq/logos/refs/heads/master/matrix/matrix-favicon${Theme.brightnessOf(context) == Brightness.dark ? "-white" : ""}.png",
),
Homeserver(
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: Uri.https("federated.nexus"),
iconUrl:
"https://federated.nexus/images/icon.png",
),
Homeserver(
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: Uri.https(
"unredacted.org",
"services/si/matrix",
),
iconUrl: "https://unredacted.org/favicon.ico",
),
Henry-Hiles marked this conversation as resolved Outdated

This padding should be removed entirely now theres nothing below it. When loading, the whole page should be replaced by a loading indicator, not just at the bottom.

This padding should be removed entirely now theres nothing below it. When loading, the whole page should be replaced by a loading indicator, not just at the bottom.
].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: 5),
TextButton(
onPressed: () =>
launch(Uri.https("servers.joinmatrix.org")),
child: Text("See more homeservers..."),
),
],
),
),
),
);
}
}

View file

@ -836,10 +836,10 @@ packages:
dependency: transitive
description:
name: meta
sha256: "23f08335362185a5ea2ad3a4e597f1375e78bce8a040df5c600c8d3552ef2394"
sha256: "1741988757a65eb6b36abe716829688cf01910bbf91c34354ff7ec1c3de2b349"
url: "https://pub.dev"
source: hosted
version: "1.17.0"
version: "1.18.0"
mime:
dependency: transitive
description:
@ -1321,26 +1321,26 @@ packages:
dependency: transitive
description:
name: test
sha256: "280d6d890011ca966ad08df7e8a4ddfab0fb3aa49f96ed6de56e3521347a9ae7"
sha256: "8d9ceddbab833f180fbefed08afa76d7c03513dfdba87ffcec2718b02bbcbf20"
url: "https://pub.dev"
source: hosted
version: "1.30.0"
version: "1.31.0"
test_api:
dependency: transitive
description:
name: test_api
sha256: "8161c84903fd860b26bfdefb7963b3f0b68fee7adea0f59ef805ecca346f0c7a"
sha256: "949a932224383300f01be9221c39180316445ecb8e7547f70a41a35bf421fb9e"
url: "https://pub.dev"
source: hosted
version: "0.7.10"
version: "0.7.11"
test_core:
dependency: transitive
description:
name: test_core
sha256: "0381bd1585d1a924763c308100f2138205252fb90c9d4eeaf28489ee65ccde51"
sha256: "1991d4cfe85d5043241acac92962c3977c8d2f2add1ee73130c7b286417d1d34"
url: "https://pub.dev"
source: hosted
version: "0.6.16"
version: "0.6.17"
timeago:
dependency: "direct main"
description: