Nexus/nexus
Nexus/nexus
4
4
Fork 5
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity

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
Conversation 12 Commits 8 Files changed 5 +137 -61
4 changed files with 137 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 3be13f5589 - Show all commits

UI/UX improvement for the login flow. You can use enter in all text fields and you get better visual cues like red borders on error.

Prev Next
istalri 2026-06-02 19:14:02 +02:00
commit 3be13f5589

8
lib/controllers/client_state_controller.dart
View file

@ -9,14 +9,6 @@ class ClientStateController extends Notifier<ClientState?> {
state = newState;
}
void setHomeServer(String homeserver){
state = .new(isInitialized: state?.isInitialized ?? false,
isLoggedIn: state?.isLoggedIn ?? false,
isVerified: state?.isVerified ?? false,
userId: state?.userId,
homeserverUrl: homeserver);
}
static final provider = NotifierProvider<ClientStateController, ClientState?>(
ClientStateController.new,
);

5
lib/main.dart
View file

@ -11,7 +11,6 @@ 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";
@ -124,10 +123,8 @@ class App extends StatelessWidget {
return Loading();
}
if ((!clientState.isLoggedIn) && (clientState.homeserverUrl == null || clientState.homeserverUrl?.isEmpty == true)) {
if (!clientState.isLoggedIn) {
return SelectServerPage();
} else if(!clientState.isLoggedIn) {
return LoginPage();
} else if (!clientState.isVerified) {
return VerifyPage();
} else {

143
lib/pages/login_page.dart
View file

@ -2,67 +2,52 @@ import "package:flutter/material.dart";
import "package:flutter_hooks/flutter_hooks.dart";
import "package:hooks_riverpod/hooks_riverpod.dart";
import "package:nexus/controllers/client_controller.dart";
import "package:nexus/controllers/client_state_controller.dart";
import "package:nexus/models/requests/login_request.dart";
import "package:nexus/widgets/appbar.dart";
Henry-Hiles marked this conversation as resolved
Henry-Hiles commented 2026-06-02 10:02:08 -04:00
Copy link

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`.
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 client = ref.watch(ClientController.provider.notifier);
final isLoggingIn = useState(false);
final homeserverUrl = ref.watch(ClientStateController.provider)?.homeserverUrl;
final hasError = useState(false);
final userNameFocusNode = useFocusNode();
final passwordFocusNode = useFocusNode();
if(homeserverUrl == null || homeserverUrl.trim().isEmpty) {
throw Exception("Homeserver URL must be set for login.");
}
//This is the safe way to request things directly after page load.
useEffect(() {
WidgetsBinding.instance.addPostFrameCallback((_) {
userNameFocusNode.requestFocus();
});
return null;
}, []);
final theme = Theme.of(context);
final username = useTextEditingController();
final password = useTextEditingController();
return Scaffold(
appBar: Appbar(),
body: AlertDialog(
title: Text("Login"),
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Enter your login credentials:",
),
SizedBox(height: 12),
TextField(
decoration: InputDecoration(label: Text("Username")),
controller: username,
),
SizedBox(height: 12),
TextField(
decoration: InputDecoration(label: Text("Password")),
controller: password,
obscureText: true,
),
],
),
actions: [
TextButton(
onPressed: isLoggingIn.value
? null
: () async {
Future<void> tryLogin() async {
if (isLoggingIn.value) return;
isLoggingIn.value = true;
hasError.value = false;
final error = await client.login(
LoginRequest(
username: username.text,
password: password.text,
homeserverUrl: homeserverUrl,
),
homeserverUrl: homeserver.origin
)
);
if (error != null && context.mounted) {
if (!context.mounted) return;
if (error != null) {
hasError.value = true;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
@ -76,7 +61,89 @@ class LoginPage extends HookConsumerWidget {
);
isLoggingIn.value = false;
}
else{
Navigator.pop(context);
istalri marked this conversation as resolved
Henry-Hiles commented 2026-06-02 16:45:25 -04:00
Copy link

prefer Navigator.of(context).pop()

prefer `Navigator.of(context).pop()`
}
passwordFocusNode.requestFocus();
isLoggingIn.value = false;
}
return Scaffold(
appBar: Appbar(
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () => Navigator.pop(context)
),
),
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(
focusNode: userNameFocusNode,
textInputAction: TextInputAction.next,
onChanged: (newVal) {
if (hasError.value) {
hasError.value = false;
}
},
decoration: InputDecoration(
label: Text("Username"),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: hasError.value ? 4 : 2,
color: hasError.value
? theme.colorScheme.error
: theme.colorScheme.primary
),
)
),
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: OutlineInputBorder(
borderSide: BorderSide(
width: hasError.value ? 4 : 2,
color: hasError.value
? theme.colorScheme.error
: theme.colorScheme.primary
)
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: hasError.value ? 4 : 2,
color: hasError.value
? theme.colorScheme.error
: theme.colorScheme.primary
),
)
),
controller: password,
obscureText: true,
),
],
),
actions: [
TextButton(
onPressed: () => tryLogin(),
child: Text("Sign In"),
),
],

44
lib/pages/select_server_page.dart
View file

@ -3,9 +3,9 @@ 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/controllers/client_state_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";
@ -17,11 +17,11 @@ class SelectServerPage extends HookConsumerWidget {
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 {
@ -37,6 +37,7 @@ class SelectServerPage extends HookConsumerWidget {
if (context.mounted) {
if (newUrl == null) {
hasError.value = true;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
@ -48,15 +49,19 @@ class SelectServerPage extends HookConsumerWidget {
);
} else {
homeserverUrl.text = newHomeserver!.origin;
Henry-Hiles marked this conversation as resolved
Henry-Hiles commented 2026-06-02 10:01:21 -04:00
Copy link

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?
ref.watch(ClientStateController.provider.notifier).setHomeServer(newUrl);
Navigator.push(context, MaterialPageRoute(builder: (_) => LoginPage(homeserver: Uri.parse(newUrl))));
}
}
homeserverFocusNode.requestFocus();
isLoading.value = false;
}
return Scaffold(
appBar: Appbar(),
body: Center(
body: isLoading.value
? const Loading()
: Center(
child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: 600),
child: Column(
@ -90,14 +95,33 @@ class SelectServerPage extends HookConsumerWidget {
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",
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: (homeserverUrl.text.trim().isEmpty)
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: hasError.value ? 4 : 2,
color: hasError.value
? theme.colorScheme.error
: theme.colorScheme.primary)
: theme.colorScheme.primary
)
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: hasError.value ? 4 : 2,
color: hasError.value
? theme.colorScheme.error
: theme.colorScheme.primary
)
),
),
),
@ -174,10 +198,6 @@ class SelectServerPage extends HookConsumerWidget {
onPressed: () => launch(Uri.https("servers.joinmatrix.org")),
child: Text("See more homeservers..."),
),
if (isLoading.value)
Padding(padding: EdgeInsets.only(top: 32), child: Loading())
else
Padding(padding: EdgeInsets.only(top: 12))
],
),
),