Add signup form example (#113)

* add signup form

* fix suggestion

Author: amaury901130

app/devtools_options.yaml

@@ -0,0 +1,3 @@
+description: This file stores settings for Dart & Flutter DevTools.
+documentation: https://docs.flutter.dev/tools/devtools/extensions#configure-extension-enablement-states
+extensions:

app/lib/presentation/navigation/routers.dart

@@ -21,7 +21,7 @@ enum Routes {
   String get path => '/$name';
   String get subPath => name;
 
-  void nav(BuildContext context, {Object? extra}) {
+  void go(BuildContext context, {Object? extra}) {
     context.router.goNamed(
       name,
       extra: extra,
@@ -63,7 +63,7 @@ class Routers {
                           return;
                         }
                         debugPrint('Navigating to app route');
-                        Routes.app.nav(context);
+                        Routes.app.go(context);
                         break;
                       case AuthStateUnauthenticated _:
                         debugPrint(
@@ -74,7 +74,7 @@ class Routers {
                           return;
                         }
                         debugPrint('Navigating to auth route');
-                        Routes.auth.nav(context);
+                        Routes.auth.go(context);
                         break;
                       case _:
                     }

app/lib/presentation/resources/dim.dart

@@ -7,7 +7,7 @@ class Dimen {
   static const loadingSpinnerSize = 32.0;
   static const loadingSpinnerSizeS = 16.0;
 
-  static const double loginFormMaxWidth = 400.0;
+  static const double authFormMaxWidth = 400.0;
 
   static const spacingXxs = 2.0;
   static const spacingXs = 4.0;

app/lib/presentation/resources/locale/generated/intl/messages_en.dart

@@ -31,6 +31,7 @@ class MessageLookup extends MessageLookupByLibrary {
       "This website uses cookies",
     ),
     "ctaLogin": MessageLookupByLibrary.simpleMessage("Login"),
+    "ctaSignUp": MessageLookupByLibrary.simpleMessage("Sign Up"),
     "errorEmailInvalid": MessageLookupByLibrary.simpleMessage(
       "Please enter a valid email address.",
     ),
@@ -43,9 +44,18 @@ class MessageLookup extends MessageLookupByLibrary {
     "errorPasswordWeak": MessageLookupByLibrary.simpleMessage(
       "Password is too weak.",
     ),
+    "errorPasswordsDoNotMatch": MessageLookupByLibrary.simpleMessage(
+      "Passwords do not match.",
+    ),
+    "hintTermsAndConditions": MessageLookupByLibrary.simpleMessage(
+      "This should open the terms and conditions URL.",
+    ),
     "labelAgreeToTerms": MessageLookupByLibrary.simpleMessage(
       "I agree to the Terms and Conditions",
     ),
+    "labelConfirmPassword": MessageLookupByLibrary.simpleMessage(
+      "Confirm Password",
+    ),
     "labelEmail": MessageLookupByLibrary.simpleMessage("Email"),
     "labelPassword": MessageLookupByLibrary.simpleMessage("Password"),
     "loginErrorInvalidCredentials": MessageLookupByLibrary.simpleMessage(
@@ -67,5 +77,9 @@ class MessageLookup extends MessageLookupByLibrary {
     "titleLoginSubtitle": MessageLookupByLibrary.simpleMessage(
       "Use your email and password to login to your account.",
     ),
+    "titleSignUp": MessageLookupByLibrary.simpleMessage("Sign Up"),
+    "titleSignUpSubtitle": MessageLookupByLibrary.simpleMessage(
+      "Create an account using your email and password.",
+    ),
   };
 }

app/lib/presentation/resources/locale/generated/l10n.dart

@@ -8,15 +8,21 @@
   "pleaseTryAgainLaterWeArenworkingToFixTheIssue": "Please try again later, we are\nworking to fix the issue.",
   "sorryWeDidntFindAnyProduct": "Sorry we didn't find any product",
   "ctaLogin": "Login",
+  "ctaSignUp": "Sign Up",
   "labelEmail": "Email",
   "labelPassword": "Password",
+  "labelConfirmPassword": "Confirm Password",
+  "errorPasswordsDoNotMatch": "Passwords do not match.",
   "passwordInstructions": "Min 8 characters long: 1 uppercase letter, 1 lowercase letter, 1 number, and 1 special character.",
   "labelAgreeToTerms": "I agree to the Terms and Conditions",
   "errorEmailRequired": "Email is required.",
   "errorPasswordRequired": "Password is required.",
   "titleLogin": "Login",
+  "titleSignUp": "Sign Up",
   "titleLoginSubtitle": "Use your email and password to login to your account.",
+  "titleSignUpSubtitle": "Create an account using your email and password.",
   "errorEmailInvalid": "Please enter a valid email address.",
   "errorPasswordWeak": "Password is too weak.",
-  "loginErrorInvalidCredentials": "Invalid email or password."
+  "loginErrorInvalidCredentials": "Invalid email or password.",
+  "hintTermsAndConditions": "This should open the terms and conditions URL."
 }

app/lib/presentation/resources/locale/intl_en.arb

@@ -1,3 +1,4 @@
+import 'package:app/presentation/navigation/routers.dart';
 import 'package:app/presentation/resources/locale/generated/l10n.dart';
 import 'package:app/presentation/resources/resources.dart';
 import 'package:app/presentation/ui/components/primary_button.dart';
@@ -52,6 +53,7 @@ class _LoginFormState extends State<LoginForm> {
               labelText: S.of(context).labelEmail,
             ),
             keyboardType: TextInputType.emailAddress,
+            autofillHints: const [AutofillHints.username, AutofillHints.email],
             controller: emailController,
             validator: (value) {
               if (!FormValidator.isEmail(value)) {
@@ -101,9 +103,8 @@ class _LoginFormState extends State<LoginForm> {
                 IconButton(
                   onPressed: () {
                     ScaffoldMessenger.of(context).showSnackBar(
-                      const SnackBar(
-                        content: Text(
-                            "This should open the terms and conditions URL."),
+                      SnackBar(
+                        content: Text(S.of(context).hintTermsAndConditions),
                       ),
                     );
                   },
@@ -147,6 +148,26 @@ class _LoginFormState extends State<LoginForm> {
               );
             },
           ),
+          const Gap(Dimen.spacingL),
+          const Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Expanded(child: Divider()),
+              Padding(
+                padding: EdgeInsets.symmetric(horizontal: Dimen.spacingS),
+                child: Text("OR"),
+              ),
+              Expanded(child: Divider()),
+            ],
+          ),
+          const Gap(Dimen.spacingM),
+          SizedBox(
+            width: double.infinity,
+            child: TextButton(
+              onPressed: () => Routes.signup.go(context),
+              child: Text(S.of(context).ctaSignUp.toUpperCase()),
+            ),
+          ),
         ],
       ),
     );

app/lib/presentation/ui/pages/auth/login/login_form.dart

@@ -1,5 +1,6 @@
 import 'package:app/presentation/resources/resources.dart';
 import 'package:app/presentation/ui/pages/auth/login/login_form.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
 class LoginPage extends StatelessWidget {
@@ -11,7 +12,7 @@ class LoginPage extends StatelessWidget {
       body: Center(
         child: Container(
           constraints: const BoxConstraints(
-            maxWidth: Dimen.loginFormMaxWidth,
+            maxWidth: kIsWeb ? Dimen.authFormMaxWidth : double.infinity,
           ),
           child: const Card(
             child: Padding(