feat: New simplified login process with more prominent SSO and nicer layout
This commit is contained in:
Krille
parent
865cbe9618
commit
bcf0d5e238
13 changed files with 391 additions and 997 deletions
|
|
@ -1,11 +1,11 @@
|
|||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||
import 'package:url_launcher/url_launcher_string.dart';
|
||||
|
||||
import 'package:fluffychat/config/app_config.dart';
|
||||
import 'package:fluffychat/widgets/layouts/login_scaffold.dart';
|
||||
import '../../config/themes.dart';
|
||||
import '../../widgets/mxc_image.dart';
|
||||
import 'homeserver_app_bar.dart';
|
||||
import 'homeserver_picker.dart';
|
||||
|
||||
|
|
@ -16,15 +16,19 @@ class HomeserverPickerView extends StatelessWidget {
|
|||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final benchmarkResults = controller.benchmarkResults;
|
||||
final identityProviders = controller.identityProviders;
|
||||
final errorText = controller.error;
|
||||
return LoginScaffold(
|
||||
appBar: AppBar(
|
||||
titleSpacing: 12,
|
||||
title: Padding(
|
||||
padding: const EdgeInsets.all(0.0),
|
||||
child: HomeserverAppBar(controller: controller),
|
||||
),
|
||||
),
|
||||
body: SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: HomeserverAppBar(controller: controller),
|
||||
),
|
||||
// display a prominent banner to import session for TOR browser
|
||||
// users. This feature is just some UX sugar as TOR users are
|
||||
// usually forced to logout as TOR browser is non-persistent
|
||||
|
|
@ -49,108 +53,119 @@ class HomeserverPickerView extends StatelessWidget {
|
|||
),
|
||||
),
|
||||
Expanded(
|
||||
child: controller.displayServerList
|
||||
? ListView(
|
||||
child: controller.isLoading
|
||||
? const Center(child: CircularProgressIndicator.adaptive())
|
||||
: ListView(
|
||||
children: [
|
||||
if (controller.displayServerList)
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: Material(
|
||||
borderRadius:
|
||||
BorderRadius.circular(AppConfig.borderRadius),
|
||||
color: Theme.of(context)
|
||||
.colorScheme
|
||||
.onInverseSurface,
|
||||
clipBehavior: Clip.hardEdge,
|
||||
child: benchmarkResults == null
|
||||
? const Center(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(12.0),
|
||||
child: CircularProgressIndicator
|
||||
.adaptive(),
|
||||
),
|
||||
)
|
||||
: Column(
|
||||
children: controller.filteredHomeservers
|
||||
.map(
|
||||
(server) => ListTile(
|
||||
trailing: IconButton(
|
||||
icon: const Icon(
|
||||
Icons.info_outlined,
|
||||
color: Colors.black,
|
||||
),
|
||||
onPressed: () => controller
|
||||
.showServerInfo(server),
|
||||
),
|
||||
onTap: () => controller.setServer(
|
||||
server.homeserver.baseUrl.host,
|
||||
),
|
||||
title: Text(
|
||||
server.homeserver.baseUrl.host,
|
||||
style: const TextStyle(
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
subtitle: Text(
|
||||
server.homeserver.description ??
|
||||
'',
|
||||
style: TextStyle(
|
||||
color: Colors.grey.shade700,
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
.toList(),
|
||||
),
|
||||
Image.asset(
|
||||
'assets/info-logo.png',
|
||||
height: 96,
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12.0),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Divider(
|
||||
thickness: 1,
|
||||
height: 1,
|
||||
color: Theme.of(context).dividerColor,
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: Text(
|
||||
L10n.of(context)!.continueWith,
|
||||
style: const TextStyle(fontSize: 12),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Divider(
|
||||
thickness: 1,
|
||||
height: 1,
|
||||
color: Theme.of(context).dividerColor,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (errorText != null) ...[
|
||||
const Center(
|
||||
child: Icon(
|
||||
Icons.error_outline,
|
||||
size: 48,
|
||||
color: Colors.orange,
|
||||
),
|
||||
),
|
||||
],
|
||||
)
|
||||
: Container(
|
||||
alignment: Alignment.topCenter,
|
||||
child: Image.asset(
|
||||
'assets/banner_transparent.png',
|
||||
filterQuality: FilterQuality.medium,
|
||||
),
|
||||
),
|
||||
),
|
||||
SafeArea(
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
width: double.infinity,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
TextButton(
|
||||
onPressed: () => launchUrlString(AppConfig.privacyUrl),
|
||||
child: Text(L10n.of(context)!.privacy),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: controller.restoreBackup,
|
||||
child: Text(L10n.of(context)!.hydrate),
|
||||
),
|
||||
Hero(
|
||||
tag: 'loginButton',
|
||||
child: ElevatedButton.icon(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor:
|
||||
Theme.of(context).colorScheme.primary,
|
||||
foregroundColor:
|
||||
Theme.of(context).colorScheme.onPrimary,
|
||||
const SizedBox(height: 12),
|
||||
Center(
|
||||
child: Text(
|
||||
errorText,
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).colorScheme.error,
|
||||
fontSize: 18,
|
||||
),
|
||||
),
|
||||
),
|
||||
Center(
|
||||
child: Text(
|
||||
L10n.of(context)!
|
||||
.pleaseTryAgainLaterOrChooseDifferentServer,
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).colorScheme.error,
|
||||
fontSize: 12,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
],
|
||||
if (identityProviders != null) ...[
|
||||
...identityProviders.map(
|
||||
(provider) => _LoginButton(
|
||||
icon: provider.icon == null
|
||||
? const Icon(Icons.open_in_new_outlined)
|
||||
: Material(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(
|
||||
AppConfig.borderRadius,
|
||||
),
|
||||
clipBehavior: Clip.hardEdge,
|
||||
child: MxcImage(
|
||||
placeholder: (_) =>
|
||||
const Icon(Icons.web_outlined),
|
||||
uri: Uri.parse(provider.icon!),
|
||||
width: 24,
|
||||
height: 24,
|
||||
),
|
||||
),
|
||||
label: provider.name ??
|
||||
provider.brand ??
|
||||
L10n.of(context)!.singlesignon,
|
||||
onPressed: () =>
|
||||
controller.ssoLoginAction(provider.id!),
|
||||
),
|
||||
),
|
||||
],
|
||||
if (controller.supportsPasswordLogin)
|
||||
_LoginButton(
|
||||
onPressed: controller.login,
|
||||
icon: const Icon(Icons.login_outlined),
|
||||
label: L10n.of(context)!.signInWithPassword,
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
child: TextButton(
|
||||
style: TextButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(vertical: 12),
|
||||
),
|
||||
onPressed: controller.restoreBackup,
|
||||
child: Text(L10n.of(context)!.hydrate),
|
||||
),
|
||||
),
|
||||
onPressed: controller.isLoading
|
||||
? null
|
||||
: controller.checkHomeserverAction,
|
||||
icon: const Icon(Icons.start_outlined),
|
||||
label: controller.isLoading
|
||||
? const LinearProgressIndicator()
|
||||
: Text(L10n.of(context)!.letsStart),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
|
@ -158,3 +173,33 @@ class HomeserverPickerView extends StatelessWidget {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _LoginButton extends StatelessWidget {
|
||||
final Widget icon;
|
||||
final String label;
|
||||
final void Function() onPressed;
|
||||
|
||||
const _LoginButton({
|
||||
required this.icon,
|
||||
required this.label,
|
||||
required this.onPressed,
|
||||
Key? key,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
margin: const EdgeInsets.only(bottom: 16),
|
||||
width: double.infinity,
|
||||
child: ElevatedButton.icon(
|
||||
style: ElevatedButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(vertical: 12),
|
||||
),
|
||||
onPressed: onPressed,
|
||||
icon: icon,
|
||||
label: Text(label),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue