mobile-app/lib/presentation/screens/login/view/login_form.dart

import 'package:farm_tpf/authentication/authentication.dart';
import 'package:farm_tpf/data/repository/authentication_repository.dart';
import 'package:farm_tpf/presentation/custom_widgets/widget_loading.dart';
import 'package:farm_tpf/presentation/custom_widgets/widget_utils.dart';
import 'package:farm_tpf/presentation/screens/forgot_password/sc_forgot_password.dart';
import 'package:farm_tpf/presentation/screens/login/bloc/login_bloc.dart';
import 'package:farm_tpf/utils/const_color.dart';
import 'package:flutter/material.dart';
import 'package:formz/formz.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class LoginForm extends StatelessWidget {
  AuthenticationBloc _authenticationBloc;
  FocusNode _usernameFocus = FocusNode();
  FocusNode _passwordFocus = FocusNode();

  @override
  Widget build(BuildContext context) {
    _authenticationBloc = BlocProvider.of<AuthenticationBloc>(context);
    return BlocListener<LoginBloc, LoginState>(
      listener: (context, state) {
        if (state.status.isSubmissionFailure) {
          LoadingDialog.hideLoadingDialog(context);
          Utils.showSnackBarError(
              message: 'Tài khoản hoặc mật khẩu không đúng.');
        }
        if (state.status.isSubmissionSuccess) {
          LoadingDialog.hideLoadingDialog(context);
          _authenticationBloc.add(
              AuthenticationStatusChanged(AuthenticationStatus.authenticated));
        }
        if (state.status.isSubmissionInProgress) {
          LoadingDialog.showLoadingDialog(context);
        }
      },
      child: Align(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          mainAxisSize: MainAxisSize.min,
          children: [
            _UsernameInput(
                usernameFocus: _usernameFocus, nextFocus: _passwordFocus),
            const Padding(padding: EdgeInsets.all(12)),
            _PasswordInput(
              passwordFocus: _passwordFocus,
            ),
            const Padding(padding: EdgeInsets.all(16)),
            _LoginButton(),
            const Padding(padding: EdgeInsets.all(6)),
            _FogotPasswordButton(),
          ],
        ),
      ),
    );
  }
}

class _FogotPasswordButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
        alignment: Alignment.centerRight,
        child: FlatButton(
            child: Text(
              'Quên mật khẩu ?',
            ),
            onPressed: () {
              Navigator.of(context).push(
                  MaterialPageRoute(builder: (_) => ForgotPasswordScreen()));
            }));
  }
}

class _UsernameInput extends StatelessWidget {
  final FocusNode usernameFocus;
  final FocusNode nextFocus;
  _UsernameInput({@required this.usernameFocus, @required this.nextFocus});
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<LoginBloc, LoginState>(
      buildWhen: (previous, current) => previous.username != current.username,
      builder: (context, state) {
        return Container(
            height: 50,
            padding: EdgeInsets.symmetric(horizontal: 17),
            decoration: BoxDecoration(
                shape: BoxShape.rectangle,
                borderRadius: BorderRadius.circular(10),
                color: COLOR_CONST.GRAY7),
            child: Center(
              child: TextFormField(
                focusNode: usernameFocus,
                textInputAction: TextInputAction.next,
                onChanged: (username) => context
                    .bloc<LoginBloc>()
                    .add(LoginUsernameChanged(username)),
                autovalidate: true,
                validator: (_) {
                  return state.username.invalid
                      ? 'Vui lòng nhập tài khoản'
                      : null;
                },
                onFieldSubmitted: (_) {
                  usernameFocus.unfocus();
                  FocusScope.of(context).requestFocus(nextFocus);
                },
                maxLines: 1,
                keyboardType: TextInputType.text,
                obscureText: false,
                textAlign: TextAlign.left,
                decoration: InputDecoration.collapsed(
                  hintText: 'Tài khoản',
                ),
              ),
            ));
      },
    );
  }
}

class _PasswordInput extends StatelessWidget {
  final FocusNode passwordFocus;
  _PasswordInput({this.passwordFocus});
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<LoginBloc, LoginState>(
      buildWhen: (previous, current) => previous.password != current.password,
      builder: (context, state) {
        return Container(
            height: 50,
            padding: EdgeInsets.symmetric(horizontal: 17),
            decoration: BoxDecoration(
                shape: BoxShape.rectangle,
                borderRadius: BorderRadius.circular(10),
                color: COLOR_CONST.GRAY7),
            child: Center(
              child: TextFormField(
                focusNode: passwordFocus,
                onChanged: (password) => context
                    .bloc<LoginBloc>()
                    .add(LoginPasswordChanged(password)),
                autovalidate: true,
                validator: (_) {
                  return state.password.invalid
                      ? 'Vui lòng nhập mật khẩu'
                      : null;
                },
                onFieldSubmitted: (_) {
                  passwordFocus.unfocus();
                  if (state.status.isValidated) {
                    context.bloc<LoginBloc>().add(const LoginSubmitted());
                  }
                },
                maxLines: 1,
                keyboardType: TextInputType.text,
                obscureText: true,
                textAlign: TextAlign.left,
                decoration: InputDecoration.collapsed(
                  hintText: 'Mật khẩu',
                ),
              ),
            ));
      },
    );
  }
}

class _LoginButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<LoginBloc, LoginState>(
      buildWhen: (previous, current) => previous.status != current.status,
      builder: (context, state) {
        return SizedBox(
          width: double.infinity,
          height: 55,
          child: FlatButton(
            onPressed: () {
              if (state.status.isValidated) {
                context.bloc<LoginBloc>().add(const LoginSubmitted());
              }
            },
            color: state.status.isValidated
                ? COLOR_CONST.DEFAULT
                : COLOR_CONST.GRAY1_50,
            shape: RoundedRectangleBorder(
              borderRadius: new BorderRadius.circular(7.0),
            ),
            child: Text(
              'Đăng nhập'.toUpperCase(),
              style: TextStyle(
                  fontWeight: FontWeight.bold, color: COLOR_CONST.WHITE),
            ),
          ),
        );
      },
    );
  }
}