supabase-community / flutter-auth-ui

Supabase Auth UI library for Flutter
https://supabase.com
MIT License
115 stars 60 forks source link

feat: Improve form interaction and code organization in supa_email_auth component #106

Closed henry2man closed 4 months ago

henry2man commented 4 months ago

What kind of change does this PR introduce?

Feature

What is the current behavior?

Currently, the form does not automatically submit when the "Enter" key is pressed. The focus management is also not optimal, and there is no immediate feedback on input validation. The code for button press handlers is also not well organized, affecting readability and maintainability.

What is the new behavior?

  1. Form Submission on Enter Key Press:

    • Added functionality to submit the form automatically when the "Enter" key is pressed, improving user experience.
      onFieldSubmitted: (_) {
      if (_isRecoveringPassword) {
       _passwordRecovery();
      }
      }
  2. Focus Management:

    • Introduced focus management to ensure the email field is focused if validation fails, guiding the user to the correct input field.
      final FocusNode _emailFocusNode = FocusNode();
      ...
      focusNode: _emailFocusNode,
  3. Autovalidate Mode:

    • Enabled AutovalidateMode.onUserInteraction for email and password fields to provide immediate feedback on input validation.
      autovalidateMode: AutovalidateMode.onUserInteraction,
  4. Reorganized Button Press Handlers:

    • Refactored the logic for handling button presses into separate methods _signInSignUp and _passwordRecovery, enhancing readability and maintainability.
      ElevatedButton(
      onPressed: _signInSignUp,
      ...
  5. Code Reorganization:

    • Moved the sign-in/sign-up and password recovery logic into dedicated methods to streamline the widget build method and improve code readability.
      void _signInSignUp() async { ... }
      void _passwordRecovery() async { ... }

Additional context

Benefits: