437 lines
16 KiB
TypeScript
437 lines
16 KiB
TypeScript
import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
|
|
import { Box, Button, Input, Spinner, Text, color } from 'folds';
|
|
import {
|
|
Outlet,
|
|
generatePath,
|
|
matchPath,
|
|
useLocation,
|
|
useNavigate,
|
|
useParams,
|
|
} from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { AuthFooter } from './AuthFooter';
|
|
import { AuthMascot } from './AuthMascot';
|
|
import { authLayoutRootVars } from './layoutConfig';
|
|
import * as css from './styles.css';
|
|
import {
|
|
clientAllowedServer,
|
|
clientDefaultServer,
|
|
useClientConfig,
|
|
} from '../../hooks/useClientConfig';
|
|
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
|
|
import { LOGIN_PATH, REGISTER_PATH, RESET_PASSWORD_PATH } from '../paths';
|
|
import { AutoDiscoveryAction, autoDiscovery } from '../../cs-api';
|
|
import { SpecVersionsLoader } from '../../components/SpecVersionsLoader';
|
|
import { SpecVersionsProvider } from '../../hooks/useSpecVersions';
|
|
import { AutoDiscoveryInfoProvider } from '../../hooks/useAutoDiscoveryInfo';
|
|
import { AuthFlowsLoader } from '../../components/AuthFlowsLoader';
|
|
import { AuthFlowsProvider } from '../../hooks/useAuthFlows';
|
|
import { AuthServerProvider } from '../../hooks/useAuthServer';
|
|
import { tryDecodeURIComponent } from '../../utils/dom';
|
|
|
|
const currentAuthPath = (pathname: string): string => {
|
|
if (matchPath(LOGIN_PATH, pathname)) return LOGIN_PATH;
|
|
if (matchPath(RESET_PASSWORD_PATH, pathname)) return RESET_PASSWORD_PATH;
|
|
if (matchPath(REGISTER_PATH, pathname)) return REGISTER_PATH;
|
|
return LOGIN_PATH;
|
|
};
|
|
|
|
function AuthLayoutLoading({ message }: { message: string }) {
|
|
return (
|
|
<Box justifyContent="Center" alignItems="Center" gap="200">
|
|
<Spinner size="100" variant="Secondary" />
|
|
<Text align="Center" size="T300">
|
|
{message}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function AuthLayoutError({ message }: { message: string }) {
|
|
return (
|
|
<Box justifyContent="Center" alignItems="Center" gap="200">
|
|
<Text align="Center" style={{ color: color.Critical.Main }} size="T300">
|
|
{message}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
/* ── Server edit dialog ── */
|
|
function ServerEditDialog({
|
|
currentServer,
|
|
onConfirm,
|
|
onCancel,
|
|
}: {
|
|
currentServer: string;
|
|
onConfirm: (server: string) => void;
|
|
onCancel: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [value, setValue] = useState(currentServer);
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
useEffect(() => {
|
|
inputRef.current?.focus();
|
|
inputRef.current?.select();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (evt: KeyboardEvent) => {
|
|
if (evt.key === 'Escape' && !evt.defaultPrevented && !evt.isComposing) {
|
|
onCancel();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
}, [onCancel]);
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
const trimmed = value.trim();
|
|
if (trimmed) onConfirm(trimmed);
|
|
};
|
|
|
|
return (
|
|
<div className={css.ServerDialog} role="dialog" aria-modal="true" tabIndex={-1}>
|
|
<div className={css.ServerDialogBackdrop} onClick={onCancel} aria-hidden="true" />
|
|
<div className={css.ServerDialogCard}>
|
|
<Text size="H3" style={{ color: '#e8e4df', fontWeight: 600 }}>
|
|
{t('Auth.homeserver_dialog_title')}
|
|
</Text>
|
|
<Text size="T300" style={{ color: 'rgba(232, 228, 223, 0.65)' }}>
|
|
{t('Auth.homeserver_dialog_desc')}
|
|
</Text>
|
|
<form onSubmit={handleSubmit}>
|
|
<Box direction="Column" gap="400">
|
|
<Input
|
|
ref={inputRef}
|
|
variant="Background"
|
|
size="500"
|
|
outlined
|
|
value={value}
|
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)}
|
|
placeholder={t('Auth.homeserver_dialog_placeholder')}
|
|
/>
|
|
<Box gap="300" justifyContent="End">
|
|
<Button type="button" variant="Secondary" fill="Soft" size="400" onClick={onCancel}>
|
|
<Text size="B400">{t('Auth.homeserver_dialog_cancel')}</Text>
|
|
</Button>
|
|
<Button type="submit" variant="Primary" size="400">
|
|
<Text size="B400">{t('Auth.homeserver_dialog_confirm')}</Text>
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ── Layout helpers (from element-web) ── */
|
|
|
|
function readPx(s: CSSStyleDeclaration, name: string, fallback = 0): number {
|
|
const v = Number.parseFloat(s.getPropertyValue(name));
|
|
return Number.isFinite(v) ? v : fallback;
|
|
}
|
|
|
|
function readNum(s: CSSStyleDeclaration, name: string, fallback: number): number {
|
|
const v = Number.parseFloat(s.getPropertyValue(name));
|
|
return Number.isFinite(v) ? v : fallback;
|
|
}
|
|
|
|
function calculateModalLayout(input: {
|
|
pageHeight: number;
|
|
mascotTopOffset: number;
|
|
mascotHeight: number;
|
|
modalHeight: number;
|
|
footerHeight: number;
|
|
anchorRatio: number;
|
|
minTop: number;
|
|
bottomGap: number;
|
|
}) {
|
|
const desiredTop = input.mascotTopOffset + input.mascotHeight * input.anchorRatio;
|
|
const canFitAboveFooter =
|
|
input.modalHeight <= input.pageHeight - input.minTop - input.footerHeight - input.bottomGap;
|
|
const reservedFooterHeight = canFitAboveFooter ? input.footerHeight : 0;
|
|
const reservedBottomGap = canFitAboveFooter ? input.bottomGap : 0;
|
|
|
|
const maxTop = input.pageHeight - reservedFooterHeight - reservedBottomGap - input.modalHeight;
|
|
const top = Math.max(input.minTop, Math.min(desiredTop, maxTop));
|
|
const maxHeight = input.pageHeight - reservedFooterHeight - reservedBottomGap - top;
|
|
|
|
return {
|
|
top: Math.round(top),
|
|
maxHeight: Math.max(0, Math.floor(maxHeight)),
|
|
constrained: input.modalHeight > maxHeight + 1,
|
|
};
|
|
}
|
|
|
|
export function AuthLayout() {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const { server: urlEncodedServer } = useParams();
|
|
|
|
const clientConfig = useClientConfig();
|
|
const defaultServer = clientDefaultServer(clientConfig);
|
|
let server: string = urlEncodedServer ? tryDecodeURIComponent(urlEncodedServer) : defaultServer;
|
|
|
|
if (!clientAllowedServer(clientConfig, server)) {
|
|
server = defaultServer;
|
|
}
|
|
|
|
const [showServerDialog, setShowServerDialog] = useState(false);
|
|
|
|
const [discoveryState, discoverServer] = useAsyncCallback(
|
|
useCallback(async (serverName: string) => {
|
|
const response = await autoDiscovery(fetch, serverName);
|
|
return { serverName, response };
|
|
}, [])
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (server) discoverServer(server);
|
|
}, [discoverServer, server]);
|
|
|
|
useEffect(() => {
|
|
if (!urlEncodedServer || tryDecodeURIComponent(urlEncodedServer) !== server) {
|
|
navigate(
|
|
generatePath(currentAuthPath(location.pathname), {
|
|
server: encodeURIComponent(server),
|
|
}),
|
|
{ replace: true }
|
|
);
|
|
}
|
|
}, [urlEncodedServer, navigate, location, server]);
|
|
|
|
const selectServer = useCallback(
|
|
(newServer: string) => {
|
|
if (newServer === server) {
|
|
if (discoveryState.status === AsyncStatus.Loading) return;
|
|
discoverServer(server);
|
|
return;
|
|
}
|
|
navigate(
|
|
generatePath(currentAuthPath(location.pathname), {
|
|
server: encodeURIComponent(newServer),
|
|
})
|
|
);
|
|
},
|
|
[navigate, location, discoveryState, server, discoverServer]
|
|
);
|
|
|
|
const [autoDiscoveryError, autoDiscoveryInfo] =
|
|
discoveryState.status === AsyncStatus.Success ? discoveryState.data.response : [];
|
|
|
|
/* ── Page title based on route ── */
|
|
const getPageTitle = () => {
|
|
if (matchPath(LOGIN_PATH, location.pathname)) return t('Auth.title_login');
|
|
if (matchPath(REGISTER_PATH, location.pathname)) return t('Auth.title_register');
|
|
return t('Auth.title_reset_password');
|
|
};
|
|
const pageTitle = getPageTitle();
|
|
|
|
/* ── Refs for JS-driven layout ── */
|
|
const pageRef = useRef<HTMLDivElement>(null);
|
|
const mascotRef = useRef<HTMLDivElement>(null);
|
|
const cardContentRef = useRef<HTMLDivElement>(null);
|
|
const cardBodyRef = useRef<HTMLDivElement>(null);
|
|
const footerRef = useRef<HTMLElement>(null);
|
|
|
|
useLayoutEffect(() => {
|
|
const page = pageRef.current;
|
|
const mascot = mascotRef.current;
|
|
const cardContent = cardContentRef.current;
|
|
const cardBody = cardBodyRef.current;
|
|
const footer = footerRef.current;
|
|
if (!page || !mascot || !cardContent || !cardBody || !footer) return undefined;
|
|
|
|
const rootEl = document.getElementById('root');
|
|
let frameId = 0;
|
|
let padTop = 0;
|
|
let padBottom = 0;
|
|
|
|
// env(safe-area-inset-*) only changes on rotate / fullscreen toggle; both
|
|
// fire window.resize. Recompute lazily, not on every RAF.
|
|
const recomputePadding = (): void => {
|
|
if (!rootEl) return;
|
|
const s = getComputedStyle(rootEl);
|
|
padTop = parseFloat(s.paddingTop) || 0;
|
|
padBottom = parseFloat(s.paddingBottom) || 0;
|
|
};
|
|
recomputePadding();
|
|
|
|
const update = (): void => {
|
|
cancelAnimationFrame(frameId);
|
|
frameId = requestAnimationFrame(() => {
|
|
// Capacitor WebView can publish env(safe-area-inset-*) one frame after
|
|
// mount; cheaper to refresh per RAF than to miss the first cold paint.
|
|
recomputePadding();
|
|
const s = getComputedStyle(page);
|
|
const footerHeight =
|
|
footer.offsetHeight || readPx(s, '--vojo-footer-space', footer.offsetHeight);
|
|
const bottomGap = readPx(s, '--vojo-modal-gap');
|
|
// AuthLayout is height: 100dvh inside #root which has env(safe-area-inset-*)
|
|
// padding. AuthLayout overflows #root's content area by the safe-area
|
|
// amounts and gets clipped by body { overflow: hidden }. Subtract #root's
|
|
// vertical padding from pageHeight so the form fits the visible band.
|
|
const rawPageHeight = window.visualViewport?.height ?? page.clientHeight;
|
|
const pageHeight = Math.max(0, rawPageHeight - padTop - padBottom);
|
|
|
|
const anchorRatio = readNum(s, '--vojo-anchor-ratio', 0.58);
|
|
|
|
// Compact mode: form + footer don't fit in the viewport at all.
|
|
// When they do fit, the form naturally docks at the mascot anchor and
|
|
// the mascot peeks above through the glassmorphism — that's the design,
|
|
// not a bug. We only drop the mascot when the math has nowhere to put
|
|
// both. Triggers on keyboard up, very small windows, landscape, etc.
|
|
const compact = cardBody.offsetHeight + footerHeight + bottomGap > pageHeight;
|
|
|
|
const mascotTopOffset = compact ? 0 : readPx(s, '--vojo-mascot-top');
|
|
const mascotHeight = compact ? 0 : mascot.offsetHeight;
|
|
const minTop = compact ? 0 : readPx(s, '--vojo-modal-min-top');
|
|
|
|
const layout = calculateModalLayout({
|
|
pageHeight,
|
|
mascotTopOffset,
|
|
mascotHeight,
|
|
modalHeight: cardBody.offsetHeight,
|
|
footerHeight,
|
|
anchorRatio,
|
|
minTop,
|
|
bottomGap,
|
|
});
|
|
page.style.setProperty('--vojo-modal-top', `${layout.top}px`);
|
|
page.style.setProperty('--vojo-modal-max-h', `${layout.maxHeight}px`);
|
|
cardContent.classList.toggle(css.AuthCardContentScrollable, layout.constrained);
|
|
mascot.classList.toggle(css.AuthMascotHidden, compact);
|
|
});
|
|
};
|
|
|
|
update();
|
|
const ro = new ResizeObserver(update);
|
|
ro.observe(page);
|
|
ro.observe(mascot);
|
|
ro.observe(cardBody);
|
|
ro.observe(footer);
|
|
const onWindowResize = (): void => {
|
|
recomputePadding();
|
|
update();
|
|
};
|
|
window.addEventListener('resize', onWindowResize);
|
|
window.visualViewport?.addEventListener('resize', update);
|
|
|
|
return () => {
|
|
cancelAnimationFrame(frameId);
|
|
ro.disconnect();
|
|
window.removeEventListener('resize', onWindowResize);
|
|
window.visualViewport?.removeEventListener('resize', update);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className={css.AuthLayout} style={authLayoutRootVars} ref={pageRef}>
|
|
<div className={css.AuthStack}>
|
|
<AuthMascot mascotRef={mascotRef} />
|
|
|
|
<div className={css.AuthModalZone}>
|
|
<div className={css.AuthCard}>
|
|
<div className={css.AuthCardContent} ref={cardContentRef}>
|
|
<div className={css.AuthCardBody} ref={cardBodyRef}>
|
|
{/* Title */}
|
|
<Text size="H2" style={{ color: '#e8e4df', fontWeight: 700 }}>
|
|
{pageTitle}
|
|
</Text>
|
|
|
|
{/* Server info row with separator */}
|
|
<div className={css.ServerRow}>
|
|
<span className={css.ServerLabel}>{t('Auth.homeserver')}</span>
|
|
<span className={css.ServerName}>{server}</span>
|
|
{clientConfig.allowCustomHomeservers && (
|
|
<button
|
|
type="button"
|
|
className={css.ServerEdit}
|
|
onClick={() => setShowServerDialog(true)}
|
|
>
|
|
{t('Auth.homeserver_edit')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Loading / error / form */}
|
|
{discoveryState.status === AsyncStatus.Loading && (
|
|
<AuthLayoutLoading message={t('Auth.loading_server')} />
|
|
)}
|
|
{discoveryState.status === AsyncStatus.Error && (
|
|
<AuthLayoutError message={t('Auth.error_server_not_found')} />
|
|
)}
|
|
{autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_PROMPT && (
|
|
<AuthLayoutError
|
|
message={t('Auth.error_server_config_invalid', {
|
|
host: autoDiscoveryError.host,
|
|
})}
|
|
/>
|
|
)}
|
|
{autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_ERROR && (
|
|
<AuthLayoutError message={t('Auth.error_server_base_url_invalid')} />
|
|
)}
|
|
{discoveryState.status === AsyncStatus.Success && autoDiscoveryInfo && (
|
|
<AuthServerProvider value={discoveryState.data.serverName}>
|
|
<AutoDiscoveryInfoProvider value={autoDiscoveryInfo}>
|
|
<SpecVersionsLoader
|
|
baseUrl={autoDiscoveryInfo['m.homeserver'].base_url}
|
|
fallback={() => (
|
|
<AuthLayoutLoading
|
|
message={t('Auth.loading_connecting', {
|
|
url: autoDiscoveryInfo['m.homeserver'].base_url,
|
|
})}
|
|
/>
|
|
)}
|
|
error={() => (
|
|
<AuthLayoutError message={t('Auth.error_server_unavailable')} />
|
|
)}
|
|
>
|
|
{(specVersions) => (
|
|
<SpecVersionsProvider value={specVersions}>
|
|
<AuthFlowsLoader
|
|
fallback={() => (
|
|
<AuthLayoutLoading message={t('Auth.loading_auth_flows')} />
|
|
)}
|
|
error={() => <AuthLayoutError message={t('Auth.error_auth_flows')} />}
|
|
>
|
|
{(authFlows) => (
|
|
<AuthFlowsProvider value={authFlows}>
|
|
<Outlet />
|
|
</AuthFlowsProvider>
|
|
)}
|
|
</AuthFlowsLoader>
|
|
</SpecVersionsProvider>
|
|
)}
|
|
</SpecVersionsLoader>
|
|
</AutoDiscoveryInfoProvider>
|
|
</AuthServerProvider>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<AuthFooter footerRef={footerRef} />
|
|
|
|
{/* Server edit dialog */}
|
|
{showServerDialog && (
|
|
<ServerEditDialog
|
|
currentServer={server}
|
|
onConfirm={(newServer) => {
|
|
setShowServerDialog(false);
|
|
selectServer(newServer);
|
|
}}
|
|
onCancel={() => setShowServerDialog(false)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|