diff --git a/CHANGELOG.md b/CHANGELOG.md index 23bb67b..213f474 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## 0.1.1 + +- feat: social aith buttons icon only option [#43](https://github.com/supabase-community/flutter-auth-ui/pull/43) +- feat: email suggestion on email form fields [#44](https://github.com/supabase-community/flutter-auth-ui/pull/44) + ## 0.1.0+2 - fix: set splash color on colored social button to provide better UX for google auth button diff --git a/assets/supabase_auth_ui.png b/assets/supabase_auth_ui.png index 39d63e5..a3fd89d 100644 Binary files a/assets/supabase_auth_ui.png and b/assets/supabase_auth_ui.png differ diff --git a/example/macos/Flutter/GeneratedPluginRegistrant.swift b/example/macos/Flutter/GeneratedPluginRegistrant.swift index ab79da3..15f6bd4 100644 --- a/example/macos/Flutter/GeneratedPluginRegistrant.swift +++ b/example/macos/Flutter/GeneratedPluginRegistrant.swift @@ -5,8 +5,8 @@ import FlutterMacOS import Foundation -import app_links_macos -import path_provider_macos +import app_links +import path_provider_foundation import url_launcher_macos func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) { diff --git a/example/windows/flutter/generated_plugin_registrant.cc b/example/windows/flutter/generated_plugin_registrant.cc index 96d0d6d..785a046 100644 --- a/example/windows/flutter/generated_plugin_registrant.cc +++ b/example/windows/flutter/generated_plugin_registrant.cc @@ -6,12 +6,12 @@ #include "generated_plugin_registrant.h" -#include +#include #include void RegisterPlugins(flutter::PluginRegistry* registry) { - AppLinksWindowsPluginRegisterWithRegistrar( - registry->GetRegistrarForPlugin("AppLinksWindowsPlugin")); + AppLinksPluginCApiRegisterWithRegistrar( + registry->GetRegistrarForPlugin("AppLinksPluginCApi")); UrlLauncherWindowsRegisterWithRegistrar( registry->GetRegistrarForPlugin("UrlLauncherWindows")); } diff --git a/example/windows/flutter/generated_plugins.cmake b/example/windows/flutter/generated_plugins.cmake index 9a732f7..8f8ee4f 100644 --- a/example/windows/flutter/generated_plugins.cmake +++ b/example/windows/flutter/generated_plugins.cmake @@ -3,7 +3,7 @@ # list(APPEND FLUTTER_PLUGIN_LIST - app_links_windows + app_links url_launcher_windows ) diff --git a/lib/src/components/supa_socials_auth.dart b/lib/src/components/supa_socials_auth.dart index 1ac55d3..374074d 100644 --- a/lib/src/components/supa_socials_auth.dart +++ b/lib/src/components/supa_socials_auth.dart @@ -2,8 +2,8 @@ import 'dart:async'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; -import 'package:supabase_flutter/supabase_flutter.dart'; import 'package:supabase_auth_ui/src/utils/constants.dart'; +import 'package:supabase_flutter/supabase_flutter.dart'; /// Social provider that are supported enum SocialProviders { @@ -82,6 +82,14 @@ enum SocialProviders { String get capitalizedName => name[0].toUpperCase() + name.substring(1); } +enum SocialButtonVariant { + /// Displays the social login buttons horizontally with icons. + icon, + + /// Displays the social login buttons vertically with icons and text labels. + iconAndText, +} + /// UI Component to create social login form class SupaSocialsAuth extends StatefulWidget { /// List of social providers to show in the form @@ -92,6 +100,9 @@ class SupaSocialsAuth extends StatefulWidget { /// You can control the appearance through `ElevatedButtonTheme` when set to false. final bool colored; + /// Whether or not to show the icon only or icon and text + final SocialButtonVariant socialButtonVariant; + /// `redirectUrl` to be passed to the `.signIn()` or `signUp()` methods /// /// Typically used to pass a DeepLink @@ -110,6 +121,7 @@ class SupaSocialsAuth extends StatefulWidget { this.redirectUrl, required this.onSuccess, this.onError, + this.socialButtonVariant = SocialButtonVariant.iconAndText, }) : super(key: key); @override @@ -147,75 +159,100 @@ class _SupaSocialsAuthState extends State { return ErrorWidget(Exception('Social provider list cannot be empty')); } - return Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: List.generate( - providers.length, - (index) { - final socialProvider = providers[index]; + final authButtons = List.generate( + providers.length, + (index) { + final socialProvider = providers[index]; - Widget iconWidget = SizedBox( - height: 48, + Color? foregroundColor = coloredBg ? Colors.white : null; + Color? backgroundColor = coloredBg ? socialProvider._btnBgColor : null; + Color? overlayColor = coloredBg ? Colors.white10 : null; + + Color? iconColor = coloredBg ? Colors.white : null; + + Widget iconWidget = SizedBox( + height: 48, + width: 48, + child: Icon( + socialProvider._iconData, + color: iconColor, + ), + ); + + if (socialProvider == SocialProviders.google && coloredBg) { + iconWidget = Image.asset( + 'assets/logos/google_light.png', + package: 'supabase_auth_ui', width: 48, - child: Icon(socialProvider._iconData), + height: 48, ); - Color? foregroundColor = coloredBg ? Colors.white : null; - Color? backgroundColor = - coloredBg ? socialProvider._btnBgColor : null; - Color? overlayColor = coloredBg ? Colors.white10 : null; + foregroundColor = Colors.black; + backgroundColor = Colors.white; + overlayColor = Colors.white; + } - Color? iconColor = coloredBg ? Colors.white : null; - - if (socialProvider == SocialProviders.google && coloredBg) { - iconWidget = Image.asset( - 'assets/logos/google_light.png', - package: 'supabase_auth_ui', - width: 48, - height: 48, + onAuthButtonPressed() async { + try { + await supaClient.auth.signInWithOAuth( + socialProvider.provider, + redirectTo: widget.redirectUrl, ); - - foregroundColor = Colors.black; - backgroundColor = Colors.white; - overlayColor = Colors.white; + } on AuthException catch (error) { + if (widget.onError == null) { + context.showErrorSnackBar(error.message); + } else { + widget.onError?.call(error); + } + } catch (error) { + if (widget.onError == null) { + context + .showErrorSnackBar('Unexpected error has occurred: $error'); + } else { + widget.onError?.call(error); + } } + } - return Padding( - padding: const EdgeInsets.symmetric(vertical: 8.0), - child: ElevatedButton.icon( - icon: iconWidget, - style: ButtonStyle( - foregroundColor: MaterialStateProperty.all(foregroundColor), - backgroundColor: MaterialStateProperty.all(backgroundColor), - overlayColor: MaterialStatePropertyAll(overlayColor), - iconColor: MaterialStatePropertyAll(iconColor), - ), - onPressed: () async { - try { - await supaClient.auth.signInWithOAuth( - socialProvider.provider, - redirectTo: widget.redirectUrl, - ); - } on AuthException catch (error) { - if (widget.onError == null) { - context.showErrorSnackBar(error.message); - } else { - widget.onError?.call(error); - } - } catch (error) { - if (widget.onError == null) { - context.showErrorSnackBar( - 'Unexpected error has occurred: $error'); - } else { - widget.onError?.call(error); - } - } - }, - label: Text('Continue with ${socialProvider.capitalizedName}'), - ), - ); - }, - ), + final authButtonStyle = ButtonStyle( + foregroundColor: MaterialStateProperty.all(foregroundColor), + backgroundColor: MaterialStateProperty.all(backgroundColor), + overlayColor: MaterialStateProperty.all(overlayColor), + iconColor: MaterialStateProperty.all(iconColor), + ); + + return Padding( + padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4), + child: widget.socialButtonVariant == SocialButtonVariant.icon + ? Material( + shape: const CircleBorder(), + elevation: 2, + color: backgroundColor, + child: InkResponse( + radius: 24, + onTap: onAuthButtonPressed, + child: iconWidget, + ), + ) + : ElevatedButton.icon( + icon: iconWidget, + style: authButtonStyle, + onPressed: onAuthButtonPressed, + label: + Text('Continue with ${socialProvider.capitalizedName}'), + ), + ); + }, ); + + return widget.socialButtonVariant == SocialButtonVariant.icon + ? Wrap( + alignment: WrapAlignment.spaceEvenly, + children: authButtons, + ) + : Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: authButtons, + ); } } diff --git a/pubspec.yaml b/pubspec.yaml index 764a891..89eb868 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: supabase_auth_ui description: UI library to implement auth forms using Supabase and Flutter -version: 0.1.0+2 +version: 0.1.1 homepage: https://supabase.com repository: 'https://github.com/supabase-community/flutter-auth-ui'