Improve login route

2025-11-03 19:54:12 +00:00 · 2021-04-17 11:16:21 +02:00
parent ab60593f12
commit 1bf41bcc20
6 changed files with 162 additions and 80 deletions
--- 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(),
      ),
    );
  }
--- 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<StatefulWidget> createState() => _WelcomeRouteState();
+  _LoginRouteState createState() => _LoginRouteState();
 }

-class _WelcomeRouteState extends State<WelcomeRoute> {
-  void _openCreateAccountPage() {
-    Navigator.of(context)
-        .push(MaterialPageRoute(builder: (c) => CreateAccountRoute()));
-  }
-
+class _LoginRouteState extends State<LoginRoute> {
  void _openResetPasswordPage() {
    Navigator.of(context)
        .push(MaterialPageRoute(builder: (c) => ForgotPasswordRoute()));
  }

-  /// Build login form
-  Widget _buildLoginForm() {
-    return Material(
-      color: Colors.transparent,
-      child: Column(
-        children: <Widget>[
-          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(),
-      );
 }
--- a/lib/ui/routes/welcome_route.dart
+++ 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<StatefulWidget> createState() => _WelcomeRouteState();
+}
+
+class _WelcomeRouteState extends State<WelcomeRoute> {
+  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: <Widget>[
+          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(),
+      );
+}
--- a/lib/ui/widgets/create_account_widget.dart
+++ b/lib/ui/widgets/create_account_widget.dart
@@ -150,6 +150,8 @@ class _CreateAccountWidgetState extends State<CreateAccountWidget> {
                    : null,
              ),

+              SizedBox(height: 10),
+
              // TOS
              CheckboxListTile(
                title:
@@ -172,6 +174,8 @@ class _CreateAccountWidgetState extends State<CreateAccountWidget> {
                ),
              ),

+              SizedBox(height: 10),
+
              // Submit button
              Center(
                child: ElevatedButton(
--- 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';
--- a/lib/ui/widgets/login_routes_theme.dart
+++ 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,
+      );
+}