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; 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?>( static final provider = NotifierProvider<ClientStateController, ClientState?>(
ClientStateController.new, 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/better_when.dart";
import "package:nexus/helpers/extensions/scheme_to_theme.dart"; import "package:nexus/helpers/extensions/scheme_to_theme.dart";
import "package:nexus/pages/chat_page.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/select_server_page.dart";
import "package:nexus/pages/verify_page.dart"; import "package:nexus/pages/verify_page.dart";
import "package:nexus/widgets/error_dialog.dart"; import "package:nexus/widgets/error_dialog.dart";
@ -124,10 +123,8 @@ class App extends StatelessWidget {
return Loading(); return Loading();
} }
if ((!clientState.isLoggedIn) && (clientState.homeserverUrl == null || clientState.homeserverUrl?.isEmpty == true)) { if (!clientState.isLoggedIn) {
return SelectServerPage(); return SelectServerPage();
} else if(!clientState.isLoggedIn) {
return LoginPage();
} else if (!clientState.isVerified) { } else if (!clientState.isVerified) {
return VerifyPage(); return VerifyPage();
} else { } else {

141
lib/pages/login_page.dart
View file

@ -2,32 +2,81 @@ import "package:flutter/material.dart";
import "package:flutter_hooks/flutter_hooks.dart"; import "package:flutter_hooks/flutter_hooks.dart";
import "package:hooks_riverpod/hooks_riverpod.dart"; import "package:hooks_riverpod/hooks_riverpod.dart";
import "package:nexus/controllers/client_controller.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/models/requests/login_request.dart";
import "package:nexus/widgets/appbar.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 { class LoginPage extends HookConsumerWidget {
const LoginPage({super.key}); final Uri homeserver;
const LoginPage({super.key, required this.homeserver});
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final client = ref.watch(ClientController.provider.notifier); final client = ref.watch(ClientController.provider.notifier);
final isLoggingIn = useState(false); 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) { //This is the safe way to request things directly after page load.
throw Exception("Homeserver URL must be set for login."); useEffect(() {
} WidgetsBinding.instance.addPostFrameCallback((_) {
userNameFocusNode.requestFocus();
});
return null;
}, []);
final theme = Theme.of(context); final theme = Theme.of(context);
final username = useTextEditingController(); final username = useTextEditingController();
final password = useTextEditingController(); final password = useTextEditingController();
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: homeserver.origin
)
);
if (!context.mounted) return;
if (error != null) {
hasError.value = true;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
"Login failed. Is your password right?\nError: $error",
style: TextStyle(
color: theme.colorScheme.onErrorContainer,
),
),
backgroundColor: theme.colorScheme.errorContainer,
),
);
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( return Scaffold(
appBar: Appbar(), appBar: Appbar(
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () => Navigator.pop(context)
),
),
body: AlertDialog( body: AlertDialog(
title: Text("Login"), title: Text("Login to ${homeserver.host}"),
content: Column( content: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@ -37,12 +86,56 @@ class LoginPage extends HookConsumerWidget {
), ),
SizedBox(height: 12), SizedBox(height: 12),
TextField( TextField(
decoration: InputDecoration(label: Text("Username")), 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, controller: username,
), ),
SizedBox(height: 12), SizedBox(height: 12),
TextField( TextField(
decoration: InputDecoration(label: Text("Password")), 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, controller: password,
obscureText: true, obscureText: true,
), ),
@ -50,33 +143,7 @@ class LoginPage extends HookConsumerWidget {
), ),
actions: [ actions: [
TextButton( TextButton(
onPressed: isLoggingIn.value onPressed: () => tryLogin(),
? null
: () async {
isLoggingIn.value = true;
final error = await client.login(
LoginRequest(
username: username.text,
password: password.text,
homeserverUrl: homeserverUrl,
),
);
if (error != null && context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
"Login failed. Is your password right?\nError: $error",
style: TextStyle(
color: theme.colorScheme.onErrorContainer,
),
),
backgroundColor: theme.colorScheme.errorContainer,
),
);
isLoggingIn.value = false;
}
},
child: Text("Sign In"), 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:flutter_svg/flutter_svg.dart";
import "package:hooks_riverpod/hooks_riverpod.dart"; import "package:hooks_riverpod/hooks_riverpod.dart";
import "package:nexus/controllers/client_controller.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/helpers/launch_helper.dart";
import "package:nexus/models/homeserver.dart"; import "package:nexus/models/homeserver.dart";
import "package:nexus/pages/login_page.dart";
import "package:nexus/widgets/appbar.dart"; import "package:nexus/widgets/appbar.dart";
import "package:nexus/widgets/divider_text.dart"; import "package:nexus/widgets/divider_text.dart";
import "package:nexus/widgets/loading.dart"; import "package:nexus/widgets/loading.dart";
@ -17,11 +17,11 @@ class SelectServerPage extends HookConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final theme = Theme.of(context); final theme = Theme.of(context);
final client = ref.watch(ClientController.provider.notifier); final client = ref.watch(ClientController.provider.notifier);
final hasError = useState(false);
final isLoading = useState(false); final isLoading = useState(false);
final homeserverFocusNode = useFocusNode();
final launch = ref.watch(LaunchHelper.provider).launchUrl; final launch = ref.watch(LaunchHelper.provider).launchUrl;
final homeserverUrl = useTextEditingController(); final homeserverUrl = useTextEditingController();
Future<void> setHomeserver(Uri? newHomeserver) async { Future<void> setHomeserver(Uri? newHomeserver) async {
@ -37,6 +37,7 @@ class SelectServerPage extends HookConsumerWidget {
if (context.mounted) { if (context.mounted) {
if (newUrl == null) { if (newUrl == null) {
hasError.value = true;
ScaffoldMessenger.of(context).showSnackBar( ScaffoldMessenger.of(context).showSnackBar(
SnackBar( SnackBar(
content: Text( content: Text(
@ -48,15 +49,19 @@ class SelectServerPage extends HookConsumerWidget {
); );
} else { } else {
homeserverUrl.text = newHomeserver!.origin; 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; isLoading.value = false;
} }
return Scaffold( return Scaffold(
appBar: Appbar(), appBar: Appbar(),
body: Center( body: isLoading.value
? const Loading()
: Center(
child: ConstrainedBox( child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: 600), constraints: BoxConstraints(maxWidth: 600),
child: Column( child: Column(
@ -90,14 +95,33 @@ class SelectServerPage extends HookConsumerWidget {
children: [ children: [
Expanded( Expanded(
child: TextField( child: TextField(
focusNode: homeserverFocusNode,
textInputAction: TextInputAction.done,
onSubmitted: (_) => setHomeserver(Uri.tryParse(homeserverUrl.text)),
onChanged: (newVal) {
if (hasError.value) {
hasError.value = false;
}
},
controller: homeserverUrl, controller: homeserverUrl,
decoration: InputDecoration( decoration: InputDecoration(
labelText: "Homeserver URL (e.g. matrix.org)", labelText: "Homeserver URL (e.g. matrix.org)",
hintText: "e.g. matrix.org", hintText: "e.g. matrix.org",
enabledBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: (homeserverUrl.text.trim().isEmpty) borderSide: BorderSide(
width: hasError.value ? 4 : 2,
color: hasError.value
? theme.colorScheme.error ? 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")), onPressed: () => launch(Uri.https("servers.joinmatrix.org")),
child: Text("See more homeservers..."), child: Text("See more homeservers..."),
), ),
if (isLoading.value)
Padding(padding: EdgeInsets.only(top: 32), child: Loading())
else
Padding(padding: EdgeInsets.only(top: 12))
], ],
), ),
), ),