diff --git a/frontend/app/components/auth/auth.tsx b/frontend/app/components/auth/auth.tsx index 78ce270e..91bdf5a3 100644 --- a/frontend/app/components/auth/auth.tsx +++ b/frontend/app/components/auth/auth.tsx @@ -30,9 +30,8 @@ export function Auth() { // UI State const [isLoading, setLoading] = useState(false); - const [view, setView] = useState(formProviders[0]); - const [isTelegramShown, toggleTelegram] = useState(false); - const [ref, isDropdownShown, toggleDropdownState] = useDropdown(view === 'token' || isTelegramShown); + const [view, setView] = useState(formProviders[0]); + const [ref, isDropdownShown, toggleDropdownState] = useDropdown(view === 'token' || view === 'telegram'); // Errors const [invalidReason, setInvalidReason] = useState(null); @@ -46,7 +45,6 @@ export function Auth() { evt.preventDefault(); setView(formProviders[0]); toggleDropdownState(); - toggleTelegram(false); } function handleProviderChange(evt: Event) { @@ -109,7 +107,7 @@ export function Auth() { try { const user = await verifyTelegramSignin(telegramParams.token); dispatch(setUser(user)); - toggleTelegram(false); + setView(formProviders[0]); dispatch(setTelegramParams(null)); } catch (e) { setInvalidReason(e.message || e.error); @@ -144,7 +142,7 @@ export function Auth() { {isDropdownShown && (
- {isTelegramShown && telegramParams ? ( + {view === 'telegram' && telegramParams ? ( <>
@@ -152,7 +150,7 @@ export function Auth() { className="auth-back-button" size="xs" kind="transparent" - onClick={() => toggleTelegram(false)} + onClick={() => setView(formProviders[0])} > {intl.formatMessage(messages.oauthSource)} - + )} {hasOAuthProviders && hasFormProviders && ( diff --git a/frontend/app/components/auth/components/oauth.tsx b/frontend/app/components/auth/components/oauth.tsx index 668552e8..69004d57 100644 --- a/frontend/app/components/auth/components/oauth.tsx +++ b/frontend/app/components/auth/components/oauth.tsx @@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'; import clsx from 'clsx'; import { useIntl } from 'react-intl'; -import type { OAuthProvider } from 'common/types'; +import type { FormProvider, OAuthProvider } from 'common/types'; import { siteId } from 'common/settings'; import { useTheme } from 'hooks/useTheme'; import { setUser, setTelegramParams } from 'store/user/actions'; @@ -16,15 +16,16 @@ import { BASE_URL } from 'common/constants.config'; import { getButtonVariant, getProviderData } from './oauth.utils'; import styles from './oauth.module.css'; import { getTelegramSigninParams } from '../auth.api'; +import { StateUpdater } from 'preact/compat'; const location = encodeURIComponent(`${window.location.origin}${window.location.pathname}?selfClose`); type Props = { providers: OAuthProvider[]; - toggleTelegram?: (showTelegram: boolean) => void; + setView?: StateUpdater<'telegram' | FormProvider | 'token'>; }; -export function OAuth({ providers, toggleTelegram }: Props) { +export function OAuth({ providers, setView }: Props) { const intl = useIntl(); const dispatch = useDispatch(); const telegramParams = useSelector((s: StoreState) => s.telegramParams); @@ -52,7 +53,7 @@ export function OAuth({ providers, toggleTelegram }: Props) { } dispatch(setTelegramParams(params)); } - toggleTelegram && toggleTelegram(true); + setView && setView('telegram'); }; return (