mirror of
https://github.com/Steffo99/festa.git
synced 2024-10-16 15:07:27 +00:00
79 lines
No EOL
2.3 KiB
TypeScript
79 lines
No EOL
2.3 KiB
TypeScript
import 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 FormLoginTelegram({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))
|
|
},
|
|
[]
|
|
)
|
|
|
|
const newClassName = classNames(className, {
|
|
"negative": error,
|
|
})
|
|
|
|
let message: string
|
|
let contents: JSX.Element
|
|
|
|
if(error) {
|
|
message = t("formTelegramLoginError")
|
|
contents = (
|
|
<div>
|
|
<code>
|
|
{JSON.stringify(error)}
|
|
</code>
|
|
</div>
|
|
)
|
|
}
|
|
else if(working) {
|
|
message = t("formTelegramLoginWorking")
|
|
contents = <div/>
|
|
}
|
|
else {
|
|
message = t("formTelegramLoginDescription")
|
|
contents = (
|
|
<TelegramLoginButton
|
|
dataOnauth={onLogin}
|
|
botName={process.env.NEXT_PUBLIC_TELEGRAM_USERNAME}
|
|
/>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<form className={newClassName}>
|
|
<p>
|
|
{message}
|
|
</p>
|
|
{contents}
|
|
</form>
|
|
)
|
|
} |