2ndbeam/fluffychat-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

design: New design for login page

Browse source
This commit is contained in:
krille-chan 2023-12-24 13:46:29 +01:00
commit 4a008d0c2d
No known key found for this signature in database
7 changed files with 240 additions and 260 deletions
Download patch file Download diff file Expand all files Collapse all files

2
lib/pages/chat/events/message_content.dart
View file

@ -81,7 +81,7 @@ class MessageContent extends StatelessWidget {
mxContent: sender.avatarUrl, mxContent: sender.avatarUrl,
name: sender.calcDisplayname(), name: sender.calcDisplayname(),
presenceUserId: sender.stateKey, presenceUserId: sender.stateKey,
client: Matrix.of(context).client, client: event.room.client,
), ),
title: Text(sender.calcDisplayname()), title: Text(sender.calcDisplayname()),
subtitle: Text(event.originServerTs.localizedTime(context)), subtitle: Text(event.originServerTs.localizedTime(context)),

5
lib/pages/homeserver_picker/homeserver_app_bar.dart
View file

@ -4,6 +4,7 @@ import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart'; import 'package:flutter_typeahead/flutter_typeahead.dart';
import 'package:fluffychat/config/app_config.dart'; import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/pages/homeserver_picker/public_homeserver.dart'; import 'package:fluffychat/pages/homeserver_picker/public_homeserver.dart';
import 'homeserver_bottom_sheet.dart'; import 'homeserver_bottom_sheet.dart';
import 'homeserver_picker.dart'; import 'homeserver_picker.dart';
@ -77,7 +78,9 @@ class HomeserverAppBar extends StatelessWidget {
icon: const Icon(Icons.arrow_back), icon: const Icon(Icons.arrow_back),
) )
: null, : null,
fillColor: Theme.of(context).colorScheme.onInverseSurface, fillColor: FluffyThemes.isColumnMode(context)
? Theme.of(context).colorScheme.background
: Theme.of(context).colorScheme.surfaceVariant,
prefixText: '${L10n.of(context)!.homeserver}: ', prefixText: '${L10n.of(context)!.homeserver}: ',
hintText: L10n.of(context)!.enterYourHomeserver, hintText: L10n.of(context)!.enterYourHomeserver,
suffixIcon: const Icon(Icons.search), suffixIcon: const Icon(Icons.search),

2
lib/pages/homeserver_picker/homeserver_picker.dart
View file

@ -192,7 +192,7 @@ class HomeserverPickerController extends State<HomeserverPicker> {
return cachedHomeservers = homeserverList; return cachedHomeservers = homeserverList;
} }
void login() => context.go('${GoRouterState.of(context).fullPath}/login'); void login() => context.go('/home/login');
@override @override
void initState() { void initState() {

294
lib/pages/homeserver_picker/homeserver_picker_view.dart
View file

@ -32,199 +32,189 @@ class HomeserverPickerView extends StatelessWidget {
appBar: AppBar( appBar: AppBar(
titleSpacing: 12, titleSpacing: 12,
automaticallyImplyLeading: false, automaticallyImplyLeading: false,
surfaceTintColor: Theme.of(context).colorScheme.background,
title: HomeserverAppBar(controller: controller), title: HomeserverAppBar(controller: controller),
), ),
body: SafeArea( body: Column(
child: Column( children: [
children: [ // display a prominent banner to import session for TOR browser
// display a prominent banner to import session for TOR browser // users. This feature is just some UX sugar as TOR users are
// users. This feature is just some UX sugar as TOR users are // usually forced to logout as TOR browser is non-persistent
// usually forced to logout as TOR browser is non-persistent AnimatedContainer(
AnimatedContainer( height: controller.isTorBrowser ? 64 : 0,
height: controller.isTorBrowser ? 64 : 0, duration: FluffyThemes.animationDuration,
duration: FluffyThemes.animationDuration, curve: FluffyThemes.animationCurve,
curve: FluffyThemes.animationCurve, clipBehavior: Clip.hardEdge,
decoration: const BoxDecoration(),
child: Material(
clipBehavior: Clip.hardEdge, clipBehavior: Clip.hardEdge,
decoration: const BoxDecoration(), borderRadius:
child: Material( const BorderRadius.vertical(bottom: Radius.circular(8)),
clipBehavior: Clip.hardEdge, color: Theme.of(context).colorScheme.surface,
borderRadius: child: ListTile(
const BorderRadius.vertical(bottom: Radius.circular(8)), leading: const Icon(Icons.vpn_key),
color: Theme.of(context).colorScheme.surface, title: Text(L10n.of(context)!.hydrateTor),
child: ListTile( subtitle: Text(L10n.of(context)!.hydrateTorLong),
leading: const Icon(Icons.vpn_key), trailing: const Icon(Icons.chevron_right_outlined),
title: Text(L10n.of(context)!.hydrateTor), onTap: controller.restoreBackup,
subtitle: Text(L10n.of(context)!.hydrateTorLong),
trailing: const Icon(Icons.chevron_right_outlined),
onTap: controller.restoreBackup,
),
), ),
), ),
Expanded( ),
child: controller.isLoading Expanded(
? const Center(child: CircularProgressIndicator.adaptive()) child: controller.isLoading
: ListView( ? const Center(child: CircularProgressIndicator.adaptive())
children: [ : ListView(
children: [
if (errorText != null) ...[
const SizedBox(height: 12), const SizedBox(height: 12),
if (errorText != null) ...[ const Center(
const Center( child: Icon(
child: Icon( Icons.error_outline,
Icons.error_outline, size: 48,
size: 48, color: Colors.orange,
color: Colors.orange,
),
), ),
const SizedBox(height: 12), ),
Center( const SizedBox(height: 12),
child: Text( Center(
errorText, child: Text(
textAlign: TextAlign.center, errorText,
style: TextStyle( textAlign: TextAlign.center,
color: Theme.of(context).colorScheme.error, style: TextStyle(
fontSize: 18, 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: 36),
] else
Padding(
padding: const EdgeInsets.only(
right: 8.0,
left: 8.0,
bottom: 16.0,
),
child: FluffyThemes.isColumnMode(context)
? Image.asset(
'assets/info-logo.png',
height: 96,
)
: Image.asset('assets/banner_transparent.png'),
),
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: L10n.of(context)!.signInWith(
provider.name ??
provider.brand ??
L10n.of(context)!.singlesignon,
),
onPressed: () =>
controller.ssoLoginAction(provider.id),
),
),
],
if (regLink != null)
_LoginButton(
onPressed: () => launchUrlString(regLink),
icon: const Icon(Icons.open_in_new),
label: L10n.of(context)!.register,
),
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: Center(
child: SizedBox(
width: 256,
child: TextButton(
style: TextButton.styleFrom(
padding:
const EdgeInsets.symmetric(vertical: 12),
foregroundColor:
Theme.of(context).colorScheme.secondary,
),
onPressed: controller.restoreBackup,
child: Text(
L10n.of(context)!.hydrate,
textAlign: TextAlign.center,
),
),
), ),
), ),
), ),
Center(
child: Text(
L10n.of(context)!
.pleaseTryAgainLaterOrChooseDifferentServer,
textAlign: TextAlign.center,
style: TextStyle(
color: Theme.of(context).colorScheme.error,
fontSize: 12,
),
),
),
const SizedBox(height: 36),
] else
Padding(
padding: const EdgeInsets.only(
top: 0.0,
right: 8.0,
left: 8.0,
bottom: 16.0,
),
child: Image.asset(
'assets/banner_transparent.png',
),
),
if (identityProviders != null) ...[
...identityProviders.map(
(provider) => _LoginButton(
icon: provider.icon == null
? const Icon(
Icons.open_in_new_outlined,
size: 16,
)
: Material(
borderRadius: BorderRadius.circular(
AppConfig.borderRadius,
),
clipBehavior: Clip.hardEdge,
child: MxcImage(
placeholder: (_) => const Icon(
Icons.open_in_new_outlined,
size: 16,
),
uri: Uri.parse(provider.icon!),
width: 24,
height: 24,
isThumbnail: false,
//isThumbnail: false,
),
),
label: L10n.of(context)!.signInWith(
provider.name ??
provider.brand ??
L10n.of(context)!.singlesignon,
),
onPressed: () =>
controller.ssoLoginAction(provider.id),
),
),
], ],
), if (controller.supportsPasswordLogin)
), _LoginButton(
], onPressed: controller.login,
), label: L10n.of(context)!.signInWithPassword,
icon: const Icon(Icons.lock_open_outlined, size: 16),
),
if (regLink != null)
_LoginButton(
onPressed: () => launchUrlString(regLink),
icon: const Icon(
Icons.open_in_new_outlined,
size: 16,
),
label: L10n.of(context)!.register,
),
_LoginButton(
onPressed: controller.restoreBackup,
label: L10n.of(context)!.hydrate,
withBorder: false,
),
const SizedBox(height: 16),
],
),
),
],
), ),
); );
} }
} }
class _LoginButton extends StatelessWidget { class _LoginButton extends StatelessWidget {
final Widget icon; final Widget? icon;
final String label; final String label;
final void Function() onPressed; final void Function() onPressed;
final bool withBorder;
const _LoginButton({ const _LoginButton({
required this.icon, this.icon,
required this.label, required this.label,
required this.onPressed, required this.onPressed,
this.withBorder = true,
}); });
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final icon = this.icon;
return Container( return Container(
margin: const EdgeInsets.only(bottom: 12), margin: const EdgeInsets.only(bottom: 12),
padding: const EdgeInsets.symmetric(horizontal: 16), padding: const EdgeInsets.symmetric(horizontal: 16),
alignment: Alignment.center, alignment: Alignment.center,
child: SizedBox( child: SizedBox(
width: double.infinity, width: double.infinity,
child: OutlinedButton( child: OutlinedButton.icon(
style: OutlinedButton.styleFrom( style: OutlinedButton.styleFrom(
side: BorderSide( side: BorderSide(
width: 1, width: withBorder ? 1 : 0,
color: Theme.of(context).colorScheme.surfaceVariant, color: withBorder
? Theme.of(context).colorScheme.onBackground
: Colors.transparent,
), ),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius), borderRadius: BorderRadius.circular(99),
), ),
foregroundColor: Theme.of(context).colorScheme.onBackground, foregroundColor: Theme.of(context).colorScheme.onBackground,
backgroundColor: withBorder
? Theme.of(context).colorScheme.background
: Colors.transparent,
), ),
onPressed: onPressed, onPressed: onPressed,
child: Row( label: Text(label),
mainAxisAlignment: MainAxisAlignment.center, icon: icon ?? const SizedBox.shrink(),
children: [
icon,
const SizedBox(width: 16),
Text(
label,
overflow: TextOverflow.ellipsis,
),
],
),
), ),
), ),
); );

111
lib/pages/login/login_view.dart
View file

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/widgets/layouts/login_scaffold.dart'; import 'package:fluffychat/widgets/layouts/login_scaffold.dart';
import 'package:fluffychat/widgets/matrix.dart'; import 'package:fluffychat/widgets/matrix.dart';
import 'login.dart'; import 'login.dart';
@ -13,29 +14,48 @@ class LoginView extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final homeserver = Matrix.of(context)
.getLoginClient()
.homeserver
.toString()
.replaceFirst('https://', '');
final title = L10n.of(context)!.logInTo(homeserver);
final titleParts = title.split(homeserver);
final textFieldFillColor = FluffyThemes.isColumnMode(context)
? Theme.of(context).colorScheme.background
: Theme.of(context).colorScheme.surfaceVariant;
return LoginScaffold( return LoginScaffold(
enforceMobileMode: Matrix.of(context).client.isLogged(), enforceMobileMode: Matrix.of(context).client.isLogged(),
appBar: AppBar( appBar: AppBar(
leading: controller.loading ? null : const BackButton(), leading: controller.loading ? null : const Center(child: BackButton()),
automaticallyImplyLeading: !controller.loading, automaticallyImplyLeading: !controller.loading,
centerTitle: true, titleSpacing: !controller.loading ? 0 : null,
title: Text( title: Text.rich(
L10n.of(context)!.logInTo( TextSpan(
Matrix.of(context) children: [
.getLoginClient() TextSpan(text: titleParts.first),
.homeserver TextSpan(
.toString() text: homeserver,
.replaceFirst('https://', ''), style: const TextStyle(fontWeight: FontWeight.bold),
),
TextSpan(text: titleParts.last),
],
), ),
style: const TextStyle(fontSize: 18),
), ),
), ),
body: Builder( body: Builder(
builder: (context) { builder: (context) {
return AutofillGroup( return AutofillGroup(
child: ListView( child: ListView(
padding: const EdgeInsets.symmetric(horizontal: 8),
children: <Widget>[ children: <Widget>[
Image.asset('assets/banner_transparent.png'),
const SizedBox(height: 16),
Padding( Padding(
padding: const EdgeInsets.all(12.0), padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: TextField( child: TextField(
readOnly: controller.loading, readOnly: controller.loading,
autocorrect: false, autocorrect: false,
@ -50,12 +70,14 @@ class LoginView extends StatelessWidget {
prefixIcon: const Icon(Icons.account_box_outlined), prefixIcon: const Icon(Icons.account_box_outlined),
errorText: controller.usernameError, errorText: controller.usernameError,
errorStyle: const TextStyle(color: Colors.orange), errorStyle: const TextStyle(color: Colors.orange),
fillColor: textFieldFillColor,
hintText: L10n.of(context)!.emailOrUsername, hintText: L10n.of(context)!.emailOrUsername,
), ),
), ),
), ),
const SizedBox(height: 16),
Padding( Padding(
padding: const EdgeInsets.all(12.0), padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: TextField( child: TextField(
readOnly: controller.loading, readOnly: controller.loading,
autocorrect: false, autocorrect: false,
@ -69,6 +91,7 @@ class LoginView extends StatelessWidget {
prefixIcon: const Icon(Icons.lock_outlined), prefixIcon: const Icon(Icons.lock_outlined),
errorText: controller.passwordError, errorText: controller.passwordError,
errorStyle: const TextStyle(color: Colors.orange), errorStyle: const TextStyle(color: Colors.orange),
fillColor: textFieldFillColor,
suffixIcon: IconButton( suffixIcon: IconButton(
onPressed: controller.toggleShowPassword, onPressed: controller.toggleShowPassword,
icon: Icon( icon: Icon(
@ -82,64 +105,36 @@ class LoginView extends StatelessWidget {
), ),
), ),
), ),
Hero( const SizedBox(height: 16),
tag: 'signinButton',
child: Padding(
padding: const EdgeInsets.all(12.0),
child: ElevatedButton.icon(
style: ElevatedButton.styleFrom(
backgroundColor: Theme.of(context).colorScheme.primary,
foregroundColor:
Theme.of(context).colorScheme.onPrimary,
),
onPressed: controller.loading ? null : controller.login,
icon: const Icon(Icons.login_outlined),
label: controller.loading
? const LinearProgressIndicator()
: Text(L10n.of(context)!.login),
),
),
),
Padding( Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0), padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
children: [
Expanded(
child: Divider(
thickness: 1,
color: Theme.of(context).dividerColor,
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: Text(
L10n.of(context)!.or,
style: const TextStyle(fontSize: 18),
),
),
Expanded(
child: Divider(
thickness: 1,
color: Theme.of(context).dividerColor,
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: ElevatedButton.icon( child: ElevatedButton.icon(
style: ElevatedButton.styleFrom(
backgroundColor: Theme.of(context).colorScheme.primary,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
),
onPressed: controller.loading ? null : controller.login,
icon: const Icon(Icons.login_outlined),
label: controller.loading
? const LinearProgressIndicator()
: Text(L10n.of(context)!.login),
),
),
const SizedBox(height: 16),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: TextButton.icon(
onPressed: controller.loading onPressed: controller.loading
? () {} ? () {}
: controller.passwordForgotten, : controller.passwordForgotten,
style: ElevatedButton.styleFrom( style: TextButton.styleFrom(
foregroundColor: Theme.of(context).colorScheme.error, foregroundColor: Theme.of(context).colorScheme.error,
backgroundColor: Theme.of(context).colorScheme.onError,
), ),
icon: const Icon(Icons.safety_check_outlined), icon: const Icon(Icons.safety_check_outlined),
label: Text(L10n.of(context)!.passwordForgotten), label: Text(L10n.of(context)!.passwordForgotten),
), ),
), ),
const SizedBox(height: 16),
], ],
), ),
); );

42
lib/widgets/layouts/empty_page.dart
View file

@ -2,10 +2,11 @@ import 'dart:math';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:fluffychat/config/themes.dart';
class EmptyPage extends StatelessWidget { class EmptyPage extends StatelessWidget {
final bool loading; static const double _width = 128;
static const double _width = 300; const EmptyPage({super.key});
const EmptyPage({this.loading = false, super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final width = min(MediaQuery.of(context).size.width, EmptyPage._width) / 2; final width = min(MediaQuery.of(context).size.width, EmptyPage._width) / 2;
@ -14,31 +15,20 @@ class EmptyPage extends StatelessWidget {
appBar: AppBar( appBar: AppBar(
automaticallyImplyLeading: false, automaticallyImplyLeading: false,
elevation: 0, elevation: 0,
backgroundColor: Theme.of(context).scaffoldBackgroundColor, backgroundColor: Colors.transparent,
), ),
extendBodyBehindAppBar: true, extendBodyBehindAppBar: true,
body: Column( body: Container(
mainAxisAlignment: MainAxisAlignment.center, decoration: BoxDecoration(
children: [ gradient: FluffyThemes.backgroundGradient(context, 128),
Center( ),
child: Hero( alignment: Alignment.center,
tag: 'info-logo', child: Image.asset(
child: Image.asset( 'assets/favicon.png',
'assets/favicon.png', width: width,
width: width, height: width,
height: width, filterQuality: FilterQuality.medium,
filterQuality: FilterQuality.medium, ),
),
),
),
if (loading)
Center(
child: SizedBox(
width: width,
child: const LinearProgressIndicator(),
),
),
],
), ),
); );
} }

62
lib/widgets/layouts/login_scaffold.dart
View file

@ -37,9 +37,10 @@ class LoginScaffold extends StatelessWidget {
actions: appBar?.actions, actions: appBar?.actions,
backgroundColor: isMobileMode ? null : Colors.transparent, backgroundColor: isMobileMode ? null : Colors.transparent,
), ),
extendBodyBehindAppBar: true,
extendBody: true,
body: body, body: body,
backgroundColor: isMobileMode
? null
: Theme.of(context).colorScheme.background.withOpacity(0.9),
bottomNavigationBar: isMobileMode bottomNavigationBar: isMobileMode
? Material( ? Material(
elevation: 4, elevation: 4,
@ -52,8 +53,11 @@ class LoginScaffold extends StatelessWidget {
); );
if (isMobileMode) return scaffold; if (isMobileMode) return scaffold;
return Container( return Container(
decoration: BoxDecoration( decoration: const BoxDecoration(
gradient: FluffyThemes.backgroundGradient(context, 255), image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage('assets/login_wallpaper.png'),
),
), ),
child: Column( child: Column(
children: [ children: [
@ -63,7 +67,7 @@ class LoginScaffold extends StatelessWidget {
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0), padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Material( child: Material(
color: Theme.of(context).scaffoldBackgroundColor, color: Colors.transparent,
borderRadius: BorderRadius.circular(AppConfig.borderRadius), borderRadius: BorderRadius.circular(AppConfig.borderRadius),
clipBehavior: Clip.hardEdge, clipBehavior: Clip.hardEdge,
elevation: elevation:
@ -72,34 +76,14 @@ class LoginScaffold extends StatelessWidget {
child: ConstrainedBox( child: ConstrainedBox(
constraints: isMobileMode constraints: isMobileMode
? const BoxConstraints() ? const BoxConstraints()
: const BoxConstraints(maxWidth: 960, maxHeight: 640), : const BoxConstraints(maxWidth: 480, maxHeight: 720),
child: Row( child: scaffold,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Image.asset(
'assets/login_wallpaper.png',
fit: BoxFit.cover,
),
),
Container(
width: 1,
color: Theme.of(context).dividerTheme.color,
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: scaffold,
),
),
],
),
), ),
), ),
), ),
), ),
), ),
const _PrivacyButtons(mainAxisAlignment: MainAxisAlignment.end), const _PrivacyButtons(mainAxisAlignment: MainAxisAlignment.center),
], ],
), ),
); );
@ -112,6 +96,18 @@ class _PrivacyButtons extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final shadowTextStyle = FluffyThemes.isColumnMode(context)
? const TextStyle(
color: Colors.white,
shadows: [
Shadow(
offset: Offset(0.0, 0.0),
blurRadius: 3,
color: Colors.black,
),
],
)
: null;
return SizedBox( return SizedBox(
height: 64, height: 64,
child: Padding( child: Padding(
@ -121,11 +117,17 @@ class _PrivacyButtons extends StatelessWidget {
children: [ children: [
TextButton( TextButton(
onPressed: () => PlatformInfos.showDialog(context), onPressed: () => PlatformInfos.showDialog(context),
child: Text(L10n.of(context)!.about), child: Text(
L10n.of(context)!.about,
style: shadowTextStyle,
),
), ),
TextButton( TextButton(
onPressed: () => launchUrlString(AppConfig.privacyUrl), onPressed: () => launchUrlString(AppConfig.privacyUrl),
child: Text(L10n.of(context)!.privacy), child: Text(
L10n.of(context)!.privacy,
style: shadowTextStyle,
),
), ),
], ],
), ),