Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add BooleanMetaDataField to support checkbox inputs on sign-up form #115

Merged
merged 2 commits into from
Oct 4, 2024
Merged

feat: Add BooleanMetaDataField to support checkbox inputs on sign-up form #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e5f4e7f
Add BooleanMetaDataField for checkbox inputs in SupaEmailAuth
bcorman Oct 3, 2024
0b0b50f
Add documentation to README and minor code cleanup
bcorman Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 34 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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
Expand Down
94 changes: 80 additions & 14 deletions example/lib/sign_in.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:supabase_auth_ui/supabase_auth_ui.dart';

Expand Down Expand Up @@ -26,12 +27,16 @@ class SignUp extends StatelessWidget {
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide.none,
),
labelStyle: const TextStyle(color: Color.fromARGB(179, 255, 255, 255)), // text labeling text entry
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
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),
),
Expand Down Expand Up @@ -60,6 +65,29 @@ 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
},
),
],
),
],
),

Expand All @@ -76,17 +104,55 @@ class SignUp extends StatelessWidget {
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"),
),
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');
},
),
],
),
]),
),
)),

Expand Down
Loading
Loading