Merge branch 'main' into sign-in-or-sign-up-display-support

supabase-community · Oct 4, 2024 · d23266f · d23266f
2 parents 7abd389 + 785387f
commit d23266f
Show file tree

Hide file tree

Showing 7 changed files with 401 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 0.5.1
+
+- feat: Improve form interaction and code organization in `SupaEmailAuth` [#106](https://github.com/supabase-community/flutter-auth-ui/pull/106)
+- feat: Enable custom icons for `SupaEmailAuth` [#108](https://github.com/supabase-community/flutter-auth-ui/pull/108)
+
 ## 0.5.0
 
 - feat: Allow password recovery email to be redirected to other URL [#98](https://github.com/supabase-community/flutter-auth-ui/pull/98)

diff --git a/README.md b/README.md
@@ -27,6 +27,8 @@ SupaEmailAuth(
     // do something, for example: navigate("wait_for_email");
   },
   metadataFields: [
+    // Creates an additional TextField for string metadata, for example:
+    // {'username': 'exampleUsername'}
     MetaDataField(
       prefixIcon: const Icon(Icons.person),
       label: 'Username',
@@ -38,8 +40,38 @@ SupaEmailAuth(
         return null;
       },
     ),
-  ],
-),
+
+    // Creates a CheckboxListTile for boolean metadata, for example:
+    // {'marketing_consent': true}
+    BooleanMetaDataField(
+      label: 'I wish to receive marketing emails',
+      key: 'marketing_consent',
+      checkboxPosition: ListTileControlAffinity.leading,
+    ),
+    // Supports interactive text. Fields can be marked as required, blocking form
+    // submission unless the checkbox is checked.
+    BooleanMetaDataField(
+      key: 'terms_agreement',
+      isRequired: true,
+      checkboxPosition: ListTileControlAffinity.leading,
+      richLabelSpans: [
+        const TextSpan(
+            text: 'I have read and agree to the '),
+        TextSpan(
+          text: 'Terms and Conditions',
+          style: const TextStyle(
+            color: Colors.blue,
+          ),
+          recognizer: TapGestureRecognizer()
+            ..onTap = () {
+              // do something, for example: navigate("terms_and_conditions");
+            },
+        ),
+        // Or use some other custom widget.
+        WidgetSpan()
+      ],
+    ),
+  ]),
 ```
 
 ## Magic Link Auth
@@ -100,3 +132,4 @@ SupaSocialsAuth(
 ## Theming
 
 This library uses bare Flutter components so that you can control the appearance of the components using your own theme.
+See theme example in example/lib/sign_in.dart
diff --git a/example/lib/sign_in.dart b/example/lib/sign_in.dart
@@ -1,27 +1,58 @@
 import 'package:flutter/foundation.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:supabase_auth_ui/supabase_auth_ui.dart';
 
 import 'constants.dart';
 
 class SignUp extends StatelessWidget {
   const SignUp({Key? key}) : super(key: key);
-
   @override
   Widget build(BuildContext context) {
+    void navigateHome(AuthResponse response) {
+      Navigator.of(context).pushReplacementNamed('/home');
+    }
+
+    final darkModeThemeData = ThemeData.dark().copyWith(
+      colorScheme: const ColorScheme.dark(
+        primary: Color.fromARGB(248, 183, 183, 183), // text below main button
+      ),
+      textSelectionTheme: TextSelectionThemeData(
+        cursorColor: Colors.blueGrey[300], // cursor when typing
+      ),
+      inputDecorationTheme: InputDecorationTheme(
+        fillColor: Colors.grey[800], // background of text entry
+        filled: true,
+        border: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(8),
+          borderSide: BorderSide.none,
+        ),
+        labelStyle: const TextStyle(
+            color:
+                Color.fromARGB(179, 255, 255, 255)), // text labeling text entry
+      ),
+      elevatedButtonTheme: ElevatedButtonThemeData(
+        style: ElevatedButton.styleFrom(
+          backgroundColor:
+              const Color.fromARGB(255, 22, 135, 188), // main button
+          foregroundColor:
+              const Color.fromARGB(255, 255, 255, 255), // main button text
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(8),
+          ),
+        ),
+      ),
+    );
+
     return Scaffold(
       appBar: appBar('Sign In'),
       body: ListView(
         padding: const EdgeInsets.all(24.0),
         children: [
           SupaEmailAuth(
             redirectTo: kIsWeb ? null : 'io.supabase.flutter://',
-            onSignInComplete: (response) {
-              Navigator.of(context).pushReplacementNamed('/home');
-            },
-            onSignUpComplete: (response) {
-              Navigator.of(context).pushReplacementNamed('/home');
-            },
+            onSignInComplete: navigateHome,
+            onSignUpComplete: navigateHome,
             metadataFields: [
               MetaDataField(
                 prefixIcon: const Icon(Icons.person),
@@ -34,8 +65,97 @@ class SignUp extends StatelessWidget {
                   return null;
                 },
               ),
+              BooleanMetaDataField(
+                label: 'Keep me up to date with the latest news and updates.',
+                key: 'marketing_consent',
+                checkboxPosition: ListTileControlAffinity.leading,
+              ),
+              BooleanMetaDataField(
+                key: 'terms_agreement',
+                isRequired: true,
+                checkboxPosition: ListTileControlAffinity.leading,
+                richLabelSpans: [
+                  const TextSpan(text: 'I have read and agree to the '),
+                  TextSpan(
+                    text: 'Terms and Conditions',
+                    style: const TextStyle(
+                      color: Colors.blue,
+                    ),
+                    recognizer: TapGestureRecognizer()
+                      ..onTap = () {
+                        // Handle tap on Terms and Conditions
+                      },
+                  ),
+                ],
+              ),
             ],
           ),
+
+          const Divider(),
+          optionText,
+          spacer,
+
+          // Dark theme example
+          Card(
+              elevation: 10,
+              color: const Color.fromARGB(255, 24, 24, 24),
+              child: Padding(
+                padding: const EdgeInsets.all(30),
+                child: Theme(
+                  data: darkModeThemeData,
+                  child: SupaEmailAuth(
+                      redirectTo: kIsWeb ? null : 'io.supabase.flutter://',
+                      onSignInComplete: navigateHome,
+                      onSignUpComplete: navigateHome,
+                      prefixIconEmail: null,
+                      prefixIconPassword: null,
+                      localization: const SupaEmailAuthLocalization(
+                          enterEmail: "email",
+                          enterPassword: "password",
+                          dontHaveAccount: "sign up",
+                          forgotPassword: "forgot password"),
+                      metadataFields: [
+                        MetaDataField(
+                          prefixIcon: const Icon(Icons.person),
+                          label: 'Username',
+                          key: 'username',
+                          validator: (val) {
+                            if (val == null || val.isEmpty) {
+                              return 'Please enter something';
+                            }
+                            return null;
+                          },
+                        ),
+                        BooleanMetaDataField(
+                          label:
+                              'Keep me up to date with the latest news and updates.',
+                          key: 'marketing_consent',
+                          checkboxPosition: ListTileControlAffinity.leading,
+                        ),
+                        BooleanMetaDataField(
+                          key: 'terms_agreement',
+                          isRequired: true,
+                          checkboxPosition: ListTileControlAffinity.leading,
+                          richLabelSpans: [
+                            const TextSpan(
+                                text: 'I have read and agree to the '),
+                            TextSpan(
+                              text: 'Terms and Conditions.',
+                              style: const TextStyle(
+                                color: Colors.blue,
+                              ),
+                              recognizer: TapGestureRecognizer()
+                                ..onTap = () {
+                                  //ignore: avoid_print
+                                  print('Terms and Conditions');
+                                },
+                            ),
+                          ],
+                        ),
+                      ]),
+                ),
+              )),
+
           const Divider(),
           optionText,
           spacer,