kasy-cli 1.2.1

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

@@ -0,0 +1,310 @@
+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/models/signup_state.dart';
+import 'package:kasy_kit/features/authentication/providers/signin_state_provider.dart';
+import 'package:kasy_kit/features/authentication/providers/signup_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 SignupPage extends ConsumerWidget {
+  final bool canDismiss;
+
+  const SignupPage({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 signupState = ref.watch(signupStateProvider);
+    final isSignupSending = signupState is SignupStateSending;
+    final isSocialSending =
+        ref.watch(signinStateProvider) is SigninStateSending;
+    final isSending = isSignupSending || isSocialSending;
+    final showBack = shouldShowAuthBackButton(context);
+    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.signup.title,
+                        textAlign: TextAlign.center,
+                        style: context.textTheme.headlineMedium?.copyWith(
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                      const SizedBox(height: KasySpacing.xs),
+                      Text(
+                        t.auth.signup.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(signupStateProvider.notifier)
+                            .setEmail(value),
+                        hint: t.auth.signin.email_hint,
+                        label: t.auth.signin.email_label,
+                        contentType: KasyTextFieldContentType.email,
+                        textInputAction: TextInputAction.next,
+                        validator: (value) {
+                          try {
+                            signupState.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(signupStateProvider.notifier)
+                            .setPassword(newValue),
+                        hint: t.auth.signin.password_hint,
+                        label: t.auth.signin.password_label,
+                        textInputAction: TextInputAction.done,
+                        contentType: KasyTextFieldContentType.password,
+                        onSubmitted: isSignupSending
+                            ? null
+                            : (_) {
+                                if (!_formKey.currentState!.validate()) return;
+                                FocusScope.of(context).unfocus();
+                                ref.read(signupStateProvider.notifier).signup();
+                              },
+                        validator: (value) {
+                          try {
+                            signupState.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.signup.submit,
+                        isLoading: isSignupSending,
+                        onPressed: isSignupSending
+                            ? null
+                            : () {
+                                if (!_formKey.currentState!.validate()) {
+                                  return;
+                                }
+                                FocusScope.of(context).unfocus();
+                                ref.read(signupStateProvider.notifier).signup();
+                              },
+                        expand: true,
+                      ),
+                      const SizedBox(height: KasySpacing.xs),
+                      const _SigninPrompt(),
+                      const SizedBox(height: KasySpacing.lg),
+                      const SocialSeparator(),
+                      const SizedBox(height: KasySpacing.md),
+                      const _SocialSignupRow(),
+                    ],
+                  ),
+                ),
+              ),
+              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 _SigninPrompt extends StatelessWidget {
+  const _SigninPrompt();
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: FittedBox(
+        fit: BoxFit.scaleDown,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(
+              t.auth.signup.have_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.signup.signin_link,
+              onPressed: () => context.pushReplacement('/signin'),
+              child: Text(
+                t.auth.signup.signin_link,
+                style: context.textTheme.bodyMedium?.copyWith(
+                  color: context.colors.onSurface,
+                  fontWeight: FontWeight.w800,
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _SocialSignupRow extends ConsumerWidget {
+  const _SocialSignupRow();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final state = ref.watch(signinStateProvider);
+    final isSending = state is SigninStateSending;
+    return Row(
+      children: [
+        Expanded(
+          child: _SocialSignupTile(
+            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: _SocialSignupTile(
+            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: _SocialSignupTile(
+            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 _SocialSignupTile extends StatelessWidget {
+  const _SocialSignupTile({
+    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),
+          ),
+        ),
+      ),
+    );
+  }
+}

package/templates/firebase/lib/features/authentication/ui/widgets/auth_brand.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
+
+/// Brand row shown at the top of login and signup screens.
+class AuthBrand extends StatelessWidget {
+  const AuthBrand({super.key});
+
+  static const double _iconSize = 28;
+
+  @override
+  Widget build(BuildContext context) {
+    final TextStyle? nameStyle = context.textTheme.titleLarge;
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Icon(
+          KasyIcons.packageOutline,
+          size: _iconSize,
+          color: context.colors.onSurface,
+        ),
+        const SizedBox(width: KasySpacing.sm),
+        Text(
+          t.home.dashboard.brand,
+          style: nameStyle?.copyWith(
+            fontSize: (nameStyle.fontSize ?? 22) + 2,
+            color: context.colors.onSurface,
+            fontWeight: FontWeight.w800,
+          ),
+        ),
+      ],
+    );
+  }
+}

package/templates/firebase/lib/features/authentication/ui/widgets/auth_page_back_button.dart

@@ -0,0 +1,149 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.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/theme/theme.dart';
+
+/// Back control for login/signup when opened from in-app navigation (e.g. settings).
+///
+/// Hidden on web: entry is usually `/signin` or `/signup` with nothing to pop to.
+bool shouldShowAuthBackButton(BuildContext context) {
+  return !kIsWeb && context.canPop();
+}
+
+void onAuthBackPressed(BuildContext context) {
+  if (context.canPop()) {
+    context.pop();
+  }
+}
+
+/// Sends authenticated users away from login/signup routes.
+void redirectIfAuthenticated(BuildContext context, User user) {
+  if (user is! AuthenticatedUserData) {
+    return;
+  }
+  WidgetsBinding.instance.addPostFrameCallback((_) {
+    if (context.mounted) {
+      context.go('/');
+    }
+  });
+}
+
+EdgeInsets authFormListPadding(BuildContext context) {
+  const double horizontal = KasySpacing.pageHorizontalGutter;
+  if (shouldShowAuthBackButton(context)) {
+    return EdgeInsets.fromLTRB(
+      horizontal,
+      kasyAppBarBodyTopOverlap(context),
+      horizontal,
+      0,
+    );
+  }
+  if (kIsWeb) {
+    final EdgeInsets safePadding = MediaQuery.paddingOf(context);
+    return EdgeInsets.fromLTRB(
+      horizontal,
+      safePadding.top + KasySpacing.md,
+      horizontal,
+      safePadding.bottom + KasySpacing.md,
+    );
+  }
+  return EdgeInsets.fromLTRB(
+    horizontal,
+    MediaQuery.paddingOf(context).top + KasySpacing.md,
+    horizontal,
+    0,
+  );
+}
+
+/// Scrolls login/signup forms only when content does not fit vertically.
+class AuthFormScrollView extends StatelessWidget {
+  const AuthFormScrollView({
+    super.key,
+    required this.children,
+    this.maxContentWidth = 460,
+  });
+
+  final List<Widget> children;
+  final double maxContentWidth;
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final EdgeInsets padding = authFormListPadding(context);
+        final double minContentHeight =
+            (constraints.maxHeight - padding.vertical).clamp(
+              0.0,
+              double.infinity,
+            );
+        return SingleChildScrollView(
+          physics: const ClampingScrollPhysics(),
+          keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
+          padding: padding,
+          child: ConstrainedBox(
+            constraints: BoxConstraints(minHeight: minContentHeight),
+            child: Align(
+              alignment: kIsWeb ? Alignment.center : Alignment.topCenter,
+              child: ConstrainedBox(
+                constraints: BoxConstraints(maxWidth: maxContentWidth),
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: children,
+                ),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
+
+/// Transparent chrome: only the orb back button (no frost, no title).
+class AuthPageBackButton extends StatelessWidget {
+  const AuthPageBackButton({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    if (!shouldShowAuthBackButton(context)) {
+      return const SizedBox.shrink();
+    }
+    final Color orbFg = context.colors.onSurface;
+    final Color orbFill = kasyChromeOrbFillColor(context);
+    return Positioned(
+      top: 0,
+      left: 0,
+      right: 0,
+      child: SafeArea(
+        bottom: false,
+        child: Padding(
+          padding: const EdgeInsets.fromLTRB(
+            KasySpacing.pageHorizontalGutter,
+            kasyAppBarChromePaddingTop,
+            KasySpacing.pageHorizontalGutter,
+            kasyAppBarChromePaddingBottom,
+          ),
+          child: SizedBox(
+            height: kasyAppBarToolbarRowHeight,
+            child: Row(
+              children: [
+                KasyChromeOrbIconButton(
+                  icon: KasyIcons.arrowBackIos,
+                  iconSize: 18,
+                  foregroundColor: orbFg,
+                  fillColor: orbFill,
+                  onPressed: () => onAuthBackPressed(context),
+                  tooltip: MaterialLocalizations.of(context).backButtonTooltip,
+                ),
+                const Spacer(),
+                const SizedBox(width: 44),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

package/templates/firebase/lib/features/authentication/ui/widgets/otp_input.dart

@@ -0,0 +1,194 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+
+/// A widget that allows the user to input an OTP.
+///
+/// This widget is a wrapper around the [OtpInputField] widget.
+/// It manages the focus and text input of the individual input fields.
+/// It also provides a main controller to listen to the changes of the OTP.
+class OtpInput extends StatefulWidget {
+  /// The callback that is called when the OTP is completed.
+  final Function(String) onCompleted;
+
+  /// The length of the OTP.
+  final int length;
+
+  /// The main controller to listen to the changes of the OTP.
+  final TextEditingController? controller;
+
+  const OtpInput({
+    super.key,
+    required this.onCompleted,
+    this.length = 6,
+    this.controller,
+  });
+
+  @override
+  State<OtpInput> createState() => _OtpInputState();
+}
+
+class _OtpInputState extends State<OtpInput> {
+  late List<TextEditingController> _controllers;
+  late List<FocusNode> _focusNodes;
+
+  @override
+  void initState() {
+    super.initState();
+    _controllers = List.generate(
+      widget.length,
+      (index) => TextEditingController(),
+    );
+    _focusNodes = List.generate(
+      widget.length,
+      (index) => FocusNode(),
+    );
+
+    if (widget.controller != null) {
+      widget.controller!.addListener(_handleExternalControllerChange);
+    }
+  }
+
+  @override
+  void dispose() {
+    if (widget.controller != null) {
+      widget.controller!.removeListener(_handleExternalControllerChange);
+    }
+
+    for (final controller in _controllers) {
+      controller.dispose();
+    }
+
+    for (final focusNode in _focusNodes) {
+      focusNode.dispose();
+    }
+
+    super.dispose();
+  }
+
+  void _handleExternalControllerChange() {
+    if (widget.controller != null) {
+      final text = widget.controller!.text;
+
+      for (int i = 0; i < widget.length; i++) {
+        if (i < text.length) {
+          _controllers[i].text = text[i];
+        } else {
+          _controllers[i].text = '';
+        }
+      }
+    }
+  }
+
+  String _getOtpValue() {
+    return _controllers.map((controller) => controller.text).join();
+  }
+
+  void _checkCompletion() {
+    final otp = _getOtpValue();
+    if (otp.length == widget.length) {
+      widget.onCompleted(otp);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+      children: List.generate(
+        widget.length,
+        (index) => Expanded(
+          child: OtpInputField(
+            controller: _controllers[index],
+            focusNode: _focusNodes[index],
+            onChanged: (value) {
+              if (widget.controller != null) {
+                final currentOtp = _getOtpValue();
+                widget.controller!.text = currentOtp;
+              }
+              if (index < widget.length - 1) {
+                FocusScope.of(context).requestFocus(_focusNodes[index + 1]);
+              } else {
+                FocusScope.of(context).unfocus();
+                _checkCompletion();
+              }
+            },
+            onDelete: () {
+              if (index > 0) {
+                FocusScope.of(context).requestFocus(_focusNodes[index - 1]);
+              }
+            },
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+typedef OtpInputFieldChanged = void Function(String value);
+
+typedef OtpInputFieldDelete = void Function();
+
+/// A single input field for the OTP input.
+class OtpInputField extends StatelessWidget {
+  final TextEditingController? controller;
+  final FocusNode focusNode;
+  final OtpInputFieldChanged onChanged;
+  final OtpInputFieldDelete onDelete;
+
+  const OtpInputField({
+    super.key,
+    required this.controller,
+    required this.focusNode,
+    required this.onChanged,
+    required this.onDelete,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 60,
+      margin: const EdgeInsets.symmetric(horizontal: KasySpacing.xs),
+      decoration: BoxDecoration(
+        borderRadius: KasyRadius.smBorderRadius,
+        border: Border.all(
+          color: context.colors.primary.withValues(alpha: 0.3),
+          width: 2,
+        ),
+      ),
+      child: TextField(
+        controller: controller,
+        focusNode: focusNode,
+        textAlign: TextAlign.center,
+        keyboardType: TextInputType.number,
+        style: context.textTheme.headlineSmall?.copyWith(
+          fontWeight: FontWeight.bold,
+        ),
+        maxLength: 1,
+        decoration: const InputDecoration(
+          border: InputBorder.none,
+          counterText: '',
+        ),
+        inputFormatters: [
+          FilteringTextInputFormatter.digitsOnly,
+        ],
+        onChanged: (value) {
+          if (value.isNotEmpty) {
+            onChanged(value);
+            return;
+          }
+          if (value.isEmpty) {
+            onDelete();
+            return;
+          }
+        },
+        onTap: () {
+          controller!.selection = TextSelection(
+            baseOffset: 0,
+            extentOffset: controller!.text.length,
+          );
+        },
+      ),
+    );
+  }
+}