feat: magic link sign-in as anonymous user (#5520)

* feat: magic link sign-in as anonymous user * chore: remove commented code * fix: custom sign-in dialog * fix: bring back sign-out dialog * fix: add minor space for sync indicator
2024-08-30 18:12:39 +00:00 · 2024-06-11 22:17:29 +02:00 · 2024-06-11 22:17:29 +02:00 · 815c99710e
commit 815c99710e
parent c9fe93920f
9 changed files with 160 additions and 84 deletions
--- a/frontend/appflowy_flutter/lib/user/application/sign_in_bloc.dart
+++ b/frontend/appflowy_flutter/lib/user/application/sign_in_bloc.dart
@ -1,3 +1,5 @@
+import 'package:flutter/foundation.dart';
+
 import 'package:appflowy/env/cloud_env.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/startup/startup.dart';
@ -9,7 +11,6 @@ import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart'
    show UserProfilePB;
 import 'package:appflowy_result/appflowy_result.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/foundation.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';

@ -30,19 +31,12 @@ class SignInBloc extends Bloc<SignInEvent, SignInState> {
      (event, emit) async {
        await event.when(
          signedInWithUserEmailAndPassword: () async => _onSignIn(emit),
-          signedInWithOAuth: (platform) async => _onSignInWithOAuth(
-            emit,
-            platform,
-          ),
+          signedInWithOAuth: (platform) async =>
+              _onSignInWithOAuth(emit, platform),
          signedInAsGuest: () async => _onSignInAsGuest(emit),
-          signedWithMagicLink: (email) async => _onSignInWithMagicLink(
-            emit,
-            email,
-          ),
-          deepLinkStateChange: (result) => _onDeepLinkStateChange(
-            emit,
-            result,
-          ),
+          signedWithMagicLink: (email) async =>
+              _onSignInWithMagicLink(emit, email),
+          deepLinkStateChange: (result) => _onDeepLinkStateChange(emit, result),
          cancel: () {
            emit(
              state.copyWith(
@ -72,9 +66,7 @@ class SignInBloc extends Bloc<SignInEvent, SignInState> {
            );
          },
          switchLoginType: (type) {
-            emit(
-              state.copyWith(loginType: type),
-            );
+            emit(state.copyWith(loginType: type));
          },
        );
      },
@ -127,9 +119,7 @@ class SignInBloc extends Bloc<SignInEvent, SignInState> {
    }
  }

-  Future<void> _onSignIn(
-    Emitter<SignInState> emit,
-  ) async {
+  Future<void> _onSignIn(Emitter<SignInState> emit) async {
    final result = await authService.signInWithEmailPassword(
      email: state.email ?? '',
      password: state.password ?? '',
@ -158,9 +148,7 @@ class SignInBloc extends Bloc<SignInEvent, SignInState> {
      ),
    );

-    final result = await authService.signUpWithOAuth(
-      platform: platform,
-    );
+    final result = await authService.signUpWithOAuth(platform: platform);
    emit(
      result.fold(
        (userProfile) => state.copyWith(
@ -185,15 +173,11 @@ class SignInBloc extends Bloc<SignInEvent, SignInState> {
      ),
    );

-    final result = await authService.signInWithMagicLink(
-      email: email,
-    );
+    final result = await authService.signInWithMagicLink(email: email);

    emit(
      result.fold(
-        (userProfile) => state.copyWith(
-          isSubmitting: true,
-        ),
+        (userProfile) => state.copyWith(isSubmitting: true),
        (error) => _stateFromCode(error),
      ),
    );
--- 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
@ -1,3 +1,5 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/core/frameless_window.dart';
 import 'package:appflowy/env/cloud_env.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
@ -8,7 +10,6 @@ import 'package:appflowy/user/presentation/widgets/widgets.dart';
 import 'package:appflowy_editor/appflowy_editor.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';

 class DesktopSignInScreen extends StatelessWidget {
@ -37,7 +38,6 @@ class DesktopSignInScreen extends StatelessWidget {
                ),
                const VSpace(20),

-                // const SignInAnonymousButton(),
                const SignInWithMagicLinkButtons(),

                // third-party sign in.
--- 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
@ -1,3 +1,5 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/sign_in_bloc.dart';
 import 'package:appflowy/user/presentation/router.dart';
@ -5,15 +7,12 @@ import 'package:appflowy/user/presentation/screens/sign_in_screen/desktop_sign_i
 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_editor/appflowy_editor.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';

 import '../../helpers/helpers.dart';

 class SignInScreen extends StatelessWidget {
-  const SignInScreen({
-    super.key,
-  });
+  const SignInScreen({super.key});

  static const routeName = '/SignInScreen';

--- a/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/magic_link_sign_in_buttons.dart
+++ b/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/magic_link_sign_in_buttons.dart
@ -1,3 +1,5 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/user/application/sign_in_bloc.dart';
 import 'package:appflowy/workspace/presentation/home/toast.dart';
@ -5,14 +7,11 @@ import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:string_validator/string_validator.dart';

 class SignInWithMagicLinkButtons extends StatefulWidget {
-  const SignInWithMagicLinkButtons({
-    super.key,
-  });
+  const SignInWithMagicLinkButtons({super.key});

  @override
  State<SignInWithMagicLinkButtons> createState() =>
@ -54,16 +53,13 @@ class _SignInWithMagicLinkButtonsState

  void _sendMagicLink(BuildContext context, String email) {
    if (!isEmail(email)) {
-      showSnackBarMessage(
+      return showSnackBarMessage(
        context,
        LocaleKeys.signIn_invalidEmail.tr(),
        duration: const Duration(seconds: 8),
      );
-      return;
    }
-    // if (context.read<SignInBloc>().state.isSubmitting) {
-    //   return;
-    // }
+
    context.read<SignInBloc>().add(SignInEvent.signedWithMagicLink(email));
    showSnackBarMessage(
      context,
--- a/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/third_party_sign_in_buttons.dart
+++ b/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/third_party_sign_in_buttons.dart
@ -1,3 +1,5 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/user/application/sign_in_bloc.dart';
@ -8,14 +10,11 @@ import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';

 class ThirdPartySignInButtons extends StatelessWidget {
  /// Used in DesktopSignInScreen, MobileSignInScreen and SettingThirdPartyLogin
-  const ThirdPartySignInButtons({
-    super.key,
-  });
+  const ThirdPartySignInButtons({super.key});

  @override
  Widget build(BuildContext context) {
--- a/frontend/appflowy_flutter/lib/user/presentation/screens/splash_screen.dart
+++ b/frontend/appflowy_flutter/lib/user/presentation/screens/splash_screen.dart
@ -1,3 +1,5 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/env/cloud_env.dart';
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/startup/startup.dart';
@ -10,7 +12,6 @@ import 'package:appflowy/user/presentation/screens/screens.dart';
 import 'package:appflowy_backend/dispatch/dispatch.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
-import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';

@ -115,10 +116,7 @@ class Body extends StatelessWidget {
    return Container(
      alignment: Alignment.center,
      child: PlatformExtension.isMobile
-          ? const FlowySvg(
-              FlowySvgs.flowy_logo_xl,
-              blendMode: null,
-            )
+          ? const FlowySvg(FlowySvgs.flowy_logo_xl, blendMode: null)
          : const _DesktopSplashBody(),
    );
  }
--- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/pages/settings_account_view.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/settings/pages/settings_account_view.dart
@ -1,9 +1,14 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
 import 'package:appflowy/env/cloud_env.dart';
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/base/icon/icon_picker.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/auth/auth_service.dart';
+import 'package:appflowy/user/application/prelude.dart';
+import 'package:appflowy/user/presentation/screens/sign_in_screen/widgets/magic_link_sign_in_buttons.dart';
 import 'package:appflowy/workspace/application/user/settings_user_bloc.dart';
 import 'package:appflowy/workspace/presentation/settings/shared/settings_alert_dialog.dart';
 import 'package:appflowy/workspace/presentation/settings/shared/settings_body.dart';
@ -15,13 +20,9 @@ import 'package:appflowy/workspace/presentation/widgets/user_avatar.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/auth.pbenum.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/user_profile.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/style_widget/button.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
-import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
-import 'package:flowy_infra_ui/widget/spacing.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';

 class SettingsAccountView extends StatefulWidget {
@ -238,33 +239,126 @@ class SignInOutButton extends StatelessWidget {
            fillColor: Theme.of(context).colorScheme.primary,
            hoverColor: const Color(0xFF005483),
            fontHoverColor: Colors.white,
-            onPressed: () => SettingsAlertDialog(
-              title: signIn
-                  ? LocaleKeys.settings_accountPage_login_loginLabel.tr()
-                  : LocaleKeys.settings_accountPage_login_logoutLabel.tr(),
-              subtitle: signIn
-                  ? null
-                  : switch (userProfile.encryptionType) {
-                      EncryptionTypePB.Symmetric => LocaleKeys
-                          .settings_menu_selfEncryptionLogoutPrompt
-                          .tr(),
-                      _ => LocaleKeys.settings_menu_logoutPrompt.tr(),
-                    },
-              implyLeading: signIn,
-              confirm: !signIn
-                  ? () async {
-                      await getIt<AuthService>().signOut();
-                      onAction();
-                    }
-                  : null,
-              children:
-                  signIn ? [SettingThirdPartyLogin(didLogin: onAction)] : null,
-            ).show(context),
+            onPressed: () {
+              if (signIn) {
+                _showSignInDialog(context);
+              } else {
+                SettingsAlertDialog(
+                  title: LocaleKeys.settings_accountPage_login_logoutLabel.tr(),
+                  subtitle: switch (userProfile.encryptionType) {
+                    EncryptionTypePB.Symmetric =>
+                      LocaleKeys.settings_menu_selfEncryptionLogoutPrompt.tr(),
+                    _ => LocaleKeys.settings_menu_logoutPrompt.tr(),
+                  },
+                  confirm: () async {
+                    await getIt<AuthService>().signOut();
+                    onAction();
+                  },
+                ).show(context);
+              }
+            },
          ),
        ),
      ],
    );
  }
+
+  Future<void> _showSignInDialog(BuildContext context) async {
+    await showDialog(
+      context: context,
+      builder: (context) => BlocProvider<SignInBloc>(
+        create: (context) => getIt<SignInBloc>(),
+        child: FlowyDialog(
+          constraints: const BoxConstraints(
+            maxHeight: 485,
+            maxWidth: 375,
+          ),
+          child: ScaffoldMessenger(
+            child: Scaffold(
+              body: Padding(
+                padding: const EdgeInsets.all(24),
+                child: Column(
+                  children: [
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.end,
+                      children: [
+                        GestureDetector(
+                          onTap: Navigator.of(context).pop,
+                          child: MouseRegion(
+                            cursor: SystemMouseCursors.click,
+                            child: Row(
+                              children: [
+                                const FlowySvg(
+                                  FlowySvgs.arrow_back_m,
+                                  size: Size.square(24),
+                                ),
+                                const HSpace(8),
+                                FlowyText.semibold(
+                                  LocaleKeys.button_back.tr(),
+                                  fontSize: 16,
+                                ),
+                              ],
+                            ),
+                          ),
+                        ),
+                        const Spacer(),
+                        GestureDetector(
+                          onTap: Navigator.of(context).pop,
+                          child: MouseRegion(
+                            cursor: SystemMouseCursors.click,
+                            child: FlowySvg(
+                              FlowySvgs.m_close_m,
+                              size: const Size.square(20),
+                              color: Theme.of(context).colorScheme.outline,
+                            ),
+                          ),
+                        ),
+                      ],
+                    ),
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        Flexible(
+                          child: FlowyText.medium(
+                            LocaleKeys.settings_accountPage_login_loginLabel
+                                .tr(),
+                            fontSize: 22,
+                            color: Theme.of(context).colorScheme.tertiary,
+                            maxLines: null,
+                          ),
+                        ),
+                      ],
+                    ),
+                    const VSpace(16),
+                    const SignInWithMagicLinkButtons(),
+                    if (isAuthEnabled) ...[
+                      const VSpace(20),
+                      Row(
+                        children: [
+                          const Flexible(child: Divider(thickness: 1)),
+                          Padding(
+                            padding: const EdgeInsets.symmetric(
+                              horizontal: 10,
+                            ),
+                            child: FlowyText.regular(
+                              LocaleKeys.signIn_or.tr(),
+                            ),
+                          ),
+                          const Flexible(child: Divider(thickness: 1)),
+                        ],
+                      ),
+                      const VSpace(10),
+                      SettingThirdPartyLogin(didLogin: onAction),
+                    ],
+                  ],
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
 }

@visibleForTesting
--- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/dialog/styled_dialogs.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/dialog/styled_dialogs.dart
@ -1,10 +1,11 @@
 import 'dart:ui';

+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
 import 'package:flowy_infra_ui/widget/dialog/dialog_size.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';

 extension IntoDialog on Widget {
  Future<dynamic> show(BuildContext context) async {
@ -57,15 +58,17 @@ class StyledDialog extends StatelessWidget {
    );

    if (shrinkWrap) {
-      innerContent =
-          IntrinsicWidth(child: IntrinsicHeight(child: innerContent));
+      innerContent = IntrinsicWidth(
+          child: IntrinsicHeight(
+        child: innerContent,
+      ));
    }

    return FocusTraversalGroup(
      child: Container(
        margin: margin ?? EdgeInsets.all(Insets.sm * 2),
        alignment: Alignment.center,
-        child: Container(
+        child: ConstrainedBox(
          constraints: BoxConstraints(
            minWidth: DialogSize.minDialogWidth,
            maxHeight: maxHeight ?? double.infinity,
--- a/frontend/rust-lib/flowy-user/src/user_manager/manager.rs
+++ b/frontend/rust-lib/flowy-user/src/user_manager/manager.rs
@ -675,6 +675,9 @@ impl UserManager {
    email: &str,
    redirect_to: &str,
  ) -> Result<(), FlowyError> {
+    self
+      .cloud_services
+      .set_user_authenticator(&Authenticator::AppFlowyCloud);
    let auth_service = self.cloud_services.get_user_service()?;
    auth_service
      .sign_in_with_magic_link(email, redirect_to)