refactor(console): add vanilla js integration guide (#1309)

packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx

@@ -79,7 +79,7 @@ const App = () => (
 
 ### 配置 Redirect URI
 
-首先，我们来添加 Redirect URI，如：`http://localhost:1234/callback`
+首先，我们来添加 Redirect URI，如：`http://localhost:1234/callback`。
 
 <UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
 
@@ -177,9 +177,9 @@ const SignOut = () => {
   onButtonClick={props.onComplete}
 >
 
-- [Customize sign-in experience](https://docs.logto.io/zh-cn/docs/recipes/customize-sie)
+- [自定义登录体验](https://docs.logto.io/zh-cn/docs/recipes/customize-sie)
-- [Enable SMS or email passcode sign-in](https://docs.logto.io/zh-cn/docs/tutorials/get-started/enable-passcode-sign-in)
+- [启用短信或邮件验证码登录](https://docs.logto.io/zh-cn/docs/tutorials/get-started/enable-passcode-sign-in)
-- [Enable social sign-in](https://docs.logto.io/zh-cn/docs/tutorials/get-started/enable-social-sign-in)
+- [启用社交登录](https://docs.logto.io/zh-cn/docs/tutorials/get-started/enable-social-sign-in)
-- [Protect your API](https://docs.logto.io/zh-cn/docs/recipes/protect-your-api)
+- [保护你的 API](https://docs.logto.io/zh-cn/docs/recipes/protect-your-api)
 
 </Step>

packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx

@@ -0,0 +1,148 @@
+import UriInputField from '@mdx/components/UriInputField';
+import Step from '@mdx/components/Step';
+import Tabs from '@mdx/components/Tabs';
+import TabItem from '@mdx/components/TabItem';
+import Alert from '@/components/Alert';
+
+<Step
+  title="Add Logto SDK as a dependency"
+  subtitle="Please select your favorite package manager"
+  index={0}
+  activeIndex={props.activeStepIndex}
+  onButtonClick={() => props.onNext(1)}
+>
+<Tabs>
+<TabItem value="npm" label="npm">
+
+```bash
+npm i @logto/browser
+```
+
+</TabItem>
+<TabItem value="yarn" label="Yarn">
+
+```bash
+yarn add @logto/browser
+```
+
+</TabItem>
+<TabItem value="pnpm" label="pnpm">
+
+```bash
+pnpm add @logto/browser
+```
+
+</TabItem>
+</Tabs>
+</Step>
+
+<Step
+  title="Init LogtoClient"
+  subtitle="1 step"
+  index={1}
+  activeIndex={props.activeStepIndex}
+  onButtonClick={() => props.onNext(2)}
+>
+
+Import and init `LogtoClient` by passing config:
+
+<pre>
+<code className="language-ts">
+{`import LogtoClient from '@logto/browser';
+
+const logtoClient = new LogtoClient({
+  endpoint: '${props.endpoint}',
+  clientId: '${props.appId}',
+});`}
+</code>
+</pre>
+
+</Step>
+
+<Step
+  title="Sign In"
+  subtitle="3 steps"
+  index={2}
+  activeIndex={props.activeStepIndex}
+  onButtonClick={() => props.onNext(3)}
+>
+
+<Alert>
+  In the following steps, we assume your app is running on <code>http://localhost:1234</code>.
+</Alert>
+
+### Configure Redirect URI
+
+First, let’s enter your redirect URI. E.g. `http://localhost:1234/callback`.
+
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
+
+### Implement a sign-in button
+
+Go back to your IDE/editor, use the following code to implement the sign-in button:
+
+```html
+<button onclick="logtoClient.signIn('http://localhost:1234/callback')">
+  Sign In
+</button>
+```
+
+### Handle redirect
+
+We're almost there! In the last step, we use `http://localhost:1234/callback` as the Redirect URI, and now we need to handle it properly.
+
+Insert the code below in your `/callback` route:
+
+```ts
+try {
+  await logtoClient.handleSignInCallback();
+  console.log(logtoClient.isAuthenticated); // true
+} catch {
+  // Handle error
+}
+```
+
+Now you can test the sign-in flow.
+
+</Step>
+
+<Step
+  title="Sign Out"
+  subtitle="1 step"
+  index={3}
+  activeIndex={props.activeStepIndex}
+  onButtonClick={() => props.onNext(4)}
+>
+
+Calling `.signOut()` will clear all the Logto data in memory and localStorage if they exist.
+
+After signing out, it'll be great to redirect user back to your website. Let's add `http://localhost:1234` as the Post Sign-out URI below, and use it as the parameter when calling `.signOut()`.
+
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="postLogoutRedirectUris" title="Post Sign-out Redirect URI" />
+
+### Implement a sign-out button
+
+```html
+<button onclick="logtoClient.signOut('http://localhost:1234')">
+  Sign Out
+</button>
+```
+
+</Step>
+
+<Step
+  title="Further readings"
+  subtitle="4 articles"
+  index={4}
+  activeIndex={props.activeStepIndex}
+  buttonText="admin_console.general.done"
+  buttonType="primary"
+  onButtonClick={props.onComplete}
+>
+
+- [Customize sign-in experience](https://docs.logto.io/docs/recipes/customize-sie)
+- [Enable SMS or email passcode sign-in](https://docs.logto.io/docs/tutorials/get-started/enable-passcode-sign-in)
+- [Enable social sign-in](https://docs.logto.io/docs/tutorials/get-started/enable-social-sign-in)
+- [Protect your API](https://docs.logto.io/docs/recipes/protect-your-api)
+
+</Step>

packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx

@@ -0,0 +1,148 @@
+import UriInputField from '@mdx/components/UriInputField';
+import Step from '@mdx/components/Step';
+import Tabs from '@mdx/components/Tabs';
+import TabItem from '@mdx/components/TabItem';
+import Alert from '@/components/Alert';
+
+<Step
+  title="将 Logto SDK 添加至依赖"
+  subtitle="选择你熟悉的包管理工具"
+  index={0}
+  activeIndex={props.activeStepIndex}
+  onButtonClick={() => props.onNext(1)}
+>
+<Tabs>
+<TabItem value="npm" label="npm">
+
+```bash
+npm i @logto/browser
+```
+
+</TabItem>
+<TabItem value="yarn" label="Yarn">
+
+```bash
+yarn add @logto/browser
+```
+
+</TabItem>
+<TabItem value="pnpm" label="pnpm">
+
+```bash
+pnpm add @logto/browser
+```
+
+</TabItem>
+</Tabs>
+</Step>
+
+<Step
+  title="初始化 LogtoClient"
+  subtitle="共 1 步"
+  index={1}
+  activeIndex={props.activeStepIndex}
+  onButtonClick={() => props.onNext(2)}
+>
+
+Import 并传入 config 以初始化 `LogtoClient`：
+
+<pre>
+<code className="language-ts">
+{`import LogtoClient from '@logto/browser';
+
+const logtoClient = new LogtoClient({
+  endpoint: '${props.endpoint}',
+  clientId: '${props.appId}',
+});`}
+</code>
+</pre>
+
+</Step>
+
+<Step
+  title="登录"
+  subtitle="共 3 步"
+  index={2}
+  activeIndex={props.activeStepIndex}
+  onButtonClick={() => props.onNext(3)}
+>
+
+<Alert>
+  在如下代码示例中, 我们均先假设你的应用运行在 <code>http://localhost:1234</code> 上。
+</Alert>
+
+### 配置 Redirect URI
+
+首先，我们来添加 redirect URI，如： `http://localhost:1234/callback`。
+
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
+
+### 实现登录按钮
+
+返回你的 IDE 或编辑器，使用如下代码来实现一个登录按钮：
+
+```html
+<button onclick="logtoClient.signIn('http://localhost:1234/callback')">
+  登录
+</button>
+```
+
+### 处理重定向
+
+马上就要大功告成！在上一步，我们将 `http://localhost:1234/callback` 用作 Redirect URI，现在我们需要对其妥善处理。
+
+在你的 `/callback` 路由下插入如下代码：
+
+```ts
+try {
+  await logtoClient.handleSignInCallback();
+  console.log(logtoClient.isAuthenticated); // true
+} catch {
+  // 处理错误
+}
+```
+
+现在可以测试登录流程了。
+
+</Step>
+
+<Step
+  title="退出登录"
+  subtitle="共 1 步"
+  index={3}
+  activeIndex={props.activeStepIndex}
+  onButtonClick={() => props.onNext(4)}
+>
+
+调用 `.signOut()` 将清理内存与 localStorage 中的所有 Logto 数据（如果有）。
+
+在退出登录后，让你的用户重新回到你的网站是个不错的选择。让我们将 `http://localhost:1234` 添加至下面的输入框，并将其作为调用 `.signOut()` 的参数。
+
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="postLogoutRedirectUris" title="Post Sign-out Redirect URI" />
+
+### 实现退出登录按钮
+
+```html
+<button onclick="logtoClient.signOut('http://localhost:1234')">
+  退出登录
+</button>
+```
+
+</Step>
+
+<Step
+  title="延展阅读"
+  subtitle="共 4 篇"
+  index={4}
+  activeIndex={props.activeStepIndex}
+  buttonText="admin_console.general.done"
+  buttonType="primary"
+  onButtonClick={props.onComplete}
+>
+
+- [自定义登录体验](https://docs.logto.io/zh-cn/docs/recipes/customize-sie)
+- [启用短信或邮件验证码登录](https://docs.logto.io/zh-cn/docs/tutorials/get-started/enable-passcode-sign-in)
+- [启用社交登录](https://docs.logto.io/zh-cn/docs/tutorials/get-started/enable-social-sign-in)
+- [保护你的 API](https://docs.logto.io/zh-cn/docs/recipes/protect-your-api)
+
+</Step>

packages/console/src/pages/Applications/components/Guide/index.tsx

@@ -23,11 +23,15 @@ const Guides: Record<string, LazyExoticComponent<(props: MDXProps) => JSX.Elemen
   android: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/android.mdx')),
   react: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/react.mdx')),
   vue: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/vue.mdx')),
+  vanilla: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/vanilla.mdx')),
   'android_zh-cn': lazy(
     async () => import('@/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx')
   ),
   'react_zh-cn': lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx')),
   'vue_zh-cn': lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx')),
+  'vanilla_zh-cn': lazy(
+    async () => import('@/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx')
+  ),
 };
 
 const Guide = ({ app, isCompact, onClose }: Props) => {

packages/console/src/types/applications.ts

@@ -9,14 +9,14 @@ export const applicationTypeI18nKey = Object.freeze({
 export enum SupportedSdk {
   iOS = 'iOS',
   Android = 'Android',
-  Angular = 'Angular',
   React = 'React',
   Vue = 'Vue',
+  Vanilla = 'Vanilla',
   Traditional = 'Traditional',
 }
 
 export const applicationTypeAndSdkTypeMappings = Object.freeze({
   [ApplicationType.Native]: [SupportedSdk.iOS, SupportedSdk.Android],
-  [ApplicationType.SPA]: [SupportedSdk.Angular, SupportedSdk.React, SupportedSdk.Vue],
+  [ApplicationType.SPA]: [SupportedSdk.React, SupportedSdk.Vue, SupportedSdk.Vanilla],
   [ApplicationType.Traditional]: [SupportedSdk.Traditional],
 } as const);