mirror of
https://github.com/Steffo99/festa.git
synced 2024-10-16 23:17:26 +00:00
80 lines
No EOL
2.3 KiB
TypeScript
80 lines
No EOL
2.3 KiB
TypeScript
import { default as axios, AxiosError } from "axios"
|
|
import { default as classNames } from "classnames"
|
|
import { useTranslation } from "next-i18next"
|
|
import { HTMLProps, useCallback, useState } from "react"
|
|
import { LoginContext } from "../contexts/login"
|
|
import { ApiError, ApiResult } from "../types/api"
|
|
import { FestaLoginData, TelegramLoginData } from "../types/user"
|
|
import { useDefinedContext } from "../utils/definedContext"
|
|
import { TelegramLoginButton } from "./TelegramLoginButton"
|
|
|
|
|
|
export function ActionLoginTelegram({ className, ...props }: HTMLProps<HTMLFormElement>) {
|
|
const { t } = useTranslation("common")
|
|
const [_, setLogin] = useDefinedContext(LoginContext)
|
|
const [working, setWorking] = useState<boolean>(false)
|
|
const [error, setError] = useState<ApiError | null | undefined>(null)
|
|
|
|
const onLogin = useCallback(
|
|
async (data: TelegramLoginData) => {
|
|
setError(null)
|
|
setWorking(true)
|
|
|
|
try {
|
|
var response = await axios.post<ApiResult<FestaLoginData>>("/api/login?provider=telegram", data)
|
|
}
|
|
catch (e) {
|
|
const axe = e as AxiosError
|
|
setError(axe?.response?.data as ApiError | undefined)
|
|
return
|
|
}
|
|
finally {
|
|
setWorking(false)
|
|
}
|
|
|
|
setLogin(response.data as FestaLoginData)
|
|
localStorage.setItem("login", JSON.stringify(response.data))
|
|
},
|
|
[setLogin]
|
|
)
|
|
|
|
const newClassName = classNames(className, {
|
|
"negative": error,
|
|
})
|
|
|
|
let message: JSX.Element
|
|
let contents: JSX.Element
|
|
|
|
if (error) {
|
|
message = t("formTelegramLoginError")
|
|
contents = (
|
|
<div>
|
|
<code>
|
|
{JSON.stringify(error)}
|
|
</code>
|
|
</div>
|
|
)
|
|
}
|
|
else if (working) {
|
|
message = t("formTelegramLoginWorking")
|
|
contents = <></>
|
|
}
|
|
else {
|
|
message = t("formTelegramLoginDescription")
|
|
contents = (
|
|
<TelegramLoginButton
|
|
dataOnauth={onLogin}
|
|
botName={process.env.NEXT_PUBLIC_TELEGRAM_USERNAME}
|
|
/>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className={newClassName}>
|
|
<p>
|
|
{message}
|
|
</p>
|
|
{contents}
|
|
</div>
|
|
)
|
|
} |