feat: add telegram mini app (#250)

frontend/src/App.vue

@@ -8,7 +8,10 @@ import Header from './views/Header.vue';
 import Footer from './views/Footer.vue';
 
 
-const { localeCache, isDark, loading, useSideMargin } = useGlobalState()
+const {
+  localeCache, isDark, loading, useSideMargin,
+  telegramApp, isTelegram
+} = useGlobalState()
 const theme = computed(() => isDark.value ? darkTheme : null)
 const localeConfig = computed(() => localeCache.value == 'zh' ? zhCN : null)
 const isMobile = useIsMobile()
@@ -31,6 +34,23 @@ onMounted(async () => {
     document.body.appendChild(script);
   }
 
+  // check if telegram is enabled
+  const enableTelegram = import.meta.env.VITE_IS_TELEGRAM;
+  if (
+    (typeof enableTelegram === 'boolean' && enableTelegram === true)
+    ||
+    (typeof enableTelegram === 'string' && enableTelegram === 'true')
+  ) {
+    await new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = 'https://telegram.org/js/telegram-web-app.js';
+      script.onload = resolve;
+      script.onerror = reject;
+      document.body.appendChild(script);
+    });
+    telegramApp.value = window.Telegram?.WebApp || {};
+    isTelegram.value = !!window.Telegram?.WebApp?.initData;
+  }
 });
 </script>
 

frontend/src/store/index.js

@@ -68,6 +68,8 @@ export const useGlobalState = createGlobalState(
             /** @type {number} */
             user_id: 0,
         });
+        const telegramApp = ref(window.Telegram?.WebApp || {});
+        const isTelegram = ref(!!window.Telegram?.WebApp?.initData);
         return {
             isDark,
             toggleDark,
@@ -95,6 +97,8 @@ export const useGlobalState = createGlobalState(
             userSettings,
             globalTabplacement,
             useSideMargin,
+            telegramApp,
+            isTelegram,
         }
     },
 )

frontend/src/views/Header.vue

@@ -14,7 +14,7 @@ import { api } from '../api'
 const message = useMessage()
 
 const {
-    localeCache, toggleDark, isDark, openSettings,
+    localeCache, toggleDark, isDark, isTelegram,
     showAuth, adminAuth, auth, loading
 } = useGlobalState()
 const route = useRoute()
@@ -103,6 +103,7 @@ const menuOptions = computed(() => [
             }
         ),
         key: "user",
+        show: !isTelegram.value
     },
     {
         label: () => h(

frontend/src/views/index/AddressBar.vue

@@ -9,13 +9,15 @@ import { useGlobalState } from '../../store'
 import { api } from '../../api'
 import Login from '../common/Login.vue'
 import AddressManagement from '../user/AddressManagement.vue'
+import TelegramAddress from './TelegramAddress.vue'
 
 const { toClipboard } = useClipboard()
 const message = useMessage()
 const router = useRouter()
 
 const {
-    jwt, localeCache, settings, showAddressCredential, userJwt
+    jwt, localeCache, settings, showAddressCredential, userJwt,
+    isTelegram
 } = useGlobalState()
 
 const { t } = useI18n({
@@ -45,6 +47,7 @@ const { t } = useI18n({
 });
 
 const showChangeAddress = ref(false)
+const showTelegramChangeAddress = ref(false)
 
 const copy = async () => {
     try {
@@ -69,8 +72,12 @@ onMounted(async () => {
             <n-alert type="info" :show-icon="false">
                 <span>
                     <b>{{ settings.address }}</b>
-                    <n-button v-if="userJwt" style="margin-left: 10px" @click="showChangeAddress = true" size="small"
-                        tertiary type="primary">
+                    <n-button v-if="isTelegram" style="margin-left: 10px" @click="showTelegramChangeAddress = true"
+                        size="small" tertiary type="primary">
+                        <n-icon :component="ExchangeAlt" /> {{ t('changeAddress') }}
+                    </n-button>
+                    <n-button v-else-if="userJwt" style="margin-left: 10px" @click="showChangeAddress = true"
+                        size="small" tertiary type="primary">
                         <n-icon :component="ExchangeAlt" /> {{ t('changeAddress') }}
                     </n-button>
                     <n-button style="margin-left: 10px" @click="copy" size="small" tertiary type="primary">
@@ -79,6 +86,9 @@ onMounted(async () => {
                 </span>
             </n-alert>
         </div>
+        <div v-else-if="isTelegram">
+            <TelegramAddress />
+        </div>
         <div v-else class="center">
             <n-card style="max-width: 600px;">
                 <n-alert v-if="jwt" type="warning" :show-icon="false" closable>
@@ -94,6 +104,9 @@ onMounted(async () => {
                 </n-button>
             </n-card>
         </div>
+        <n-modal v-model:show="showTelegramChangeAddress" preset="card" :title="t('changeAddress')">
+            <TelegramAddress />
+        </n-modal>
         <n-modal v-model:show="showChangeAddress" preset="card" :title="t('changeAddress')">
             <AddressManagement />
         </n-modal>

frontend/src/views/index/TelegramAddress.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { ref, h, onMounted } from 'vue';
+import { useStorage } from '@vueuse/core';
+import { useI18n } from 'vue-i18n'
+import { NPopconfirm, NButton } from 'naive-ui'
+
+// @ts-ignore
+import { useGlobalState } from '../../store'
+// @ts-ignore
+import { api } from '../../api'
+
+const { localeCache, jwt, telegramApp } = useGlobalState()
+// @ts-ignore
+const message = useMessage()
+
+const { t } = useI18n({
+    locale: localeCache.value || 'zh',
+    messages: {
+        en: {
+            success: 'success',
+            address: 'Address',
+            actions: 'Actions',
+            changeMailAddress: 'Change Mail Address',
+        },
+        zh: {
+            success: '成功',
+            address: '地址',
+            actions: '操作',
+            changeMailAddress: '切换邮箱地址',
+        }
+    }
+});
+
+const data = useStorage("telegram-bind-address", [])
+
+const fetchData = async () => {
+    try {
+        data.value = await api.fetch(`/telegram/bind_address`, {
+            method: 'POST',
+            body: JSON.stringify({
+                initData: telegramApp.value.initData
+            })
+        });
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const columns = [
+    {
+        title: t('address'),
+        key: "address"
+    },
+    {
+        title: t('actions'),
+        key: 'actions',
+        render(row: any) {
+            return h('div', [
+                h(NPopconfirm,
+                    {
+                        onPositiveClick: () => {
+                            jwt.value = row.jwt
+                            location.reload()
+                        }
+                    },
+                    {
+                        trigger: () => h(NButton,
+                            {
+                                tertiary: true,
+                                type: "primary",
+                            },
+                            { default: () => t('changeMailAddress') }
+                        ),
+                        default: () => `${t('changeMailAddress')}?`
+                    }
+                )
+            ])
+        }
+    }
+]
+
+onMounted(async () => {
+    if (!telegramApp.value?.initData || data.value.length > 0) {
+        return
+    }
+    await fetchData()
+})
+</script>
+
+<template>
+    <div>
+        <n-data-table :columns="columns" :data="data" :bordered="false" />
+    </div>
+</template>