132 lines
3.0 KiB
TypeScript
132 lines
3.0 KiB
TypeScript
import { BaseForm } from './base-form';
|
||
import { ButtonLoading, ButtonLogin, ButtonTelegram, ButtonTelegramLogin } from './buttons';
|
||
import { ERROR_INVALID_CREDENTIALS, ERROR_SERVER } from './errors';
|
||
import type { FormData } from './types';
|
||
import { redirect } from '@/components/Form/utils';
|
||
import { FormStateContext } from '@/context/form-state';
|
||
import { useSocket } from '@/hooks/socket';
|
||
import type { TelegramUrlResponse } from '@/types/error';
|
||
import type { LdapUser } from '@/types/user';
|
||
import axios, { isAxiosError } from 'axios';
|
||
import { useContext, useEffect } from 'react';
|
||
|
||
export function TelegramForm() {
|
||
const {
|
||
dispatch,
|
||
state: { step, user },
|
||
} = useContext(FormStateContext);
|
||
|
||
const { socket } = useSocket();
|
||
|
||
useEffect(() => {
|
||
if (step === 'telegram-login') {
|
||
socket.open();
|
||
socket.on('connect', () => {});
|
||
|
||
socket.on('auth-allow', () => {
|
||
socket.off('connect');
|
||
axios
|
||
.get('/login-confirm')
|
||
.then(() => redirect())
|
||
.catch(() =>
|
||
dispatch({
|
||
payload: { error: ERROR_SERVER },
|
||
type: 'set-error',
|
||
})
|
||
);
|
||
});
|
||
}
|
||
|
||
return () => {
|
||
socket.off('connect');
|
||
};
|
||
}, [dispatch, socket, step]);
|
||
|
||
function handleLogin(data: FormData) {
|
||
axios
|
||
.post<LdapUser>('/login', data)
|
||
.then((res) => {
|
||
dispatch({
|
||
payload: {
|
||
step: 'telegram',
|
||
user: res.data,
|
||
},
|
||
type: 'set-step',
|
||
});
|
||
})
|
||
.catch(() =>
|
||
dispatch({
|
||
payload: { error: ERROR_INVALID_CREDENTIALS },
|
||
type: 'set-error',
|
||
})
|
||
);
|
||
}
|
||
|
||
function handleTelegramLogin() {
|
||
axios
|
||
.post<LdapUser>('/login-telegram')
|
||
.then(() => {
|
||
dispatch({
|
||
payload: {
|
||
step: 'telegram-login',
|
||
},
|
||
type: 'set-step',
|
||
});
|
||
})
|
||
.catch((error_) => {
|
||
let error = ERROR_SERVER;
|
||
|
||
if (isAxiosError<TelegramUrlResponse>(error_) && error_.response?.data?.message) {
|
||
error = error_.response?.data?.message;
|
||
}
|
||
|
||
return dispatch({
|
||
payload: { error },
|
||
type: 'set-error',
|
||
});
|
||
});
|
||
}
|
||
|
||
function handleRefreshToken() {
|
||
axios
|
||
.get('/refresh-token')
|
||
.then(() => redirect())
|
||
.catch(() =>
|
||
dispatch({
|
||
payload: { error: ERROR_SERVER },
|
||
type: 'set-error',
|
||
})
|
||
);
|
||
}
|
||
|
||
if (step === 'login' && user) {
|
||
handleRefreshToken();
|
||
|
||
return <ButtonLoading />;
|
||
}
|
||
|
||
if (step === 'telegram') {
|
||
return (
|
||
<BaseForm onSubmit={() => handleTelegramLogin()}>
|
||
<ButtonTelegram>
|
||
Войти как <b>{user?.displayName}</b>
|
||
</ButtonTelegram>
|
||
</BaseForm>
|
||
);
|
||
}
|
||
|
||
if (step === 'telegram-login') {
|
||
return (
|
||
<BaseForm onSubmit={() => {}}>
|
||
<ButtonTelegramLogin />
|
||
</BaseForm>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<BaseForm onSubmit={(data) => handleLogin(data)}>
|
||
<ButtonLogin />
|
||
</BaseForm>
|
||
);
|
||
}
|