From 1bf41bcc209720e23c4b8ef280970ce81b780d10 Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Sat, 17 Apr 2021 11:16:21 +0200 Subject: [PATCH] Improve login route --- lib/ui/routes/create_account_route.dart | 54 +++-------------- lib/ui/routes/login_route.dart | 70 ++++++++++++----------- lib/ui/routes/welcome_route.dart | 53 +++++++++++++++++ lib/ui/widgets/create_account_widget.dart | 4 ++ lib/ui/widgets/init_widget.dart | 2 +- lib/ui/widgets/login_routes_theme.dart | 59 +++++++++++++++++++ 6 files changed, 162 insertions(+), 80 deletions(-) create mode 100644 lib/ui/routes/welcome_route.dart create mode 100644 lib/ui/widgets/login_routes_theme.dart diff --git a/lib/ui/routes/create_account_route.dart b/lib/ui/routes/create_account_route.dart index 2fd8e9a..1617e24 100644 --- a/lib/ui/routes/create_account_route.dart +++ b/lib/ui/routes/create_account_route.dart @@ -1,5 +1,5 @@ -import 'package:comunic/models/config.dart'; import 'package:comunic/ui/widgets/create_account_widget.dart'; +import 'package:comunic/ui/widgets/login_routes_theme.dart'; import 'package:comunic/utils/intl_utils.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; @@ -11,52 +11,12 @@ import 'package:flutter/material.dart'; class CreateAccountRoute extends StatelessWidget { @override Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Config.get().splashBackgroundColor, - appBar: AppBar( - backgroundColor: Colors.transparent, - elevation: 0, - title: Text(tr("Create an account")), - ), - body: Theme( - data: Theme.of(context).copyWith( - iconTheme: IconThemeData(color: Colors.white), - inputDecorationTheme: InputDecorationTheme( - fillColor: Colors.white, - hintStyle: TextStyle(color: Colors.white), - labelStyle: TextStyle(color: Colors.white), - prefixStyle: TextStyle(color: Colors.white), - hoverColor: Colors.white, - errorStyle: TextStyle(color: Colors.deepOrangeAccent), - ), - checkboxTheme: CheckboxThemeData( - fillColor: MaterialStateProperty.all(Colors.white), - checkColor: - MaterialStateProperty.all(Config.get().splashBackgroundColor), - ), - primaryColor: Colors.white, - backgroundColor: Config.get().splashBackgroundColor, - disabledColor: Colors.grey, - highlightColor: Colors.white, - accentColor: Colors.white, - hintColor: Colors.white, - textTheme: TextTheme(subtitle1: TextStyle(color: Colors.white)), - colorScheme: ColorScheme( - primary: Colors.white, - primaryVariant: Colors.white, - secondary: Colors.white, - secondaryVariant: Colors.white, - surface: Config.get().splashBackgroundColor, - background: Config.get().splashBackgroundColor, - error: Colors.redAccent, - onPrimary: Config.get().splashBackgroundColor, - onSecondary: Config.get().splashBackgroundColor, - onSurface: Colors.white, - onBackground: Colors.white, - onError: Colors.redAccent, - brightness: Brightness.dark, - )), - child: _CreateAccountRouteBody(), + return LoginRoutesTheme( + child: Scaffold( + appBar: AppBar( + title: Text(tr("Create an account")), + ), + body: _CreateAccountRouteBody(), ), ); } diff --git a/lib/ui/routes/login_route.dart b/lib/ui/routes/login_route.dart index 80e5c00..b7c3d86 100644 --- a/lib/ui/routes/login_route.dart +++ b/lib/ui/routes/login_route.dart @@ -1,52 +1,58 @@ -import 'package:comunic/ui/routes/create_account_route.dart'; import 'package:comunic/ui/routes/forgot_password_route.dart'; -import 'package:comunic/ui/widgets/login_scaffold.dart'; +import 'package:comunic/ui/widgets/init_widget.dart'; +import 'package:comunic/ui/widgets/login_routes_theme.dart'; +import 'package:comunic/ui/widgets/login_widget.dart'; import 'package:comunic/utils/intl_utils.dart'; import 'package:flutter/material.dart'; /// Login route /// -/// @author Pierre HUBERT +/// @author Pierre Hubert -class WelcomeRoute extends StatefulWidget { +class LoginRoute extends StatefulWidget { @override - State createState() => _WelcomeRouteState(); + _LoginRouteState createState() => _LoginRouteState(); } -class _WelcomeRouteState extends State { - void _openCreateAccountPage() { - Navigator.of(context) - .push(MaterialPageRoute(builder: (c) => CreateAccountRoute())); - } - +class _LoginRouteState extends State { void _openResetPasswordPage() { Navigator.of(context) .push(MaterialPageRoute(builder: (c) => ForgotPasswordRoute())); } - /// Build login form - Widget _buildLoginForm() { - return Material( - color: Colors.transparent, - child: Column( - children: [ - ListTile( - leading: Icon(Icons.login, color: Colors.white), - title: Text(tr("Login")), + @override + Widget build(BuildContext context) { + return LoginRoutesTheme( + child: Scaffold( + appBar: AppBar( + title: Text(tr("Login to Comunic")), + ), + body: Padding( + padding: const EdgeInsets.all(8.0), + child: Center( + child: ConstrainedBox( + constraints: BoxConstraints(maxWidth: 370), + child: Column( + children: [ + LoginWidget( + onSignedIn: () { + Navigator.pushReplacement( + context, + MaterialPageRoute( + builder: (b) => InitializeWidget())); + }, + ), + ListTile( + leading: Icon(Icons.help), + title: Text(tr("Password forgotten")), + onTap: _openResetPasswordPage, + ) + ], + ), + ), ), - ListTile( - leading: Icon(Icons.person_add_alt_1, color: Colors.white), - title: Text(tr("Join the network")), - onTap: _openCreateAccountPage, - ) - ], + ), ), ); } - - @override - Widget build(BuildContext context) => LoginScaffold( - child: null, - noStyleChild: _buildLoginForm(), - ); } diff --git a/lib/ui/routes/welcome_route.dart b/lib/ui/routes/welcome_route.dart new file mode 100644 index 0000000..6f0f6ba --- /dev/null +++ b/lib/ui/routes/welcome_route.dart @@ -0,0 +1,53 @@ +import 'package:comunic/ui/routes/create_account_route.dart'; +import 'package:comunic/ui/routes/login_route.dart'; +import 'package:comunic/ui/widgets/login_scaffold.dart'; +import 'package:comunic/utils/intl_utils.dart'; +import 'package:flutter/material.dart'; + +/// Login route +/// +/// @author Pierre HUBERT + +class WelcomeRoute extends StatefulWidget { + @override + State createState() => _WelcomeRouteState(); +} + +class _WelcomeRouteState extends State { + void _openLoginPage() { + Navigator.of(context) + .push(MaterialPageRoute(builder: (c) => LoginRoute())); + } + + void _openCreateAccountPage() { + Navigator.of(context) + .push(MaterialPageRoute(builder: (c) => CreateAccountRoute())); + } + + /// Build login form + Widget _buildLoginForm() { + return Material( + color: Colors.transparent, + child: Column( + children: [ + ListTile( + leading: Icon(Icons.login, color: Colors.white), + title: Text(tr("Login")), + onTap: _openLoginPage, + ), + ListTile( + leading: Icon(Icons.person_add_alt_1, color: Colors.white), + title: Text(tr("Join the network")), + onTap: _openCreateAccountPage, + ) + ], + ), + ); + } + + @override + Widget build(BuildContext context) => LoginScaffold( + child: null, + noStyleChild: _buildLoginForm(), + ); +} diff --git a/lib/ui/widgets/create_account_widget.dart b/lib/ui/widgets/create_account_widget.dart index 4e3cf2c..9c6c753 100644 --- a/lib/ui/widgets/create_account_widget.dart +++ b/lib/ui/widgets/create_account_widget.dart @@ -150,6 +150,8 @@ class _CreateAccountWidgetState extends State { : null, ), + SizedBox(height: 10), + // TOS CheckboxListTile( title: @@ -172,6 +174,8 @@ class _CreateAccountWidgetState extends State { ), ), + SizedBox(height: 10), + // Submit button Center( child: ElevatedButton( diff --git a/lib/ui/widgets/init_widget.dart b/lib/ui/widgets/init_widget.dart index a251202..fb173f7 100644 --- a/lib/ui/widgets/init_widget.dart +++ b/lib/ui/widgets/init_widget.dart @@ -6,11 +6,11 @@ import 'package:comunic/helpers/version_helper.dart'; import 'package:comunic/helpers/websocket_helper.dart'; import 'package:comunic/models/config.dart'; import 'package:comunic/ui/dialogs/deprecation_dialog.dart'; -import 'package:comunic/ui/routes/login_route.dart'; import 'package:comunic/ui/routes/main_route/main_route.dart'; import 'package:comunic/ui/routes/main_route/smartphone_route.dart'; import 'package:comunic/ui/routes/main_route/tablet_route.dart'; import 'package:comunic/ui/routes/push_notifications_route.dart'; +import 'package:comunic/ui/routes/welcome_route.dart'; import 'package:comunic/ui/widgets/safe_state.dart'; import 'package:comunic/utils/flutter_utils.dart'; import 'package:comunic/utils/intl_utils.dart'; diff --git a/lib/ui/widgets/login_routes_theme.dart b/lib/ui/widgets/login_routes_theme.dart new file mode 100644 index 0000000..aa26e94 --- /dev/null +++ b/lib/ui/widgets/login_routes_theme.dart @@ -0,0 +1,59 @@ +import 'package:comunic/models/config.dart'; +import 'package:flutter/material.dart'; + +/// Login forms base theme +/// +/// @author Pierre Hubert + +class LoginRoutesTheme extends StatelessWidget { + final Widget child; + + const LoginRoutesTheme({Key key, @required this.child}) : super(key: key); + + @override + Widget build(BuildContext context) => Theme( + data: Theme.of(context).copyWith( + scaffoldBackgroundColor: Config.get().splashBackgroundColor, + appBarTheme: AppBarTheme( + backgroundColor: Colors.transparent, + elevation: 0, + ), + iconTheme: IconThemeData(color: Colors.white), + inputDecorationTheme: InputDecorationTheme( + fillColor: Colors.white, + hintStyle: TextStyle(color: Colors.white), + labelStyle: TextStyle(color: Colors.white), + prefixStyle: TextStyle(color: Colors.white), + hoverColor: Colors.white, + errorStyle: TextStyle(color: Colors.deepOrangeAccent), + ), + checkboxTheme: CheckboxThemeData( + fillColor: MaterialStateProperty.all(Colors.white), + checkColor: + MaterialStateProperty.all(Config.get().splashBackgroundColor), + ), + primaryColor: Colors.white, + backgroundColor: Config.get().splashBackgroundColor, + disabledColor: Colors.grey, + highlightColor: Colors.white12, + accentColor: Colors.white, + hintColor: Colors.white, + textTheme: TextTheme(subtitle1: TextStyle(color: Colors.white)), + colorScheme: ColorScheme( + primary: Colors.white, + primaryVariant: Colors.white, + secondary: Colors.white, + secondaryVariant: Colors.white, + surface: Config.get().splashBackgroundColor, + background: Config.get().splashBackgroundColor, + error: Colors.redAccent, + onPrimary: Config.get().splashBackgroundColor, + onSecondary: Config.get().splashBackgroundColor, + onSurface: Colors.white, + onBackground: Colors.white, + onError: Colors.redAccent, + brightness: Brightness.dark, + )), + child: child, + ); +}