62 lines
1.5 KiB
Vue
62 lines
1.5 KiB
Vue
|
<!--
|
||
|
|
SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
|
||
|
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<div ref="div">
|
||
|
|
<button
|
||
|
|
v-if="!loaded"
|
||
|
|
@click="load"
|
||
|
|
>
|
||
|
|
Enable Log in with Telegram
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import type { TelegramAuthData } from '~/shared/types/telegram';
|
||
|
|
|
||
|
|
const divElement = useTemplateRef("div");
|
||
|
|
const loaded = ref(false);
|
||
|
|
const runtimeConfig = useRuntimeConfig();
|
||
|
|
const sessionStore = useSessionStore();
|
||
|
|
const route = useRoute();
|
||
|
|
|
||
|
|
function load() {
|
||
|
|
const script = document.createElement("script");
|
||
|
|
script.async = true;
|
||
|
|
script.src = "https://telegram.org/js/telegram-widget.js?22";
|
||
|
|
script.dataset.telegramLogin = runtimeConfig.public.telegramBotUsername;
|
||
|
|
script.dataset.size = "medium";
|
||
|
|
script.dataset.onauth = "onTelegramAuth(user)";
|
||
|
|
script.dataset.requestAccess = "write";
|
||
|
|
divElement.value?.appendChild(script);
|
||
|
|
loaded.value = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function login(authData: TelegramAuthData) {
|
||
|
|
const session = await $fetch("/api/auth/ap/telegram-login", {
|
||
|
|
method: "POST",
|
||
|
|
body: {
|
||
|
|
authData,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
sessionStore.update(session);
|
||
|
|
if (!session.account) {
|
||
|
|
await navigateTo("/register");
|
||
|
|
} else if (route.path === "/register") {
|
||
|
|
await navigateTo("/");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
declare global {
|
||
|
|
export function onTelegramAuth(user: any): void;
|
||
|
|
}
|
||
|
|
onMounted(() => {
|
||
|
|
// XXX this asumes there's only ever one LogInTelegram component mounted
|
||
|
|
window.onTelegramAuth = function(authData: TelegramAuthData) {
|
||
|
|
login(authData).catch(err => alert(err.data?.message ?? err.message));
|
||
|
|
};
|
||
|
|
});
|
||
|
|
</script>
|