mirror of
https://github.com/krille-chan/fluffychat
synced 2024-09-10 13:05:11 +00:00
design: New design for login page
This commit is contained in:
parent
29dbf6f9f5
commit
4a008d0c2d
7 changed files with 249 additions and 269 deletions
|
@ -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)),
|
||||||
|
|
|
@ -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),
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
|
@ -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),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
|
@ -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(),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
|
Loading…
Reference in a new issue