[PR #3217] [MERGED] feat: auth pages improvement for mobile and desktop platform #5625

New issue

Closed

opened 2026-03-23 22:19:35 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 22:19:35 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/3217
Author: @hyj1204
Created: 8/16/2023
Status: ✅ Merged
Merged: 9/12/2023
Merged by: @LucasXu0

Base: main ← Head: feat/auth_pages

📝 Commits (10+)

2faf297 chore: change name 'welcome' to 'workspace'
b5d2fc9 chore: reorganize code
f337510 chore: set blend mode null for the logo on splash screen
fa45a17 refactor: separate mobile theme and desktop theme data
b31f291 feat: improve desktop sign in screen and 3rd party log in buttons UI
93a80f0 chore: text to locale and comment out unimplemented buttons
07aa732 feat: implement MobileSignInScreen
50992ce chore: improve file hierarchy
51615e5 refactor: separate WorkspaceStartScreen in desktop and mobile
891457e feat: add mobile home page placeholder

📊 Changes

51 files changed (+1564 additions, -872 deletions)

View changed files

➖ frontend/appflowy_flutter/assets/images/app_flowy_logo.jpg (+0 -0)
📝 frontend/appflowy_flutter/integration_test/util/auth_operation.dart (+4 -4)
📝 frontend/appflowy_flutter/integration_test/util/common_operations.dart (+1 -1)
📝 frontend/appflowy_flutter/ios/Podfile.lock (+12 -0)
📝 frontend/appflowy_flutter/ios/Runner/Info.plist (+11 -0)
➕ frontend/appflowy_flutter/lib/mobile/presentation/mobile_home_page.dart (+47 -0)
📝 frontend/appflowy_flutter/lib/startup/deps_resolver.dart (+3 -3)
📝 frontend/appflowy_flutter/lib/startup/entry_point.dart (+1 -1)
➕ frontend/appflowy_flutter/lib/user/presentation/helpers/handle_open_workspace_error.dart (+33 -0)
➕ frontend/appflowy_flutter/lib/user/presentation/helpers/handle_success_or_fail.dart (+25 -0)
➕ frontend/appflowy_flutter/lib/user/presentation/helpers/helpers.dart (+2 -0)
➕ frontend/appflowy_flutter/lib/user/presentation/presentation.dart (+4 -0)
📝 frontend/appflowy_flutter/lib/user/presentation/router.dart (+90 -61)
📝 frontend/appflowy_flutter/lib/user/presentation/screens/encrypt_secret_screen.dart (+3 -2)
➕ frontend/appflowy_flutter/lib/user/presentation/screens/screens.dart (+6 -0)
➕ frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/desktop_sign_in_screen.dart (+238 -0)
➕ frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/mobile_sign_in_screen.dart (+91 -0)
➕ frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/sign_in_screen.dart (+47 -0)
➕ frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/sign_in_anonymous_button.dart (+85 -0)
➕ frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/third_party_sign_in_buttons.dart (+219 -0)

...and 31 more files

📄 Description

Organize the code

Change the term ‘Welcome’ to ‘Wrokspace’, and WelcomeScreen becomes WorkspaceStartPage.
Move all the authorization screens under one folder(appflowy_flutter/lib/user/presentation/screens)
Add static const routeName in every authorization screen, and keep it the same as the screen name. In this way to prevent misspelling the route name.

Note

Every time, when we need a route name, just simply use **Screen.routeName to navigate to **Screen

Separate mobile theme and desktop theme data

Auth Screens

For all the auth screens, they shared the same workflow(same bloc and state), the only difference between mobile and desktop is their UIs. Thus, for every auth screen, it has two versions of UIs, one is for mobile, and another is for desktop.
For example, we have MobileSignInScreen and DesktopSignInScreen under SignInScreen. Both MobileSignInScreen and DesktopSignInScreen use the widgets like SignInAnonymousButton and 'ThirdPartySignInButtons' to achieve the same functionalities with different UIs(isMobile to control which UI will apply)
The following screens have been separated into mobile and desktop:

SignInScreen
WorkspaceStartScreen
MobileHomeScreen and DesktopHomeScreen

I haven't added any test code yet. I plan to add it once the authentication workflow is more stable.

DesktopSignInScreen

MobileSignInScreen

https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/fcf8fde5-82f4-487d-9aa7-e4c1565563e4

PR Checklist

My code adheres to the AppFlowy Style Guide
I've listed at least one issue that this PR fixes in the description above.
I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
All existing tests are passing.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/AppFlowy-IO/AppFlowy/pull/3217 **Author:** [@hyj1204](https://github.com/hyj1204) **Created:** 8/16/2023 **Status:** ✅ Merged **Merged:** 9/12/2023 **Merged by:** [@LucasXu0](https://github.com/LucasXu0) **Base:** `main` ← **Head:** `feat/auth_pages` --- ### 📝 Commits (10+) - [`2faf297`](https://github.com/AppFlowy-IO/AppFlowy/commit/2faf297d2367d0510a1496260ecafd2babd449f0) chore: change name 'welcome' to 'workspace' - [`b5d2fc9`](https://github.com/AppFlowy-IO/AppFlowy/commit/b5d2fc90dfb7fb90222a2becb6c573e58940731e) chore: reorganize code - [`f337510`](https://github.com/AppFlowy-IO/AppFlowy/commit/f3375100eb7039c8510edbea4f88812e68015f68) chore: set blend mode null for the logo on splash screen - [`fa45a17`](https://github.com/AppFlowy-IO/AppFlowy/commit/fa45a17d4f1112fdb744e8853053c6121f6f0ab2) refactor: separate mobile theme and desktop theme data - [`b31f291`](https://github.com/AppFlowy-IO/AppFlowy/commit/b31f2913e82c97f1b1d9477fe5583074b44ad193) feat: improve desktop sign in screen and 3rd party log in buttons UI - [`93a80f0`](https://github.com/AppFlowy-IO/AppFlowy/commit/93a80f06b454b0ddc6e53fdce5a88f3bcc97c2f0) chore: text to locale and comment out unimplemented buttons - [`07aa732`](https://github.com/AppFlowy-IO/AppFlowy/commit/07aa7327861f878f29826521d1b790fec8cd2562) feat: implement MobileSignInScreen - [`50992ce`](https://github.com/AppFlowy-IO/AppFlowy/commit/50992ce1cb688929c0707af3f58fd689e5861458) chore: improve file hierarchy - [`51615e5`](https://github.com/AppFlowy-IO/AppFlowy/commit/51615e5f79dc23e194752131f7a227a1965df4e4) refactor: separate WorkspaceStartScreen in desktop and mobile - [`891457e`](https://github.com/AppFlowy-IO/AppFlowy/commit/891457ef95b11a6a9405b1294ccaef875866dcf9) feat: add mobile home page placeholder ### 📊 Changes **51 files changed** (+1564 additions, -872 deletions) <details> <summary>View changed files</summary> ➖ `frontend/appflowy_flutter/assets/images/app_flowy_logo.jpg` (+0 -0) 📝 `frontend/appflowy_flutter/integration_test/util/auth_operation.dart` (+4 -4) 📝 `frontend/appflowy_flutter/integration_test/util/common_operations.dart` (+1 -1) 📝 `frontend/appflowy_flutter/ios/Podfile.lock` (+12 -0) 📝 `frontend/appflowy_flutter/ios/Runner/Info.plist` (+11 -0) ➕ `frontend/appflowy_flutter/lib/mobile/presentation/mobile_home_page.dart` (+47 -0) 📝 `frontend/appflowy_flutter/lib/startup/deps_resolver.dart` (+3 -3) 📝 `frontend/appflowy_flutter/lib/startup/entry_point.dart` (+1 -1) ➕ `frontend/appflowy_flutter/lib/user/presentation/helpers/handle_open_workspace_error.dart` (+33 -0) ➕ `frontend/appflowy_flutter/lib/user/presentation/helpers/handle_success_or_fail.dart` (+25 -0) ➕ `frontend/appflowy_flutter/lib/user/presentation/helpers/helpers.dart` (+2 -0) ➕ `frontend/appflowy_flutter/lib/user/presentation/presentation.dart` (+4 -0) 📝 `frontend/appflowy_flutter/lib/user/presentation/router.dart` (+90 -61) 📝 `frontend/appflowy_flutter/lib/user/presentation/screens/encrypt_secret_screen.dart` (+3 -2) ➕ `frontend/appflowy_flutter/lib/user/presentation/screens/screens.dart` (+6 -0) ➕ `frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/desktop_sign_in_screen.dart` (+238 -0) ➕ `frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/mobile_sign_in_screen.dart` (+91 -0) ➕ `frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/sign_in_screen.dart` (+47 -0) ➕ `frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/sign_in_anonymous_button.dart` (+85 -0) ➕ `frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/third_party_sign_in_buttons.dart` (+219 -0) _...and 31 more files_ </details> ### 📄 Description   ## Organize the code - Change the term ‘Welcome’ to ‘Wrokspace’, and `WelcomeScreen` becomes `WorkspaceStartPage`. - Move all the authorization screens under one folder(appflowy_flutter/lib/user/presentation/screens) - Add static const `routeName` in every authorization screen, and keep it the same as the screen name. In this way to prevent misspelling the route name. > [!NOTE] > Every time, when we need a route name, just simply use `**Screen.routeName` to navigate to `**Screen` - Separate mobile theme and desktop theme data ## Auth Screens For all the auth screens, they shared the same workflow(same bloc and state), the only difference between mobile and desktop is their UIs. Thus, for every auth screen, it has two versions of UIs, one is for mobile, and another is for desktop. For example, we have `MobileSignInScreen` and `DesktopSignInScreen` under `SignInScreen`. Both `MobileSignInScreen` and `DesktopSignInScreen` use the widgets like `SignInAnonymousButton` and 'ThirdPartySignInButtons' to achieve the same functionalities with different UIs(`isMobile` to control which UI will apply) The following screens have been separated into mobile and desktop: - SignInScreen - WorkspaceStartScreen - MobileHomeScreen and DesktopHomeScreen I haven't added any test code yet. I plan to add it once the authentication workflow is more stable. ### DesktopSignInScreen <img width="792" alt="image" src="https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/cd27bdf3-2c47-4a33-a93c-9945cdab13b0"> ### MobileSignInScreen <img width="383" alt="Pasted Graphic 2" src="https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/0fe95ce2-99cd-4e17-a0a4-a9ef9fae84d1"> ### Google login workflow https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/fcf8fde5-82f4-487d-9aa7-e4c1565563e4  ---  #### PR Checklist - [X] My code adheres to the [AppFlowy Style Guide](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/software-contributions/submitting-code/style-guides) - [X] I've listed at least one issue that this PR fixes in the description above. - [ ] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [X] All existing tests are passing. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>