etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 17:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: OIDC login UX improvements from review

Browse Source 
- Add loading state on button click (not just after callback)
- Add onerror handler for script load failure
- Disable button until OIDC script is loaded
This commit is contained in:
Fringg
2026-03-07 03:18:49 +03:00
parent 45e68ffac2
commit b335d666c2
1 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/TelegramLoginButton.tsx
View File

@@ -15,6 +15,7 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const [oidcLoading, setOidcLoading] = useState(false); const [oidcLoading, setOidcLoading] = useState(false);
const [oidcError, setOidcError] = useState(''); const [oidcError, setOidcError] = useState('');
const [scriptLoaded, setScriptLoaded] = useState(false);
const loginWithTelegramOIDC = useAuthStore((s) => s.loginWithTelegramOIDC); const loginWithTelegramOIDC = useAuthStore((s) => s.loginWithTelegramOIDC);
const { data: widgetConfig } = useQuery<TelegramWidgetConfig>({ const { data: widgetConfig } = useQuery<TelegramWidgetConfig>({
@@ -79,10 +80,17 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
script.id = scriptId; script.id = scriptId;
script.src = 'https://oauth.telegram.org/js/telegram-login.js?3'; script.src = 'https://oauth.telegram.org/js/telegram-login.js?3';
script.async = true; script.async = true;
script.onload = initTelegramLogin; script.onload = () => {
setScriptLoaded(true);
initTelegramLogin();
};
script.onerror = () => {
setOidcError(t('auth.loginFailed'));
};
document.head.appendChild(script); document.head.appendChild(script);
} else { } else {
// Script already loaded, just re-init // Script already loaded, just re-init
setScriptLoaded(true);
initTelegramLogin(); initTelegramLogin();
} }
}, [isOIDC, widgetConfig?.oidc_client_id, widgetConfig?.request_access]); }, [isOIDC, widgetConfig?.oidc_client_id, widgetConfig?.request_access]);
@@ -136,11 +144,14 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
type="button" type="button"
onClick={() => { onClick={() => {
setOidcError(''); setOidcError('');
setOidcLoading(true);
if (window.Telegram?.Login) { if (window.Telegram?.Login) {
window.Telegram.Login.open(); window.Telegram.Login.open();
} else {
setOidcLoading(false);
} }
}} }}
disabled={oidcLoading} disabled={oidcLoading || !scriptLoaded}
className="inline-flex items-center gap-2 rounded-lg bg-[#54a9eb] px-6 py-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-[#4a96d2] disabled:opacity-50" className="inline-flex items-center gap-2 rounded-lg bg-[#54a9eb] px-6 py-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-[#4a96d2] disabled:opacity-50"
> >
<svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"> <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">