{ if (e.key === 'Escape') onCancel(); }}
+ >
+
+
+ );
+}
+
+/* ── 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 maxTop = input.pageHeight - input.footerHeight - input.bottomGap - input.modalHeight;
+ const top = Math.max(input.minTop, Math.min(desiredTop, maxTop));
+ const maxHeight = Math.max(0, input.pageHeight - input.footerHeight - input.bottomGap - top);
+ return {
+ top: Math.round(top),
+ maxHeight: Math.floor(maxHeight),
+ constrained: input.modalHeight > maxHeight,
+ };
+}
+
+const rootVars: React.CSSProperties = {
+ '--vojo-mascot-size': 'clamp(28rem, 57dvh, 48rem)',
+ '--vojo-mascot-top': 'clamp(1.5rem, 4dvh, 3rem)',
+ '--vojo-stack-pad': '1.5rem',
+ '--vojo-anchor-ratio': '0.71',
+ '--vojo-modal-min-top': 'clamp(12rem, 26dvh, 18rem)',
+ '--vojo-modal-gap': 'clamp(0.75rem, 2dvh, 1.5rem)',
+ '--vojo-footer-space': 'clamp(4.5rem, 9dvh, 6.5rem)',
+} as React.CSSProperties;
+
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;
@@ -79,13 +187,12 @@ export function AuthLayout() {
server = defaultServer;
}
+ const [showServerDialog, setShowServerDialog] = useState(false);
+
const [discoveryState, discoverServer] = useAsyncCallback(
useCallback(async (serverName: string) => {
const response = await autoDiscovery(fetch, serverName);
- return {
- serverName,
- response,
- };
+ return { serverName, response };
}, [])
);
@@ -93,7 +200,6 @@ export function AuthLayout() {
if (server) discoverServer(server);
}, [discoverServer, server]);
- // if server is mismatches with path server, update path
useEffect(() => {
if (!urlEncodedServer || tryDecodeURIComponent(urlEncodedServer) !== server) {
navigate(
@@ -113,7 +219,9 @@ export function AuthLayout() {
return;
}
navigate(
- generatePath(currentAuthPath(location.pathname), { server: encodeURIComponent(newServer) })
+ generatePath(currentAuthPath(location.pathname), {
+ server: encodeURIComponent(newServer),
+ })
);
},
[navigate, location, discoveryState, server, discoverServer]
@@ -122,88 +230,174 @@ export function AuthLayout() {
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
+
+ {t('Auth.homeserver_dialog_title')}
+
+
+ {t('Auth.homeserver_dialog_desc')}
+
+
+
+
+ {
+ setShowServerDialog(false);
+ selectServer(newServer);
+ }}
+ onCancel={() => setShowServerDialog(false)}
+ />
+ )}
+
);
}
diff --git a/src/app/pages/auth/login/Login.tsx b/src/app/pages/auth/login/Login.tsx
index 2f04a733..6dfcfd2a 100644
--- a/src/app/pages/auth/login/Login.tsx
+++ b/src/app/pages/auth/login/Login.tsx
@@ -1,98 +1,50 @@
import React, { useMemo } from 'react';
import { Box, Text, color } from 'folds';
import { Link, useSearchParams } from 'react-router-dom';
-import { SSOAction } from 'matrix-js-sdk';
+import { useTranslation } from 'react-i18next';
import { useAuthFlows } from '../../../hooks/useAuthFlows';
import { useAuthServer } from '../../../hooks/useAuthServer';
import { useParsedLoginFlows } from '../../../hooks/useParsedLoginFlows';
import { PasswordLoginForm } from './PasswordLoginForm';
-import { SSOLogin } from '../SSOLogin';
-import { TokenLogin } from './TokenLogin';
-import { OrDivider } from '../OrDivider';
-import { getLoginPath, getRegisterPath, withSearchParam } from '../../pathUtils';
-import { usePathWithOrigin } from '../../../hooks/usePathWithOrigin';
+import { getRegisterPath } from '../../pathUtils';
import { LoginPathSearchParams } from '../../paths';
-import { useClientConfig } from '../../../hooks/useClientConfig';
-
-const getLoginTokenSearchParam = () => {
- // when using hasRouter query params in existing route
- // gets ignored by react-router, so we need to read it ourself
- // we only need to read loginToken as it's the only param that
- // is provided by external entity. example: SSO login
- const parmas = new URLSearchParams(window.location.search);
- const loginToken = parmas.get('loginToken');
- return loginToken ?? undefined;
-};
const useLoginSearchParams = (searchParams: URLSearchParams): LoginPathSearchParams =>
useMemo(
() => ({
username: searchParams.get('username') ?? undefined,
email: searchParams.get('email') ?? undefined,
- loginToken: searchParams.get('loginToken') ?? undefined,
}),
[searchParams]
);
export function Login() {
+ const { t } = useTranslation();
const server = useAuthServer();
- const { hashRouter } = useClientConfig();
const { loginFlows } = useAuthFlows();
const [searchParams] = useSearchParams();
const loginSearchParams = useLoginSearchParams(searchParams);
- const ssoRedirectUrl = usePathWithOrigin(getLoginPath(server));
- const loginTokenForHashRouter = getLoginTokenSearchParam();
- const absoluteLoginPath = usePathWithOrigin(getLoginPath(server));
-
- if (hashRouter?.enabled && loginTokenForHashRouter) {
- window.location.replace(
- withSearchParam(absoluteLoginPath, {
- loginToken: loginTokenForHashRouter,
- })
- );
- }
const parsedFlows = useParsedLoginFlows(loginFlows.flows);
return (
+
+
+
+
+
+
+
+
+ {/* Title */}
+
+ {pageTitle}
-
-
- (
-
+
+ (
+
+ (
+
+
+ )}
+
+
+ )}
+
+
+
+ )}
+
+
+ {t('Auth.homeserver')}
+ {server}
+ {clientConfig.allowCustomHomeservers && (
+
+ )}
+
+
+ {/* Loading / error / form */}
+ {discoveryState.status === AsyncStatus.Loading && (
+