From 4c384a7715110b183790e544894a8c1d97ab4dea Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Thu, 16 Feb 2023 18:05:09 +0800 Subject: [PATCH] feat(console): cloud congrats page (#3125) --- packages/console/src/App.tsx | 3 + .../console/src/assets/images/air-play.svg | 3 + .../console/src/assets/images/calendar.svg | 6 ++ .../console/src/assets/images/get-started.svg | 17 ++++ .../src/components/Divider/index.module.scss | 4 + .../console/src/components/Divider/index.tsx | 11 +++ .../components/UserInfo/index.module.scss | 5 -- .../AppLayout/components/UserInfo/index.tsx | 3 +- .../Cloud/pages/Congrats/index.module.scss | 55 ++++++++++++ .../src/pages/Cloud/pages/Congrats/index.tsx | 85 +++++++++++++++++++ .../Cloud/pages/Welcome/index.module.scss | 1 + packages/console/src/pages/Cloud/types.ts | 1 + .../de/translation/admin-console/cloud.ts | 12 +++ .../en/translation/admin-console/cloud.ts | 12 +++ .../fr/translation/admin-console/cloud.ts | 12 +++ .../ko/translation/admin-console/cloud.ts | 12 +++ .../pt-br/translation/admin-console/cloud.ts | 12 +++ .../pt-pt/translation/admin-console/cloud.ts | 12 +++ .../tr-tr/translation/admin-console/cloud.ts | 12 +++ .../zh-cn/translation/admin-console/cloud.ts | 12 +++ 20 files changed, 283 insertions(+), 7 deletions(-) create mode 100644 packages/console/src/assets/images/air-play.svg create mode 100644 packages/console/src/assets/images/calendar.svg create mode 100644 packages/console/src/assets/images/get-started.svg create mode 100644 packages/console/src/components/Divider/index.module.scss create mode 100644 packages/console/src/components/Divider/index.tsx create mode 100644 packages/console/src/pages/Cloud/pages/Congrats/index.module.scss create mode 100644 packages/console/src/pages/Cloud/pages/Congrats/index.tsx diff --git a/packages/console/src/App.tsx b/packages/console/src/App.tsx index 29daf8aee..34d0f041d 100644 --- a/packages/console/src/App.tsx +++ b/packages/console/src/App.tsx @@ -53,6 +53,7 @@ import ApiResourcePermissions from './pages/ApiResourceDetails/ApiResourcePermis import ApiResourceSettings from './pages/ApiResourceDetails/ApiResourceSettings'; import Cloud from './pages/Cloud'; import CloudAboutUser from './pages/Cloud/pages/About'; +import CloudCongrats from './pages/Cloud/pages/Congrats'; import CloudWelcome from './pages/Cloud/pages/Welcome'; import { CloudPage } from './pages/Cloud/types'; import Profile from './pages/Profile'; @@ -87,6 +88,8 @@ const Main = () => { } /> } /> } /> + } /> + } /> }> } /> diff --git a/packages/console/src/assets/images/air-play.svg b/packages/console/src/assets/images/air-play.svg new file mode 100644 index 000000000..5ebb07d4d --- /dev/null +++ b/packages/console/src/assets/images/air-play.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/console/src/assets/images/calendar.svg b/packages/console/src/assets/images/calendar.svg new file mode 100644 index 000000000..881e253cd --- /dev/null +++ b/packages/console/src/assets/images/calendar.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/console/src/assets/images/get-started.svg b/packages/console/src/assets/images/get-started.svg new file mode 100644 index 000000000..5c391e059 --- /dev/null +++ b/packages/console/src/assets/images/get-started.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/console/src/components/Divider/index.module.scss b/packages/console/src/components/Divider/index.module.scss new file mode 100644 index 000000000..adf08c506 --- /dev/null +++ b/packages/console/src/components/Divider/index.module.scss @@ -0,0 +1,4 @@ +.divider { + height: 0; + border-bottom: 1px solid var(--color-divider); +} diff --git a/packages/console/src/components/Divider/index.tsx b/packages/console/src/components/Divider/index.tsx new file mode 100644 index 000000000..d04ec716a --- /dev/null +++ b/packages/console/src/components/Divider/index.tsx @@ -0,0 +1,11 @@ +import classNames from 'classnames'; + +import * as styles from './index.module.scss'; + +type Props = { + className?: string; +}; + +const Divider = ({ className }: Props) =>
; + +export default Divider; diff --git a/packages/console/src/containers/AppLayout/components/UserInfo/index.module.scss b/packages/console/src/containers/AppLayout/components/UserInfo/index.module.scss index f1a0437fd..5eb1d434d 100644 --- a/packages/console/src/containers/AppLayout/components/UserInfo/index.module.scss +++ b/packages/console/src/containers/AppLayout/components/UserInfo/index.module.scss @@ -75,8 +75,3 @@ margin-left: _.unit(6); } } - -.divider { - height: 0; - border-bottom: 1px solid var(--color-divider); -} diff --git a/packages/console/src/containers/AppLayout/components/UserInfo/index.tsx b/packages/console/src/containers/AppLayout/components/UserInfo/index.tsx index 4ea2c9005..43cdf7d86 100644 --- a/packages/console/src/containers/AppLayout/components/UserInfo/index.tsx +++ b/packages/console/src/containers/AppLayout/components/UserInfo/index.tsx @@ -11,6 +11,7 @@ import Globe from '@/assets/images/globe.svg'; import Palette from '@/assets/images/palette.svg'; import Profile from '@/assets/images/profile.svg'; import SignOut from '@/assets/images/sign-out.svg'; +import Divider from '@/components/Divider'; import Dropdown, { DropdownItem } from '@/components/Dropdown'; import Spacer from '@/components/Spacer'; import { Ring as Spinner } from '@/components/Spinner'; @@ -22,8 +23,6 @@ import SubMenu from '../SubMenu'; import UserInfoSkeleton from '../UserInfoSkeleton'; import * as styles from './index.module.scss'; -const Divider = () =>
; - const UserInfo = () => { const { isAuthenticated, getIdTokenClaims, signOut } = useLogto(); const navigate = useNavigate(); diff --git a/packages/console/src/pages/Cloud/pages/Congrats/index.module.scss b/packages/console/src/pages/Cloud/pages/Congrats/index.module.scss new file mode 100644 index 000000000..7b719ec5e --- /dev/null +++ b/packages/console/src/pages/Cloud/pages/Congrats/index.module.scss @@ -0,0 +1,55 @@ +@use '@/scss/underscore' as _; + +.content { + align-items: center; +} + +.title { + margin-top: _.unit(6); + font: var(--font-title-2); + text-align: center; +} + +.description { + margin: _.unit(1) 0 _.unit(6) 0; + font: var(--font-body-2); + color: var(--color-text-secondary); +} + +.buttonIcon { + opacity: 70%; +} + +.divider { + width: 100%; + margin: _.unit(8) 0; +} + +.reservation { + width: 100%; + padding: _.unit(3) _.unit(4); + border: 1px solid var(--color-divider); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: space-between; + + .reservationInfo { + display: flex; + align-items: center; + + .reservationIcon { + margin-right: _.unit(4); + flex-shrink: 0; + } + + .reservationTitle { + font: var(--font-title-3); + } + + .reservationDescription { + font: var(--font-body-2); + color: var(--color-text-secondary); + } + } +} diff --git a/packages/console/src/pages/Cloud/pages/Congrats/index.tsx b/packages/console/src/pages/Cloud/pages/Congrats/index.tsx new file mode 100644 index 000000000..acd5f5ae9 --- /dev/null +++ b/packages/console/src/pages/Cloud/pages/Congrats/index.tsx @@ -0,0 +1,85 @@ +import classNames from 'classnames'; +import { useTranslation } from 'react-i18next'; +import { useNavigate } from 'react-router-dom'; + +import AirPlay from '@/assets/images/air-play.svg'; +import Calendar from '@/assets/images/calendar.svg'; +import GetStarted from '@/assets/images/get-started.svg'; +import Button from '@/components/Button'; +import Divider from '@/components/Divider'; +import OverlayScrollbar from '@/components/OverlayScrollbar'; +import * as pageLayout from '@/pages/Cloud/layout.module.scss'; +import { buildUrl } from '@/utils/url'; + +import ActionBar from '../../components/ActionBar'; +import { CloudPage } from '../../types'; +import { getCloudPagePathname } from '../../utils'; +import * as styles from './index.module.scss'; + +const Congrats = () => { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const navigate = useNavigate(); + + const enterAdminConsole = () => { + navigate('/'); + }; + + const handleBack = () => { + navigate(getCloudPagePathname(CloudPage.SignInExperience)); + }; + + return ( +
+ +
+ +
{t('cloud.congrats.title')}
+
{t('cloud.congrats.description')}
+
+
+ + +
+ ); +}; + +export default Congrats; diff --git a/packages/console/src/pages/Cloud/pages/Welcome/index.module.scss b/packages/console/src/pages/Cloud/pages/Welcome/index.module.scss index efbfc14b5..11e325cbb 100644 --- a/packages/console/src/pages/Cloud/pages/Welcome/index.module.scss +++ b/packages/console/src/pages/Cloud/pages/Welcome/index.module.scss @@ -12,6 +12,7 @@ .title { margin-top: _.unit(6); font: var(--font-title-1); + text-align: center; } .description { diff --git a/packages/console/src/pages/Cloud/types.ts b/packages/console/src/pages/Cloud/types.ts index 064eaf771..50522fde0 100644 --- a/packages/console/src/pages/Cloud/types.ts +++ b/packages/console/src/pages/Cloud/types.ts @@ -2,6 +2,7 @@ export enum CloudPage { Welcome = 'welcome', AboutUser = 'about-user', SignInExperience = 'sign-in-experience', + Congrats = 'congrats', } export enum Project { diff --git a/packages/phrases/src/locales/de/translation/admin-console/cloud.ts b/packages/phrases/src/locales/de/translation/admin-console/cloud.ts index c8b6cb859..ee770cdec 100644 --- a/packages/phrases/src/locales/de/translation/admin-console/cloud.ts +++ b/packages/phrases/src/locales/de/translation/admin-console/cloud.ts @@ -47,6 +47,18 @@ const cloud = { others: 'Others', // UNTRANSLATED }, }, + congrats: { + title: 'Congratulations! You’ve customized and built your own sign-in experience', // UNTRANSLATED + description: 'Check out the live preview and get through end to end flow', // UNTRANSLATED + check_out_button: 'Check out the live preview', // UNTRANSLATED + reserve_title: 'Reserve your time with Logto team', // UNTRANSLATED + reserve_description: + 'Book a one-on-one session with our team for SaaS early credit and use case sharing.', // UNTRANSLATED + book_button: 'Book', // UNTRANSLATED + join_description: 'Join our public {{link}} to connect and chat with other developers.', // UNTRANSLATED + discord_link: 'discord channel', // UNTRANSLATED + enter_admin_console: 'Enter Admin Console', // UNTRANSLATED + }, }; export default cloud; diff --git a/packages/phrases/src/locales/en/translation/admin-console/cloud.ts b/packages/phrases/src/locales/en/translation/admin-console/cloud.ts index 5c2a48556..13dbacd0b 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/cloud.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/cloud.ts @@ -47,6 +47,18 @@ const cloud = { others: 'Others', }, }, + congrats: { + title: 'Congratulations! You’ve customized and built your own sign-in experience', + description: 'Check out the live preview and get through end to end flow', + check_out_button: 'Check out the live preview', + reserve_title: 'Reserve your time with Logto team', + reserve_description: + 'Book a one-on-one session with our team for SaaS early credit and use case sharing.', + book_button: 'Book', + join_description: 'Join our public {{link}} to connect and chat with other developers.', + discord_link: 'discord channel', + enter_admin_console: 'Enter Admin Console', + }, }; export default cloud; diff --git a/packages/phrases/src/locales/fr/translation/admin-console/cloud.ts b/packages/phrases/src/locales/fr/translation/admin-console/cloud.ts index c8b6cb859..ee770cdec 100644 --- a/packages/phrases/src/locales/fr/translation/admin-console/cloud.ts +++ b/packages/phrases/src/locales/fr/translation/admin-console/cloud.ts @@ -47,6 +47,18 @@ const cloud = { others: 'Others', // UNTRANSLATED }, }, + congrats: { + title: 'Congratulations! You’ve customized and built your own sign-in experience', // UNTRANSLATED + description: 'Check out the live preview and get through end to end flow', // UNTRANSLATED + check_out_button: 'Check out the live preview', // UNTRANSLATED + reserve_title: 'Reserve your time with Logto team', // UNTRANSLATED + reserve_description: + 'Book a one-on-one session with our team for SaaS early credit and use case sharing.', // UNTRANSLATED + book_button: 'Book', // UNTRANSLATED + join_description: 'Join our public {{link}} to connect and chat with other developers.', // UNTRANSLATED + discord_link: 'discord channel', // UNTRANSLATED + enter_admin_console: 'Enter Admin Console', // UNTRANSLATED + }, }; export default cloud; diff --git a/packages/phrases/src/locales/ko/translation/admin-console/cloud.ts b/packages/phrases/src/locales/ko/translation/admin-console/cloud.ts index c8b6cb859..ee770cdec 100644 --- a/packages/phrases/src/locales/ko/translation/admin-console/cloud.ts +++ b/packages/phrases/src/locales/ko/translation/admin-console/cloud.ts @@ -47,6 +47,18 @@ const cloud = { others: 'Others', // UNTRANSLATED }, }, + congrats: { + title: 'Congratulations! You’ve customized and built your own sign-in experience', // UNTRANSLATED + description: 'Check out the live preview and get through end to end flow', // UNTRANSLATED + check_out_button: 'Check out the live preview', // UNTRANSLATED + reserve_title: 'Reserve your time with Logto team', // UNTRANSLATED + reserve_description: + 'Book a one-on-one session with our team for SaaS early credit and use case sharing.', // UNTRANSLATED + book_button: 'Book', // UNTRANSLATED + join_description: 'Join our public {{link}} to connect and chat with other developers.', // UNTRANSLATED + discord_link: 'discord channel', // UNTRANSLATED + enter_admin_console: 'Enter Admin Console', // UNTRANSLATED + }, }; export default cloud; diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/cloud.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/cloud.ts index c8b6cb859..ee770cdec 100644 --- a/packages/phrases/src/locales/pt-br/translation/admin-console/cloud.ts +++ b/packages/phrases/src/locales/pt-br/translation/admin-console/cloud.ts @@ -47,6 +47,18 @@ const cloud = { others: 'Others', // UNTRANSLATED }, }, + congrats: { + title: 'Congratulations! You’ve customized and built your own sign-in experience', // UNTRANSLATED + description: 'Check out the live preview and get through end to end flow', // UNTRANSLATED + check_out_button: 'Check out the live preview', // UNTRANSLATED + reserve_title: 'Reserve your time with Logto team', // UNTRANSLATED + reserve_description: + 'Book a one-on-one session with our team for SaaS early credit and use case sharing.', // UNTRANSLATED + book_button: 'Book', // UNTRANSLATED + join_description: 'Join our public {{link}} to connect and chat with other developers.', // UNTRANSLATED + discord_link: 'discord channel', // UNTRANSLATED + enter_admin_console: 'Enter Admin Console', // UNTRANSLATED + }, }; export default cloud; diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/cloud.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/cloud.ts index c8b6cb859..ee770cdec 100644 --- a/packages/phrases/src/locales/pt-pt/translation/admin-console/cloud.ts +++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/cloud.ts @@ -47,6 +47,18 @@ const cloud = { others: 'Others', // UNTRANSLATED }, }, + congrats: { + title: 'Congratulations! You’ve customized and built your own sign-in experience', // UNTRANSLATED + description: 'Check out the live preview and get through end to end flow', // UNTRANSLATED + check_out_button: 'Check out the live preview', // UNTRANSLATED + reserve_title: 'Reserve your time with Logto team', // UNTRANSLATED + reserve_description: + 'Book a one-on-one session with our team for SaaS early credit and use case sharing.', // UNTRANSLATED + book_button: 'Book', // UNTRANSLATED + join_description: 'Join our public {{link}} to connect and chat with other developers.', // UNTRANSLATED + discord_link: 'discord channel', // UNTRANSLATED + enter_admin_console: 'Enter Admin Console', // UNTRANSLATED + }, }; export default cloud; diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/cloud.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/cloud.ts index c8b6cb859..ee770cdec 100644 --- a/packages/phrases/src/locales/tr-tr/translation/admin-console/cloud.ts +++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/cloud.ts @@ -47,6 +47,18 @@ const cloud = { others: 'Others', // UNTRANSLATED }, }, + congrats: { + title: 'Congratulations! You’ve customized and built your own sign-in experience', // UNTRANSLATED + description: 'Check out the live preview and get through end to end flow', // UNTRANSLATED + check_out_button: 'Check out the live preview', // UNTRANSLATED + reserve_title: 'Reserve your time with Logto team', // UNTRANSLATED + reserve_description: + 'Book a one-on-one session with our team for SaaS early credit and use case sharing.', // UNTRANSLATED + book_button: 'Book', // UNTRANSLATED + join_description: 'Join our public {{link}} to connect and chat with other developers.', // UNTRANSLATED + discord_link: 'discord channel', // UNTRANSLATED + enter_admin_console: 'Enter Admin Console', // UNTRANSLATED + }, }; export default cloud; diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/cloud.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/cloud.ts index c8b6cb859..ee770cdec 100644 --- a/packages/phrases/src/locales/zh-cn/translation/admin-console/cloud.ts +++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/cloud.ts @@ -47,6 +47,18 @@ const cloud = { others: 'Others', // UNTRANSLATED }, }, + congrats: { + title: 'Congratulations! You’ve customized and built your own sign-in experience', // UNTRANSLATED + description: 'Check out the live preview and get through end to end flow', // UNTRANSLATED + check_out_button: 'Check out the live preview', // UNTRANSLATED + reserve_title: 'Reserve your time with Logto team', // UNTRANSLATED + reserve_description: + 'Book a one-on-one session with our team for SaaS early credit and use case sharing.', // UNTRANSLATED + book_button: 'Book', // UNTRANSLATED + join_description: 'Join our public {{link}} to connect and chat with other developers.', // UNTRANSLATED + discord_link: 'discord channel', // UNTRANSLATED + enter_admin_console: 'Enter Admin Console', // UNTRANSLATED + }, }; export default cloud;