From 979076769a069a3f100f33ed4cec9445ee0e18f5 Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Mon, 9 May 2022 23:55:25 +0800 Subject: [PATCH] feat(console): implement get started page --- packages/console/src/App.tsx | 2 + packages/console/src/assets/images/cake.svg | 22 ++++ packages/console/src/assets/images/crab.svg | 28 +++++ packages/console/src/assets/images/drink.svg | 24 ++++ packages/console/src/assets/images/frog.svg | 18 +++ .../src/assets/images/grinning-face.svg | 15 +++ packages/console/src/assets/images/owl.svg | 14 +++ .../src/pages/GetStarted/index.module.scss | 65 ++++++++++ .../console/src/pages/GetStarted/index.tsx | 115 ++++++++++++++++++ packages/phrases/src/locales/en.ts | 27 ++++ packages/phrases/src/locales/zh-cn.ts | 27 ++++ 11 files changed, 357 insertions(+) create mode 100644 packages/console/src/assets/images/cake.svg create mode 100644 packages/console/src/assets/images/crab.svg create mode 100644 packages/console/src/assets/images/drink.svg create mode 100644 packages/console/src/assets/images/frog.svg create mode 100644 packages/console/src/assets/images/grinning-face.svg create mode 100644 packages/console/src/assets/images/owl.svg create mode 100644 packages/console/src/pages/GetStarted/index.module.scss create mode 100644 packages/console/src/pages/GetStarted/index.tsx diff --git a/packages/console/src/App.tsx b/packages/console/src/App.tsx index 2d5913d3a..d4a003df6 100644 --- a/packages/console/src/App.tsx +++ b/packages/console/src/App.tsx @@ -21,6 +21,7 @@ import Applications from './pages/Applications'; import Callback from './pages/Callback'; import ConnectorDetails from './pages/ConnectorDetails'; import Connectors from './pages/Connectors'; +import GetStarted from './pages/GetStarted'; import NotFound from './pages/NotFound'; import Settings from './pages/Settings'; import SignInExperience from './pages/SignInExperience'; @@ -80,6 +81,7 @@ const Main = () => { } /> }> } /> + } /> } /> diff --git a/packages/console/src/assets/images/cake.svg b/packages/console/src/assets/images/cake.svg new file mode 100644 index 000000000..c63814846 --- /dev/null +++ b/packages/console/src/assets/images/cake.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/console/src/assets/images/crab.svg b/packages/console/src/assets/images/crab.svg new file mode 100644 index 000000000..ad688cefa --- /dev/null +++ b/packages/console/src/assets/images/crab.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/console/src/assets/images/drink.svg b/packages/console/src/assets/images/drink.svg new file mode 100644 index 000000000..9886db5e2 --- /dev/null +++ b/packages/console/src/assets/images/drink.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/console/src/assets/images/frog.svg b/packages/console/src/assets/images/frog.svg new file mode 100644 index 000000000..adbb4260a --- /dev/null +++ b/packages/console/src/assets/images/frog.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/packages/console/src/assets/images/grinning-face.svg b/packages/console/src/assets/images/grinning-face.svg new file mode 100644 index 000000000..48b050ccf --- /dev/null +++ b/packages/console/src/assets/images/grinning-face.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/console/src/assets/images/owl.svg b/packages/console/src/assets/images/owl.svg new file mode 100644 index 000000000..9b1b58bc5 --- /dev/null +++ b/packages/console/src/assets/images/owl.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/console/src/pages/GetStarted/index.module.scss b/packages/console/src/pages/GetStarted/index.module.scss new file mode 100644 index 000000000..146dd5080 --- /dev/null +++ b/packages/console/src/pages/GetStarted/index.module.scss @@ -0,0 +1,65 @@ +@use '@/scss/underscore' as _; + +.container { + display: flex; + flex-direction: column; + overflow-y: auto; +} + +.header { + margin-bottom: _.unit(6); + + .title { + font: var(--font-title-large); + color: var(--color-text); + } + + .subtitle { + display: flex; + align-items: center; + margin-top: _.unit(1); + padding-right: _.unit(6); + font: var(--font-body-medium); + color: var(--color-caption); + + .hideButton { + color: var(--color-primary); + cursor: pointer; + } + } +} + +.card { + display: flex; + padding: _.unit(6) _.unit(8); + + .icon { + width: 48px; + height: 48px; + margin-right: _.unit(6); + } + + .wrapper { + flex: 1; + display: flex; + flex-direction: column; + + .title { + font: var(--font-title-medium); + color: var(--color-text); + } + + .subtitle { + font: var(--font-body-medium); + color: var(--color-caption); + } + } + + .button { + min-width: 120px; + } +} + +.card + .card { + margin-top: _.unit(4); +} diff --git a/packages/console/src/pages/GetStarted/index.tsx b/packages/console/src/pages/GetStarted/index.tsx new file mode 100644 index 000000000..ef387460d --- /dev/null +++ b/packages/console/src/pages/GetStarted/index.tsx @@ -0,0 +1,115 @@ +import { AdminConsoleKey, I18nKey } from '@logto/phrases'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; + +import cakeIcon from '@/assets/images/cake.svg'; +import crabIcon from '@/assets/images/crab.svg'; +import drinkIcon from '@/assets/images/drink.svg'; +import frogIcon from '@/assets/images/frog.svg'; +import grinningFaceIcon from '@/assets/images/grinning-face.svg'; +import owlIcon from '@/assets/images/owl.svg'; +import Button from '@/components/Button'; +import Card from '@/components/Card'; +import Spacer from '@/components/Spacer'; + +import * as styles from './index.module.scss'; + +const GetStarted = () => { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const data: Array<{ + title: AdminConsoleKey; + subtitle: AdminConsoleKey; + icon: string; + buttonText: I18nKey; + onClick: () => void; + }> = [ + { + title: 'get_started.card1_title', + subtitle: 'get_started.card1_subtitle', + icon: grinningFaceIcon, + buttonText: 'general.check_out', + onClick: () => { + console.log('tada!'); + }, + }, + { + title: 'get_started.card2_title', + subtitle: 'get_started.card2_subtitle', + icon: cakeIcon, + buttonText: 'general.create', + onClick: () => { + console.log('tada!'); + }, + }, + { + title: 'get_started.card3_title', + subtitle: 'get_started.card3_subtitle', + icon: drinkIcon, + buttonText: 'general.create', + onClick: () => { + console.log('tada!'); + }, + }, + { + title: 'get_started.card4_title', + subtitle: 'get_started.card4_subtitle', + icon: crabIcon, + buttonText: 'general.set_up', + onClick: () => { + console.log('tada!'); + }, + }, + { + title: 'get_started.card5_title', + subtitle: 'get_started.card5_subtitle', + icon: owlIcon, + buttonText: 'general.customize', + onClick: () => { + console.log('tada!'); + }, + }, + { + title: 'get_started.card6_title', + subtitle: 'get_started.card6_subtitle', + icon: frogIcon, + buttonText: 'general.check_out', + onClick: () => { + console.log('tada!'); + }, + }, + ]; + + return ( +
+
+
{t('get_started.title')}
+
+ {t('get_started.subtitle_part1')} + + + {t('get_started.subtitle_part2')} + {t('get_started.hide_this')} + +
+
+ {data.map(({ title, subtitle, icon, buttonText, onClick }) => ( + + +
+
{t(title)}
+
{t(subtitle)}
+
+
+ ); +}; + +export default GetStarted; diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts index 7c9258bb1..5a9dbcfd1 100644 --- a/packages/phrases/src/locales/en.ts +++ b/packages/phrases/src/locales/en.ts @@ -13,6 +13,10 @@ const translation = { added: 'Added', cancel: 'Cancel', confirm: 'Confirm', + check_out: 'Check out', + create: 'Create', + set_up: 'Set up', + customize: 'Customize', }, main_flow: { input: { @@ -268,6 +272,29 @@ const translation = { more_options: 'MORE OPTIONS', connector_deleted: 'The connector has been deleted.', }, + get_started: { + title: 'How do you want to get started with Logto?', + subtitle_part1: 'Here are the following things you can do', + subtitle_part2: 'I’m done with this set up. ', + hide_this: 'Hide this', + card1_title: 'Logto is a XXX for customer identity. Check out our demo', + card1_subtitle: + 'Setup a mobile, single page or traditional application to use Logto for Authentication.', + card2_title: 'Create and integrate the first application', + card2_subtitle: + 'Setup a mobile, single page or traditional application to use Logto for Authentication.', + card3_title: 'Configure connectors to enable passwordless', + card3_subtitle: + 'Setup a mobile, single page or traditional application to use Logto for Authentication.', + card4_title: 'One click to sign in', + card4_subtitle: + 'With this step, users can use email or phone numbers to sign in without a password or use social identity to sign in.', + card5_title: 'Customize sign-in experience', + card5_subtitle: + 'Customize the sign in UI and branding. This is what the end user will see on the app side.', + card6_title: 'Further readings', + card6_subtitle: 'Learn more about Logto and how to use it.', + }, users: { title: 'User Management', subtitle: diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts index 47b02016d..2c1341dfd 100644 --- a/packages/phrases/src/locales/zh-cn.ts +++ b/packages/phrases/src/locales/zh-cn.ts @@ -15,6 +15,10 @@ const translation = { added: '已添加', cancel: '取消', confirm: '确认', + check_out: '查看', + create: '创建', + set_up: '配置', + customize: '自定义', }, main_flow: { input: { @@ -265,6 +269,29 @@ const translation = { more_options: '更多选项', connector_deleted: '成功删除连接器。', }, + get_started: { + title: '还不知道如何使用 Logto?', + subtitle_part1: '下列是一些适合您快速上手的事情', + subtitle_part2: '这配置页面我要看吐了，', + hide_this: '退下！', + card1_title: 'Logto 是您没有使用过的全新身份管理工具，来看看我们的 Demo 吧', + card1_subtitle: + '无论是 mobile 应用，SPA web 还是传统 web 应用，您都可以使用 Logto，快速创建和管理身份，实现登录验证服务。', + card2_title: '快来创建您的第一款应用吧', + card2_subtitle: + 'Setup a mobile, single page or traditional application to use Logto for Authentication.', + card3_title: '轻松配置连接器，实现无密码登录', + card3_subtitle: + 'Setup a mobile, single page or traditional application to use Logto for Authentication.', + card4_title: 'One click to sign in', + card4_subtitle: + 'With this step, users can use email or phone numbers to sign in without a password or use social identity to sign in.', + card5_title: '自定义您的 sign-in experience', + card5_subtitle: + 'Customize the sign in UI and branding. This is what the end user will see on the app side.', + card6_title: 'Further readings', + card6_subtitle: 'Learn more about Logto and how to use it.', + }, users: { title: '用户管理', subtitle: '管理已注册用户, 创建新用户，编辑用户资料。',