🌐 Localize authorize page

lang/en-US.json

@@ -33,6 +33,16 @@
   "multiFactorTypeEmail": "Email One-time-password",
   "signInCompleted": "All Done",
   "signInCompletedCaption": "Welcome back! You just signed in right now! We're going to direct you to dashboard...",
+  "authorizeTitle": "Connect to third-party",
+  "authorizeCaption": "One Solar Network account, entire Internet.",
+  "authorizeErrorHint": "It's usually not our fault. Try bringing this link to give feedback to the developer of the app you came from.",
+  "authorizeRedirectHint": "After approve their request, you will be redirect to",
+  "authorizeCompleted": "Authorized",
+  "authorizeCompletedCaption": "You're done! We successfully established connection between you and {0}.",
+  "authorizeCompletedRedirect": "Now you can continue your their app, we will redirect you soon.",
+  "authorizeCompletedRedirectHint": "Teleporting you to...",
+  "decline": "Decline",
+  "approve": "Approve",
   "transferredToSolianHint": "This part of the functionality has been transferred to our application Solian, please download it or open it in your browser. To learn more, please visit the project description page.",
   "personalize": "Personalize",
   "personalizeCaption": "Bring your own color to the Solar Network.",

lang/zh-CN.json

@@ -41,5 +41,15 @@
   "userActivity": "活动",
   "userActivityCaption": "此用户的最新帖子。",
   "productArchived": "已归档",
-  "callbackHint": "访问该页面前，您需要先登录。登录后，我们会将把您重定向到："
+  "callbackHint": "访问该页面前，您需要先登录。登录后，我们会将把您重定向到：",
+  "authorizeTitle": "连接到第三方",
+  "authorizeCaption": "一个 Solar Network 账户，连接整个互联网。",
+  "authorizeErrorHint": "通常这不是我们的错误。尝试将此链接反馈给您来源应用的开发者。",
+  "authorizeRedirectHint": "在批准他们的请求后，您将被重定向到",
+  "authorizeCompleted": "已授权",
+  "authorizeCompletedCaption": "完成！我们已成功在您与 {0} 之间建立连接。",
+  "authorizeCompletedRedirect": "现在您可以继续使用他们的应用，我们会很快将您重定向。",
+  "authorizeCompletedRedirectHint": "正在传送到…",
+  "decline": "拒绝",
+  "approve": "批准"
 }

pages/auth/authorize.vue

@@ -4,8 +4,8 @@
       <v-card-text class="card-grid pa-9">
         <div>
           <v-avatar color="accent" icon="mdi-connection" size="large" class="card-rounded mb-2" />
-          <h1 class="text-2xl">Connect to third-party</h1>
+          <h1 class="text-2xl">{{ t("authorizeTitle") }}</h1>
-          <p>One Solarpass, entire internet.</p>
+          <p>{{ t("authorizeCaption") }}</p>
         </div>
 
         <v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
@@ -13,12 +13,11 @@
             <div class="flex flex-col gap-2">
               <v-expand-transition>
                 <v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
-                  <p>Something went wrong... {{ error }}</p>
+                  <p>{{ t("errorOccurred", [error]) }}</p>
                   <br />
 
                   <p class="font-bold">
-                    It's usually not our fault. Try bringing this link to give feedback to the developer of the app you
+                    {{ t("authorizeErrorHint") }}
-                    came from.
                   </p>
                 </v-alert>
               </v-expand-transition>
@@ -30,15 +29,15 @@
                 <div class="mt-3">
                   <div class="mt-5 flex justify-between">
                     <v-btn prepend-icon="mdi-close" variant="text" color="error" :disabled="loading" @click="decline">
-                      Decline
+                      {{ t("decline") }}
                     </v-btn>
                     <v-btn append-icon="mdi-check" variant="tonal" color="success" :disabled="loading" @click="approve">
-                      Approve
+                      {{ t("approve") }}
                     </v-btn>
                   </div>
 
                   <div class="mt-5 text-xs text-center opacity-75">
-                    <p>After approve their request, you will be redirect to</p>
+                    <p>{{ t("authorizeRedirectHint") }}</p>
                     <p class="text-mono">{{ route.query["redirect_uri"] }}</p>
                   </div>
                 </div>
@@ -50,12 +49,12 @@
             <div>
               <v-icon icon="mdi-fire" size="32" color="grey-darken-3" class="mb-3" />
 
-              <h1 class="font-bold text-xl">Authorized</h1>
+              <h1 class="font-bold text-xl">{{ t("authorizeCompleted") }}</h1>
-              <p>You're done! We successfully established connection between you and {{ metadata?.name }}.</p>
+              <p>{{ t("authorizeCompletedCaption", [metadata?.name]) }}</p>
 
-              <p class="mt-3">Now you can continue your their app, we will redirect you soon.</p>
+              <p class="mt-3">{{ t("authorizeCompletedRedirect") }}</p>
 
-              <p class="mt-3">Teleporting you to...</p>
+              <p class="mt-3">{{ t("authorizeCompletedRedirectHint") }}</p>
               <p class="text-xs text-mono">{{ route.query["redirect_uri"] }}</p>
             </div>
           </v-window-item>
@@ -68,13 +67,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
 import { solarFetch } from "~/utils/request"
 
 definePageMeta({
   middleware: ["auth"],
 })
 
+const { t } = useI18n()
 const route = useRoute()
 
 const error = ref<string | null>(null)