sign_up_page.dart

import 'package:auto_route/auto_route.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart' hide IconButton;
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:skogluft/application/features/unauthorized/features/signup/presentation/bloc/sign_up_bloc.dart';
import 'package:skogluft/application/features/unauthorized/features/signup/presentation/bloc/sign_up_state.dart';
import 'package:skogluft/application/presentation/resources/colors.dart';
import 'package:skogluft/application/presentation/resources/images.dart';
import 'package:skogluft/application/presentation/router/router.gr.dart';
import 'package:skogluft/application/presentation/widgets/icon_button.dart';
import 'package:skogluft/application/presentation/widgets/input_field.dart';
import 'package:skogluft/application/presentation/widgets/password_input_field.dart';
import 'package:skogluft/application/presentation/widgets/primary_button.dart';

class SignUpPage extends StatelessWidget {
  const SignUpPage({final Key? key}) : super(key: key);

  @override
  Widget build(final BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text(AppLocalizations.of(context)!.create_account),
          centerTitle: true,
        ),
        body: LayoutBuilder(
          builder: (context, constraints) => SingleChildScrollView(
            child: Container(
              constraints: BoxConstraints(
                minHeight: constraints.maxHeight,
              ),
              padding: const EdgeInsets.only(
                left: 31,
                right: 24,
              ),
              child: IntrinsicHeight(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: const [
                    SizedBox(
                      height: 32,
                    ),
                    _SignUpPageHeader(),
                    SizedBox(
                      height: 32,
                    ),
                    _SignUpPageContent(),
                    SizedBox(
                      height: 32,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      );
}

class _SignUpPageHeader extends StatelessWidget {
  const _SignUpPageHeader({final Key? key}) : super(key: key);

  @override
  Widget build(final BuildContext context) => Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            AppLocalizations.of(context)!.create_account,
            style: Theme.of(context).textTheme.headline2,
          ),
          const SizedBox(
            height: 5,
          ),
          RichText(
            text: TextSpan(
              children: [
                TextSpan(
                  text: AppLocalizations.of(context)!.or,
                  style: Theme.of(context).textTheme.bodyText2,
                ),
                TextSpan(
                  recognizer: TapGestureRecognizer()
                    ..onTap = () => context.replaceRoute(const SignInRoute()),
                  text: AppLocalizations.of(context)!.login_with_existing,
                  style: Theme.of(context).textTheme.bodyText2!.copyWith(
                        color: primaryColor,
                        fontWeight: FontWeight.w600,
                      ),
                ),
              ],
            ),
          ),
        ],
      );
}

class _SignUpPageContent extends StatelessWidget {
  const _SignUpPageContent({final Key? key}) : super(key: key);

  @override
  Widget build(final BuildContext context) => Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          IconButton(
            onPressed: () => context.read<SignUpBloc>().signUpWithGoogle(),
            icon: Image.asset(iconGoogle),
            label: Text(AppLocalizations.of(context)!.continue_with_google),
          ),
          const SizedBox(
            height: 12,
          ),
          IconButton(
            onPressed: () => context.read<SignUpBloc>().signUpWithFacebook(),
            icon: Image.asset(iconFacebook),
            label: Text(AppLocalizations.of(context)!.continue_with_facebook),
          ),
          const SizedBox(
            height: 12,
          ),
          IconButton(
            onPressed: () => context.read<SignUpBloc>().signUpWithApple(),
            icon: Image.asset(iconApple),
            label: Text(AppLocalizations.of(context)!.continue_with_apple),
          ),
          const SizedBox(
            height: 26,
          ),
          Text(
            AppLocalizations.of(context)!.or_sign_up,
            textAlign: TextAlign.center,
            style: Theme.of(context).textTheme.bodyText2,
          ),
          const SizedBox(
            height: 22,
          ),
          BlocBuilder<SignUpBloc, SignUpState>(
            buildWhen: (prev, next) => prev.nameError != next.nameError,
            builder: (context, state) => InputField(
              key: const Key('user_name'),
              labelText: AppLocalizations.of(context)!.user_name,
              errorText: state.nameError,
              textInputAction: TextInputAction.next,
              keyboardType: TextInputType.name,
              onChanged: context.read<SignUpBloc>().onNameChanged,
            ),
          ),
          const SizedBox(
            height: 12,
          ),
          BlocBuilder<SignUpBloc, SignUpState>(
            buildWhen: (prev, next) => prev.emailError != next.emailError,
            builder: (context, state) => InputField(
              key: const Key('email'),
              labelText: AppLocalizations.of(context)!.email_address,
              errorText: state.emailError,
              textInputAction: TextInputAction.next,
              keyboardType: TextInputType.emailAddress,
              onChanged: context.read<SignUpBloc>().onEmailChanged,
            ),
          ),
          const SizedBox(
            height: 12,
          ),
          BlocBuilder<SignUpBloc, SignUpState>(
            buildWhen: (prev, next) =>
                (prev.passwordError != next.passwordError) ||
                (prev.isPasswordVisible != next.isPasswordVisible),
            builder: (context, state) => PasswordInputField(
              key: const Key('password'),
              labelText: AppLocalizations.of(context)!.password,
              errorText: state.passwordError,
              isPasswordVisible: state.isPasswordVisible,
              textInputAction: TextInputAction.next,
              onChanged: context.read<SignUpBloc>().onPasswordChanged,
              onPasswordVisibilityChanged: context.read<SignUpBloc>().onPasswordVisibilityChanged,
            ),
          ),
          const SizedBox(
            height: 12,
          ),
          BlocBuilder<SignUpBloc, SignUpState>(
            buildWhen: (prev, next) =>
                (prev.repeatPasswordError != next.repeatPasswordError) ||
                (prev.isRepeatPasswordVisible != next.isRepeatPasswordVisible),
            builder: (context, state) => PasswordInputField(
              key: const Key('repeat_password'),
              labelText: AppLocalizations.of(context)!.repeat_password,
              errorText: state.repeatPasswordError,
              isPasswordVisible: state.isRepeatPasswordVisible,
              textInputAction: TextInputAction.done,
              onSubmitted: (_) {
                FocusScope.of(context).unfocus();
                context.read<SignUpBloc>().signUp();
              },
              onChanged: context.read<SignUpBloc>().onRepeatPasswordChanged,
              onPasswordVisibilityChanged:
                  context.read<SignUpBloc>().onRepeatPasswordVisibilityChanged,
            ),
          ),
          const SizedBox(
            height: 24,
          ),
          BlocConsumer<SignUpBloc, SignUpState>(
            listenWhen: (prev, next) =>
                (prev.error != next.error) || (prev.isSignUpCompleted != next.isSignUpCompleted),
            listener: (context, state) {
              if (state.error != null) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text(
                      state.error.toString(),
                    ),
                  ),
                );
              }
              if (state.isSignUpCompleted) {
                context.replaceRoute(const VerifyEmailRoute());
              }
            },
            buildWhen: (prev, next) => prev.isLoading != next.isLoading,
            builder: (context, state) => AnimatedSwitcher(
              duration: const Duration(milliseconds: 300),
              child: state.isLoading
                  ? const SizedBox(
                      height: 48,
                      child: Center(
                        child: CircularProgressIndicator(),
                      ),
                    )
                  : SizedBox(
                      width: double.infinity,
                      child: PrimaryButton(
                        key: const Key('signup_button'),
                        onPressed: () {
                          context.read<SignUpBloc>().signUp();
                        },
                        child: Text(AppLocalizations.of(context)!.create_account),
                      ),
                    ),
            ),
          ),
        ],
      );
}