(null);
- const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+ const [hideActivity] = useSetting('hideActivity');
useThreadFocus(threadTimeline.threadId, threadFocusRef, threadViewRef);
useEditorAutoFocus(editor, threadFocusRef, true);
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index 45db35bd..e2c68bbf 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -21,8 +21,8 @@ import {
RedactedContent,
} from '../../../components/message';
import { fallbackReply, getLatestEditEvent, getReplyId } from '../../../utils/room';
-import { useSetting } from '../../../state/hooks/settings';
-import { MessageLayout, settingsAtom } from '../../../state/settings';
+import { useSettings } from '../../../state/hooks/settings';
+import { MessageLayout } from '../../../state/settings';
import { Reactions, Message } from '../message';
import * as css from './styles.css';
import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
@@ -86,19 +86,21 @@ export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewPro
const encryptedRooms = useObservableValue(ct.encryptedRooms);
const editor = useEditor();
- const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
- const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
- const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
- const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
- const direct = useIsDirectRoom();
- const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
- const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
- const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
- const showUrlPreview = encryptedRooms.has(roomId) ? encUrlPreview : urlPreview;
- const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');
+ const {
+ hideActivity,
+ messageLayout,
+ messageSpacing,
+ legacyUsernameColor,
+ mediaAutoLoad,
+ urlPreview,
+ encUrlPreview,
+ developerTools,
+ hour24Clock,
+ dateFormatString,
+ } = useSettings();
- const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
- const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+ const direct = useIsDirectRoom();
+ const showUrlPreview = encryptedRooms.has(roomId) ? encUrlPreview : urlPreview;
const ignoredUsersList = useIgnoredUsers();
const ignoredUsersSet = useMemo(() => new Set(ignoredUsersList), [ignoredUsersList]);
@@ -321,7 +323,7 @@ export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewPro
onEditId={handleEdit}
redacted={redacted.has(event.event_id)}
hideReadReceipts={hideActivity}
- showDeveloperTools={showDeveloperTools}
+ showDeveloperTools={developerTools}
memberPowerTag={getMemberPowerTag(event.sender)}
accessibleTagColors={accessiblePowerTagColors}
legacyUsernameColor={legacyUsernameColor || direct}
diff --git a/src/app/features/settings/Settings.tsx b/src/app/features/settings/Settings.tsx
index a4d879e8..ea50a9a7 100644
--- a/src/app/features/settings/Settings.tsx
+++ b/src/app/features/settings/Settings.tsx
@@ -93,12 +93,82 @@ const useSettingsMenuItems = (): SettingsMenuItem[] =>
[]
);
+type NavigationListProps = {
+ activePage?: SettingsPages;
+ setActivePage: (page: SettingsPages) => void;
+};
+function NavigationList({ activePage, setActivePage }: NavigationListProps) {
+ const menuItems = useSettingsMenuItems();
+
+ return (
+
+ {menuItems.map((item) => (
+ }
+ onClick={() => setActivePage(item.page)}
+ >
+
+ {item.name}
+
+
+ ))}
+
+ );
+}
+
+function LogoutButton() {
+ return (
+
+ {(logout, setLogout) => (
+ <>
+ }
+ onClick={() => setLogout(true)}
+ >
+ Logout
+
+ {logout && (
+ }>
+
+ setLogout(false),
+ clickOutsideDeactivates: true,
+ escapeDeactivates: stopPropagation,
+ }}
+ >
+ setLogout(false)} />
+
+
+
+ )}
+
+ )}
+
+ );
+}
+
type SettingsProps = {
initialPage?: SettingsPages;
requestClose: () => void;
};
export function Settings({ initialPage, requestClose }: SettingsProps) {
const ct = useClient();
+
const useAuthentication = useMediaAuthentication();
const { userId } = ct.session;
const profile = useUserProfile(userId);
@@ -116,7 +186,6 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
if (initialPage) return initialPage;
return screenSize === ScreenSize.Mobile ? undefined : SettingsPages.GeneralPage;
});
- const menuItems = useSettingsMenuItems();
const handlePageRequestClose = () => {
if (screenSize === ScreenSize.Mobile) {
@@ -126,10 +195,12 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
requestClose();
};
+ const hideSidebar = screenSize === ScreenSize.Mobile && activePage !== undefined;
+
return (
@@ -154,61 +225,10 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
-
- {menuItems.map((item) => (
- }
- onClick={() => setActivePage(item.page)}
- >
-
- {item.name}
-
-
- ))}
-
+
-
-
- {(logout, setLogout) => (
- <>
- }
- onClick={() => setLogout(true)}
- >
- Logout
-
- {logout && (
- }>
-
- setLogout(false),
- clickOutsideDeactivates: true,
- escapeDeactivates: stopPropagation,
- }}
- >
- setLogout(false)} />
-
-
-
- )}
-
- )}
-
+
+
diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx
index 8b7463df..72ef8a1b 100644
--- a/src/app/features/settings/developer-tools/DevelopTools.tsx
+++ b/src/app/features/settings/developer-tools/DevelopTools.tsx
@@ -8,7 +8,6 @@ import { SequenceCard } from '../../../components/sequence-card';
import { SequenceCardStyle } from '../styles.css';
import { SettingTile } from '../../../components/setting-tile';
import { useSetting } from '../../../state/hooks/settings';
-import { settingsAtom } from '../../../state/settings';
import {
AccountDataEditor,
AccountDataSubmitCallback,
@@ -22,7 +21,7 @@ type DeveloperToolsProps = {
};
export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
const ct = useClient();
- const [developerTools, setDeveloperTools] = useSetting(settingsAtom, 'developerTools');
+ const [developerTools, setDeveloperTools] = useSetting('developerTools');
const [expand, setExpend] = useState(false);
const [editAccountData, setEditAccountData] = useState();
diff --git a/src/app/features/settings/devices/DeviceTile.tsx b/src/app/features/settings/devices/DeviceTile.tsx
index 6ddd1165..3b2aad11 100644
--- a/src/app/features/settings/devices/DeviceTile.tsx
+++ b/src/app/features/settings/devices/DeviceTile.tsx
@@ -28,7 +28,6 @@ import { SequenceCardStyle } from '../styles.css';
import { LogoutDialog } from '../../../components/LogoutDialog';
import { stopPropagation } from '../../../utils/keyboard';
import { useSetting } from '../../../state/hooks/settings';
-import { settingsAtom } from '../../../state/settings';
import { useClient } from '../../../hooks/useClient';
import { useAlive } from '../../../hooks/useAlive';
@@ -45,8 +44,8 @@ export function DeviceTilePlaceholder() {
}
function DeviceActiveTime({ ts }: { ts: number }) {
- const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
- const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+ const [hour24Clock] = useSetting('hour24Clock');
+ const [dateFormatString] = useSetting('dateFormatString');
return (
diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index b861a060..7b685aab 100644
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -32,7 +32,7 @@ import FocusTrap from 'focus-trap-react';
import { Page, PageContent, PageHeader } from '../../../components/page';
import { SequenceCard } from '../../../components/sequence-card';
import { useSetting } from '../../../state/hooks/settings';
-import { DateFormat, MessageLayout, MessageSpacing, settingsAtom } from '../../../state/settings';
+import { DateFormat, MessageLayout, MessageSpacing } from '../../../state/settings';
import { SettingTile } from '../../../components/setting-tile';
import { KeySymbol } from '../../../utils/key-symbol';
import { isMacOS } from '../../../utils/user-agent';
@@ -80,7 +80,7 @@ const ThemeSelector = as<'div', ThemeSelectorProps>(
function SelectTheme({ disabled }: { disabled?: boolean }) {
const themes = useThemes();
const themeNames = useThemeNames();
- const [themeId, setThemeId] = useSetting(settingsAtom, 'themeId');
+ const [themeId, setThemeId] = useSetting('themeId');
const [menuCords, setMenuCords] = useState();
const selectedTheme = themes.find((theme) => theme.id === themeId) ?? LightTheme;
@@ -142,8 +142,8 @@ function SystemThemePreferences() {
const themeKind = useSystemThemeKind();
const themeNames = useThemeNames();
const themes = useThemes();
- const [lightThemeId, setLightThemeId] = useSetting(settingsAtom, 'lightThemeId');
- const [darkThemeId, setDarkThemeId] = useSetting(settingsAtom, 'darkThemeId');
+ const [lightThemeId, setLightThemeId] = useSetting('lightThemeId');
+ const [darkThemeId, setDarkThemeId] = useSetting('darkThemeId');
const lightThemes = themes.filter((theme) => theme.kind === ThemeKind.Light);
const darkThemes = themes.filter((theme) => theme.kind === ThemeKind.Dark);
@@ -260,7 +260,7 @@ function SystemThemePreferences() {
}
function PageZoomInput() {
- const [pageZoom, setPageZoom] = useSetting(settingsAtom, 'pageZoom');
+ const [pageZoom, setPageZoom] = useSetting('pageZoom');
const [currentZoom, setCurrentZoom] = useState(`${pageZoom}`);
const handleZoomChange: ChangeEventHandler = (evt) => {
@@ -304,9 +304,9 @@ function PageZoomInput() {
}
function Appearance() {
- const [systemTheme, setSystemTheme] = useSetting(settingsAtom, 'useSystemTheme');
- const [monochromeMode, setMonochromeMode] = useSetting(settingsAtom, 'monochromeMode');
- const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
+ const [systemTheme, setSystemTheme] = useSetting('useSystemTheme');
+ const [monochromeMode, setMonochromeMode] = useSetting('monochromeMode');
+ const [twitterEmoji, setTwitterEmoji] = useSetting('twitterEmoji');
return (
@@ -662,7 +662,7 @@ function PresetDateFormat({ value, onChange }: PresetDateFormatProps) {
}
function SelectDateFormat() {
- const [dateFormatString, setDateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+ const [dateFormatString, setDateFormatString] = useSetting('dateFormatString');
const [selectedDateFormat, setSelectedDateFormat] = useState(dateFormatString);
const customDateFormat = selectedDateFormat === '';
@@ -688,7 +688,7 @@ function SelectDateFormat() {
}
function DateAndTime() {
- const [hour24Clock, setHour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+ const [hour24Clock, setHour24Clock] = useSetting('hour24Clock');
return (
@@ -708,9 +708,9 @@ function DateAndTime() {
}
function Editor() {
- const [enterForNewline, setEnterForNewline] = useSetting(settingsAtom, 'enterForNewline');
- const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
- const [hideActivity, setHideActivity] = useSetting(settingsAtom, 'hideActivity');
+ const [enterForNewline, setEnterForNewline] = useSetting('enterForNewline');
+ const [isMarkdown, setIsMarkdown] = useSetting('isMarkdown');
+ const [hideActivity, setHideActivity] = useSetting('hideActivity');
return (
@@ -743,7 +743,7 @@ function Editor() {
function SelectMessageLayout() {
const [menuCords, setMenuCords] = useState();
- const [messageLayout, setMessageLayout] = useSetting(settingsAtom, 'messageLayout');
+ const [messageLayout, setMessageLayout] = useSetting('messageLayout');
const messageLayoutItems = useMessageLayoutItems();
const handleMenu: MouseEventHandler = (evt) => {
@@ -812,7 +812,7 @@ function SelectMessageLayout() {
function SelectMessageSpacing() {
const [menuCords, setMenuCords] = useState();
- const [messageSpacing, setMessageSpacing] = useSetting(settingsAtom, 'messageSpacing');
+ const [messageSpacing, setMessageSpacing] = useSetting('messageSpacing');
const messageSpacingItems = useMessageSpacingItems();
const handleMenu: MouseEventHandler = (evt) => {
@@ -880,22 +880,13 @@ function SelectMessageSpacing() {
}
function Messages() {
- const [legacyUsernameColor, setLegacyUsernameColor] = useSetting(
- settingsAtom,
- 'legacyUsernameColor'
- );
- const [hideMembershipEvents, setHideMembershipEvents] = useSetting(
- settingsAtom,
- 'hideMembershipEvents'
- );
- const [hideNickAvatarEvents, setHideNickAvatarEvents] = useSetting(
- settingsAtom,
- 'hideNickAvatarEvents'
- );
- const [mediaAutoLoad, setMediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
- const [urlPreview, setUrlPreview] = useSetting(settingsAtom, 'urlPreview');
- const [encUrlPreview, setEncUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
- const [showHiddenEvents, setShowHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
+ const [legacyUsernameColor, setLegacyUsernameColor] = useSetting('legacyUsernameColor');
+ const [hideMembershipEvents, setHideMembershipEvents] = useSetting('hideMembershipEvents');
+ const [hideNickAvatarEvents, setHideNickAvatarEvents] = useSetting('hideNickAvatarEvents');
+ const [mediaAutoLoad, setMediaAutoLoad] = useSetting('mediaAutoLoad');
+ const [urlPreview, setUrlPreview] = useSetting('urlPreview');
+ const [encUrlPreview, setEncUrlPreview] = useSetting('encUrlPreview');
+ const [showHiddenEvents, setShowHiddenEvents] = useSetting('showHiddenEvents');
return (
diff --git a/src/app/features/settings/notifications/SystemNotification.tsx b/src/app/features/settings/notifications/SystemNotification.tsx
index 11c077ff..ce2b0e22 100644
--- a/src/app/features/settings/notifications/SystemNotification.tsx
+++ b/src/app/features/settings/notifications/SystemNotification.tsx
@@ -6,7 +6,6 @@ import { SequenceCard } from '../../../components/sequence-card';
import { SequenceCardStyle } from '../styles.css';
import { SettingTile } from '../../../components/setting-tile';
import { useSetting } from '../../../state/hooks/settings';
-import { settingsAtom } from '../../../state/settings';
import { getNotificationState, usePermissionState } from '../../../hooks/usePermission';
import { useEmailNotifications } from '../../../hooks/useEmailNotifications';
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
@@ -95,11 +94,8 @@ function EmailNotification() {
export function SystemNotification() {
const notifPermission = usePermissionState('notifications', getNotificationState());
- const [showNotifications, setShowNotifications] = useSetting(settingsAtom, 'showNotifications');
- const [isNotificationSounds, setIsNotificationSounds] = useSetting(
- settingsAtom,
- 'isNotificationSounds'
- );
+ const [showNotifications, setShowNotifications] = useSetting('showNotifications');
+ const [isNotificationSounds, setIsNotificationSounds] = useSetting('isNotificationSounds');
const requestNotificationPermission = () => {
window.Notification.requestPermission();
diff --git a/src/app/hooks/sw/useSessionRequest.ts b/src/app/hooks/sw/useSessionRequest.ts
new file mode 100644
index 00000000..cf86eea6
--- /dev/null
+++ b/src/app/hooks/sw/useSessionRequest.ts
@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { Session } from '../../../client/sessions';
+
+const getServiceWorker = () => {
+ if ('serviceWorker' in navigator) {
+ return navigator.serviceWorker;
+ }
+ return undefined;
+};
+
+export const useSessionRequest = (session?: Session) => {
+ useEffect(() => {
+ const handleSWMessages = (ev: MessageEvent) => {
+ if (!session) return;
+
+ const { type, id } = ev.data ?? {};
+
+ if (type === 'session-request') {
+ getServiceWorker()?.controller?.postMessage({
+ type: 'session-request',
+ id,
+ baseUrl: session.baseUrl,
+ accessToken: session.accessToken,
+ });
+ // sendSessionToSW();
+ }
+ };
+
+ getServiceWorker()?.addEventListener('message', handleSWMessages);
+ return () => {
+ getServiceWorker()?.removeEventListener('message', handleSWMessages);
+ };
+ }, [session]);
+};
diff --git a/src/app/hooks/useRoomLatestRenderedEvent.ts b/src/app/hooks/useRoomLatestRenderedEvent.ts
deleted file mode 100644
index fd0ed9e5..00000000
--- a/src/app/hooks/useRoomLatestRenderedEvent.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-/* eslint-disable no-continue */
-import { MatrixEvent, Room, RoomEvent, RoomEventHandlerMap } from 'matrix-js-sdk';
-import { useEffect, useState } from 'react';
-import { settingsAtom } from '../state/settings';
-import { useSetting } from '../state/hooks/settings';
-import { MessageEvent, StateEvent } from '../../types/matrix/room';
-import { isMembershipChanged, reactionOrEditEvent } from '../utils/room';
-
-export const useRoomLatestRenderedEvent = (room: Room) => {
- const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
- const [hideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
- const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
- const [latestEvent, setLatestEvent] = useState();
-
- useEffect(() => {
- const getLatestEvent = (): MatrixEvent | undefined => {
- const liveEvents = room.getLiveTimeline().getEvents();
- for (let i = liveEvents.length - 1; i >= 0; i -= 1) {
- const evt = liveEvents[i];
-
- if (!evt) continue;
- if (reactionOrEditEvent(evt)) continue;
- if (evt.getType() === StateEvent.RoomMember) {
- const membershipChanged = isMembershipChanged(evt);
- if (membershipChanged && hideMembershipEvents) continue;
- if (!membershipChanged && hideNickAvatarEvents) continue;
- return evt;
- }
-
- if (
- evt.getType() === MessageEvent.RoomMessage ||
- evt.getType() === MessageEvent.RoomMessageEncrypted ||
- evt.getType() === MessageEvent.Sticker ||
- evt.getType() === StateEvent.RoomName ||
- evt.getType() === StateEvent.RoomTopic ||
- evt.getType() === StateEvent.RoomAvatar
- ) {
- return evt;
- }
-
- if (showHiddenEvents) return evt;
- }
- return undefined;
- };
-
- const handleTimelineEvent: RoomEventHandlerMap[RoomEvent.Timeline] = () => {
- setLatestEvent(getLatestEvent());
- };
- setLatestEvent(getLatestEvent());
-
- room.on(RoomEvent.Timeline, handleTimelineEvent);
- return () => {
- room.removeListener(RoomEvent.Timeline, handleTimelineEvent);
- };
- }, [room, hideMembershipEvents, hideNickAvatarEvents, showHiddenEvents]);
-
- return latestEvent;
-};
diff --git a/src/app/hooks/useRoomNavigate.ts b/src/app/hooks/useRoomNavigate.ts
index 67912b4c..dd502430 100644
--- a/src/app/hooks/useRoomNavigate.ts
+++ b/src/app/hooks/useRoomNavigate.ts
@@ -11,7 +11,6 @@ import { getOrphanParents, guessPerfectParent } from '../utils/room';
import { roomToParentsAtom } from '../state/room/roomToParents';
import { mDirectAtom } from '../state/mDirectList';
import { useSelectedSpace } from './router/useSelectedSpace';
-import { settingsAtom } from '../state/settings';
import { useSetting } from '../state/hooks/settings';
import { useClient } from './useClient';
import { getJoinRoomStateId } from '../../client/storage/collections';
@@ -23,7 +22,7 @@ export const useRoomNavigate = () => {
const roomToParents = useAtomValue(roomToParentsAtom);
const mDirects = useAtomValue(mDirectAtom);
const spaceSelectedId = useSelectedSpace();
- const [developerTools] = useSetting(settingsAtom, 'developerTools');
+ const [developerTools] = useSetting('developerTools');
const navigateSpace = useCallback(
(roomId: string) => {
diff --git a/src/app/hooks/useSessions.ts b/src/app/hooks/useSessions.ts
new file mode 100644
index 00000000..0f371b99
--- /dev/null
+++ b/src/app/hooks/useSessions.ts
@@ -0,0 +1,23 @@
+import { useAtomValue } from 'jotai';
+import { createContext, useContext } from 'react';
+import { sessionsAtom } from '../state/sessions';
+import { Session } from '../../client/sessions';
+
+export const useSessions = () => {
+ const sessions = useAtomValue(sessionsAtom);
+
+ return sessions;
+};
+
+const SessionContext = createContext(null);
+export const SessionContextProvider = SessionContext.Provider;
+
+export const useSession = () => {
+ const session = useContext(SessionContext);
+
+ if (!session) {
+ throw new Error('Session is not provided!');
+ }
+
+ return session;
+};
diff --git a/src/app/hooks/useTheme.ts b/src/app/hooks/useTheme.ts
index cdbb9dba..4bbc8530 100644
--- a/src/app/hooks/useTheme.ts
+++ b/src/app/hooks/useTheme.ts
@@ -2,7 +2,6 @@ import { lightTheme } from 'folds';
import { createContext, useContext, useEffect, useMemo, useState } from 'react';
import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
import { butterTheme, darkTheme, silverTheme } from '../../colors.css';
-import { settingsAtom } from '../state/settings';
import { useSetting } from '../state/hooks/settings';
export enum ThemeKind {
@@ -78,10 +77,10 @@ export const useSystemThemeKind = (): ThemeKind => {
export const useActiveTheme = (): Theme => {
const systemThemeKind = useSystemThemeKind();
const themes = useThemes();
- const [systemTheme] = useSetting(settingsAtom, 'useSystemTheme');
- const [themeId] = useSetting(settingsAtom, 'themeId');
- const [lightThemeId] = useSetting(settingsAtom, 'lightThemeId');
- const [darkThemeId] = useSetting(settingsAtom, 'darkThemeId');
+ const [systemTheme] = useSetting('useSystemTheme');
+ const [themeId] = useSetting('themeId');
+ const [lightThemeId] = useSetting('lightThemeId');
+ const [darkThemeId] = useSetting('darkThemeId');
if (!systemTheme) {
const selectedTheme = themes.find((theme) => theme.id === themeId) ?? LightTheme;
diff --git a/src/app/hooks/useUserProfile.ts b/src/app/hooks/useUserProfile.ts
index a24d12e8..f9900e81 100644
--- a/src/app/hooks/useUserProfile.ts
+++ b/src/app/hooks/useUserProfile.ts
@@ -1,7 +1,7 @@
import { useCallback } from 'react';
import { useQuery } from '@tanstack/react-query';
import { getProfile, GetProfileOK } from 'neurone/lib/api/matrix/client/v3/profile';
-import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { MatrixRequest, parseMatrixResp } from 'neurone/lib/matrix-request';
import { ObjectReader } from 'neurone/lib/utils';
import { useClient } from './useClient';
@@ -24,11 +24,13 @@ export type UserProfile = {
pronouns?: UserPronoun[];
biography?: UserBiography;
};
-export const useUserProfile = (userId: string): UserProfile | undefined => {
- const ct = useClient();
+export const useUserProfileRequest = (
+ userId: string,
+ request: MatrixRequest
+): UserProfile | undefined => {
const fetchProfile = useCallback(async (): Promise => {
- const response = await ct.requestAuthJSON(
+ const response = await request(
getProfile({
pathParams: { userId },
})
@@ -75,7 +77,7 @@ export const useUserProfile = (userId: string): UserProfile | undefined => {
}
: undefined,
};
- }, [ct, userId]);
+ }, [request, userId]);
const { data } = useQuery({
queryKey: ['profile', userId],
@@ -87,3 +89,9 @@ export const useUserProfile = (userId: string): UserProfile | undefined => {
return data;
};
+
+export const useUserProfile = (userId: string): UserProfile | undefined => {
+ const ct = useClient();
+
+ return useUserProfileRequest(userId, ct.requestAuthJSON);
+};
diff --git a/src/app/pages/AccountSelector.tsx b/src/app/pages/AccountSelector.tsx
new file mode 100644
index 00000000..9b012cce
--- /dev/null
+++ b/src/app/pages/AccountSelector.tsx
@@ -0,0 +1,200 @@
+import React, { useMemo, useRef } from 'react';
+import { Avatar, Box, Button, config, Icon, Icons, Text } from 'folds';
+import { Link, Navigate, Outlet, useNavigate } from 'react-router-dom';
+import { useAtom, useAtomValue } from 'jotai';
+import { AuthLayout, AuthLogo } from '../components/auth-layout';
+import { SequenceCard } from '../components/sequence-card';
+import { SettingTile } from '../components/setting-tile';
+import {
+ getAppPathFromHref,
+ getHomePath,
+ getLoginPath,
+ getOriginBaseUrl,
+ getRegisterPath,
+} from './pathUtils';
+import { getMxIdLocalPart, getMxIdServer } from '../utils/matrix';
+import { UserAvatar } from '../components/user-avatar';
+import { SessionContextProvider, useSessions } from '../hooks/useSessions';
+import { useUnauthThemeManager } from './ThemeManager';
+import { sessionUserIdAtom } from '../state/sessions';
+import { useClientConfig } from '../hooks/useClientConfig';
+import {
+ deleteAfterLoginRedirectPath,
+ getAfterLoginRedirectPath,
+ setAfterLoginRedirectPath,
+} from './afterLoginRedirectPath';
+import { Session } from '../../client/sessions';
+import { OrDivider } from '../components/OrDivider';
+import { getAuthJSONRequest } from '../../client/request';
+import { useUserProfileRequest } from '../hooks/useUserProfile';
+import { mxcToHttp } from '../../client/mxcToHttp';
+import { useSessionRequest } from '../hooks/sw/useSessionRequest';
+
+function AccountCard({ session }: { session: Session }) {
+ const { userId } = session;
+ const navigate = useNavigate();
+ const [sessionUserId, setSessionUserId] = useAtom(sessionUserIdAtom);
+
+ const request = useMemo(
+ () => getAuthJSONRequest(session.baseUrl, session.accessToken),
+ [session]
+ );
+
+ const profile = useUserProfileRequest(userId, request);
+
+ const username = getMxIdLocalPart(userId) ?? userId;
+ const server = getMxIdServer(userId) ?? userId;
+
+ const displayName = profile?.displayName ?? username;
+ const avatarUrl = profile?.avatarUrl
+ ? mxcToHttp(session.baseUrl, profile.avatarUrl, true).thumbnail({
+ width: 96,
+ height: 96,
+ method: 'crop',
+ })
+ : undefined;
+
+ const handleClick = () => {
+ if (sessionUserId !== userId) {
+ setSessionUserId(userId);
+ }
+ const path = getAfterLoginRedirectPath();
+ if (path) deleteAfterLoginRedirectPath();
+ navigate(path ?? getHomePath());
+ };
+
+ return (
+
+
+ }
+ />
+
+ }
+ >
+
+
+
+ {displayName}
+
+
+
+
+ {username}
+
+
+ {server}
+
+
+
+
+
+ );
+}
+
+export function AccountSelector() {
+ useUnauthThemeManager();
+ const navigate = useNavigate();
+
+ const sessions = useSessions();
+ useSessionRequest(sessions[0]);
+
+ if (sessions.length === 0) {
+ return ;
+ }
+
+ return (
+
+
+
+
+
+
+
+ Welcome to Cinny
+
+
+ Choose an account to continue.
+
+
+
+
+
+
+ Accounts
+
+ {sessions.map((session) => (
+
+ ))}
+
+
+
+ }
+ onClick={() => navigate(getLoginPath())}
+ >
+
+ Add Account
+
+
+
+
+
+ Do not have an account? Register
+
+
+
+ );
+}
+
+export function ClientAccountSelector() {
+ const clientConfig = useClientConfig();
+
+ const prevUserIdRef = useRef();
+
+ const userId = useAtomValue(sessionUserIdAtom);
+ const prevUserId = prevUserIdRef.current;
+ prevUserIdRef.current = userId;
+
+ const sessions = useSessions();
+ const session = useMemo(() => sessions.find((s) => userId === s.userId), [userId, sessions]);
+
+ useSessionRequest(session ?? sessions[0]);
+
+ if (!session) {
+ return ;
+ }
+
+ if (sessions.length === 0) {
+ const afterLoginPath = getAppPathFromHref(
+ getOriginBaseUrl(clientConfig.hashRouter),
+ window.location.href
+ );
+ if (afterLoginPath) setAfterLoginRedirectPath(afterLoginPath);
+
+ return ;
+ }
+
+ return (
+
+
+ {/* reset url from previous account */}
+ {prevUserId && prevUserId !== userId && }
+
+ );
+}
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index b21db50f..72580f00 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -9,7 +9,7 @@ import {
} from 'react-router-dom';
import { ClientConfig } from '../hooks/useClientConfig';
-import { AuthLayout, Login, Register, ResetPassword } from './auth';
+import { AuthRoot, Login, Register, ResetPassword } from './auth';
import {
DIRECT_PATH,
EXPLORE_PATH,
@@ -30,22 +30,13 @@ import {
_SERVER_PATH,
CREATE_PATH,
} from './paths';
-import {
- getAppPathFromHref,
- getExploreFeaturedPath,
- getHomePath,
- getInboxNotificationsPath,
- getLoginPath,
- getOriginBaseUrl,
- getSpaceLobbyPath,
-} from './pathUtils';
+import { getExploreFeaturedPath, getInboxNotificationsPath, getSpaceLobbyPath } from './pathUtils';
import { ClientBindAtoms, ClientLayout, ClientRoot } from './client';
import { Home, HomeRouteRoomProvider, HomeSearch } from './client/home';
import { Direct, DirectCreate, DirectRouteRoomProvider } from './client/direct';
import { RouteSpaceProvider, Space, SpaceRouteRoomProvider, SpaceSearch } from './client/space';
import { Explore, FeaturedRooms, PublicRooms } from './client/explore';
import { Notifications, Inbox, Invites } from './client/inbox';
-import { setAfterLoginRedirectPath } from './afterLoginRedirectPath';
import { Room } from '../features/room';
import { Lobby } from '../features/lobby';
import { WelcomePage } from './client/WelcomePage';
@@ -55,7 +46,7 @@ import { ScreenSize } from '../hooks/useScreenSize';
import { MobileFriendlyPageNav, MobileFriendlyClientNav } from './MobileFriendly';
import { ClientInitStorageAtom } from './client/ClientInitStorageAtom';
import { ClientNonUIFeatures } from './client/ClientNonUIFeatures';
-import { AuthRouteThemeManager, UnAuthRouteThemeManager } from './ThemeManager';
+import { AuthRouteThemeManager } from './ThemeManager';
import { ReceiveSelfDeviceVerification } from '../components/DeviceVerification';
import { RoomSettingsRenderer } from '../features/room-settings';
import { ClientRoomsNotificationPreferences } from './client/ClientRoomsNotificationPreferences';
@@ -66,9 +57,9 @@ import { HomeCreateRoom } from './client/home/CreateRoom';
import { Create } from './client/create';
import { CreateSpaceModalRenderer } from '../features/create-space';
import { SearchModalRenderer } from '../features/search';
-import { getFallbackSession } from '../state/sessions';
import { CallStatusRenderer } from '../features/call-status';
import { CallEmbedProvider } from '../components/CallEmbedProvider';
+import { AccountSelector, ClientAccountSelector } from './AccountSelector';
export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
const { hashRouter } = clientConfig;
@@ -76,217 +67,185 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
const routes = createRoutesFromElements(
- {
- if (getFallbackSession()) return redirect(getHomePath());
- const afterLoginPath = getAppPathFromHref(getOriginBaseUrl(), window.location.href);
- if (afterLoginPath) setAfterLoginRedirectPath(afterLoginPath);
- return redirect(getLoginPath());
- }}
- />
- {
- if (getFallbackSession()) {
- return redirect(getHomePath());
- }
-
- return null;
- }}
- element={
- <>
-
-
-
- }
- >
+ } />
+ }>
} />
} />
} />
- {
- const session = getFallbackSession();
- if (!session) {
- const afterLoginPath = getAppPathFromHref(
- getOriginBaseUrl(hashRouter),
- window.location.href
- );
- if (afterLoginPath) setAfterLoginRedirectPath(afterLoginPath);
- return redirect(getLoginPath());
- }
- return null;
- }}
- element={
-
-
-
-
-
-
-
-
-
- }
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
- }
- >
+ }>
-
-
- }
- >
-
-
+
+
+
+
+
+
+
+
+
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
}
>
- {mobile ? null : } />}
- } />
- join} />
- {/* } /> */}
-
-
- }
- />
-
-
-
-
- }
- >
-
-
- }
- >
- {mobile ? null : } />}
- } />
-
-
-
- }
- />
-
-
-
+
+
}
>
-
- }
- >
- {mobile ? null : (
- {
- const { spaceIdOrAlias } = params;
- if (spaceIdOrAlias) {
- return redirect(getSpaceLobbyPath(spaceIdOrAlias));
- }
- return null;
- }}
- element={}
- />
- )}
- } />
- {/*} /> */}
-
-
-
}
- />
-
-
-
-
- }
- >
-
-
- }
- >
- {mobile ? null : (
+ >
+ {mobile ? null : } />}
+ } />
+ join} />
+ {/* } /> */}
redirect(getExploreFeaturedPath())}
- element={}
- />
- )}
- } />
- } />
-
- } />
-
-
-
+ path={_ROOM_PATH}
+ element={
+
+
+
}
- >
-
-
- }
- >
- {mobile ? null : (
- redirect(getInboxNotificationsPath())}
- element={}
/>
- )}
- } />
- } />
+
+
+
+
+ }
+ >
+
+
+ }
+ >
+ {mobile ? null : } />}
+ } />
+
+
+
+ }
+ />
+
+
+
+
+
+ }
+ >
+
+
+
+ }
+ >
+ {mobile ? null : (
+ {
+ const { spaceIdOrAlias } = params;
+ if (spaceIdOrAlias) {
+ return redirect(getSpaceLobbyPath(spaceIdOrAlias));
+ }
+ return null;
+ }}
+ element={}
+ />
+ )}
+ } />
+ {/*} /> */}
+
+
+
+ }
+ />
+
+
+
+
+ }
+ >
+
+
+ }
+ >
+ {mobile ? null : (
+ redirect(getExploreFeaturedPath())}
+ element={}
+ />
+ )}
+ } />
+ } />
+
+ } />
+
+
+
+ }
+ >
+
+
+ }
+ >
+ {mobile ? null : (
+ redirect(getInboxNotificationsPath())}
+ element={}
+ />
+ )}
+ } />
+ } />
+
Page not found} />
diff --git a/src/app/pages/ThemeManager.tsx b/src/app/pages/ThemeManager.tsx
index 69d50cdb..2f99199e 100644
--- a/src/app/pages/ThemeManager.tsx
+++ b/src/app/pages/ThemeManager.tsx
@@ -9,39 +9,45 @@ import {
useSystemThemeKind,
} from '../hooks/useTheme';
import { useSetting } from '../state/hooks/settings';
-import { settingsAtom } from '../state/settings';
+import { ContainerColor } from '../styles/ContainerColor.css';
-export function UnAuthRouteThemeManager() {
+export const useUnauthThemeManager = () => {
const systemThemeKind = useSystemThemeKind();
useEffect(() => {
- document.body.className = '';
- document.body.classList.add(configClass, varsClass);
+ document.documentElement.className = '';
+ document.documentElement.classList.add(
+ configClass,
+ varsClass,
+ ...ContainerColor({ variant: 'Background' }).split(' ')
+ );
if (systemThemeKind === ThemeKind.Dark) {
- document.body.classList.add(...DarkTheme.classNames);
+ document.documentElement.classList.add(...DarkTheme.classNames);
}
if (systemThemeKind === ThemeKind.Light) {
- document.body.classList.add(...LightTheme.classNames);
+ document.documentElement.classList.add(...LightTheme.classNames);
}
}, [systemThemeKind]);
-
- return null;
-}
+};
export function AuthRouteThemeManager({ children }: { children: ReactNode }) {
const activeTheme = useActiveTheme();
- const [monochromeMode] = useSetting(settingsAtom, 'monochromeMode');
+ const [monochromeMode] = useSetting('monochromeMode');
useEffect(() => {
- document.body.className = '';
- document.body.classList.add(configClass, varsClass);
+ document.documentElement.className = '';
+ document.documentElement.classList.add(
+ configClass,
+ varsClass,
+ ...ContainerColor({ variant: 'Background' }).split(' ')
+ );
- document.body.classList.add(...activeTheme.classNames);
+ document.documentElement.classList.add(...activeTheme.classNames);
if (monochromeMode) {
- document.body.style.filter = 'grayscale(1)';
+ document.documentElement.style.filter = 'grayscale(1)';
} else {
- document.body.style.filter = '';
+ document.documentElement.style.filter = '';
}
}, [activeTheme, monochromeMode]);
diff --git a/src/app/pages/auth/AuthLayout.tsx b/src/app/pages/auth/AuthLayout.tsx
deleted file mode 100644
index 1b37360d..00000000
--- a/src/app/pages/auth/AuthLayout.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-import React, { useCallback, useEffect } from 'react';
-import { Box, Header, Scroll, Spinner, Text, color } from 'folds';
-import {
- Outlet,
- generatePath,
- matchPath,
- useLocation,
- useNavigate,
- useParams,
-} from 'react-router-dom';
-import classNames from 'classnames';
-
-import { AuthFooter } from './AuthFooter';
-import * as css from './styles.css';
-import * as PatternsCss from '../../styles/Patterns.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 CinnySVG from '../../../../public/res/svg/cinny.svg';
-import { ServerPicker } from './ServerPicker';
-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 (
-
-
-
- {message}
-
-
- );
-}
-
-function AuthLayoutError({ message }: { message: string }) {
- return (
-
-
- {message}
-
-
- );
-}
-
-export function AuthLayout() {
- 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 [discoveryState, discoverServer] = useAsyncCallback(
- useCallback(async (serverName: string) => {
- const response = await autoDiscovery(fetch, serverName);
- return {
- serverName,
- response,
- };
- }, [])
- );
-
- useEffect(() => {
- if (server) discoverServer(server);
- }, [discoverServer, server]);
-
- // if server is mismatches with path server, update path
- 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 : [];
-
- return (
-
-
-
-
-
- 
- Cinny
-
-
-
-
-
- Homeserver
-
-
-
- {discoveryState.status === AsyncStatus.Loading && (
-
- )}
- {discoveryState.status === AsyncStatus.Error && (
-
- )}
- {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_PROMPT && (
-
- )}
- {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_ERROR && (
-
- )}
- {discoveryState.status === AsyncStatus.Success && autoDiscoveryInfo && (
-
-
- (
-
- )}
- error={() => (
-
- )}
- >
- {(specVersions) => (
-
- (
-
- )}
- error={() => (
-
- )}
- >
- {(authFlows) => (
-
-
-
- )}
-
-
- )}
-
-
-
- )}
-
-
-
-
-
- );
-}
diff --git a/src/app/pages/auth/AuthRoot.tsx b/src/app/pages/auth/AuthRoot.tsx
new file mode 100644
index 00000000..afec36e4
--- /dev/null
+++ b/src/app/pages/auth/AuthRoot.tsx
@@ -0,0 +1,186 @@
+import React, { useCallback, useEffect } from 'react';
+import { Box, Spinner, Text, color } from 'folds';
+import {
+ Outlet,
+ generatePath,
+ matchPath,
+ useLocation,
+ useNavigate,
+ useParams,
+} from 'react-router-dom';
+
+import {
+ clientAllowedServer,
+ clientDefaultServer,
+ useClientConfig,
+} from '../../hooks/useClientConfig';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { LOGIN_PATH, REGISTER_PATH, RESET_PASSWORD_PATH } from '../paths';
+import { ServerPicker } from './ServerPicker';
+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';
+import { AuthLayout } from '../../components/auth-layout';
+import { useUnauthThemeManager } from '../ThemeManager';
+
+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 (
+
+
+
+ {message}
+
+
+ );
+}
+
+function AuthLayoutError({ message }: { message: string }) {
+ return (
+
+
+ {message}
+
+
+ );
+}
+
+export function AuthRoot() {
+ useUnauthThemeManager();
+ 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 [discoveryState, discoverServer] = useAsyncCallback(
+ useCallback(async (serverName: string) => {
+ const response = await autoDiscovery(fetch, serverName);
+ return {
+ serverName,
+ response,
+ };
+ }, [])
+ );
+
+ useEffect(() => {
+ if (server) discoverServer(server);
+ }, [discoverServer, server]);
+
+ // if server is mismatches with path server, update path
+ 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 : [];
+
+ return (
+
+
+
+ Homeserver
+
+
+
+ {discoveryState.status === AsyncStatus.Loading && (
+
+ )}
+ {discoveryState.status === AsyncStatus.Error && (
+
+ )}
+ {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_PROMPT && (
+
+ )}
+ {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_ERROR && (
+
+ )}
+ {discoveryState.status === AsyncStatus.Success && autoDiscoveryInfo && (
+
+
+ (
+
+ )}
+ error={() => (
+
+ )}
+ >
+ {(specVersions) => (
+
+ }
+ error={() => (
+
+ )}
+ >
+ {(authFlows) => (
+
+
+
+ )}
+
+
+ )}
+
+
+
+ )}
+
+ );
+}
diff --git a/src/app/pages/auth/index.ts b/src/app/pages/auth/index.ts
index c4bd0476..50a6ce8c 100644
--- a/src/app/pages/auth/index.ts
+++ b/src/app/pages/auth/index.ts
@@ -1,4 +1,4 @@
-export * from './AuthLayout';
+export * from './AuthRoot';
export * from './login';
export * from './register';
export * from './reset-password';
diff --git a/src/app/pages/auth/login/Login.tsx b/src/app/pages/auth/login/Login.tsx
index e6fad6a0..0dab2c16 100644
--- a/src/app/pages/auth/login/Login.tsx
+++ b/src/app/pages/auth/login/Login.tsx
@@ -7,7 +7,7 @@ import { useParsedLoginFlows } from '../../../hooks/useParsedLoginFlows';
import { PasswordLoginForm } from './PasswordLoginForm';
import { SSOLogin } from '../SSOLogin';
import { TokenLogin } from './TokenLogin';
-import { OrDivider } from '../OrDivider';
+import { OrDivider } from '../../../components/OrDivider';
import { getLoginPath, getRegisterPath, withSearchParam } from '../../pathUtils';
import { usePathWithOrigin } from '../../../hooks/usePathWithOrigin';
import { LoginPathSearchParams } from '../../paths';
@@ -90,7 +90,7 @@ export function Login() {
)}
-
+
Do not have an account? Register