kasy-cli 1.2.1

package/templates/firebase/lib/features/authentication/ui/components/phone_input.dart

@@ -0,0 +1,109 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:kasy_kit/components/components.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/features/authentication/providers/phone_auth_notifier.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
+
+class PhoneInputComponent extends ConsumerStatefulWidget {
+  const PhoneInputComponent({super.key});
+
+  @override
+  ConsumerState<ConsumerStatefulWidget> createState() =>
+      _PhoneInputComponentState();
+}
+
+class _PhoneInputComponentState extends ConsumerState<PhoneInputComponent> {
+  final _formKey = GlobalKey<FormState>();
+  final _phoneController = TextEditingController();
+
+  @override
+  void dispose() {
+    _phoneController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final state = ref.watch(phoneAuthProvider);
+
+    return Form(
+      key: _formKey,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          const SizedBox(height: KasySpacing.lg),
+          Icon(KasyIcons.phoneAndroid, size: 72, color: context.colors.primary),
+          const SizedBox(height: KasySpacing.lg),
+          Text(
+            t.phone_auth.subtitle_input,
+            style: context.textTheme.titleLarge?.copyWith(
+              fontWeight: FontWeight.bold,
+            ),
+            textAlign: TextAlign.center,
+          ),
+          const SizedBox(height: KasySpacing.smd),
+          Text(
+            t.phone_auth.description_input,
+            style: context.textTheme.bodyMedium?.copyWith(
+              color: context.colors.onBackground.withValues(alpha: .7),
+            ),
+            textAlign: TextAlign.center,
+          ),
+          const SizedBox(height: KasySpacing.xl),
+          if (state.error != null)
+            Padding(
+              padding: const EdgeInsets.only(bottom: KasySpacing.xl),
+              child: Container(
+                padding: const EdgeInsets.all(KasySpacing.md),
+                decoration: BoxDecoration(
+                  color: context.colors.error,
+                  borderRadius: KasyRadius.mdBorderRadius,
+                ),
+                child: Text(
+                  state.error!,
+                  style: context.textTheme.bodyMedium?.copyWith(
+                    color: context.colors.background,
+                  ),
+                  textAlign: TextAlign.center,
+                ),
+              ),
+            ),
+          KasyTextField(
+            controller: _phoneController,
+            keyboardType: TextInputType.phone,
+            label: t.phone_auth.phone_label,
+            hint: t.phone_auth.phone_hint,
+            prefix: const Icon(KasyIcons.phone),
+            inputFormatters: [
+              FilteringTextInputFormatter.allow(RegExp(r'[0-9+\- ]')),
+            ],
+            validator: (value) {
+              if (value == null || value.isEmpty) {
+                return t.phone_auth.error_empty;
+              }
+              if (value.replaceAll(RegExp('[^0-9+]'), '').length < 7) {
+                return t.phone_auth.error_invalid;
+              }
+              return null;
+            },
+          ),
+          const SizedBox(height: KasySpacing.lg),
+          KasyButton(
+            label: t.phone_auth.continue_btn,
+            isLoading: state.isLoading,
+            expand: true,
+            onPressed: () {
+              if (_formKey.currentState!.validate()) {
+                ref
+                    .read(phoneAuthProvider.notifier)
+                    .sendOtp(_phoneController.text.trim());
+              }
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}

package/templates/firebase/lib/features/authentication/ui/phone_auth_page.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:kasy_kit/components/kasy_app_bar.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_scroll_behavior.dart';
+import 'package:kasy_kit/core/widgets/responsive_layout.dart';
+import 'package:kasy_kit/features/authentication/providers/models/phone_signin_state.dart';
+import 'package:kasy_kit/features/authentication/providers/phone_auth_notifier.dart';
+import 'package:kasy_kit/features/authentication/ui/components/otp_verification.dart';
+import 'package:kasy_kit/features/authentication/ui/components/phone_input.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
+
+class PhoneAuthPage extends ConsumerStatefulWidget {
+  const PhoneAuthPage({super.key});
+
+  @override
+  ConsumerState<PhoneAuthPage> createState() => _PhoneAuthPageState();
+}
+
+class _PhoneAuthPageState extends ConsumerState<PhoneAuthPage> {
+  @override
+  Widget build(BuildContext context) {
+    final state = ref.watch(phoneAuthProvider);
+
+    return GestureDetector(
+      onTap: () => FocusScope.of(context).unfocus(),
+      child: KasyOverlayScaffold(
+        title: switch (state) {
+          PhoneAuthInputPhoneState() => t.phone_auth.title_input,
+          PhoneAuthVerifyOtpState() => t.phone_auth.title_verify,
+        },
+        appBarStyle: KasyAppBarStyle.subpageSimple,
+        onBack: switch (state) {
+          PhoneAuthInputPhoneState() => null,
+          PhoneAuthVerifyOtpState() => () {
+              ref.read(phoneAuthProvider.notifier).reset();
+            },
+        },
+        slivers: [
+          SliverToBoxAdapter(
+            child: LargeLayoutContainer(
+              child: ScrollConfiguration(
+                behavior: const KasyKitScrollBehavior(),
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(
+                    vertical: KasySpacing.lg,
+                  ),
+                  child: switch (state) {
+                    PhoneAuthInputPhoneState() => const PhoneInputComponent(),
+                    PhoneAuthVerifyOtpState() => const OtpVerificationComponent(),
+                  },
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

package/templates/firebase/lib/features/authentication/ui/recover_password_page.dart

@@ -0,0 +1,101 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:kasy_kit/components/components.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_scroll_behavior.dart';
+import 'package:kasy_kit/features/authentication/providers/models/email.dart';
+import 'package:kasy_kit/features/authentication/providers/models/recover_state.dart';
+import 'package:kasy_kit/features/authentication/providers/recover_provider.dart';
+import 'package:kasy_kit/features/authentication/ui/widgets/recover_password_result.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
+
+final _formKey = GlobalKey<FormState>();
+
+class RecoverPasswordPage extends ConsumerWidget {
+  const RecoverPasswordPage({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final state = ref.watch(recoverStateProvider);
+
+    return PopScope(
+      canPop: context.canPop(),
+      onPopInvokedWithResult: (didPop, _) {
+        if (!didPop) {
+          return;
+        }
+        ref.invalidate(recoverStateProvider);
+      },
+      child: AnnotatedRegion<SystemUiOverlayStyle>(
+          value: SystemUiOverlayStyle.dark,
+          child: KasyOverlayScaffold(
+            title: t.auth.recover.title,
+            appBarStyle: KasyAppBarStyle.subpageSimple,
+            onBack: () {
+              if (context.canPop()) {
+                context.pop();
+              }
+            },
+            slivers: [
+              switch (state) {
+                RecoverStateData() => SliverToBoxAdapter(
+                child: ScrollConfiguration(
+                  behavior: const KasyKitScrollBehavior(),
+                  child: Form(
+                    key: _formKey,
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.stretch,
+                      children: [
+                        const SizedBox(height: KasySpacing.lg),
+                        KasyTextField(
+                          key: const Key('email_input'),
+                          label: t.auth.recover.email_label,
+                          contentType: KasyTextFieldContentType.email,
+                          validator: (value) {
+                            try {
+                              state.email.validate();
+                            } on EmailException catch (_) {
+                              return t.auth.signin.email_invalid;
+                            }
+                            return null;
+                          },
+                          onChanged: (value) => ref
+                              .read(recoverStateProvider.notifier)
+                              .setEmail(value),
+                        ),
+                        const SizedBox(height: KasySpacing.lg),
+                        KasyButton(
+                          key: const Key('recover_button'),
+                          label: t.auth.recover.submit,
+                          onPressed: () {
+                            if (!_formKey.currentState!.validate()) return;
+                            ref.read(recoverStateProvider.notifier).send();
+                          },
+                          expand: true,
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              ),
+                RecoverStateSending() => SliverFillRemaining(
+                  child: Center(
+                    child: CircularProgressIndicator.adaptive(
+                      valueColor: AlwaysStoppedAnimation<Color>(
+                        context.colors.primary,
+                      ),
+                    ),
+                  ),
+                ),
+                RecoverStateSent() => const SliverFillRemaining(
+                  child: RecoverPasswordSent(),
+                ),
+              },
+            ],
+          ),
+        ),
+    );
+  }
+}

package/templates/firebase/lib/features/authentication/ui/signin_page.dart

@@ -0,0 +1,321 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:kasy_kit/components/components.dart';
+import 'package:kasy_kit/core/data/models/user.dart';
+import 'package:kasy_kit/core/haptics/kasy_haptics.dart';
+import 'package:kasy_kit/core/states/user_state_notifier.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_pressable_depth.dart';
+import 'package:kasy_kit/core/widgets/page_background.dart';
+import 'package:kasy_kit/features/authentication/providers/models/email.dart';
+import 'package:kasy_kit/features/authentication/providers/models/password.dart';
+import 'package:kasy_kit/features/authentication/providers/models/signin_state.dart';
+import 'package:kasy_kit/features/authentication/providers/signin_state_provider.dart';
+import 'package:kasy_kit/features/authentication/ui/widgets/auth_brand.dart';
+import 'package:kasy_kit/features/authentication/ui/widgets/auth_page_back_button.dart';
+import 'package:kasy_kit/features/authentication/ui/widgets/social_separator.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
+
+final _formKey = GlobalKey<FormState>();
+const double _authFieldSpacing = KasySpacing.md;
+const double _authFieldToActionSpacing = KasySpacing.lg;
+
+class SigninPage extends ConsumerWidget {
+  final bool canDismiss;
+
+  const SigninPage({super.key, this.canDismiss = true});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final user = ref.watch(userStateNotifierProvider).user;
+    redirectIfAuthenticated(context, user);
+    if (user is AuthenticatedUserData) {
+      return const Scaffold(
+        resizeToAvoidBottomInset: false,
+        body: SizedBox.shrink(),
+      );
+    }
+    final state = ref.watch(signinStateProvider);
+    final isSending = state is SigninStateSending;
+    final showBack = shouldShowAuthBackButton(context);
+    final TextStyle forgotPasswordStyle =
+        (Theme.of(context).inputDecorationTheme.labelStyle ??
+                context.textTheme.bodySmall ??
+                const TextStyle())
+            .copyWith(
+              color: context.colors.muted,
+              fontSize: 13,
+              fontWeight: FontWeight.w500,
+            );
+    return PopScope(
+      canPop: showBack || canDismiss,
+      child: Scaffold(
+          resizeToAvoidBottomInset: false,
+          body: Stack(
+            children: [
+              Background(
+                child: Form(
+                  autovalidateMode: AutovalidateMode.disabled,
+                  key: _formKey,
+                  child: AuthFormScrollView(
+                    children: [
+                      const AuthBrand(),
+                      const SizedBox(height: KasySpacing.xl),
+                      Text(
+                        t.auth.signin.title,
+                        textAlign: TextAlign.center,
+                        style: context.textTheme.headlineMedium?.copyWith(
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                      const SizedBox(height: KasySpacing.xs),
+                      Text(
+                        t.auth.signin.subtitle,
+                        textAlign: TextAlign.center,
+                        style: context.textTheme.bodyMedium?.copyWith(
+                          color: context.colors.onSurface.withValues(
+                            alpha: 0.62,
+                          ),
+                          fontWeight: FontWeight.w500,
+                        ),
+                      ),
+                      const SizedBox(height: KasySpacing.xl),
+                      KasyTextField(
+                        key: const Key('email_input'),
+                        onChanged: (value) => ref
+                            .read(signinStateProvider.notifier)
+                            .setEmail(value),
+                        hint: t.auth.signin.email_hint,
+                        label: t.auth.signin.email_label,
+                        contentType: KasyTextFieldContentType.email,
+                        textInputAction: TextInputAction.next,
+                        validator: (value) {
+                          try {
+                            state.email.validate();
+                          } on EmailException catch (_) {
+                            return t.auth.signin.email_invalid;
+                          }
+                          return null;
+                        },
+                      ),
+                      const SizedBox(height: _authFieldSpacing),
+                      KasyTextField(
+                        key: const Key('password_input'),
+                        onChanged: (newValue) => ref
+                            .read(signinStateProvider.notifier)
+                            .setPassword(newValue),
+                        hint: t.auth.signin.password_hint,
+                        label: t.auth.signin.password_label,
+                        textInputAction: TextInputAction.done,
+                        contentType: KasyTextFieldContentType.password,
+                        onSubmitted: isSending
+                            ? null
+                            : (_) {
+                                if (!_formKey.currentState!.validate()) return;
+                                FocusScope.of(context).unfocus();
+                                ref.read(signinStateProvider.notifier).signin();
+                              },
+                        labelTrailing: GestureDetector(
+                          onTap: () => context.push('/recover_password'),
+                          child: Text(
+                            t.auth.signin.forgot_password,
+                            style: forgotPasswordStyle,
+                          ),
+                        ),
+                        validator: (value) {
+                          try {
+                            state.password.validate();
+                          } on PasswordException catch (_) {
+                            if (value == null || value.trim().isEmpty) {
+                              return t.auth.signin.password_required;
+                            }
+                            return t.auth.signin.password_too_short;
+                          }
+                          return null;
+                        },
+                      ),
+                      const SizedBox(height: _authFieldToActionSpacing),
+                      KasyButton(
+                        key: const Key('send_button'),
+                        label: t.auth.signin.submit,
+                        isLoading: isSending,
+                        onPressed: isSending
+                            ? null
+                            : () {
+                                if (!_formKey.currentState!.validate()) {
+                                  return;
+                                }
+                                FocusScope.of(context).unfocus();
+                                ref.read(signinStateProvider.notifier).signin();
+                              },
+                        expand: true,
+                      ),
+                      const SizedBox(height: KasySpacing.xs),
+                      const _SignupPrompt(),
+                      const SizedBox(height: KasySpacing.lg),
+                      const SocialSeparator(),
+                      const SizedBox(height: KasySpacing.md),
+                      const _SocialSigninRow(),
+                    ],
+                  ),
+                ),
+              ),
+              const AuthPageBackButton(),
+              if (isSending)
+                Positioned.fill(
+                  child: AbsorbPointer(
+                    child: ClipRect(
+                      child: BackdropFilter(
+                        filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
+                        child: ColoredBox(
+                          color: Colors.black.withValues(alpha: 0.15),
+                          child: Center(
+                            child: CircularProgressIndicator(
+                              color: context.colors.primary,
+                            ),
+                          ),
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+            ],
+          ),
+        ),
+      );
+  }
+}
+
+class _SignupPrompt extends StatelessWidget {
+  const _SignupPrompt();
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: FittedBox(
+        fit: BoxFit.scaleDown,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(
+              t.auth.signin.no_account,
+              style: context.textTheme.bodyMedium?.copyWith(
+                color: context.colors.onSurface.withValues(alpha: 0.62),
+                fontWeight: FontWeight.w500,
+              ),
+            ),
+            const SizedBox(width: 4),
+            KasyPressableDepth(
+              semanticLabel: t.auth.signin.signup_link,
+              onPressed: () => context.pushReplacement('/signup'),
+              child: Text(
+                t.auth.signin.signup_link,
+                style: context.textTheme.bodyMedium?.copyWith(
+                  color: context.colors.onSurface,
+                  fontWeight: FontWeight.w800,
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _SocialSigninRow extends ConsumerWidget {
+  const _SocialSigninRow();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final state = ref.watch(signinStateProvider);
+    final isSending = state is SigninStateSending;
+    return Row(
+      children: [
+        Expanded(
+          child: _SocialSigninTile(
+            label: t.auth.signin.google,
+            icon: Image.asset('assets/icons/google.png', width: 20, height: 20),
+            onPressed: isSending
+                ? null
+                : () =>
+                      ref.read(signinStateProvider.notifier).signinWithGoogle(),
+          ),
+        ),
+        const SizedBox(width: KasySpacing.sm),
+        Expanded(
+          child: _SocialSigninTile(
+            label: t.auth.signin.apple,
+            icon: Image.asset('assets/icons/apple.png', width: 20, height: 20),
+            onPressed: isSending
+                ? null
+                : () =>
+                      ref.read(signinStateProvider.notifier).signinWithApple(),
+          ),
+        ),
+        const SizedBox(width: KasySpacing.sm),
+        Expanded(
+          child: _SocialSigninTile(
+            label: t.auth.signin.facebook,
+            icon: Image.asset(
+              'assets/icons/facebook.png',
+              width: 20,
+              height: 20,
+            ),
+            onPressed: isSending
+                ? null
+                : () => ref
+                      .read(signinStateProvider.notifier)
+                      .signinWithFacebook(),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _SocialSigninTile extends StatelessWidget {
+  const _SocialSigninTile({
+    required this.label,
+    required this.icon,
+    required this.onPressed,
+  });
+
+  final String label;
+  final Widget icon;
+  final VoidCallback? onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    final bool enabled = onPressed != null;
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        onTap: enabled
+            ? () {
+                KasyHaptics.medium(context);
+                onPressed?.call();
+              }
+            : null,
+        borderRadius: BorderRadius.circular(KasyRadius.md),
+        child: Ink(
+          height: 44,
+          decoration: BoxDecoration(
+            color: context.colors.surface,
+            borderRadius: BorderRadius.circular(KasyRadius.sm),
+            border: Border.all(
+              color: context.colors.outline.withValues(alpha: 0.38),
+            ),
+          ),
+          child: Center(
+            child: Semantics(button: true, label: label, child: icon),
+          ),
+        ),
+      ),
+    );
+  }
+}