From 020f294067835c333fe8f9dd1aa7e9798d48b731 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Fri, 15 Jul 2022 00:28:16 +0800
Subject: [PATCH] fix(console): redirect uri field label should display
 properly in guide (#1549)

Co-authored-by: Gao Sun <gao@silverhand.io>
---
 .../src/assets/docs/tutorial/integrate-sdk/android.mdx    | 2 +-
 .../assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx  | 2 +-
 .../src/assets/docs/tutorial/integrate-sdk/express.mdx    | 2 +-
 .../assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx  | 2 +-
 .../src/assets/docs/tutorial/integrate-sdk/ios.mdx        | 2 +-
 .../src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx  | 2 +-
 .../src/assets/docs/tutorial/integrate-sdk/react.mdx      | 4 ++--
 .../assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx    | 4 ++--
 .../src/assets/docs/tutorial/integrate-sdk/vanilla.mdx    | 4 ++--
 .../assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx  | 4 ++--
 .../src/assets/docs/tutorial/integrate-sdk/vue.mdx        | 4 ++--
 .../src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx  | 4 ++--
 .../console/src/mdx-components/UriInputField/index.tsx    | 1 -
 .../src/pages/ApplicationDetails/components/Settings.tsx  | 8 ++++----
 .../en/translation/admin-console/application-details.ts   | 6 ++++--
 .../translation/admin-console/application-details.ts      | 6 ++++--
 16 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx
index 233bc2612..4cb5d1a1b 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx
@@ -132,7 +132,7 @@ public class MainActivity extends AppCompatActivity {
 
 First, let’s configure your redirect URI. E.g. `io.logto.android://io.logto.sample/callback`
 
-<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="application_details.redirect_uri" />
 
 Go back to your IDE/editor, use the following code to implement sign-in:
 
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx
index 497cb7268..19e1195f2 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx
@@ -132,7 +132,7 @@ public class MainActivity extends AppCompatActivity {
 
 首先，我们来添加 Redirect URI。例如 `io.logto.android://io.logto.sample/callback`
 
-<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="application_details.redirect_uri" />
 
 返回你的 IDE 或编辑器，使用如下代码实现登录：
 
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx
index 16b9e2bae..116574135 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx
@@ -87,7 +87,7 @@ app.use(
 
 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" />
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="application_details.redirect_uri" />
 
 Go back to your IDE/editor, we need to implement the following authenticate functions.
 
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx
index 494986ac5..e665d5057 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx
@@ -85,7 +85,7 @@ app.use(
 
 首先，我们来添加 Redirect URI，如：`http://localhost:3000/callback`。
 
-<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="application_details.redirect_uri" />
 
 返回你的 IDE 或编辑器，我们将会实现如下几个用户认证所需函数。
 
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx
index 6fc46dd16..0bc3e77f1 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx
@@ -85,7 +85,7 @@ let config = try? LogtoConfig(
 
 First, let’s configure your redirect URI scheme. E.g. `io.logto://callback`
 
-<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="application_details.redirect_uri" />
 
 <Alert>
   The Redirect URI in iOS SDK is only for internal use. There's <em>NO NEED</em> to add a <a href="https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app">Custom URL Scheme</a> until a connector asks.
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx
index f56fe9415..97738ae26 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx
@@ -84,7 +84,7 @@ let config = try? LogtoConfig(
 
 首先，我们来配置你的 redirect URI scheme。例如 `io.logto://callback`
 
-<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="application_details.redirect_uri" />
 
 <Alert>
   iOS SDK 中的 Redirect URI 仅用于内部。除非连接器有要求，否则 <em>无需</em> 在项目中添加 <a href="https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app">Custom URL Scheme</a>。
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx
index 7da82859f..947b0b7b4 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx
@@ -81,7 +81,7 @@ const App = () => (
 
 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" />
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="application_details.redirect_uri" />
 
 ### Implement a sign-in button
 
@@ -151,7 +151,7 @@ Calling `.signOut()` will clear all the Logto data in memory and localStorage if
 
 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" />
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="postLogoutRedirectUris" title="application_details.post_sign_out_redirect_uri" />
 
 ### Implement a sign-out button
 
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx
index 8f2509b4e..62f79fdde 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx
@@ -81,7 +81,7 @@ const App = () => (
 
 首先，我们来添加 Redirect URI，如：`http://localhost:1234/callback`。
 
-<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="application_details.redirect_uri" />
 
 ### 实现登录按钮
 
@@ -151,7 +151,7 @@ const Callback = () => {
 
 在退出登录后，让你的用户重新回到你的网站是个不错的选择。让我们将 `http://localhost:1234` 添加至下面的输入框，并将其作为调用 `.signOut()` 的参数。
 
-<UriInputField appId={props.appId} isSingle={!props.isCompact} name="postLogoutRedirectUris" title="Post Sign-out Redirect URI" />
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="postLogoutRedirectUris" title="application_details.post_sign_out_redirect_uri" />
 
 ### 实现退出登录按钮
 
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx
index f2a66a9f2..72b586e5f 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx
@@ -75,7 +75,7 @@ const logtoClient = new LogtoClient({
 
 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" />
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="application_details.redirect_uri" />
 
 ### Implement a sign-in button
 
@@ -120,7 +120,7 @@ Calling `.signOut()` will clear all the Logto data in memory and localStorage if
 
 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" />
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="postLogoutRedirectUris" title="application_details.post_sign_out_redirect_uri" />
 
 ### Implement a sign-out button
 
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx
index 3cf385b1d..79e25ad4a 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx
@@ -75,7 +75,7 @@ const logtoClient = new LogtoClient({
 
 首先，我们来添加 redirect URI，如： `http://localhost:1234/callback`。
 
-<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="application_details.redirect_uri" />
 
 ### 实现登录按钮
 
@@ -120,7 +120,7 @@ try {
 
 在退出登录后，让你的用户重新回到你的网站是个不错的选择。让我们将 `http://localhost:1234` 添加至下面的输入框，并将其作为调用 `.signOut()` 的参数。
 
-<UriInputField appId={props.appId} isSingle={!props.isCompact} name="postLogoutRedirectUris" title="Post Sign-out Redirect URI" />
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="postLogoutRedirectUris" title="application_details.post_sign_out_redirect_uri" />
 
 ### 实现退出登录按钮
 
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx
index 34864560f..6fa57ef5b 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx
@@ -84,7 +84,7 @@ app.mount("#app");`}
 
 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" />
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="application_details.redirect_uri" />
 
 ### Implement a sign-in button
 
@@ -166,7 +166,7 @@ Calling `.signOut()` will clear all the Logto data in memory and localStorage if
 
 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" />
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="postLogoutRedirectUris" title="application_details.post_sign_out_redirect_uri" />
 
 ### Implement a sign-out button
 
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx
index 8275f6e6e..4751b6a60 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx
@@ -84,7 +84,7 @@ app.mount("#app");`}
 
 首先，我们来添加 Redirect URI，如：`http://localhost:1234/callback`。
 
-<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="application_details.redirect_uri" />
 
 ### 实现登录按钮
 
@@ -166,7 +166,7 @@ const router = createRouter({
 
 在退出登录后，让你的用户重新回到你的网站是个不错的选择。让我们将 `http://localhost:1234` 添加至下面的输入框，并将其作为调用 `.signOut()` 的参数。
 
-<UriInputField appId={props.appId} isSingle={!props.isCompact} name="postLogoutRedirectUris" title="Post Sign-out Redirect URI" />
+<UriInputField appId={props.appId} isSingle={!props.isCompact} name="postLogoutRedirectUris" title="application_details.post_sign_out_redirect_uri" />
 
 ### 实现退出登录按钮
 
diff --git a/packages/console/src/mdx-components/UriInputField/index.tsx b/packages/console/src/mdx-components/UriInputField/index.tsx
index 84c1ebec3..9ebfb3163 100644
--- a/packages/console/src/mdx-components/UriInputField/index.tsx
+++ b/packages/console/src/mdx-components/UriInputField/index.tsx
@@ -94,7 +94,6 @@ const UriInputField = ({ appId, name, title, isSingle = false }: Props) => {
                   {isSingle && (
                     <TextInput
                       className={styles.field}
-                      title={title}
                       value={value[0]}
                       errorMessage={errorObject?.required ?? errorObject?.inputs?.[0]}
                       onChange={({ currentTarget: { value } }) => {
diff --git a/packages/console/src/pages/ApplicationDetails/components/Settings.tsx b/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
index 30b431803..9cf2129f7 100644
--- a/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
+++ b/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
@@ -77,7 +77,7 @@ const Settings = ({ applicationType, oidcConfig, defaultData, isDeleted }: Props
       </FormField>
       <FormField
         isRequired
-        title="application_details.redirect_uri"
+        title="application_details.redirect_uris"
         className={styles.textField}
         tooltip="application_details.redirect_uri_tip"
       >
@@ -93,7 +93,7 @@ const Settings = ({ applicationType, oidcConfig, defaultData, isDeleted }: Props
           }}
           render={({ field: { onChange, value }, fieldState: { error } }) => (
             <MultiTextInput
-              title="application_details.redirect_uri"
+              title="application_details.redirect_uris"
               value={value}
               error={convertRhfErrorMessage(error?.message)}
               placeholder={
@@ -107,7 +107,7 @@ const Settings = ({ applicationType, oidcConfig, defaultData, isDeleted }: Props
         />
       </FormField>
       <FormField
-        title="application_details.post_sign_out_redirect_uri"
+        title="application_details.post_sign_out_redirect_uris"
         className={styles.textField}
         tooltip="application_details.post_sign_out_redirect_uri_tip"
       >
@@ -120,7 +120,7 @@ const Settings = ({ applicationType, oidcConfig, defaultData, isDeleted }: Props
           }}
           render={({ field: { onChange, value }, fieldState: { error } }) => (
             <MultiTextInput
-              title="application_details.post_sign_out_redirect_uri"
+              title="application_details.post_sign_out_redirect_uris"
               value={value}
               error={convertRhfErrorMessage(error?.message)}
               placeholder={t('application_details.post_sign_out_redirect_uri_placeholder')}
diff --git a/packages/phrases/src/languages/en/translation/admin-console/application-details.ts b/packages/phrases/src/languages/en/translation/admin-console/application-details.ts
index c3882ded5..72cd6c35e 100644
--- a/packages/phrases/src/languages/en/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/languages/en/translation/admin-console/application-details.ts
@@ -9,12 +9,14 @@ const application_details = {
   authorization_endpoint: 'Authorization endpoint',
   authorization_endpoint_tip:
     "The endpoint to perform authentication and authorization. It's used for OpenID Connect Authentication.",
-  redirect_uri: 'Redirect URIs',
+  redirect_uri: 'Redirect URI',
+  redirect_uris: 'Redirect URIs',
   redirect_uri_placeholder: 'https://your.website.com/app',
   redirect_uri_placeholder_native: 'io.logto://callback',
   redirect_uri_tip:
     'The URI redirects after a user sign-in (whether successful or not). See OpenID Connect AuthRequest for more info.',
-  post_sign_out_redirect_uri: 'Post Sign-out Redirect URIs',
+  post_sign_out_redirect_uri: 'Post Sign-out Redirect URI',
+  post_sign_out_redirect_uris: 'Post Sign-out Redirect URIs',
   post_sign_out_redirect_uri_placeholder: 'https://your.website.com/home',
   post_sign_out_redirect_uri_tip:
     'The URI redirects after a user sign-out (optional). It may have no practical effect in some app types.',
diff --git a/packages/phrases/src/languages/zh-cn/translation/admin-console/application-details.ts b/packages/phrases/src/languages/zh-cn/translation/admin-console/application-details.ts
index 636954acb..7cab0914e 100644
--- a/packages/phrases/src/languages/zh-cn/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/languages/zh-cn/translation/admin-console/application-details.ts
@@ -8,12 +8,14 @@ const application_details = {
   description_placeholder: '请输入应用描述',
   authorization_endpoint: 'Authorization Endpoint',
   authorization_endpoint_tip: '进行鉴权与授权的端点 endpoint。用于 OpenID Connect 中的鉴权流程。',
-  redirect_uri: 'Redirect URIs',
+  redirect_uri: 'Redirect URI',
+  redirect_uris: 'Redirect URIs',
   redirect_uri_placeholder: 'https://your.website.com/app',
   redirect_uri_placeholder_native: 'io.logto://callback',
   redirect_uri_tip:
     '在用户登录完成（不论成功与否）后重定向的目标 URI。参见 OpenID Connect AuthRequest 以了解更多。',
-  post_sign_out_redirect_uri: 'Post sign out redirect URIs',
+  post_sign_out_redirect_uri: 'Post Sign-out Redirect URI',
+  post_sign_out_redirect_uris: 'Post sign out redirect URIs',
   post_sign_out_redirect_uri_placeholder: 'https://your.website.com/home',
   post_sign_out_redirect_uri_tip:
     '在用户登出后重定向的目标 URI（可选）。在某些应用类型中可能无实质作用。',