feat: otp improvement on mobile (AppFlowy-IO#7738)

LucasXu0 · LucasXu0 · commit 721fff04cdc0 · 2025-04-15T10:13:45.000+08:00
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/setting/user_session_setting_group.dart b/frontend/appflowy_flutter/lib/mobile/presentation/setting/user_session_setting_group.dart
@@ -63,8 +63,15 @@ class UserSessionSettingGroup extends StatelessWidget {
           );
         },
         builder: (context, state) {
-          return const ThirdPartySignInButtons(
-            expanded: true,
+          return Column(
+            children: [
+              const ContinueWithEmailAndPassword(),
+              const VSpace(12.0),
+              const ThirdPartySignInButtons(
+                expanded: true,
+              ),
+              const VSpace(16.0),
+            ],
           );
         },
       ),
diff --git a/frontend/appflowy_flutter/lib/user/application/sign_in_bloc.dart b/frontend/appflowy_flutter/lib/user/application/sign_in_bloc.dart
@@ -186,6 +186,13 @@ class SignInBloc extends Bloc<SignInEvent, SignInState> {
     Emitter<SignInState> emit, {
     required String email,
   }) async {
+    if (state.isSubmitting) {
+      Log.error('Sign in with magic link is already in progress');
+      return;
+    }
+
+    Log.info('Sign in with magic link: $email');
+
     emit(
       state.copyWith(
         isSubmitting: true,
diff --git a/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/desktop_sign_in_screen.dart b/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/desktop_sign_in_screen.dart
@@ -5,6 +5,7 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/shared/settings/show_settings.dart';
 import 'package:appflowy/shared/window_title_bar.dart';
 import 'package:appflowy/user/application/sign_in_bloc.dart';
+import 'package:appflowy/user/presentation/screens/sign_in_screen/widgets/anonymous_sign_in_button.dart';
 import 'package:appflowy/user/presentation/screens/sign_in_screen/widgets/widgets.dart';
 import 'package:appflowy/user/presentation/widgets/widgets.dart';
 import 'package:appflowy_ui/appflowy_ui.dart';
@@ -25,6 +26,7 @@ class DesktopSignInScreen extends StatelessWidget {
 
     return BlocBuilder<SignInBloc, SignInState>(
       builder: (context, state) {
+        final bottomPadding = UniversalPlatform.isDesktop ? 20.0 : 24.0;
         return Scaffold(
           appBar: _buildAppBar(),
           body: Center(
@@ -40,7 +42,10 @@ class DesktopSignInScreen extends StatelessWidget {
                 VSpace(theme.spacing.xxl),
 
                 // continue with email and password
-                const ContinueWithEmailAndPassword(),
+                isLocalAuthEnabled
+                    ? const SignInAnonymousButtonV3()
+                    : const ContinueWithEmailAndPassword(),
+
                 VSpace(theme.spacing.xxl),
 
                 // third-party sign in.
@@ -65,7 +70,7 @@ class DesktopSignInScreen extends StatelessWidget {
                     SignInAnonymousButtonV2(),
                   ],
                 ),
-                const VSpace(16),
+                VSpace(bottomPadding),
               ],
             ),
           ),
diff --git a/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/mobile_sign_in_screen.dart b/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/mobile_sign_in_screen.dart
@@ -40,7 +40,7 @@ class MobileSignInScreen extends StatelessWidget {
                     ? const SignInAnonymousButtonV3()
                     : const ContinueWithEmailAndPassword(),
                 const VSpace(spacing),
-                if (isAuthEnabled) _buildThirdPartySignInButtons(colorScheme),
+                if (isAuthEnabled) _buildThirdPartySignInButtons(context),
                 const VSpace(spacing * 1.5),
                 const SignInAgreement(),
                 const VSpace(spacing),
@@ -75,7 +75,8 @@ class MobileSignInScreen extends StatelessWidget {
     );
   }
 
-  Widget _buildThirdPartySignInButtons(ColorScheme colorScheme) {
+  Widget _buildThirdPartySignInButtons(BuildContext context) {
+    final theme = AppFlowyTheme.of(context);
     return Column(
       children: [
         Row(
@@ -84,10 +85,12 @@ class MobileSignInScreen extends StatelessWidget {
             const Expanded(child: Divider()),
             Padding(
               padding: const EdgeInsets.symmetric(horizontal: 8),
-              child: FlowyText(
+              child: Text(
                 LocaleKeys.signIn_or.tr(),
-                fontSize: 12,
-                color: colorScheme.onSecondary,
+                style: TextStyle(
+                  fontSize: 16,
+                  color: theme.textColorScheme.secondary,
+                ),
               ),
             ),
             const Expanded(child: Divider()),
diff --git a/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/sign_in_screen.dart b/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/sign_in_screen.dart
@@ -2,15 +2,13 @@ import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/sign_in_bloc.dart';
 import 'package:appflowy/user/presentation/router.dart';
 import 'package:appflowy/user/presentation/screens/sign_in_screen/desktop_sign_in_screen.dart';
-import 'package:appflowy/user/presentation/screens/sign_in_screen/mobile_loading_screen.dart';
 import 'package:appflowy/user/presentation/screens/sign_in_screen/mobile_sign_in_screen.dart';
+import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:universal_platform/universal_platform.dart';
 
-import '../../helpers/helpers.dart';
-
 class SignInScreen extends StatelessWidget {
   const SignInScreen({super.key});
 
@@ -23,13 +21,9 @@ class SignInScreen extends StatelessWidget {
       child: BlocConsumer<SignInBloc, SignInState>(
         listener: _showSignInError,
         builder: (context, state) {
-          final isLoading = context.read<SignInBloc>().state.isSubmitting;
-          if (UniversalPlatform.isMobile) {
-            return isLoading
-                ? const MobileLoadingScreen()
-                : const MobileSignInScreen();
-          }
-          return const DesktopSignInScreen();
+          return UniversalPlatform.isDesktop
+              ? const DesktopSignInScreen()
+              : const MobileSignInScreen();
         },
       ),
     );
@@ -47,7 +41,7 @@ class SignInScreen extends StatelessWidget {
           }
         },
         (error) {
-          handleOpenWorkspaceError(context, error);
+          Log.error('Sign in error: $error');
         },
       );
     }
diff --git a/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/anonymous_sign_in_button.dart b/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/anonymous_sign_in_button.dart
@@ -2,8 +2,8 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/anon_user_bloc.dart';
 import 'package:appflowy/user/application/sign_in_bloc.dart';
+import 'package:appflowy_ui/appflowy_ui.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
@@ -41,17 +41,11 @@ class SignInAnonymousButtonV3 extends StatelessWidget {
                         final user = bloc.state.anonUsers.first;
                         bloc.add(AnonUserEvent.openAnonUser(user));
                       };
-                return ElevatedButton(
-                  style: ElevatedButton.styleFrom(
-                    minimumSize: const Size(double.infinity, 32),
-                    maximumSize: const Size(double.infinity, 38),
-                  ),
-                  onPressed: onTap,
-                  child: FlowyText(
-                    text,
-                    fontSize: 14,
-                    color: Theme.of(context).colorScheme.onPrimary,
-                  ),
+                return AFFilledTextButton.primary(
+                  text: text,
+                  size: AFButtonSize.l,
+                  alignment: Alignment.center,
+                  onTap: onTap,
                 );
               },
             ),
diff --git a/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/continue_with/continue_with_email_and_password.dart b/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/continue_with/continue_with_email_and_password.dart
@@ -23,6 +23,8 @@ class _ContinueWithEmailAndPasswordState
   final focusNode = FocusNode();
   final emailKey = GlobalKey<AFTextFieldState>();
 
+  bool _hasPushedContinueWithMagicLinkOrPasscodePage = false;
+
   @override
   void dispose() {
     controller.dispose();
@@ -47,10 +49,12 @@ class _ContinueWithEmailAndPasswordState
             ),
           );
         } else if (successOrFail == null && !state.isSubmitting) {
-          _pushContinueWithMagicLinkOrPasscodePage(
-            context,
-            controller.text,
-          );
+          emailKey.currentState?.clearError();
+
+          // _pushContinueWithMagicLinkOrPasscodePage(
+          //   context,
+          //   controller.text,
+          // );
         }
       },
       child: Column(
@@ -95,12 +99,21 @@ class _ContinueWithEmailAndPasswordState
     context
         .read<SignInBloc>()
         .add(SignInEvent.signInWithMagicLink(email: email));
+
+    _pushContinueWithMagicLinkOrPasscodePage(
+      context,
+      email,
+    );
   }
 
   void _pushContinueWithMagicLinkOrPasscodePage(
     BuildContext context,
     String email,
   ) {
+    if (_hasPushedContinueWithMagicLinkOrPasscodePage) {
+      return;
+    }
+
     final signInBloc = context.read<SignInBloc>();
 
     // push the a continue with magic link or passcode screen
@@ -111,7 +124,13 @@ class _ContinueWithEmailAndPasswordState
           value: signInBloc,
           child: ContinueWithMagicLinkOrPasscodePage(
             email: email,
-            backToLogin: () => Navigator.pop(context),
+            backToLogin: () {
+              Navigator.pop(context);
+
+              emailKey.currentState?.clearError();
+
+              _hasPushedContinueWithMagicLinkOrPasscodePage = false;
+            },
             onEnterPasscode: (passcode) => signInBloc.add(
               SignInEvent.signInWithPasscode(
                 email: email,
@@ -122,6 +141,8 @@ class _ContinueWithEmailAndPasswordState
         ),
       ),
     );
+
+    _hasPushedContinueWithMagicLinkOrPasscodePage = true;
   }
 
   // void _pushContinueWithPasswordPage(
diff --git a/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/sign_in_anonymous_button.dart b/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/sign_in_anonymous_button.dart
@@ -6,7 +6,6 @@ import 'package:appflowy/user/application/anon_user_bloc.dart';
 import 'package:appflowy/user/application/sign_in_bloc.dart';
 import 'package:appflowy_ui/appflowy_ui.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
@@ -78,13 +77,16 @@ class ChangeCloudModeButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return FlowyButton(
-      useIntrinsicWidth: true,
-      text: FlowyText(
-        'Cloud',
-        decoration: TextDecoration.underline,
-        color: Colors.grey,
-        fontSize: 12,
+    final theme = AppFlowyTheme.of(context);
+    return AFGhostIconTextButton(
+      text: 'Cloud',
+      textColor: (context, isHovering, disabled) {
+        return theme.textColorScheme.secondary;
+      },
+      size: AFButtonSize.s,
+      padding: EdgeInsets.symmetric(
+        horizontal: theme.spacing.m,
+        vertical: theme.spacing.xs,
       ),
       onTap: () async {
         await useAppFlowyBetaCloudWithURL(
@@ -93,6 +95,13 @@ class ChangeCloudModeButton extends StatelessWidget {
         );
         await runAppFlowy();
       },
+      iconBuilder: (context, isHovering, disabled) {
+        return FlowySvg(
+          FlowySvgs.settings_s,
+          size: Size.square(20),
+          color: theme.textColorScheme.secondary,
+        );
+      },
     );
   }
 }
diff --git a/frontend/appflowy_flutter/macos/Runner/Configs/AppInfo.xcconfig b/frontend/appflowy_flutter/macos/Runner/Configs/AppInfo.xcconfig
@@ -11,4 +11,4 @@ PRODUCT_NAME = AppFlowy
 PRODUCT_BUNDLE_IDENTIFIER = io.appflowy.appflowy
 
 // The copyright displayed in application information
-PRODUCT_COPYRIGHT = Copyright © 2024 AppFlowy.IO. All rights reserved.
+PRODUCT_COPYRIGHT = Copyright © 2025 AppFlowy.IO. All rights reserved.
diff --git a/frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/builder.dart b/frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/builder.dart
@@ -191,7 +191,7 @@ class AppFlowyThemeBuilder {
           quaternary: colorScheme.neutral.neutral1000,
           quaternaryHover: colorScheme.neutral.neutral900,
           transparent: colorScheme.neutral.alphaWhite0,
-          primaryAlpha5: colorScheme.neutral.alphaGrey100005,
+          primaryAlpha5: colorScheme.neutral.alphaGrey10005,
           primaryAlpha5Hover: colorScheme.neutral.alphaGrey10010,
           primaryAlpha80: colorScheme.neutral.alphaGrey100080,
           primaryAlpha80Hover: colorScheme.neutral.alphaGrey100070,
diff --git a/frontend/rust-lib/Cargo.lock b/frontend/rust-lib/Cargo.lock
diff --git a/frontend/rust-lib/Cargo.toml b/frontend/rust-lib/Cargo.toml
@@ -152,6 +152,6 @@ collab-importer = { version = "0.1", git = "https://github.com/AppFlowy-IO/AppFl
 # To update the commit ID, run:
 # scripts/tool/update_local_ai_rev.sh new_rev_id
 # ⚠️⚠️⚠️️
-af-local-ai = { version = "0.1", git = "https://github.com/AppFlowy-IO/AppFlowy-LocalAI", rev = "9d731d89ea2e0fd764da2effa8a456210c5a39c3" }
-af-plugin = { version = "0.1", git = "https://github.com/AppFlowy-IO/AppFlowy-LocalAI", rev = "9d731d89ea2e0fd764da2effa8a456210c5a39c3" }
-af-mcp = { version = "0.1", git = "https://github.com/AppFlowy-IO/AppFlowy-LocalAI", rev = "9d731d89ea2e0fd764da2effa8a456210c5a39c3" }
+af-local-ai = { version = "0.1", git = "https://github.com/AppFlowy-IO/AppFlowy-LocalAI", rev = "093d3f4916a7b924ac66b4f0a9d81cc5fcc72eaa" }
+af-plugin = { version = "0.1", git = "https://github.com/AppFlowy-IO/AppFlowy-LocalAI", rev = "093d3f4916a7b924ac66b4f0a9d81cc5fcc72eaa" }
+af-mcp = { version = "0.1", git = "https://github.com/AppFlowy-IO/AppFlowy-LocalAI", rev = "093d3f4916a7b924ac66b4f0a9d81cc5fcc72eaa" }
