flutter_login_widget/lib/src/widgets/email_password_login.dart

import "dart:async";

import "package:flutter/material.dart";
import "package:flutter_login/flutter_login.dart";
import "package:flutter_login/src/service/local_auth_service.dart";
import "package:flutter_login/src/widgets/biometrics_button.dart";
import "package:flutter_login/src/widgets/custom_semantics.dart";

class EmailPasswordLoginForm extends StatefulWidget {
  /// Constructs an [EmailPasswordLoginForm] widget.
  ///
  /// [title]: The title to display above the form.
  /// [subtitle]: A subtitle to display below the title.
  /// [onLogin]: Callback function for user login.
  /// [onForgotPassword]: Callback function for when the user
  /// forgets their password.
  /// [onRegister]: Callback function for user registration.
  /// [options]: The options for configuring the login form.
  const EmailPasswordLoginForm({
    required this.onLogin,
    this.title,
    this.subtitle,
    this.onForgotPassword,
    this.onRegister,
    this.options = const LoginOptions(),
    super.key,
  });

  final LoginOptions options;

  final Widget? title;
  final Widget? subtitle;

  final void Function(String email, BuildContext ctx)? onForgotPassword;
  final FutureOr<void> Function(
    String email,
    String password,
    BuildContext context,
  )? onRegister;
  final FutureOr<void> Function(String email, String password) onLogin;

  @override
  State<EmailPasswordLoginForm> createState() => _EmailPasswordLoginFormState();
}

class _EmailPasswordLoginFormState extends State<EmailPasswordLoginForm> {
  final _formKey = GlobalKey<FormState>();
  final ValueNotifier<bool> _formValid = ValueNotifier(false);
  bool _obscurePassword = true;

  String _currentEmail = "";
  String _currentPassword = "";

  final LocalAuthService _localAuthService = LocalAuthService();

  void _updateCurrentEmail(String email) {
    _currentEmail = email;
    _validate();
  }

  void _updateCurrentPassword(String password) {
    _currentPassword = password;
    _validate();
  }

  void _validate() {
    late var isValid =
        widget.options.validations.validateEmail(_currentEmail) == null &&
            widget.options.validations.validatePassword(_currentPassword) ==
                null;
    if (isValid != _formValid.value) {
      _formValid.value = isValid;
    }
  }

  Future<void> _handleLogin() async {
    if (mounted) {
      var form = _formKey.currentState!;
      if (form.validate()) {
        await widget.onLogin(
          _currentEmail,
          _currentPassword,
        );
      }
    }
  }

  @override
  void initState() {
    super.initState();
    _currentEmail = widget.options.initialEmail;
    _currentPassword = widget.options.initialPassword;
    _validate();

    if (widget.options.biometricsOptions.loginWithBiometrics &&
        widget.options.biometricsOptions.triggerBiometricsAutomatically) {
      WidgetsBinding.instance.addPostFrameCallback((_) async {
        await _localAuthService.authenticate(widget.options);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    var options = widget.options;

    var emailTextFormField = CustomSemantics(
      identifier: options.accessibilityIdentifiers.emailTextFieldIdentifier,
      child: TextFormField(
        autofillHints: const [
          AutofillHints.email,
          AutofillHints.username,
        ],
        textAlign: options.emailTextAlign ?? TextAlign.start,
        onChanged: _updateCurrentEmail,
        validator: widget.options.validations.validateEmail,
        initialValue: options.initialEmail,
        keyboardType: TextInputType.emailAddress,
        textInputAction: TextInputAction.next,
        style: options.emailTextStyle,
        decoration: options.emailDecoration,
      ),
    );

    var passwordTextFormField = CustomSemantics(
      identifier: options.accessibilityIdentifiers.passwordTextFieldIdentifier,
      child: TextFormField(
        autofillHints: const [
          AutofillHints.password,
        ],
        textAlign: options.passwordTextAlign ?? TextAlign.start,
        obscureText: _obscurePassword,
        onChanged: _updateCurrentPassword,
        validator: widget.options.validations.validatePassword,
        initialValue: options.initialPassword,
        keyboardType: TextInputType.visiblePassword,
        textInputAction: TextInputAction.done,
        style: options.passwordTextStyle,
        onFieldSubmitted: (_) async => _handleLogin(),
        decoration: options.passwordDecoration.copyWith(
          suffixIcon: options.showObscurePassword
              ? IconButton(
                  padding: options.suffixIconPadding,
                  onPressed: () {
                    setState(() {
                      _obscurePassword = !_obscurePassword;
                    });
                  },
                  icon: Icon(
                    _obscurePassword ? Icons.visibility : Icons.visibility_off,
                    size: options.suffixIconSize,
                  ),
                )
              : null,
        ),
      ),
    );

    var forgotPasswordButton = widget.onForgotPassword != null
        ? Align(
            alignment: Alignment.topRight,
            child: CustomSemantics(
              identifier: options
                  .accessibilityIdentifiers.forgotPasswordButtonIdentifier,
              child: options.forgotPasswordButtonBuilder(
                context,
                () => widget.onForgotPassword?.call(_currentEmail, context),
                false,
                () {},
                options,
              ),
            ),
          )
        : const SizedBox(height: 16);

    var loginButton = AnimatedBuilder(
      animation: _formValid,
      builder: (context, _) => CustomSemantics(
        identifier: options.accessibilityIdentifiers.loginButtonIdentifier,
        child: options.loginButtonBuilder(
          context,
          _handleLogin,
          !_formValid.value,
          () {
            _formKey.currentState?.validate();
          },
          options,
        ),
      ),
    );

    var registrationButton = CustomSemantics(
      identifier: options.accessibilityIdentifiers.registrationButtonIdentifier,
      child: options.registrationButtonBuilder(
        context,
        () async {
          widget.onRegister?.call(
            _currentEmail,
            _currentPassword,
            context,
          );
        },
        false,
        () {},
        options,
      ),
    );

    var biometricsButton = BiometricsButton(
      onPressed: () async => LocalAuthService().authenticate(options),
    );

    return Scaffold(
      backgroundColor: options.loginBackgroundColor,
      body: CustomScrollView(
        physics: const ScrollPhysics(),
        slivers: [
          SliverFillRemaining(
            hasScrollBody: false,
            fillOverscroll: true,
            child: Column(
              children: [
                Expanded(
                  flex: options.spacers.titleSpacer,
                  child: LoginTitle(
                    options: options,
                    title: widget.title,
                    subtitle: widget.subtitle,
                  ),
                ),
                Expanded(
                  flex: options.spacers.formFlexValue,
                  child: ConstrainedBox(
                    constraints: BoxConstraints(
                      maxWidth: options.maxFormWidth ?? 300,
                    ),
                    child: Form(
                      key: _formKey,
                      child: AutofillGroup(
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            options.emailInputContainerBuilder(
                              emailTextFormField,
                            ),
                            options.passwordInputContainerBuilder(
                              passwordTextFormField,
                            ),
                            forgotPasswordButton,
                            if (options.spacers.spacerAfterForm != null) ...[
                              Spacer(flex: options.spacers.spacerAfterForm!),
                            ],
                            if (options
                                .biometricsOptions.loginWithBiometrics) ...[
                              Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  SizedBox(
                                    width: BiometricsButton.buttonSize.width,
                                  ),
                                  loginButton,
                                  biometricsButton,
                                ],
                              ),
                            ] else ...[
                              loginButton,
                            ],
                            if (widget.onRegister != null) ...[
                              registrationButton,
                            ],
                            if (options.spacers.spacerAfterButton != null) ...[
                              Spacer(flex: options.spacers.spacerAfterButton!),
                            ],
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class LoginTitle extends StatelessWidget {
  const LoginTitle({
    required this.options,
    this.title,
    this.subtitle,
    super.key,
  });

  final LoginOptions options;
  final Widget? title;
  final Widget? subtitle;

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    return Column(
      children: [
        if (options.spacers.spacerBeforeTitle != null) ...[
          Spacer(flex: options.spacers.spacerBeforeTitle!),
        ],
        if (title != null) ...[
          Align(
            alignment: Alignment.topCenter,
            child: wrapWithDefaultStyle(
              title,
              theme.textTheme.headlineSmall,
            ),
          ),
        ],
        if (options.spacers.spacerAfterTitle != null) ...[
          Spacer(flex: options.spacers.spacerAfterTitle!),
        ],
        if (subtitle != null) ...[
          Align(
            alignment: Alignment.topCenter,
            child: wrapWithDefaultStyle(
              subtitle,
              theme.textTheme.titleSmall,
            ),
          ),
        ],
        if (options.spacers.spacerAfterSubtitle != null) ...[
          Spacer(flex: options.spacers.spacerAfterSubtitle!),
        ],
        if (options.image != null) ...[
          Padding(
            padding: const EdgeInsets.all(16),
            child: options.image,
          ),
        ],
        if (options.spacers.spacerAfterImage != null) ...[
          Spacer(flex: options.spacers.spacerAfterImage!),
        ],
      ],
    );
  }
}

Widget? wrapWithDefaultStyle(Widget? widget, TextStyle? style) {
  if (style == null || widget == null) {
    return widget;
  } else {
    return DefaultTextStyle(style: style, child: widget);
  }
}