mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-11 17:50:29 +03:00
redesigned app settings and switch to rust crypto (#1988)
* rework general settings * account settings - WIP * add missing key prop * add object url hook * extract wide modal styles * profile settings and image editor - WIP * add outline style to upload card * remove file param from bind upload atom hook * add compact variant to upload card * add compact upload card renderer * add option to update profile avatar * add option to change profile displayname * allow displayname change based on capabilities check * rearrange settings components into folders * add system notification settings * add initial page param in settings * convert account data hook to typescript * add push rule hook * add notification mode hook * add notification mode switcher component * add all messages notification settings options * add special messages notification settings * add keyword notifications * add ignored users section * improve ignore user list strings * add about settings * add access token option in about settings * add developer tools settings * add expand button to account data dev tool option * update folds * fix editable active element textarea check * do not close dialog when editable element in focus * add text area plugins * add text area intent handler hook * add newline intent mod in text area * add next line hotkey in text area intent hook * add syntax error position dom utility function * add account data editor * add button to send new account data in dev tools * improve custom emoji plugin * add more custom emojis hooks * add text util css * add word break in setting tile title and description * emojis and sticker user settings - WIP * view image packs from settings * emoji pack editing - WIP * add option to edit pack meta * change saved changes message * add image edit and delete controls * add option to upload pack images and apply changes * fix state event type when updating image pack * lazy load pack image tile img * hide upload image button when user can not edit pack * add option to add or remove global image packs * upgrade to rust crypto (#2168) * update matrix js sdk * remove dead code * use rust crypto * update setPowerLevel usage * fix types * fix deprecated isRoomEncrypted method uses * fix deprecated room.currentState uses * fix deprecated import/export room keys func * fix merge issues in image pack file * fix remaining issues in image pack file * start indexedDBStore * update package lock and vite-plugin-top-level-await * user session settings - WIP * add useAsync hook * add password stage uia * add uia flow matrix error hook * add UIA action component * add options to delete sessions * add sso uia stage * fix SSO stage complete error * encryption - WIP * update user settings encryption terminology * add default variant to password input * use password input in uia password stage * add options for local backup in user settings * remove typo in import local backup password input label * online backup - WIP * fix uia sso action * move access token settings from about to developer tools * merge encryption tab into sessions and rename it to devices * add device placeholder tile * add logout dialog * add logout button for current device * move other devices in component * render unverified device verification tile * add learn more section for current device verification * add device verification status badge * add info card component * add index file for password input component * add types for secret storage * add component to access secret storage key * manual verification - WIP * update matrix-js-sdk to v35 * add manual verification * use react query for device list * show unverified tab on sidebar * fix device list updates * add session key details to current device * render restore encryption backup * fix loading state of restore backup * fix unverified tab settings closes after verification * key backup tile - WIP * fix unverified tab badge * rename session key to device key in device tile * improve backup restore functionality * fix restore button enabled after layout reload during restoring backup * update backup info on status change * add backup disconnection failures * add device verification using sas * restore backup after verification * show option to logout on startup error screen * fix key backup hook update on decryption key cached * add option to enable device verification * add device verification reset dialog * add logout button in settings drawer * add encrypted message lost on logout * fix backup restore never finish with 0 keys * fix setup dialog hides when enabling device verification * show backup details in menu * update setup device verification body copy * replace deprecated method * fix displayname appear as mxid in settings * remove old refactored codes * fix types
This commit is contained in:
Ajay Bura
GitHub
parent
f5d68fcc22
commit
56b754153a
196 changed files with 14171 additions and 8403 deletions
73
src/app/components/ActionUIA.tsx
Normal file
73
src/app/components/ActionUIA.tsx
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import React, { ReactNode } from 'react';
|
||||
import { AuthDict, AuthType, IAuthData, UIAFlow } from 'matrix-js-sdk';
|
||||
import { getUIAFlowForStages } from '../utils/matrix-uia';
|
||||
import { useSupportedUIAFlows, useUIACompleted, useUIAFlow } from '../hooks/useUIAFlows';
|
||||
import { UIAFlowOverlay } from './UIAFlowOverlay';
|
||||
import { PasswordStage, SSOStage } from './uia-stages';
|
||||
import { useMatrixClient } from '../hooks/useMatrixClient';
|
||||
|
||||
export const SUPPORTED_IN_APP_UIA_STAGES = [AuthType.Password, AuthType.Sso];
|
||||
|
||||
export const pickUIAFlow = (uiaFlows: UIAFlow[]): UIAFlow | undefined => {
|
||||
const passwordFlow = getUIAFlowForStages(uiaFlows, [AuthType.Password]);
|
||||
if (passwordFlow) return passwordFlow;
|
||||
return getUIAFlowForStages(uiaFlows, [AuthType.Sso]);
|
||||
};
|
||||
|
||||
type ActionUIAProps = {
|
||||
authData: IAuthData;
|
||||
ongoingFlow: UIAFlow;
|
||||
action: (authDict: AuthDict) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
export function ActionUIA({ authData, ongoingFlow, action, onCancel }: ActionUIAProps) {
|
||||
const mx = useMatrixClient();
|
||||
const completed = useUIACompleted(authData);
|
||||
const { getStageToComplete } = useUIAFlow(authData, ongoingFlow);
|
||||
|
||||
const stageToComplete = getStageToComplete();
|
||||
|
||||
if (!stageToComplete) return null;
|
||||
return (
|
||||
<UIAFlowOverlay
|
||||
currentStep={completed.length + 1}
|
||||
stepCount={ongoingFlow.stages.length}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
{stageToComplete.type === AuthType.Password && (
|
||||
<PasswordStage
|
||||
userId={mx.getUserId()!}
|
||||
stageData={stageToComplete}
|
||||
onCancel={onCancel}
|
||||
submitAuthDict={action}
|
||||
/>
|
||||
)}
|
||||
{stageToComplete.type === AuthType.Sso && stageToComplete.session && (
|
||||
<SSOStage
|
||||
ssoRedirectURL={mx.getFallbackAuthUrl(AuthType.Sso, stageToComplete.session)}
|
||||
stageData={stageToComplete}
|
||||
onCancel={onCancel}
|
||||
submitAuthDict={action}
|
||||
/>
|
||||
)}
|
||||
</UIAFlowOverlay>
|
||||
);
|
||||
}
|
||||
|
||||
type ActionUIAFlowsLoaderProps = {
|
||||
authData: IAuthData;
|
||||
unsupported: () => ReactNode;
|
||||
children: (ongoingFlow: UIAFlow) => ReactNode;
|
||||
};
|
||||
export function ActionUIAFlowsLoader({
|
||||
authData,
|
||||
unsupported,
|
||||
children,
|
||||
}: ActionUIAFlowsLoaderProps) {
|
||||
const supportedFlows = useSupportedUIAFlows(authData.flows ?? [], SUPPORTED_IN_APP_UIA_STAGES);
|
||||
const ongoingFlow = supportedFlows.length > 0 ? supportedFlows[0] : undefined;
|
||||
|
||||
if (!ongoingFlow) return unsupported();
|
||||
|
||||
return children(ongoingFlow);
|
||||
}
|
||||
281
src/app/components/BackupRestore.tsx
Normal file
281
src/app/components/BackupRestore.tsx
Normal file
|
|
@ -0,0 +1,281 @@
|
|||
import React, { MouseEventHandler, useCallback, useState } from 'react';
|
||||
import { useAtom } from 'jotai';
|
||||
import { CryptoApi, KeyBackupInfo } from 'matrix-js-sdk/lib/crypto-api';
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
color,
|
||||
config,
|
||||
Icon,
|
||||
IconButton,
|
||||
Icons,
|
||||
Menu,
|
||||
percent,
|
||||
PopOut,
|
||||
ProgressBar,
|
||||
RectCords,
|
||||
Spinner,
|
||||
Text,
|
||||
} from 'folds';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { BackupProgressStatus, backupRestoreProgressAtom } from '../state/backupRestore';
|
||||
import { InfoCard } from './info-card';
|
||||
import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
|
||||
import {
|
||||
useKeyBackupInfo,
|
||||
useKeyBackupStatus,
|
||||
useKeyBackupSync,
|
||||
useKeyBackupTrust,
|
||||
} from '../hooks/useKeyBackup';
|
||||
import { stopPropagation } from '../utils/keyboard';
|
||||
import { useRestoreBackupOnVerification } from '../hooks/useRestoreBackupOnVerification';
|
||||
|
||||
type BackupStatusProps = {
|
||||
enabled: boolean;
|
||||
};
|
||||
function BackupStatus({ enabled }: BackupStatusProps) {
|
||||
return (
|
||||
<Box as="span" gap="100" alignItems="Center">
|
||||
<Badge variant={enabled ? 'Success' : 'Critical'} fill="Solid" size="200" radii="Pill" />
|
||||
<Text
|
||||
as="span"
|
||||
size="L400"
|
||||
style={{ color: enabled ? color.Success.Main : color.Critical.Main }}
|
||||
>
|
||||
{enabled ? 'Connected' : 'Disconnected'}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
type BackupSyncingProps = {
|
||||
count: number;
|
||||
};
|
||||
function BackupSyncing({ count }: BackupSyncingProps) {
|
||||
return (
|
||||
<Box as="span" gap="100" alignItems="Center">
|
||||
<Spinner size="50" variant="Primary" fill="Soft" />
|
||||
<Text as="span" size="L400" style={{ color: color.Primary.Main }}>
|
||||
Syncing ({count})
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function BackupProgressFetching() {
|
||||
return (
|
||||
<Box grow="Yes" gap="200" alignItems="Center">
|
||||
<Badge variant="Secondary" fill="Solid" radii="300">
|
||||
<Text size="L400">Restoring: 0%</Text>
|
||||
</Badge>
|
||||
<Box grow="Yes" direction="Column">
|
||||
<ProgressBar variant="Secondary" size="300" min={0} max={1} value={0} />
|
||||
</Box>
|
||||
<Spinner size="50" variant="Secondary" fill="Soft" />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type BackupProgressProps = {
|
||||
total: number;
|
||||
downloaded: number;
|
||||
};
|
||||
function BackupProgress({ total, downloaded }: BackupProgressProps) {
|
||||
return (
|
||||
<Box grow="Yes" gap="200" alignItems="Center">
|
||||
<Badge variant="Secondary" fill="Solid" radii="300">
|
||||
<Text size="L400">Restoring: {`${Math.round(percent(0, total, downloaded))}%`}</Text>
|
||||
</Badge>
|
||||
<Box grow="Yes" direction="Column">
|
||||
<ProgressBar variant="Secondary" size="300" min={0} max={total} value={downloaded} />
|
||||
</Box>
|
||||
<Badge variant="Secondary" fill="Soft" radii="Pill">
|
||||
<Text size="L400">
|
||||
{downloaded} / {total}
|
||||
</Text>
|
||||
</Badge>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type BackupTrustInfoProps = {
|
||||
crypto: CryptoApi;
|
||||
backupInfo: KeyBackupInfo;
|
||||
};
|
||||
function BackupTrustInfo({ crypto, backupInfo }: BackupTrustInfoProps) {
|
||||
const trust = useKeyBackupTrust(crypto, backupInfo);
|
||||
|
||||
if (!trust) return null;
|
||||
|
||||
return (
|
||||
<Box direction="Column">
|
||||
{trust.matchesDecryptionKey ? (
|
||||
<Text size="T200" style={{ color: color.Success.Main }}>
|
||||
<b>Backup has trusted decryption key.</b>
|
||||
</Text>
|
||||
) : (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>Backup does not have trusted decryption key!</b>
|
||||
</Text>
|
||||
)}
|
||||
{trust.trusted ? (
|
||||
<Text size="T200" style={{ color: color.Success.Main }}>
|
||||
<b>Backup has trusted by signature.</b>
|
||||
</Text>
|
||||
) : (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>Backup does not have trusted signature!</b>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type BackupRestoreTileProps = {
|
||||
crypto: CryptoApi;
|
||||
};
|
||||
export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
|
||||
const [restoreProgress, setRestoreProgress] = useAtom(backupRestoreProgressAtom);
|
||||
const restoring =
|
||||
restoreProgress.status === BackupProgressStatus.Fetching ||
|
||||
restoreProgress.status === BackupProgressStatus.Loading;
|
||||
|
||||
const backupEnabled = useKeyBackupStatus(crypto);
|
||||
const backupInfo = useKeyBackupInfo(crypto);
|
||||
const [remainingSession, syncFailure] = useKeyBackupSync();
|
||||
|
||||
const [menuCords, setMenuCords] = useState<RectCords>();
|
||||
|
||||
const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
setMenuCords(evt.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
|
||||
const [restoreState, restoreBackup] = useAsyncCallback<void, Error, []>(
|
||||
useCallback(async () => {
|
||||
await crypto.restoreKeyBackup({
|
||||
progressCallback(progress) {
|
||||
setRestoreProgress(progress);
|
||||
},
|
||||
});
|
||||
}, [crypto, setRestoreProgress])
|
||||
);
|
||||
|
||||
const handleRestore = () => {
|
||||
setMenuCords(undefined);
|
||||
restoreBackup();
|
||||
};
|
||||
|
||||
return (
|
||||
<InfoCard
|
||||
variant="Surface"
|
||||
title="Encryption Backup"
|
||||
after={
|
||||
<Box alignItems="Center" gap="200">
|
||||
{remainingSession === 0 ? (
|
||||
<BackupStatus enabled={backupEnabled} />
|
||||
) : (
|
||||
<BackupSyncing count={remainingSession} />
|
||||
)}
|
||||
<IconButton
|
||||
aria-pressed={!!menuCords}
|
||||
size="300"
|
||||
variant="Surface"
|
||||
radii="300"
|
||||
onClick={handleMenu}
|
||||
>
|
||||
<Icon size="100" src={Icons.VerticalDots} />
|
||||
</IconButton>
|
||||
<PopOut
|
||||
anchor={menuCords}
|
||||
offset={5}
|
||||
position="Bottom"
|
||||
align="End"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: () => setMenuCords(undefined),
|
||||
clickOutsideDeactivates: true,
|
||||
isKeyForward: (evt: KeyboardEvent) =>
|
||||
evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
|
||||
isKeyBackward: (evt: KeyboardEvent) =>
|
||||
evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Menu
|
||||
style={{
|
||||
padding: config.space.S100,
|
||||
}}
|
||||
>
|
||||
<Box direction="Column" gap="100">
|
||||
<Box direction="Column" gap="200">
|
||||
<InfoCard
|
||||
variant="SurfaceVariant"
|
||||
title="Backup Details"
|
||||
description={
|
||||
<>
|
||||
<span>Version: {backupInfo?.version ?? 'NIL'}</span>
|
||||
<br />
|
||||
<span>Keys: {backupInfo?.count ?? 'NIL'}</span>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Button
|
||||
size="300"
|
||||
variant="Success"
|
||||
radii="300"
|
||||
aria-disabled={restoreState.status === AsyncStatus.Loading || restoring}
|
||||
onClick={
|
||||
restoreState.status === AsyncStatus.Loading || restoring
|
||||
? undefined
|
||||
: handleRestore
|
||||
}
|
||||
before={<Icon size="100" src={Icons.Download} />}
|
||||
>
|
||||
<Text size="B300">Restore Backup</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
{syncFailure && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>{syncFailure}</b>
|
||||
</Text>
|
||||
)}
|
||||
{!backupEnabled && backupInfo === null && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>No backup present on server!</b>
|
||||
</Text>
|
||||
)}
|
||||
{!syncFailure && !backupEnabled && backupInfo && (
|
||||
<BackupTrustInfo crypto={crypto} backupInfo={backupInfo} />
|
||||
)}
|
||||
{restoreState.status === AsyncStatus.Loading && !restoring && <BackupProgressFetching />}
|
||||
{restoreProgress.status === BackupProgressStatus.Fetching && <BackupProgressFetching />}
|
||||
{restoreProgress.status === BackupProgressStatus.Loading && (
|
||||
<BackupProgress
|
||||
total={restoreProgress.data.total}
|
||||
downloaded={restoreProgress.data.downloaded}
|
||||
/>
|
||||
)}
|
||||
{restoreState.status === AsyncStatus.Error && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>{restoreState.error.message}</b>
|
||||
</Text>
|
||||
)}
|
||||
</InfoCard>
|
||||
);
|
||||
}
|
||||
|
||||
export function AutoRestoreBackupOnVerification() {
|
||||
useRestoreBackupOnVerification();
|
||||
|
||||
return null;
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@ export function CapabilitiesAndMediaConfigLoader({
|
|||
[]
|
||||
>(
|
||||
useCallback(async () => {
|
||||
const result = await Promise.allSettled([mx.getCapabilities(true), mx.getMediaConfig()]);
|
||||
const result = await Promise.allSettled([mx.getCapabilities(), mx.getMediaConfig()]);
|
||||
const capabilities = promiseFulfilledResult(result[0]);
|
||||
const mediaConfig = promiseFulfilledResult(result[1]);
|
||||
return [capabilities, mediaConfig];
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ type CapabilitiesLoaderProps = {
|
|||
export function CapabilitiesLoader({ children }: CapabilitiesLoaderProps) {
|
||||
const mx = useMatrixClient();
|
||||
|
||||
const [state, load] = useAsyncCallback(useCallback(() => mx.getCapabilities(true), [mx]));
|
||||
const [state, load] = useAsyncCallback(useCallback(() => mx.getCapabilities(), [mx]));
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
|
|
|
|||
318
src/app/components/DeviceVerification.tsx
Normal file
318
src/app/components/DeviceVerification.tsx
Normal file
|
|
@ -0,0 +1,318 @@
|
|||
import {
|
||||
ShowSasCallbacks,
|
||||
VerificationPhase,
|
||||
VerificationRequest,
|
||||
Verifier,
|
||||
} from 'matrix-js-sdk/lib/crypto-api';
|
||||
import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
|
||||
import { VerificationMethod } from 'matrix-js-sdk/lib/types';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
config,
|
||||
Dialog,
|
||||
Header,
|
||||
Icon,
|
||||
IconButton,
|
||||
Icons,
|
||||
Overlay,
|
||||
OverlayBackdrop,
|
||||
OverlayCenter,
|
||||
Spinner,
|
||||
Text,
|
||||
} from 'folds';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import {
|
||||
useVerificationRequestPhase,
|
||||
useVerificationRequestReceived,
|
||||
useVerifierCancel,
|
||||
useVerifierShowSas,
|
||||
} from '../hooks/useVerificationRequest';
|
||||
import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
|
||||
import { ContainerColor } from '../styles/ContainerColor.css';
|
||||
|
||||
const DialogHeaderStyles: CSSProperties = {
|
||||
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
|
||||
borderBottomWidth: config.borderWidth.B300,
|
||||
};
|
||||
|
||||
type WaitingMessageProps = {
|
||||
message: string;
|
||||
};
|
||||
function WaitingMessage({ message }: WaitingMessageProps) {
|
||||
return (
|
||||
<Box alignItems="Center" gap="200">
|
||||
<Spinner variant="Secondary" size="200" />
|
||||
<Text size="T300">{message}</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type VerificationUnexpectedProps = { message: string; onClose: () => void };
|
||||
function VerificationUnexpected({ message, onClose }: VerificationUnexpectedProps) {
|
||||
return (
|
||||
<Box direction="Column" gap="400">
|
||||
<Text>{message}</Text>
|
||||
<Button variant="Secondary" fill="Soft" onClick={onClose}>
|
||||
<Text size="B400">Close</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function VerificationWaitAccept() {
|
||||
return (
|
||||
<Box direction="Column" gap="400">
|
||||
<Text>Please accept the request from other device.</Text>
|
||||
<WaitingMessage message="Waiting for request to be accepted..." />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type VerificationAcceptProps = {
|
||||
onAccept: () => Promise<void>;
|
||||
};
|
||||
function VerificationAccept({ onAccept }: VerificationAcceptProps) {
|
||||
const [acceptState, accept] = useAsyncCallback(onAccept);
|
||||
|
||||
const accepting = acceptState.status === AsyncStatus.Loading;
|
||||
return (
|
||||
<Box direction="Column" gap="400">
|
||||
<Text>Click accept to start the verification process.</Text>
|
||||
<Button
|
||||
variant="Primary"
|
||||
fill="Solid"
|
||||
onClick={accept}
|
||||
before={accepting && <Spinner size="100" variant="Primary" fill="Solid" />}
|
||||
disabled={accepting}
|
||||
>
|
||||
<Text size="B400">Accept</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function VerificationWaitStart() {
|
||||
return (
|
||||
<Box direction="Column" gap="400">
|
||||
<Text>Verification request has been accepted.</Text>
|
||||
<WaitingMessage message="Waiting for the response from other device..." />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type VerificationStartProps = {
|
||||
onStart: () => Promise<void>;
|
||||
};
|
||||
function AutoVerificationStart({ onStart }: VerificationStartProps) {
|
||||
useEffect(() => {
|
||||
onStart();
|
||||
}, [onStart]);
|
||||
|
||||
return (
|
||||
<Box direction="Column" gap="400">
|
||||
<WaitingMessage message="Starting verification using emoji comparison..." />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
|
||||
const [confirmState, confirm] = useAsyncCallback(useCallback(() => sasData.confirm(), [sasData]));
|
||||
|
||||
const confirming =
|
||||
confirmState.status === AsyncStatus.Loading || confirmState.status === AsyncStatus.Success;
|
||||
|
||||
return (
|
||||
<Box direction="Column" gap="400">
|
||||
<Text>Confirm the emoji below are displayed on both devices, in the same order:</Text>
|
||||
<Box
|
||||
className={ContainerColor({ variant: 'SurfaceVariant' })}
|
||||
style={{
|
||||
borderRadius: config.radii.R400,
|
||||
padding: config.space.S500,
|
||||
}}
|
||||
gap="700"
|
||||
wrap="Wrap"
|
||||
justifyContent="Center"
|
||||
>
|
||||
{sasData.sas.emoji?.map(([emoji, name], index) => (
|
||||
<Box
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
key={`${emoji}${name}${index}`}
|
||||
direction="Column"
|
||||
gap="100"
|
||||
justifyContent="Center"
|
||||
alignItems="Center"
|
||||
>
|
||||
<Text size="H1">{emoji}</Text>
|
||||
<Text size="T200">{name}</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
<Box direction="Column" gap="200">
|
||||
<Button
|
||||
variant="Primary"
|
||||
fill="Soft"
|
||||
onClick={confirm}
|
||||
disabled={confirming}
|
||||
before={confirming && <Spinner size="100" variant="Primary" />}
|
||||
>
|
||||
<Text size="B400">They Match</Text>
|
||||
</Button>
|
||||
<Button
|
||||
variant="Primary"
|
||||
fill="Soft"
|
||||
onClick={() => sasData.mismatch()}
|
||||
disabled={confirming}
|
||||
>
|
||||
<Text size="B400">Do not Match</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type SasVerificationProps = {
|
||||
verifier: Verifier;
|
||||
onCancel: () => void;
|
||||
};
|
||||
function SasVerification({ verifier, onCancel }: SasVerificationProps) {
|
||||
const [sasData, setSasData] = useState<ShowSasCallbacks>();
|
||||
|
||||
useVerifierShowSas(verifier, setSasData);
|
||||
useVerifierCancel(verifier, onCancel);
|
||||
|
||||
useEffect(() => {
|
||||
verifier.verify();
|
||||
}, [verifier]);
|
||||
|
||||
if (sasData) {
|
||||
return <CompareEmoji sasData={sasData} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box direction="Column" gap="400">
|
||||
<WaitingMessage message="Starting verification using emoji comparison..." />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type VerificationDoneProps = {
|
||||
onExit: () => void;
|
||||
};
|
||||
function VerificationDone({ onExit }: VerificationDoneProps) {
|
||||
return (
|
||||
<Box direction="Column" gap="400">
|
||||
<div>
|
||||
<Text>Your device is verified.</Text>
|
||||
</div>
|
||||
<Button variant="Primary" fill="Solid" onClick={onExit}>
|
||||
<Text size="B400">Okay</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type VerificationCanceledProps = {
|
||||
onClose: () => void;
|
||||
};
|
||||
function VerificationCanceled({ onClose }: VerificationCanceledProps) {
|
||||
return (
|
||||
<Box direction="Column" gap="400">
|
||||
<Text>Verification has been canceled.</Text>
|
||||
<Button variant="Secondary" fill="Soft" onClick={onClose}>
|
||||
<Text size="B400">Close</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type DeviceVerificationProps = {
|
||||
request: VerificationRequest;
|
||||
onExit: () => void;
|
||||
};
|
||||
export function DeviceVerification({ request, onExit }: DeviceVerificationProps) {
|
||||
const phase = useVerificationRequestPhase(request);
|
||||
|
||||
const handleCancel = useCallback(() => {
|
||||
if (request.phase !== VerificationPhase.Done && request.phase !== VerificationPhase.Cancelled) {
|
||||
request.cancel();
|
||||
}
|
||||
onExit();
|
||||
}, [request, onExit]);
|
||||
|
||||
const handleAccept = useCallback(() => request.accept(), [request]);
|
||||
const handleStart = useCallback(async () => {
|
||||
await request.startVerification(VerificationMethod.Sas);
|
||||
}, [request]);
|
||||
|
||||
return (
|
||||
<Overlay open backdrop={<OverlayBackdrop />}>
|
||||
<OverlayCenter>
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
clickOutsideDeactivates: false,
|
||||
escapeDeactivates: false,
|
||||
}}
|
||||
>
|
||||
<Dialog variant="Surface">
|
||||
<Header style={DialogHeaderStyles} variant="Surface" size="500">
|
||||
<Box grow="Yes">
|
||||
<Text size="H4">Device Verification</Text>
|
||||
</Box>
|
||||
<IconButton size="300" radii="300" onClick={handleCancel}>
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Header>
|
||||
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
|
||||
{phase === VerificationPhase.Requested &&
|
||||
(request.initiatedByMe ? (
|
||||
<VerificationWaitAccept />
|
||||
) : (
|
||||
<VerificationAccept onAccept={handleAccept} />
|
||||
))}
|
||||
{phase === VerificationPhase.Ready &&
|
||||
(request.initiatedByMe ? (
|
||||
<AutoVerificationStart onStart={handleStart} />
|
||||
) : (
|
||||
<VerificationWaitStart />
|
||||
))}
|
||||
{phase === VerificationPhase.Started &&
|
||||
(request.verifier ? (
|
||||
<SasVerification verifier={request.verifier} onCancel={handleCancel} />
|
||||
) : (
|
||||
<VerificationUnexpected
|
||||
message="Unexpected Error! Verification is started but verifier is missing."
|
||||
onClose={handleCancel}
|
||||
/>
|
||||
))}
|
||||
{phase === VerificationPhase.Done && <VerificationDone onExit={onExit} />}
|
||||
{phase === VerificationPhase.Cancelled && (
|
||||
<VerificationCanceled onClose={handleCancel} />
|
||||
)}
|
||||
</Box>
|
||||
</Dialog>
|
||||
</FocusTrap>
|
||||
</OverlayCenter>
|
||||
</Overlay>
|
||||
);
|
||||
}
|
||||
|
||||
export function ReceiveSelfDeviceVerification() {
|
||||
const [request, setRequest] = useState<VerificationRequest>();
|
||||
|
||||
useVerificationRequestReceived(setRequest);
|
||||
|
||||
const handleExit = useCallback(() => {
|
||||
setRequest(undefined);
|
||||
}, []);
|
||||
|
||||
if (!request) return null;
|
||||
|
||||
if (!request.isSelfVerification) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <DeviceVerification request={request} onExit={handleExit} />;
|
||||
}
|
||||
375
src/app/components/DeviceVerificationSetup.tsx
Normal file
375
src/app/components/DeviceVerificationSetup.tsx
Normal file
|
|
@ -0,0 +1,375 @@
|
|||
import React, { FormEventHandler, forwardRef, useCallback, useState } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
Header,
|
||||
Box,
|
||||
Text,
|
||||
IconButton,
|
||||
Icon,
|
||||
Icons,
|
||||
config,
|
||||
Button,
|
||||
Chip,
|
||||
color,
|
||||
Spinner,
|
||||
} from 'folds';
|
||||
import FileSaver from 'file-saver';
|
||||
import to from 'await-to-js';
|
||||
import { AuthDict, IAuthData, MatrixError, UIAuthCallback } from 'matrix-js-sdk';
|
||||
import { PasswordInput } from './password-input';
|
||||
import { ContainerColor } from '../styles/ContainerColor.css';
|
||||
import { copyToClipboard } from '../utils/dom';
|
||||
import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
|
||||
import { clearSecretStorageKeys } from '../../client/state/secretStorageKeys';
|
||||
import { ActionUIA, ActionUIAFlowsLoader } from './ActionUIA';
|
||||
import { useMatrixClient } from '../hooks/useMatrixClient';
|
||||
import { useAlive } from '../hooks/useAlive';
|
||||
import { UseStateProvider } from './UseStateProvider';
|
||||
|
||||
type UIACallback<T> = (
|
||||
authDict: AuthDict | null
|
||||
) => Promise<[IAuthData, undefined] | [undefined, T]>;
|
||||
|
||||
type PerformAction<T> = (authDict: AuthDict | null) => Promise<T>;
|
||||
|
||||
type UIAAction<T> = {
|
||||
authData: IAuthData;
|
||||
callback: UIACallback<T>;
|
||||
cancelCallback: () => void;
|
||||
};
|
||||
|
||||
function makeUIAAction<T>(
|
||||
authData: IAuthData,
|
||||
performAction: PerformAction<T>,
|
||||
resolve: (data: T) => void,
|
||||
reject: (error?: any) => void
|
||||
): UIAAction<T> {
|
||||
const action: UIAAction<T> = {
|
||||
authData,
|
||||
callback: async (authDict) => {
|
||||
const [error, data] = await to<T, MatrixError | Error>(performAction(authDict));
|
||||
|
||||
if (error instanceof MatrixError && error.httpStatus === 401) {
|
||||
return [error.data as IAuthData, undefined];
|
||||
}
|
||||
|
||||
if (error) {
|
||||
reject(error);
|
||||
throw error;
|
||||
}
|
||||
|
||||
resolve(data);
|
||||
return [undefined, data];
|
||||
},
|
||||
cancelCallback: reject,
|
||||
};
|
||||
|
||||
return action;
|
||||
}
|
||||
|
||||
type SetupVerificationProps = {
|
||||
onComplete: (recoveryKey: string) => void;
|
||||
};
|
||||
function SetupVerification({ onComplete }: SetupVerificationProps) {
|
||||
const mx = useMatrixClient();
|
||||
const alive = useAlive();
|
||||
|
||||
const [uiaAction, setUIAAction] = useState<UIAAction<void>>();
|
||||
const [nextAuthData, setNextAuthData] = useState<IAuthData | null>(); // null means no next action.
|
||||
|
||||
const handleAction = useCallback(
|
||||
async (authDict: AuthDict) => {
|
||||
if (!uiaAction) {
|
||||
throw new Error('Unexpected Error! UIA action is perform without data.');
|
||||
}
|
||||
if (alive()) {
|
||||
setNextAuthData(null);
|
||||
}
|
||||
const [authData] = await uiaAction.callback(authDict);
|
||||
|
||||
if (alive() && authData) {
|
||||
setNextAuthData(authData);
|
||||
}
|
||||
},
|
||||
[uiaAction, alive]
|
||||
);
|
||||
|
||||
const resetUIA = useCallback(() => {
|
||||
if (!alive()) return;
|
||||
setUIAAction(undefined);
|
||||
setNextAuthData(undefined);
|
||||
}, [alive]);
|
||||
|
||||
const authUploadDeviceSigningKeys: UIAuthCallback<void> = useCallback(
|
||||
(makeRequest) =>
|
||||
new Promise<void>((resolve, reject) => {
|
||||
makeRequest(null)
|
||||
.then(() => {
|
||||
resolve();
|
||||
resetUIA();
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error instanceof MatrixError && error.httpStatus === 401) {
|
||||
const authData = error.data as IAuthData;
|
||||
const action = makeUIAAction(
|
||||
authData,
|
||||
makeRequest as PerformAction<void>,
|
||||
resolve,
|
||||
(err) => {
|
||||
resetUIA();
|
||||
reject(err);
|
||||
}
|
||||
);
|
||||
if (alive()) {
|
||||
setUIAAction(action);
|
||||
} else {
|
||||
reject(new Error('Authentication failed! Failed to setup device verification.'));
|
||||
}
|
||||
return;
|
||||
}
|
||||
reject(error);
|
||||
});
|
||||
}),
|
||||
[alive, resetUIA]
|
||||
);
|
||||
|
||||
const [setupState, setup] = useAsyncCallback<void, Error, [string | undefined]>(
|
||||
useCallback(
|
||||
async (passphrase) => {
|
||||
const crypto = mx.getCrypto();
|
||||
if (!crypto) throw new Error('Unexpected Error! Crypto module not found!');
|
||||
|
||||
const recoveryKeyData = await crypto.createRecoveryKeyFromPassphrase(passphrase);
|
||||
if (!recoveryKeyData.encodedPrivateKey) {
|
||||
throw new Error('Unexpected Error! Failed to create recovery key.');
|
||||
}
|
||||
clearSecretStorageKeys();
|
||||
|
||||
await crypto.bootstrapSecretStorage({
|
||||
createSecretStorageKey: async () => recoveryKeyData,
|
||||
setupNewSecretStorage: true,
|
||||
});
|
||||
|
||||
await crypto.bootstrapCrossSigning({
|
||||
authUploadDeviceSigningKeys,
|
||||
setupNewCrossSigning: true,
|
||||
});
|
||||
|
||||
await crypto.resetKeyBackup();
|
||||
|
||||
onComplete(recoveryKeyData.encodedPrivateKey);
|
||||
},
|
||||
[mx, onComplete, authUploadDeviceSigningKeys]
|
||||
)
|
||||
);
|
||||
|
||||
const loading = setupState.status === AsyncStatus.Loading;
|
||||
|
||||
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
if (loading) return;
|
||||
|
||||
const target = evt.target as HTMLFormElement | undefined;
|
||||
const passphraseInput = target?.passphraseInput as HTMLInputElement | undefined;
|
||||
let passphrase: string | undefined;
|
||||
if (passphraseInput && passphraseInput.value.length > 0) {
|
||||
passphrase = passphraseInput.value;
|
||||
}
|
||||
|
||||
setup(passphrase);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box as="form" onSubmit={handleSubmit} direction="Column" gap="400">
|
||||
<Text size="T300">
|
||||
Generate a <b>Recovery Key</b> for verifying identity if you do not have access to other
|
||||
devices. Additionally, setup a passphrase as a memorable alternative.
|
||||
</Text>
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Passphrase (Optional)</Text>
|
||||
<PasswordInput name="passphraseInput" size="400" readOnly={loading} />
|
||||
</Box>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
before={loading && <Spinner size="200" variant="Primary" fill="Solid" />}
|
||||
>
|
||||
<Text size="B400">Continue</Text>
|
||||
</Button>
|
||||
{setupState.status === AsyncStatus.Error && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>{setupState.error ? setupState.error.message : 'Unexpected Error!'}</b>
|
||||
</Text>
|
||||
)}
|
||||
{nextAuthData !== null && uiaAction && (
|
||||
<ActionUIAFlowsLoader
|
||||
authData={nextAuthData ?? uiaAction.authData}
|
||||
unsupported={() => (
|
||||
<Text size="T200">
|
||||
Authentication steps to perform this action are not supported by client.
|
||||
</Text>
|
||||
)}
|
||||
>
|
||||
{(ongoingFlow) => (
|
||||
<ActionUIA
|
||||
authData={nextAuthData ?? uiaAction.authData}
|
||||
ongoingFlow={ongoingFlow}
|
||||
action={handleAction}
|
||||
onCancel={uiaAction.cancelCallback}
|
||||
/>
|
||||
)}
|
||||
</ActionUIAFlowsLoader>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type RecoveryKeyDisplayProps = {
|
||||
recoveryKey: string;
|
||||
};
|
||||
function RecoveryKeyDisplay({ recoveryKey }: RecoveryKeyDisplayProps) {
|
||||
const [show, setShow] = useState(false);
|
||||
|
||||
const handleCopy = () => {
|
||||
copyToClipboard(recoveryKey);
|
||||
};
|
||||
|
||||
const handleDownload = () => {
|
||||
const blob = new Blob([recoveryKey], {
|
||||
type: 'text/plain;charset=us-ascii',
|
||||
});
|
||||
FileSaver.saveAs(blob, 'recovery-key.txt');
|
||||
};
|
||||
|
||||
const safeToDisplayKey = show ? recoveryKey : recoveryKey.replace(/[^\s]/g, '*');
|
||||
|
||||
return (
|
||||
<Box direction="Column" gap="400">
|
||||
<Text size="T300">
|
||||
Store the Recovery Key in a safe place for future use, as you will need it to verify your
|
||||
identity if you do not have access to other devices.
|
||||
</Text>
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Recovery Key</Text>
|
||||
<Box
|
||||
className={ContainerColor({ variant: 'SurfaceVariant' })}
|
||||
style={{
|
||||
padding: config.space.S300,
|
||||
borderRadius: config.radii.R400,
|
||||
}}
|
||||
alignItems="Center"
|
||||
justifyContent="Center"
|
||||
gap="400"
|
||||
>
|
||||
<Text style={{ fontFamily: 'monospace' }} size="T200" priority="300">
|
||||
{safeToDisplayKey}
|
||||
</Text>
|
||||
<Chip onClick={() => setShow(!show)} variant="Secondary" radii="Pill">
|
||||
<Text size="B300">{show ? 'Hide' : 'Show'}</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box direction="Column" gap="200">
|
||||
<Button onClick={handleCopy}>
|
||||
<Text size="B400">Copy</Text>
|
||||
</Button>
|
||||
<Button onClick={handleDownload} fill="Soft">
|
||||
<Text size="B400">Download</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type DeviceVerificationSetupProps = {
|
||||
onCancel: () => void;
|
||||
};
|
||||
export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerificationSetupProps>(
|
||||
({ onCancel }, ref) => {
|
||||
const [recoveryKey, setRecoveryKey] = useState<string>();
|
||||
|
||||
return (
|
||||
<Dialog ref={ref}>
|
||||
<Header
|
||||
style={{
|
||||
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
|
||||
borderBottomWidth: config.borderWidth.B300,
|
||||
}}
|
||||
variant="Surface"
|
||||
size="500"
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="H4">Setup Device Verification</Text>
|
||||
</Box>
|
||||
<IconButton size="300" radii="300" onClick={onCancel}>
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Header>
|
||||
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
|
||||
{recoveryKey ? (
|
||||
<RecoveryKeyDisplay recoveryKey={recoveryKey} />
|
||||
) : (
|
||||
<SetupVerification onComplete={setRecoveryKey} />
|
||||
)}
|
||||
</Box>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
);
|
||||
type DeviceVerificationResetProps = {
|
||||
onCancel: () => void;
|
||||
};
|
||||
export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerificationResetProps>(
|
||||
({ onCancel }, ref) => {
|
||||
const [reset, setReset] = useState(false);
|
||||
|
||||
return (
|
||||
<Dialog ref={ref}>
|
||||
<Header
|
||||
style={{
|
||||
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
|
||||
borderBottomWidth: config.borderWidth.B300,
|
||||
}}
|
||||
variant="Surface"
|
||||
size="500"
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="H4">Reset Device Verification</Text>
|
||||
</Box>
|
||||
<IconButton size="300" radii="300" onClick={onCancel}>
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Header>
|
||||
{reset ? (
|
||||
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
|
||||
<UseStateProvider initial={undefined}>
|
||||
{(recoveryKey: string | undefined, setRecoveryKey) =>
|
||||
recoveryKey ? (
|
||||
<RecoveryKeyDisplay recoveryKey={recoveryKey} />
|
||||
) : (
|
||||
<SetupVerification onComplete={setRecoveryKey} />
|
||||
)
|
||||
}
|
||||
</UseStateProvider>
|
||||
</Box>
|
||||
) : (
|
||||
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
|
||||
<Box direction="Column" gap="200">
|
||||
<Text size="H1">✋🧑🚒🤚</Text>
|
||||
<Text size="T300">Resetting device verification is permanent.</Text>
|
||||
<Text size="T300">
|
||||
Anyone you have verified with will see security alerts and your encryption backup
|
||||
will be lost. You almost certainly do not want to do this, unless you have lost{' '}
|
||||
<b>Recovery Key</b> or <b>Recovery Passphrase</b> and every device you can verify
|
||||
from.
|
||||
</Text>
|
||||
</Box>
|
||||
<Button variant="Critical" onClick={() => setReset(true)}>
|
||||
<Text size="B400">Reset</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
);
|
||||
24
src/app/components/DeviceVerificationStatus.ts
Normal file
24
src/app/components/DeviceVerificationStatus.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { ReactNode } from 'react';
|
||||
import { CryptoApi } from 'matrix-js-sdk/lib/crypto-api';
|
||||
import {
|
||||
useDeviceVerificationStatus,
|
||||
VerificationStatus,
|
||||
} from '../hooks/useDeviceVerificationStatus';
|
||||
|
||||
type DeviceVerificationStatusProps = {
|
||||
crypto?: CryptoApi;
|
||||
userId: string;
|
||||
deviceId: string;
|
||||
children: (verificationStatus: VerificationStatus) => ReactNode;
|
||||
};
|
||||
|
||||
export function DeviceVerificationStatus({
|
||||
crypto,
|
||||
userId,
|
||||
deviceId,
|
||||
children,
|
||||
}: DeviceVerificationStatusProps) {
|
||||
const status = useDeviceVerificationStatus(crypto, userId, deviceId);
|
||||
|
||||
return children(status);
|
||||
}
|
||||
89
src/app/components/LogoutDialog.tsx
Normal file
89
src/app/components/LogoutDialog.tsx
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
import React, { forwardRef, useCallback } from 'react';
|
||||
import { Dialog, Header, config, Box, Text, Button, Spinner, color } from 'folds';
|
||||
import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
|
||||
import { logoutClient } from '../../client/initMatrix';
|
||||
import { useMatrixClient } from '../hooks/useMatrixClient';
|
||||
import { useCrossSigningActive } from '../hooks/useCrossSigning';
|
||||
import { InfoCard } from './info-card';
|
||||
import {
|
||||
useDeviceVerificationStatus,
|
||||
VerificationStatus,
|
||||
} from '../hooks/useDeviceVerificationStatus';
|
||||
|
||||
type LogoutDialogProps = {
|
||||
handleClose: () => void;
|
||||
};
|
||||
export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
|
||||
({ handleClose }, ref) => {
|
||||
const mx = useMatrixClient();
|
||||
const hasEncryptedRoom = !!mx.getRooms().find((room) => room.hasEncryptionStateEvent());
|
||||
const crossSigningActive = useCrossSigningActive();
|
||||
const verificationStatus = useDeviceVerificationStatus(
|
||||
mx.getCrypto(),
|
||||
mx.getSafeUserId(),
|
||||
mx.getDeviceId() ?? undefined
|
||||
);
|
||||
|
||||
const [logoutState, logout] = useAsyncCallback<void, Error, []>(
|
||||
useCallback(async () => {
|
||||
await logoutClient(mx);
|
||||
}, [mx])
|
||||
);
|
||||
|
||||
const ongoingLogout = logoutState.status === AsyncStatus.Loading;
|
||||
|
||||
return (
|
||||
<Dialog variant="Surface" ref={ref}>
|
||||
<Header
|
||||
style={{
|
||||
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
|
||||
borderBottomWidth: config.borderWidth.B300,
|
||||
}}
|
||||
variant="Surface"
|
||||
size="500"
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="H4">Logout</Text>
|
||||
</Box>
|
||||
</Header>
|
||||
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
|
||||
{hasEncryptedRoom &&
|
||||
(crossSigningActive ? (
|
||||
verificationStatus === VerificationStatus.Unverified && (
|
||||
<InfoCard
|
||||
variant="Critical"
|
||||
title="Unverified Device"
|
||||
description="Verify your device before logging out to save your encrypted messages."
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<InfoCard
|
||||
variant="Critical"
|
||||
title="Alert"
|
||||
description="Enable device verification or export your encrypted data from settings to avoid losing access to your messages."
|
||||
/>
|
||||
))}
|
||||
<Text priority="400">You’re about to log out. Are you sure?</Text>
|
||||
{logoutState.status === AsyncStatus.Error && (
|
||||
<Text style={{ color: color.Critical.Main }} size="T300">
|
||||
Failed to logout! {logoutState.error.message}
|
||||
</Text>
|
||||
)}
|
||||
<Box direction="Column" gap="200">
|
||||
<Button
|
||||
variant="Critical"
|
||||
onClick={logout}
|
||||
disabled={ongoingLogout}
|
||||
before={ongoingLogout && <Spinner variant="Critical" fill="Solid" size="200" />}
|
||||
>
|
||||
<Text size="B400">Logout</Text>
|
||||
</Button>
|
||||
<Button variant="Secondary" fill="Soft" onClick={handleClose} disabled={ongoingLogout}>
|
||||
<Text size="B400">Cancel</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
);
|
||||
199
src/app/components/ManualVerification.tsx
Normal file
199
src/app/components/ManualVerification.tsx
Normal file
|
|
@ -0,0 +1,199 @@
|
|||
import React, { MouseEventHandler, ReactNode, useCallback, useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Text,
|
||||
Chip,
|
||||
Icon,
|
||||
Icons,
|
||||
RectCords,
|
||||
PopOut,
|
||||
Menu,
|
||||
config,
|
||||
MenuItem,
|
||||
color,
|
||||
} from 'folds';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { stopPropagation } from '../utils/keyboard';
|
||||
import { SettingTile } from './setting-tile';
|
||||
import { SecretStorageKeyContent } from '../../types/matrix/accountData';
|
||||
import { SecretStorageRecoveryKey, SecretStorageRecoveryPassphrase } from './SecretStorage';
|
||||
import { useMatrixClient } from '../hooks/useMatrixClient';
|
||||
import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
|
||||
import { storePrivateKey } from '../../client/state/secretStorageKeys';
|
||||
|
||||
export enum ManualVerificationMethod {
|
||||
RecoveryPassphrase = 'passphrase',
|
||||
RecoveryKey = 'key',
|
||||
}
|
||||
type ManualVerificationMethodSwitcherProps = {
|
||||
value: ManualVerificationMethod;
|
||||
onChange: (value: ManualVerificationMethod) => void;
|
||||
};
|
||||
export function ManualVerificationMethodSwitcher({
|
||||
value,
|
||||
onChange,
|
||||
}: ManualVerificationMethodSwitcherProps) {
|
||||
const [menuCords, setMenuCords] = useState<RectCords>();
|
||||
|
||||
const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
setMenuCords(evt.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
|
||||
const handleSelect = (method: ManualVerificationMethod) => {
|
||||
setMenuCords(undefined);
|
||||
onChange(method);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Chip
|
||||
type="button"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
radii="Pill"
|
||||
before={<Icon size="100" src={Icons.ChevronBottom} />}
|
||||
onClick={handleMenu}
|
||||
>
|
||||
<Text as="span" size="B300">
|
||||
{value === ManualVerificationMethod.RecoveryPassphrase && 'Recovery Passphrase'}
|
||||
{value === ManualVerificationMethod.RecoveryKey && 'Recovery Key'}
|
||||
</Text>
|
||||
</Chip>
|
||||
<PopOut
|
||||
anchor={menuCords}
|
||||
offset={5}
|
||||
position="Bottom"
|
||||
align="End"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: () => setMenuCords(undefined),
|
||||
clickOutsideDeactivates: true,
|
||||
isKeyForward: (evt: KeyboardEvent) =>
|
||||
evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
|
||||
isKeyBackward: (evt: KeyboardEvent) =>
|
||||
evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Menu>
|
||||
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
|
||||
<MenuItem
|
||||
size="300"
|
||||
variant="Surface"
|
||||
aria-selected={value === ManualVerificationMethod.RecoveryPassphrase}
|
||||
radii="300"
|
||||
onClick={() => handleSelect(ManualVerificationMethod.RecoveryPassphrase)}
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="T300">Recovery Passphrase</Text>
|
||||
</Box>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
size="300"
|
||||
variant="Surface"
|
||||
aria-selected={value === ManualVerificationMethod.RecoveryKey}
|
||||
radii="300"
|
||||
onClick={() => handleSelect(ManualVerificationMethod.RecoveryKey)}
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="T300">Recovery Key</Text>
|
||||
</Box>
|
||||
</MenuItem>
|
||||
</Box>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
type ManualVerificationTileProps = {
|
||||
secretStorageKeyId: string;
|
||||
secretStorageKeyContent: SecretStorageKeyContent;
|
||||
options?: ReactNode;
|
||||
};
|
||||
export function ManualVerificationTile({
|
||||
secretStorageKeyId,
|
||||
secretStorageKeyContent,
|
||||
options,
|
||||
}: ManualVerificationTileProps) {
|
||||
const mx = useMatrixClient();
|
||||
|
||||
const hasPassphrase = !!secretStorageKeyContent.passphrase;
|
||||
const [method, setMethod] = useState(
|
||||
hasPassphrase
|
||||
? ManualVerificationMethod.RecoveryPassphrase
|
||||
: ManualVerificationMethod.RecoveryKey
|
||||
);
|
||||
|
||||
const verifyAndRestoreBackup = useCallback(
|
||||
async (recoveryKey: Uint8Array) => {
|
||||
const crypto = mx.getCrypto();
|
||||
if (!crypto) {
|
||||
throw new Error('Unexpected Error! Crypto object not found.');
|
||||
}
|
||||
|
||||
storePrivateKey(secretStorageKeyId, recoveryKey);
|
||||
|
||||
await crypto.bootstrapCrossSigning({});
|
||||
await crypto.bootstrapSecretStorage({});
|
||||
|
||||
await crypto.loadSessionBackupPrivateKeyFromSecretStorage();
|
||||
},
|
||||
[mx, secretStorageKeyId]
|
||||
);
|
||||
|
||||
const [verifyState, handleDecodedRecoveryKey] = useAsyncCallback<void, Error, [Uint8Array]>(
|
||||
verifyAndRestoreBackup
|
||||
);
|
||||
const verifying = verifyState.status === AsyncStatus.Loading;
|
||||
|
||||
return (
|
||||
<Box direction="Column" gap="200">
|
||||
<SettingTile
|
||||
title="Verify Manually"
|
||||
description={hasPassphrase ? 'Select a verification method.' : 'Provide recovery key.'}
|
||||
after={
|
||||
<Box alignItems="Center" gap="200">
|
||||
{hasPassphrase && (
|
||||
<ManualVerificationMethodSwitcher value={method} onChange={setMethod} />
|
||||
)}
|
||||
{options}
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
{verifyState.status === AsyncStatus.Success ? (
|
||||
<Text size="T200" style={{ color: color.Success.Main }}>
|
||||
<b>Device verified!</b>
|
||||
</Text>
|
||||
) : (
|
||||
<Box direction="Column" gap="100">
|
||||
{method === ManualVerificationMethod.RecoveryKey && (
|
||||
<SecretStorageRecoveryKey
|
||||
processing={verifying}
|
||||
keyContent={secretStorageKeyContent}
|
||||
onDecodedRecoveryKey={handleDecodedRecoveryKey}
|
||||
/>
|
||||
)}
|
||||
{method === ManualVerificationMethod.RecoveryPassphrase &&
|
||||
secretStorageKeyContent.passphrase && (
|
||||
<SecretStorageRecoveryPassphrase
|
||||
processing={verifying}
|
||||
keyContent={secretStorageKeyContent}
|
||||
passphraseContent={secretStorageKeyContent.passphrase}
|
||||
onDecodedRecoveryKey={handleDecodedRecoveryKey}
|
||||
/>
|
||||
)}
|
||||
{verifyState.status === AsyncStatus.Error && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>{verifyState.error.message}</b>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
29
src/app/components/Modal500.tsx
Normal file
29
src/app/components/Modal500.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import React, { ReactNode } from 'react';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { Modal, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
|
||||
import { stopPropagation } from '../utils/keyboard';
|
||||
|
||||
type Modal500Props = {
|
||||
requestClose: () => void;
|
||||
children: ReactNode;
|
||||
};
|
||||
export function Modal500({ requestClose, children }: Modal500Props) {
|
||||
return (
|
||||
<Overlay open backdrop={<OverlayBackdrop />}>
|
||||
<OverlayCenter>
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
clickOutsideDeactivates: true,
|
||||
onDeactivate: requestClose,
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Modal size="500" variant="Background">
|
||||
{children}
|
||||
</Modal>
|
||||
</FocusTrap>
|
||||
</OverlayCenter>
|
||||
</Overlay>
|
||||
);
|
||||
}
|
||||
200
src/app/components/SecretStorage.tsx
Normal file
200
src/app/components/SecretStorage.tsx
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
import React, { FormEventHandler, useCallback } from 'react';
|
||||
import { Box, Text, Button, Spinner, color } from 'folds';
|
||||
import { decodeRecoveryKey } from 'matrix-js-sdk/lib/crypto-api';
|
||||
import { deriveKey } from 'matrix-js-sdk/lib/crypto/key_passphrase';
|
||||
import { PasswordInput } from './password-input';
|
||||
import {
|
||||
SecretStorageKeyContent,
|
||||
SecretStoragePassphraseContent,
|
||||
} from '../../types/matrix/accountData';
|
||||
import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
|
||||
import { useMatrixClient } from '../hooks/useMatrixClient';
|
||||
import { useAlive } from '../hooks/useAlive';
|
||||
|
||||
type SecretStorageRecoveryPassphraseProps = {
|
||||
processing?: boolean;
|
||||
keyContent: SecretStorageKeyContent;
|
||||
passphraseContent: SecretStoragePassphraseContent;
|
||||
onDecodedRecoveryKey: (recoveryKey: Uint8Array) => void;
|
||||
};
|
||||
export function SecretStorageRecoveryPassphrase({
|
||||
processing,
|
||||
keyContent,
|
||||
passphraseContent,
|
||||
onDecodedRecoveryKey,
|
||||
}: SecretStorageRecoveryPassphraseProps) {
|
||||
const mx = useMatrixClient();
|
||||
const alive = useAlive();
|
||||
|
||||
const [driveKeyState, submitPassphrase] = useAsyncCallback<
|
||||
Uint8Array,
|
||||
Error,
|
||||
Parameters<typeof deriveKey>
|
||||
>(
|
||||
useCallback(
|
||||
async (passphrase, salt, iterations, bits) => {
|
||||
const decodedRecoveryKey = await deriveKey(passphrase, salt, iterations, bits);
|
||||
|
||||
const match = await mx.secretStorage.checkKey(decodedRecoveryKey, keyContent as any);
|
||||
|
||||
if (!match) {
|
||||
throw new Error('Invalid recovery passphrase.');
|
||||
}
|
||||
|
||||
return decodedRecoveryKey;
|
||||
},
|
||||
[mx, keyContent]
|
||||
)
|
||||
);
|
||||
|
||||
const drivingKey = driveKeyState.status === AsyncStatus.Loading;
|
||||
const loading = drivingKey || processing;
|
||||
|
||||
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
if (loading) return;
|
||||
evt.preventDefault();
|
||||
|
||||
const target = evt.target as HTMLFormElement | undefined;
|
||||
const recoveryPassphraseInput = target?.recoveryPassphraseInput as HTMLInputElement | undefined;
|
||||
if (!recoveryPassphraseInput) return;
|
||||
const recoveryPassphrase = recoveryPassphraseInput.value.trim();
|
||||
if (!recoveryPassphrase) return;
|
||||
|
||||
const { salt, iterations, bits } = passphraseContent;
|
||||
submitPassphrase(recoveryPassphrase, salt, iterations, bits).then((decodedRecoveryKey) => {
|
||||
if (alive()) {
|
||||
recoveryPassphraseInput.value = '';
|
||||
onDecodedRecoveryKey(decodedRecoveryKey);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Box as="form" onSubmit={handleSubmit} direction="Column" gap="100">
|
||||
<Box gap="200" alignItems="End">
|
||||
<Box grow="Yes" direction="Column" gap="100">
|
||||
<Text size="L400">Recovery Passphrase</Text>
|
||||
<PasswordInput
|
||||
name="recoveryPassphraseInput"
|
||||
size="400"
|
||||
variant="Secondary"
|
||||
radii="300"
|
||||
autoFocus
|
||||
required
|
||||
outlined
|
||||
readOnly={loading}
|
||||
/>
|
||||
</Box>
|
||||
<Box shrink="No" gap="200">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="Success"
|
||||
size="400"
|
||||
radii="300"
|
||||
disabled={loading}
|
||||
before={loading && <Spinner size="200" variant="Success" fill="Solid" />}
|
||||
>
|
||||
<Text as="span" size="B400">
|
||||
Verify
|
||||
</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
{driveKeyState.status === AsyncStatus.Error && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>{driveKeyState.error.message}</b>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type SecretStorageRecoveryKeyProps = {
|
||||
processing?: boolean;
|
||||
keyContent: SecretStorageKeyContent;
|
||||
onDecodedRecoveryKey: (recoveryKey: Uint8Array) => void;
|
||||
};
|
||||
export function SecretStorageRecoveryKey({
|
||||
processing,
|
||||
keyContent,
|
||||
onDecodedRecoveryKey,
|
||||
}: SecretStorageRecoveryKeyProps) {
|
||||
const mx = useMatrixClient();
|
||||
const alive = useAlive();
|
||||
|
||||
const [driveKeyState, submitRecoveryKey] = useAsyncCallback<Uint8Array, Error, [string]>(
|
||||
useCallback(
|
||||
async (recoveryKey) => {
|
||||
const decodedRecoveryKey = decodeRecoveryKey(recoveryKey);
|
||||
|
||||
const match = await mx.secretStorage.checkKey(decodedRecoveryKey, keyContent as any);
|
||||
|
||||
if (!match) {
|
||||
throw new Error('Invalid recovery key.');
|
||||
}
|
||||
|
||||
return decodedRecoveryKey;
|
||||
},
|
||||
[mx, keyContent]
|
||||
)
|
||||
);
|
||||
|
||||
const drivingKey = driveKeyState.status === AsyncStatus.Loading;
|
||||
const loading = drivingKey || processing;
|
||||
|
||||
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
|
||||
const target = evt.target as HTMLFormElement | undefined;
|
||||
const recoveryKeyInput = target?.recoveryKeyInput as HTMLInputElement | undefined;
|
||||
if (!recoveryKeyInput) return;
|
||||
const recoveryKey = recoveryKeyInput.value.trim();
|
||||
if (!recoveryKey) return;
|
||||
|
||||
submitRecoveryKey(recoveryKey).then((decodedRecoveryKey) => {
|
||||
if (alive()) {
|
||||
recoveryKeyInput.value = '';
|
||||
onDecodedRecoveryKey(decodedRecoveryKey);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Box as="form" onSubmit={handleSubmit} direction="Column" gap="100">
|
||||
<Box gap="200" alignItems="End">
|
||||
<Box grow="Yes" direction="Column" gap="100">
|
||||
<Text size="L400">Recovery Key</Text>
|
||||
<PasswordInput
|
||||
name="recoveryKeyInput"
|
||||
size="400"
|
||||
variant="Secondary"
|
||||
radii="300"
|
||||
autoFocus
|
||||
required
|
||||
outlined
|
||||
readOnly={loading}
|
||||
/>
|
||||
</Box>
|
||||
<Box shrink="No" gap="200">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="Success"
|
||||
size="400"
|
||||
radii="300"
|
||||
disabled={loading}
|
||||
before={loading && <Spinner size="200" variant="Success" fill="Solid" />}
|
||||
>
|
||||
<Text as="span" size="B400">
|
||||
Verify
|
||||
</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
{driveKeyState.status === AsyncStatus.Error && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>{driveKeyState.error.message}</b>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -13,7 +13,6 @@ import {
|
|||
IconButton,
|
||||
} from 'folds';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { stopPropagation } from '../utils/keyboard';
|
||||
|
||||
export type UIAFlowOverlayProps = {
|
||||
currentStep: number;
|
||||
|
|
@ -29,7 +28,7 @@ export function UIAFlowOverlay({
|
|||
}: UIAFlowOverlayProps) {
|
||||
return (
|
||||
<Overlay open backdrop={<OverlayBackdrop />}>
|
||||
<FocusTrap focusTrapOptions={{ initialFocus: false, escapeDeactivates: stopPropagation }}>
|
||||
<FocusTrap focusTrapOptions={{ initialFocus: false, escapeDeactivates: false }}>
|
||||
<Box style={{ height: '100%' }} direction="Column" grow="Yes" gap="400">
|
||||
<Box grow="Yes" direction="Column" alignItems="Center" justifyContent="Center">
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -16,14 +16,14 @@ import { createEmoticonElement, moveCursor, replaceWithElement } from '../utils'
|
|||
import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
|
||||
import { useRelevantImagePacks } from '../../../hooks/useImagePacks';
|
||||
import { IEmoji, emojis } from '../../../plugins/emoji';
|
||||
import { ExtendedPackImage, PackUsage } from '../../../plugins/custom-emoji';
|
||||
import { useKeyDown } from '../../../hooks/useKeyDown';
|
||||
import { mxcUrlToHttp } from '../../../utils/matrix';
|
||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||
import { ImageUsage, PackImageReader } from '../../../plugins/custom-emoji';
|
||||
|
||||
type EmoticonCompleteHandler = (key: string, shortcode: string) => void;
|
||||
|
||||
type EmoticonSearchItem = ExtendedPackImage | IEmoji;
|
||||
type EmoticonSearchItem = PackImageReader | IEmoji;
|
||||
|
||||
type EmoticonAutocompleteProps = {
|
||||
imagePackRooms: Room[];
|
||||
|
|
@ -52,21 +52,21 @@ export function EmoticonAutocomplete({
|
|||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
|
||||
const imagePacks = useRelevantImagePacks(mx, PackUsage.Emoticon, imagePackRooms);
|
||||
const imagePacks = useRelevantImagePacks(ImageUsage.Emoticon, imagePackRooms);
|
||||
const recentEmoji = useRecentEmoji(mx, 20);
|
||||
|
||||
const searchList = useMemo(() => {
|
||||
const list: Array<EmoticonSearchItem> = [];
|
||||
return list
|
||||
.concat(
|
||||
imagePacks.flatMap((pack) => pack.getImagesFor(PackUsage.Emoticon)),
|
||||
emojis
|
||||
)
|
||||
return list.concat(
|
||||
imagePacks.flatMap((pack) => pack.getImages(ImageUsage.Emoticon)),
|
||||
emojis
|
||||
);
|
||||
}, [imagePacks]);
|
||||
|
||||
const [result, search, resetSearch] = useAsyncSearch(searchList, getEmoticonStr, SEARCH_OPTIONS);
|
||||
const autoCompleteEmoticon = (result ? result.items : recentEmoji)
|
||||
.sort((a, b) => a.shortcode.localeCompare(b.shortcode));
|
||||
const autoCompleteEmoticon = (result ? result.items : recentEmoji).sort((a, b) =>
|
||||
a.shortcode.localeCompare(b.shortcode)
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (query.text) search(query.text);
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@ import { preventScrollWithArrowKey, stopPropagation } from '../../utils/keyboard
|
|||
import { useRelevantImagePacks } from '../../hooks/useImagePacks';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { useRecentEmoji } from '../../hooks/useRecentEmoji';
|
||||
import { ExtendedPackImage, ImagePack, PackUsage } from '../../plugins/custom-emoji';
|
||||
import { isUserId, mxcUrlToHttp } from '../../utils/matrix';
|
||||
import { editableActiveElement, isIntersectingScrollView, targetFromEvent } from '../../utils/dom';
|
||||
import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
|
||||
|
|
@ -50,6 +49,7 @@ import { useThrottle } from '../../hooks/useThrottle';
|
|||
import { addRecentEmoji } from '../../plugins/recent-emoji';
|
||||
import { mobileOrTablet } from '../../utils/user-agent';
|
||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||
import { ImagePack, ImageUsage, PackImageReader } from '../../plugins/custom-emoji';
|
||||
|
||||
const RECENT_GROUP_ID = 'recent_group';
|
||||
const SEARCH_GROUP_ID = 'search_group';
|
||||
|
|
@ -359,16 +359,16 @@ function ImagePackSidebarStack({
|
|||
}: {
|
||||
mx: MatrixClient;
|
||||
packs: ImagePack[];
|
||||
usage: PackUsage;
|
||||
usage: ImageUsage;
|
||||
onItemClick: (id: string) => void;
|
||||
useAuthentication?: boolean;
|
||||
}) {
|
||||
const activeGroupId = useAtomValue(activeGroupIdAtom);
|
||||
return (
|
||||
<SidebarStack>
|
||||
{usage === PackUsage.Emoticon && <SidebarDivider />}
|
||||
{usage === ImageUsage.Emoticon && <SidebarDivider />}
|
||||
{packs.map((pack) => {
|
||||
let label = pack.displayName;
|
||||
let label = pack.meta.name;
|
||||
if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
|
||||
return (
|
||||
<SidebarBtn
|
||||
|
|
@ -384,7 +384,10 @@ function ImagePackSidebarStack({
|
|||
height: toRem(24),
|
||||
objectFit: 'contain',
|
||||
}}
|
||||
src={mxcUrlToHttp(mx, pack.getPackAvatarUrl(usage) ?? '', useAuthentication) || pack.avatarUrl}
|
||||
src={
|
||||
mxcUrlToHttp(mx, pack.getAvatarUrl(usage) ?? '', useAuthentication) ||
|
||||
pack.meta.avatar
|
||||
}
|
||||
alt={label || 'Unknown Pack'}
|
||||
/>
|
||||
</SidebarBtn>
|
||||
|
|
@ -462,130 +465,156 @@ export function SearchEmojiGroup({
|
|||
tab: EmojiBoardTab;
|
||||
label: string;
|
||||
id: string;
|
||||
emojis: Array<ExtendedPackImage | IEmoji>;
|
||||
emojis: Array<PackImageReader | IEmoji>;
|
||||
useAuthentication?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<EmojiGroup key={id} id={id} label={label}>
|
||||
{tab === EmojiBoardTab.Emoji
|
||||
? searchResult.sort((a, b) => a.shortcode.localeCompare(b.shortcode)).map((emoji) =>
|
||||
'unicode' in emoji ? (
|
||||
<EmojiItem
|
||||
key={emoji.unicode}
|
||||
label={emoji.label}
|
||||
type={EmojiType.Emoji}
|
||||
data={emoji.unicode}
|
||||
shortcode={emoji.shortcode}
|
||||
>
|
||||
{emoji.unicode}
|
||||
</EmojiItem>
|
||||
) : (
|
||||
<EmojiItem
|
||||
key={emoji.shortcode}
|
||||
label={emoji.body || emoji.shortcode}
|
||||
type={EmojiType.CustomEmoji}
|
||||
data={emoji.url}
|
||||
shortcode={emoji.shortcode}
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
className={css.CustomEmojiImg}
|
||||
alt={emoji.body || emoji.shortcode}
|
||||
src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
|
||||
/>
|
||||
</EmojiItem>
|
||||
)
|
||||
)
|
||||
? searchResult
|
||||
.sort((a, b) => a.shortcode.localeCompare(b.shortcode))
|
||||
.map((emoji) =>
|
||||
'unicode' in emoji ? (
|
||||
<EmojiItem
|
||||
key={emoji.unicode}
|
||||
label={emoji.label}
|
||||
type={EmojiType.Emoji}
|
||||
data={emoji.unicode}
|
||||
shortcode={emoji.shortcode}
|
||||
>
|
||||
{emoji.unicode}
|
||||
</EmojiItem>
|
||||
) : (
|
||||
<EmojiItem
|
||||
key={emoji.shortcode}
|
||||
label={emoji.body || emoji.shortcode}
|
||||
type={EmojiType.CustomEmoji}
|
||||
data={emoji.url}
|
||||
shortcode={emoji.shortcode}
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
className={css.CustomEmojiImg}
|
||||
alt={emoji.body || emoji.shortcode}
|
||||
src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
|
||||
/>
|
||||
</EmojiItem>
|
||||
)
|
||||
)
|
||||
: searchResult.map((emoji) =>
|
||||
'unicode' in emoji ? null : (
|
||||
<StickerItem
|
||||
key={emoji.shortcode}
|
||||
label={emoji.body || emoji.shortcode}
|
||||
type={EmojiType.Sticker}
|
||||
data={emoji.url}
|
||||
shortcode={emoji.shortcode}
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
className={css.StickerImg}
|
||||
alt={emoji.body || emoji.shortcode}
|
||||
src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
|
||||
/>
|
||||
</StickerItem>
|
||||
)
|
||||
)}
|
||||
'unicode' in emoji ? null : (
|
||||
<StickerItem
|
||||
key={emoji.shortcode}
|
||||
label={emoji.body || emoji.shortcode}
|
||||
type={EmojiType.Sticker}
|
||||
data={emoji.url}
|
||||
shortcode={emoji.shortcode}
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
className={css.StickerImg}
|
||||
alt={emoji.body || emoji.shortcode}
|
||||
src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
|
||||
/>
|
||||
</StickerItem>
|
||||
)
|
||||
)}
|
||||
</EmojiGroup>
|
||||
);
|
||||
}
|
||||
|
||||
export const CustomEmojiGroups = memo(
|
||||
({ mx, groups, useAuthentication }: { mx: MatrixClient; groups: ImagePack[]; useAuthentication?: boolean }) => (
|
||||
({
|
||||
mx,
|
||||
groups,
|
||||
useAuthentication,
|
||||
}: {
|
||||
mx: MatrixClient;
|
||||
groups: ImagePack[];
|
||||
useAuthentication?: boolean;
|
||||
}) => (
|
||||
<>
|
||||
{groups.map((pack) => (
|
||||
<EmojiGroup key={pack.id} id={pack.id} label={pack.displayName || 'Unknown'}>
|
||||
{pack.getEmojis().sort((a, b) => a.shortcode.localeCompare(b.shortcode)).map((image) => (
|
||||
<EmojiItem
|
||||
key={image.shortcode}
|
||||
label={image.body || image.shortcode}
|
||||
type={EmojiType.CustomEmoji}
|
||||
data={image.url}
|
||||
shortcode={image.shortcode}
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
className={css.CustomEmojiImg}
|
||||
alt={image.body || image.shortcode}
|
||||
src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
|
||||
/>
|
||||
</EmojiItem>
|
||||
))}
|
||||
<EmojiGroup key={pack.id} id={pack.id} label={pack.meta.name || 'Unknown'}>
|
||||
{pack
|
||||
.getImages(ImageUsage.Emoticon)
|
||||
.sort((a, b) => a.shortcode.localeCompare(b.shortcode))
|
||||
.map((image) => (
|
||||
<EmojiItem
|
||||
key={image.shortcode}
|
||||
label={image.body || image.shortcode}
|
||||
type={EmojiType.CustomEmoji}
|
||||
data={image.url}
|
||||
shortcode={image.shortcode}
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
className={css.CustomEmojiImg}
|
||||
alt={image.body || image.shortcode}
|
||||
src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
|
||||
/>
|
||||
</EmojiItem>
|
||||
))}
|
||||
</EmojiGroup>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
);
|
||||
|
||||
export const StickerGroups = memo(({ mx, groups, useAuthentication }: { mx: MatrixClient; groups: ImagePack[]; useAuthentication?: boolean }) => (
|
||||
<>
|
||||
{groups.length === 0 && (
|
||||
<Box
|
||||
style={{ padding: `${toRem(60)} ${config.space.S500}` }}
|
||||
alignItems="Center"
|
||||
justifyContent="Center"
|
||||
direction="Column"
|
||||
gap="300"
|
||||
>
|
||||
<Icon size="600" src={Icons.Sticker} />
|
||||
<Box direction="Inherit">
|
||||
<Text align="Center">No Sticker Packs!</Text>
|
||||
<Text priority="300" align="Center" size="T200">
|
||||
Add stickers from user, room or space settings.
|
||||
</Text>
|
||||
export const StickerGroups = memo(
|
||||
({
|
||||
mx,
|
||||
groups,
|
||||
useAuthentication,
|
||||
}: {
|
||||
mx: MatrixClient;
|
||||
groups: ImagePack[];
|
||||
useAuthentication?: boolean;
|
||||
}) => (
|
||||
<>
|
||||
{groups.length === 0 && (
|
||||
<Box
|
||||
style={{ padding: `${toRem(60)} ${config.space.S500}` }}
|
||||
alignItems="Center"
|
||||
justifyContent="Center"
|
||||
direction="Column"
|
||||
gap="300"
|
||||
>
|
||||
<Icon size="600" src={Icons.Sticker} />
|
||||
<Box direction="Inherit">
|
||||
<Text align="Center">No Sticker Packs!</Text>
|
||||
<Text priority="300" align="Center" size="T200">
|
||||
Add stickers from user, room or space settings.
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
{groups.map((pack) => (
|
||||
<EmojiGroup key={pack.id} id={pack.id} label={pack.displayName || 'Unknown'}>
|
||||
{pack.getStickers().sort((a, b) => a.shortcode.localeCompare(b.shortcode)).map((image) => (
|
||||
<StickerItem
|
||||
key={image.shortcode}
|
||||
label={image.body || image.shortcode}
|
||||
type={EmojiType.Sticker}
|
||||
data={image.url}
|
||||
shortcode={image.shortcode}
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
className={css.StickerImg}
|
||||
alt={image.body || image.shortcode}
|
||||
src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
|
||||
/>
|
||||
</StickerItem>
|
||||
))}
|
||||
</EmojiGroup>
|
||||
))}
|
||||
</>
|
||||
));
|
||||
)}
|
||||
{groups.map((pack) => (
|
||||
<EmojiGroup key={pack.id} id={pack.id} label={pack.meta.name || 'Unknown'}>
|
||||
{pack
|
||||
.getImages(ImageUsage.Sticker)
|
||||
.sort((a, b) => a.shortcode.localeCompare(b.shortcode))
|
||||
.map((image) => (
|
||||
<StickerItem
|
||||
key={image.shortcode}
|
||||
label={image.body || image.shortcode}
|
||||
type={EmojiType.Sticker}
|
||||
data={image.url}
|
||||
shortcode={image.shortcode}
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
className={css.StickerImg}
|
||||
alt={image.body || image.shortcode}
|
||||
src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
|
||||
/>
|
||||
</StickerItem>
|
||||
))}
|
||||
</EmojiGroup>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
);
|
||||
|
||||
export const NativeEmojiGroups = memo(
|
||||
({ groups, labels }: { groups: IEmojiGroup[]; labels: IEmojiGroupLabels }) => (
|
||||
|
|
@ -609,7 +638,7 @@ export const NativeEmojiGroups = memo(
|
|||
)
|
||||
);
|
||||
|
||||
const getSearchListItemStr = (item: ExtendedPackImage | IEmoji) => {
|
||||
const getSearchListItemStr = (item: PackImageReader | IEmoji) => {
|
||||
const shortcode = `:${item.shortcode}:`;
|
||||
if ('body' in item) {
|
||||
return [shortcode, item.body ?? ''];
|
||||
|
|
@ -646,14 +675,14 @@ export function EmojiBoard({
|
|||
}) {
|
||||
const emojiTab = tab === EmojiBoardTab.Emoji;
|
||||
const stickerTab = tab === EmojiBoardTab.Sticker;
|
||||
const usage = emojiTab ? PackUsage.Emoticon : PackUsage.Sticker;
|
||||
const usage = emojiTab ? ImageUsage.Emoticon : ImageUsage.Sticker;
|
||||
|
||||
const setActiveGroupId = useSetAtom(activeGroupIdAtom);
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const emojiGroupLabels = useEmojiGroupLabels();
|
||||
const emojiGroupIcons = useEmojiGroupIcons();
|
||||
const imagePacks = useRelevantImagePacks(mx, usage, imagePackRooms);
|
||||
const imagePacks = useRelevantImagePacks(usage, imagePackRooms);
|
||||
const recentEmojis = useRecentEmoji(mx, 21);
|
||||
|
||||
const contentScrollRef = useRef<HTMLDivElement>(null);
|
||||
|
|
@ -661,8 +690,8 @@ export function EmojiBoard({
|
|||
const emojiPreviewTextRef = useRef<HTMLParagraphElement>(null);
|
||||
|
||||
const searchList = useMemo(() => {
|
||||
let list: Array<ExtendedPackImage | IEmoji> = [];
|
||||
list = list.concat(imagePacks.flatMap((pack) => pack.getImagesFor(usage)));
|
||||
let list: Array<PackImageReader | IEmoji> = [];
|
||||
list = list.concat(imagePacks.flatMap((pack) => pack.getImages(usage)));
|
||||
if (emojiTab) list = list.concat(emojis);
|
||||
return list;
|
||||
}, [emojiTab, usage, imagePacks]);
|
||||
|
|
@ -688,7 +717,7 @@ export function EmojiBoard({
|
|||
const syncActiveGroupId = useCallback(() => {
|
||||
const targetEl = contentScrollRef.current;
|
||||
if (!targetEl) return;
|
||||
const groupEls = [...targetEl.querySelectorAll('div[data-group-id]')] as HTMLElement[];
|
||||
const groupEls = Array.from(targetEl.querySelectorAll('div[data-group-id]')) as HTMLElement[];
|
||||
const groupEl = groupEls.find((el) => isIntersectingScrollView(targetEl, el));
|
||||
const groupId = groupEl?.getAttribute('data-group-id') ?? undefined;
|
||||
setActiveGroupId(groupId);
|
||||
|
|
@ -735,7 +764,10 @@ export function EmojiBoard({
|
|||
} else if (emojiInfo.type === EmojiType.CustomEmoji && emojiPreviewRef.current) {
|
||||
const img = document.createElement('img');
|
||||
img.className = css.CustomEmojiImg;
|
||||
img.setAttribute('src', mxcUrlToHttp(mx, emojiInfo.data, useAuthentication) || emojiInfo.data);
|
||||
img.setAttribute(
|
||||
'src',
|
||||
mxcUrlToHttp(mx, emojiInfo.data, useAuthentication) || emojiInfo.data
|
||||
);
|
||||
img.setAttribute('alt', emojiInfo.shortcode);
|
||||
emojiPreviewRef.current.textContent = '';
|
||||
emojiPreviewRef.current.appendChild(img);
|
||||
|
|
@ -903,8 +935,16 @@ export function EmojiBoard({
|
|||
{emojiTab && recentEmojis.length > 0 && (
|
||||
<RecentEmojiGroup id={RECENT_GROUP_ID} label="Recent" emojis={recentEmojis} />
|
||||
)}
|
||||
{emojiTab && <CustomEmojiGroups mx={mx} groups={imagePacks} useAuthentication={useAuthentication} />}
|
||||
{stickerTab && <StickerGroups mx={mx} groups={imagePacks} useAuthentication={useAuthentication} />}
|
||||
{emojiTab && (
|
||||
<CustomEmojiGroups
|
||||
mx={mx}
|
||||
groups={imagePacks}
|
||||
useAuthentication={useAuthentication}
|
||||
/>
|
||||
)}
|
||||
{stickerTab && (
|
||||
<StickerGroups mx={mx} groups={imagePacks} useAuthentication={useAuthentication} />
|
||||
)}
|
||||
{emojiTab && <NativeEmojiGroups groups={emojiGroups} labels={emojiGroupLabels} />}
|
||||
</Box>
|
||||
</Scroll>
|
||||
|
|
|
|||
35
src/app/components/image-editor/ImageEditor.css.ts
Normal file
35
src/app/components/image-editor/ImageEditor.css.ts
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { style } from '@vanilla-extract/css';
|
||||
import { DefaultReset, color, config } from 'folds';
|
||||
|
||||
export const ImageEditor = style([
|
||||
DefaultReset,
|
||||
{
|
||||
height: '100%',
|
||||
},
|
||||
]);
|
||||
|
||||
export const ImageEditorHeader = style([
|
||||
DefaultReset,
|
||||
{
|
||||
paddingLeft: config.space.S200,
|
||||
paddingRight: config.space.S200,
|
||||
borderBottomWidth: config.borderWidth.B300,
|
||||
flexShrink: 0,
|
||||
gap: config.space.S200,
|
||||
},
|
||||
]);
|
||||
|
||||
export const ImageEditorContent = style([
|
||||
DefaultReset,
|
||||
{
|
||||
backgroundColor: color.Background.Container,
|
||||
color: color.Background.OnContainer,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
]);
|
||||
|
||||
export const Image = style({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'contain',
|
||||
});
|
||||
51
src/app/components/image-editor/ImageEditor.tsx
Normal file
51
src/app/components/image-editor/ImageEditor.tsx
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds';
|
||||
import * as css from './ImageEditor.css';
|
||||
|
||||
export type ImageEditorProps = {
|
||||
name: string;
|
||||
url: string;
|
||||
requestClose: () => void;
|
||||
};
|
||||
|
||||
export const ImageEditor = as<'div', ImageEditorProps>(
|
||||
({ className, name, url, requestClose, ...props }, ref) => {
|
||||
const handleApply = () => {
|
||||
//
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
className={classNames(css.ImageEditor, className)}
|
||||
direction="Column"
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<Header className={css.ImageEditorHeader} size="400">
|
||||
<Box grow="Yes" alignItems="Center" gap="200">
|
||||
<IconButton size="300" radii="300" onClick={requestClose}>
|
||||
<Icon size="50" src={Icons.ArrowLeft} />
|
||||
</IconButton>
|
||||
<Text size="T300" truncate>
|
||||
Image Editor
|
||||
</Text>
|
||||
</Box>
|
||||
<Box shrink="No" alignItems="Center" gap="200">
|
||||
<Chip variant="Primary" radii="300" onClick={handleApply}>
|
||||
<Text size="B300">Save</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
</Header>
|
||||
<Box
|
||||
grow="Yes"
|
||||
className={css.ImageEditorContent}
|
||||
justifyContent="Center"
|
||||
alignItems="Center"
|
||||
>
|
||||
<img className={css.Image} src={url} alt={name} />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
);
|
||||
1
src/app/components/image-editor/index.ts
Normal file
1
src/app/components/image-editor/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './ImageEditor';
|
||||
388
src/app/components/image-pack-view/ImagePackContent.tsx
Normal file
388
src/app/components/image-pack-view/ImagePackContent.tsx
Normal file
|
|
@ -0,0 +1,388 @@
|
|||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { as, Box, Text, config, Button, Menu, Spinner } from 'folds';
|
||||
import {
|
||||
ImagePack,
|
||||
ImageUsage,
|
||||
PackContent,
|
||||
PackImage,
|
||||
PackImageReader,
|
||||
packMetaEqual,
|
||||
PackMetaReader,
|
||||
} from '../../plugins/custom-emoji';
|
||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||
import { SequenceCard } from '../sequence-card';
|
||||
import { ImageTile, ImageTileEdit, ImageTileUpload } from './ImageTile';
|
||||
import { SettingTile } from '../setting-tile';
|
||||
import { UsageSwitcher } from './UsageSwitcher';
|
||||
import { ImagePackProfile, ImagePackProfileEdit } from './PackMeta';
|
||||
import * as css from './style.css';
|
||||
import { useFilePicker } from '../../hooks/useFilePicker';
|
||||
import { CompactUploadCardRenderer } from '../upload-card';
|
||||
import { UploadSuccess } from '../../state/upload';
|
||||
import { getImageInfo, TUploadContent } from '../../utils/matrix';
|
||||
import { getImageFileUrl, loadImageElement, renameFile } from '../../utils/dom';
|
||||
import { replaceSpaceWithDash, suffixRename } from '../../utils/common';
|
||||
import { getFileNameWithoutExt } from '../../utils/mimeTypes';
|
||||
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
|
||||
|
||||
export type ImagePackContentProps = {
|
||||
imagePack: ImagePack;
|
||||
canEdit?: boolean;
|
||||
onUpdate?: (packContent: PackContent) => Promise<void>;
|
||||
};
|
||||
|
||||
export const ImagePackContent = as<'div', ImagePackContentProps>(
|
||||
({ imagePack, canEdit, onUpdate, ...props }, ref) => {
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
|
||||
const [metaEditing, setMetaEditing] = useState(false);
|
||||
const [savedMeta, setSavedMeta] = useState<PackMetaReader>();
|
||||
const currentMeta = savedMeta ?? imagePack.meta;
|
||||
|
||||
const images = useMemo(() => Array.from(imagePack.images.collection.values()), [imagePack]);
|
||||
const [files, setFiles] = useState<File[]>([]);
|
||||
const [uploadedImages, setUploadedImages] = useState<PackImageReader[]>([]);
|
||||
const [imagesEditing, setImagesEditing] = useState<Set<string>>(new Set());
|
||||
const [savedImages, setSavedImages] = useState<Map<string, PackImageReader>>(new Map());
|
||||
const [deleteImages, setDeleteImages] = useState<Set<string>>(new Set());
|
||||
|
||||
const hasImageWithShortcode = useCallback(
|
||||
(shortcode: string): boolean => {
|
||||
const hasInPack = imagePack.images.collection.has(shortcode);
|
||||
if (hasInPack) return true;
|
||||
const hasInUploaded =
|
||||
uploadedImages.find((img) => img.shortcode === shortcode) !== undefined;
|
||||
if (hasInUploaded) return true;
|
||||
const hasInSaved =
|
||||
Array.from(savedImages).find(([, img]) => img.shortcode === shortcode) !== undefined;
|
||||
return hasInSaved;
|
||||
},
|
||||
[imagePack, savedImages, uploadedImages]
|
||||
);
|
||||
|
||||
const pickFiles = useFilePicker(
|
||||
useCallback(
|
||||
(pickedFiles: File[]) => {
|
||||
const uniqueFiles = pickedFiles.map((file) => {
|
||||
const fileName = replaceSpaceWithDash(file.name);
|
||||
if (hasImageWithShortcode(fileName)) {
|
||||
const uniqueName = suffixRename(fileName, hasImageWithShortcode);
|
||||
return renameFile(file, uniqueName);
|
||||
}
|
||||
return fileName !== file.name ? renameFile(file, fileName) : file;
|
||||
});
|
||||
|
||||
setFiles((f) => [...f, ...uniqueFiles]);
|
||||
},
|
||||
[hasImageWithShortcode]
|
||||
),
|
||||
true
|
||||
);
|
||||
|
||||
const handleMetaSave = useCallback(
|
||||
(editedMeta: PackMetaReader) => {
|
||||
setMetaEditing(false);
|
||||
setSavedMeta(
|
||||
(m) =>
|
||||
new PackMetaReader({
|
||||
...imagePack.meta.content,
|
||||
...m?.content,
|
||||
...editedMeta.content,
|
||||
})
|
||||
);
|
||||
},
|
||||
[imagePack.meta]
|
||||
);
|
||||
|
||||
const handleMetaCancel = () => setMetaEditing(false);
|
||||
|
||||
const handlePackUsageChange = useCallback(
|
||||
(usg: ImageUsage[]) => {
|
||||
setSavedMeta(
|
||||
(m) =>
|
||||
new PackMetaReader({
|
||||
...imagePack.meta.content,
|
||||
...m?.content,
|
||||
usage: usg,
|
||||
})
|
||||
);
|
||||
},
|
||||
[imagePack.meta]
|
||||
);
|
||||
|
||||
const handleUploadRemove = useCallback((file: TUploadContent) => {
|
||||
setFiles((fs) => fs.filter((f) => f !== file));
|
||||
}, []);
|
||||
|
||||
const handleUploadComplete = useCallback(
|
||||
async (data: UploadSuccess) => {
|
||||
const imgEl = await loadImageElement(getImageFileUrl(data.file));
|
||||
const packImage: PackImage = {
|
||||
url: data.mxc,
|
||||
info: getImageInfo(imgEl, data.file),
|
||||
};
|
||||
const image = PackImageReader.fromPackImage(
|
||||
getFileNameWithoutExt(data.file.name),
|
||||
packImage
|
||||
);
|
||||
if (!image) return;
|
||||
handleUploadRemove(data.file);
|
||||
setUploadedImages((imgs) => [image, ...imgs]);
|
||||
},
|
||||
[handleUploadRemove]
|
||||
);
|
||||
|
||||
const handleImageEdit = (shortcode: string) => {
|
||||
setImagesEditing((shortcodes) => {
|
||||
const shortcodeSet = new Set(shortcodes);
|
||||
shortcodeSet.add(shortcode);
|
||||
return shortcodeSet;
|
||||
});
|
||||
};
|
||||
const handleDeleteToggle = (shortcode: string) => {
|
||||
setDeleteImages((shortcodes) => {
|
||||
const shortcodeSet = new Set(shortcodes);
|
||||
if (shortcodeSet.has(shortcode)) shortcodeSet.delete(shortcode);
|
||||
else shortcodeSet.add(shortcode);
|
||||
return shortcodeSet;
|
||||
});
|
||||
};
|
||||
|
||||
const handleImageEditCancel = (shortcode: string) => {
|
||||
setImagesEditing((shortcodes) => {
|
||||
const shortcodeSet = new Set(shortcodes);
|
||||
shortcodeSet.delete(shortcode);
|
||||
return shortcodeSet;
|
||||
});
|
||||
};
|
||||
|
||||
const handleImageEditSave = (shortcode: string, image: PackImageReader) => {
|
||||
handleImageEditCancel(shortcode);
|
||||
|
||||
const saveImage =
|
||||
shortcode !== image.shortcode && hasImageWithShortcode(image.shortcode)
|
||||
? new PackImageReader(
|
||||
suffixRename(image.shortcode, hasImageWithShortcode),
|
||||
image.url,
|
||||
image.content
|
||||
)
|
||||
: image;
|
||||
|
||||
setSavedImages((sImgs) => {
|
||||
const imgs = new Map(sImgs);
|
||||
imgs.set(shortcode, saveImage);
|
||||
return imgs;
|
||||
});
|
||||
};
|
||||
|
||||
const handleResetSavedChanges = () => {
|
||||
setSavedMeta(undefined);
|
||||
setFiles([]);
|
||||
setUploadedImages([]);
|
||||
setSavedImages(new Map());
|
||||
setDeleteImages(new Set());
|
||||
};
|
||||
|
||||
const [applyState, applyChanges] = useAsyncCallback(
|
||||
useCallback(async () => {
|
||||
const pack: PackContent = {
|
||||
pack: savedMeta?.content ?? imagePack.meta.content,
|
||||
images: {},
|
||||
};
|
||||
const pushImage = (img: PackImageReader) => {
|
||||
if (deleteImages.has(img.shortcode)) return;
|
||||
if (!pack.images) return;
|
||||
const imgToPush = savedImages.get(img.shortcode) ?? img;
|
||||
pack.images[imgToPush.shortcode] = imgToPush.content;
|
||||
};
|
||||
uploadedImages.forEach((img) => pushImage(img));
|
||||
images.forEach((img) => pushImage(img));
|
||||
|
||||
return onUpdate?.(pack);
|
||||
}, [imagePack, images, savedMeta, uploadedImages, savedImages, deleteImages, onUpdate])
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (applyState.status === AsyncStatus.Success) {
|
||||
handleResetSavedChanges();
|
||||
}
|
||||
}, [applyState]);
|
||||
|
||||
const savedChanges =
|
||||
(savedMeta && !packMetaEqual(imagePack.meta, savedMeta)) ||
|
||||
uploadedImages.length > 0 ||
|
||||
savedImages.size > 0 ||
|
||||
deleteImages.size > 0;
|
||||
const canApplyChanges = !metaEditing && imagesEditing.size === 0 && files.length === 0;
|
||||
const applying = applyState.status === AsyncStatus.Loading;
|
||||
|
||||
const renderImage = (image: PackImageReader) => (
|
||||
<SequenceCard
|
||||
key={image.shortcode}
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant={deleteImages.has(image.shortcode) ? 'Critical' : 'SurfaceVariant'}
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
{imagesEditing.has(image.shortcode) ? (
|
||||
<ImageTileEdit
|
||||
defaultShortcode={image.shortcode}
|
||||
image={savedImages.get(image.shortcode) ?? image}
|
||||
packUsage={currentMeta.usage}
|
||||
useAuthentication={useAuthentication}
|
||||
onCancel={handleImageEditCancel}
|
||||
onSave={handleImageEditSave}
|
||||
/>
|
||||
) : (
|
||||
<ImageTile
|
||||
defaultShortcode={image.shortcode}
|
||||
image={savedImages.get(image.shortcode) ?? image}
|
||||
packUsage={currentMeta.usage}
|
||||
useAuthentication={useAuthentication}
|
||||
canEdit={canEdit}
|
||||
onEdit={handleImageEdit}
|
||||
deleted={deleteImages.has(image.shortcode)}
|
||||
onDeleteToggle={handleDeleteToggle}
|
||||
/>
|
||||
)}
|
||||
</SequenceCard>
|
||||
);
|
||||
|
||||
return (
|
||||
<Box grow="Yes" direction="Column" gap="700" {...props} ref={ref}>
|
||||
{savedChanges && (
|
||||
<Menu className={css.UnsavedMenu} variant="Success">
|
||||
<Box alignItems="Center" gap="400">
|
||||
<Box grow="Yes" direction="Column">
|
||||
{applyState.status === AsyncStatus.Error ? (
|
||||
<Text size="T200">
|
||||
<b>Failed to apply changes! Please try again.</b>
|
||||
</Text>
|
||||
) : (
|
||||
<Text size="T200">
|
||||
<b>Changes saved! Apply when ready.</b>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
<Box shrink="No" gap="200">
|
||||
<Button
|
||||
size="300"
|
||||
variant="Success"
|
||||
fill="None"
|
||||
radii="300"
|
||||
disabled={!canApplyChanges || applying}
|
||||
onClick={handleResetSavedChanges}
|
||||
>
|
||||
<Text size="B300">Reset</Text>
|
||||
</Button>
|
||||
<Button
|
||||
size="300"
|
||||
variant="Success"
|
||||
radii="300"
|
||||
disabled={!canApplyChanges || applying}
|
||||
before={applying && <Spinner variant="Success" fill="Solid" size="100" />}
|
||||
onClick={applyChanges}
|
||||
>
|
||||
<Text size="B300">Apply Changes</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Menu>
|
||||
)}
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Pack</Text>
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
{metaEditing ? (
|
||||
<ImagePackProfileEdit
|
||||
meta={currentMeta}
|
||||
onCancel={handleMetaCancel}
|
||||
onSave={handleMetaSave}
|
||||
/>
|
||||
) : (
|
||||
<ImagePackProfile
|
||||
meta={currentMeta}
|
||||
canEdit={canEdit}
|
||||
onEdit={() => setMetaEditing(true)}
|
||||
/>
|
||||
)}
|
||||
</SequenceCard>
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<SettingTile
|
||||
title="Images Usage"
|
||||
description="Select how the images are being used: as emojis, as stickers, or as both."
|
||||
after={
|
||||
<UsageSwitcher
|
||||
usage={currentMeta.usage}
|
||||
canEdit={canEdit}
|
||||
onChange={handlePackUsageChange}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</SequenceCard>
|
||||
</Box>
|
||||
{images.length === 0 && !canEdit ? null : (
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Images</Text>
|
||||
{canEdit && (
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<SettingTile
|
||||
title="Upload Images"
|
||||
description="Select images from your storage to upload them in pack."
|
||||
after={
|
||||
<Button
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
size="300"
|
||||
radii="300"
|
||||
type="button"
|
||||
outlined
|
||||
onClick={() => pickFiles('image/*')}
|
||||
>
|
||||
<Text size="B300">Select</Text>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</SequenceCard>
|
||||
)}
|
||||
{files.map((file) => (
|
||||
<SequenceCard
|
||||
key={file.name}
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<ImageTileUpload file={file}>
|
||||
{(uploadAtom) => (
|
||||
<CompactUploadCardRenderer
|
||||
uploadAtom={uploadAtom}
|
||||
onRemove={handleUploadRemove}
|
||||
onComplete={handleUploadComplete}
|
||||
/>
|
||||
)}
|
||||
</ImageTileUpload>
|
||||
</SequenceCard>
|
||||
))}
|
||||
{uploadedImages.map(renderImage)}
|
||||
{images.map(renderImage)}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
);
|
||||
51
src/app/components/image-pack-view/ImagePackView.tsx
Normal file
51
src/app/components/image-pack-view/ImagePackView.tsx
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import React from 'react';
|
||||
import { Box, IconButton, Text, Icon, Icons, Scroll, Chip } from 'folds';
|
||||
import { PackAddress } from '../../plugins/custom-emoji';
|
||||
import { Page, PageHeader, PageContent } from '../page';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { RoomImagePack } from './RoomImagePack';
|
||||
import { UserImagePack } from './UserImagePack';
|
||||
|
||||
type ImagePackViewProps = {
|
||||
address: PackAddress | undefined;
|
||||
requestClose: () => void;
|
||||
};
|
||||
export function ImagePackView({ address, requestClose }: ImagePackViewProps) {
|
||||
const mx = useMatrixClient();
|
||||
const room = address && mx.getRoom(address.roomId);
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<PageHeader outlined={false} balance>
|
||||
<Box alignItems="Center" grow="Yes" gap="200">
|
||||
<Box alignItems="Inherit" grow="Yes" gap="200">
|
||||
<Chip
|
||||
size="500"
|
||||
radii="Pill"
|
||||
onClick={requestClose}
|
||||
before={<Icon size="100" src={Icons.ArrowLeft} />}
|
||||
>
|
||||
<Text size="T300">Emojis & Stickers</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
<Box shrink="No">
|
||||
<IconButton onClick={requestClose} variant="Surface">
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</PageHeader>
|
||||
<Box grow="Yes">
|
||||
<Scroll hideTrack visibility="Hover">
|
||||
<PageContent>
|
||||
{room && address ? (
|
||||
<RoomImagePack room={room} stateKey={address.stateKey} />
|
||||
) : (
|
||||
<UserImagePack />
|
||||
)}
|
||||
</PageContent>
|
||||
</Scroll>
|
||||
</Box>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
214
src/app/components/image-pack-view/ImageTile.tsx
Normal file
214
src/app/components/image-pack-view/ImageTile.tsx
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
import React, { FormEventHandler, ReactNode, useMemo, useState } from 'react';
|
||||
import { Badge, Box, Button, Chip, Icon, Icons, Input, Text } from 'folds';
|
||||
import { UsageSwitcher, useUsageStr } from './UsageSwitcher';
|
||||
import { mxcUrlToHttp } from '../../utils/matrix';
|
||||
import * as css from './style.css';
|
||||
import { ImageUsage, imageUsageEqual, PackImageReader } from '../../plugins/custom-emoji';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { SettingTile } from '../setting-tile';
|
||||
import { useObjectURL } from '../../hooks/useObjectURL';
|
||||
import { createUploadAtom, TUploadAtom } from '../../state/upload';
|
||||
import { replaceSpaceWithDash } from '../../utils/common';
|
||||
|
||||
type ImageTileProps = {
|
||||
defaultShortcode: string;
|
||||
useAuthentication: boolean;
|
||||
packUsage: ImageUsage[];
|
||||
image: PackImageReader;
|
||||
canEdit?: boolean;
|
||||
onEdit?: (defaultShortcode: string, image: PackImageReader) => void;
|
||||
deleted?: boolean;
|
||||
onDeleteToggle?: (defaultShortcode: string) => void;
|
||||
};
|
||||
export function ImageTile({
|
||||
defaultShortcode,
|
||||
image,
|
||||
packUsage,
|
||||
useAuthentication,
|
||||
canEdit,
|
||||
onEdit,
|
||||
onDeleteToggle,
|
||||
deleted,
|
||||
}: ImageTileProps) {
|
||||
const mx = useMatrixClient();
|
||||
const getUsageStr = useUsageStr();
|
||||
|
||||
return (
|
||||
<SettingTile
|
||||
before={
|
||||
<img
|
||||
className={css.ImagePackImage}
|
||||
src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? ''}
|
||||
alt={image.shortcode}
|
||||
loading="lazy"
|
||||
/>
|
||||
}
|
||||
title={
|
||||
deleted ? (
|
||||
<span className={css.DeleteImageShortcode}>{image.shortcode}</span>
|
||||
) : (
|
||||
image.shortcode
|
||||
)
|
||||
}
|
||||
description={
|
||||
<Box as="span" gap="200">
|
||||
{image.usage && getUsageStr(image.usage) !== getUsageStr(packUsage) && (
|
||||
<Badge as="span" variant="Secondary" size="400" radii="300" outlined>
|
||||
<Text as="span" size="L400">
|
||||
{getUsageStr(image.usage)}
|
||||
</Text>
|
||||
</Badge>
|
||||
)}
|
||||
{image.body}
|
||||
</Box>
|
||||
}
|
||||
after={
|
||||
canEdit ? (
|
||||
<Box shrink="No" alignItems="Center" gap="200">
|
||||
<Chip
|
||||
variant={deleted ? 'Critical' : 'Secondary'}
|
||||
fill="None"
|
||||
radii="Pill"
|
||||
onClick={() => onDeleteToggle?.(defaultShortcode)}
|
||||
>
|
||||
{deleted ? <Text size="B300">Undo</Text> : <Icon size="50" src={Icons.Delete} />}
|
||||
</Chip>
|
||||
{!deleted && (
|
||||
<Chip
|
||||
variant="Secondary"
|
||||
radii="Pill"
|
||||
onClick={() => onEdit?.(defaultShortcode, image)}
|
||||
>
|
||||
<Text size="B300">Edit</Text>
|
||||
</Chip>
|
||||
)}
|
||||
</Box>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
type ImageTileUploadProps = {
|
||||
file: File;
|
||||
children: (uploadAtom: TUploadAtom) => ReactNode;
|
||||
};
|
||||
export function ImageTileUpload({ file, children }: ImageTileUploadProps) {
|
||||
const url = useObjectURL(file);
|
||||
const uploadAtom = useMemo(() => createUploadAtom(file), [file]);
|
||||
|
||||
return (
|
||||
<SettingTile before={<img className={css.ImagePackImage} src={url} alt={file.name} />}>
|
||||
{children(uploadAtom)}
|
||||
</SettingTile>
|
||||
);
|
||||
}
|
||||
|
||||
type ImageTileEditProps = {
|
||||
defaultShortcode: string;
|
||||
useAuthentication: boolean;
|
||||
packUsage: ImageUsage[];
|
||||
image: PackImageReader;
|
||||
onCancel: (shortcode: string) => void;
|
||||
onSave: (shortcode: string, image: PackImageReader) => void;
|
||||
};
|
||||
export function ImageTileEdit({
|
||||
defaultShortcode,
|
||||
useAuthentication,
|
||||
packUsage,
|
||||
image,
|
||||
onCancel,
|
||||
onSave,
|
||||
}: ImageTileEditProps) {
|
||||
const mx = useMatrixClient();
|
||||
const defaultUsage = image.usage ?? packUsage;
|
||||
|
||||
const [unsavedUsage, setUnsavedUsages] = useState(defaultUsage);
|
||||
|
||||
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
|
||||
const target = evt.target as HTMLFormElement | undefined;
|
||||
const shortcodeInput = target?.shortcodeInput as HTMLInputElement | undefined;
|
||||
const bodyInput = target?.bodyInput as HTMLTextAreaElement | undefined;
|
||||
if (!shortcodeInput || !bodyInput) return;
|
||||
|
||||
const shortcode = replaceSpaceWithDash(shortcodeInput.value.trim());
|
||||
const body = bodyInput.value.trim() || undefined;
|
||||
const usage = unsavedUsage;
|
||||
|
||||
if (!shortcode) return;
|
||||
|
||||
if (
|
||||
shortcode === image.shortcode &&
|
||||
body === image.body &&
|
||||
imageUsageEqual(usage, defaultUsage)
|
||||
) {
|
||||
onCancel(defaultShortcode);
|
||||
return;
|
||||
}
|
||||
|
||||
const imageReader = new PackImageReader(shortcode, image.url, {
|
||||
info: image.info,
|
||||
body,
|
||||
usage: imageUsageEqual(usage, packUsage) ? undefined : usage,
|
||||
});
|
||||
|
||||
onSave(defaultShortcode, imageReader);
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingTile
|
||||
before={
|
||||
<img
|
||||
className={css.ImagePackImage}
|
||||
src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? ''}
|
||||
alt={image.shortcode}
|
||||
loading="lazy"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Box as="form" onSubmit={handleSubmit} direction="Column" gap="200">
|
||||
<Box direction="Column" className={css.ImagePackImageInputs}>
|
||||
<Input
|
||||
before={<Text size="L400">Shortcode:</Text>}
|
||||
defaultValue={image.shortcode}
|
||||
name="shortcodeInput"
|
||||
variant="Secondary"
|
||||
size="300"
|
||||
radii="0"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
<Input
|
||||
before={<Text size="L400">Body:</Text>}
|
||||
defaultValue={image.body}
|
||||
name="bodyInput"
|
||||
variant="Secondary"
|
||||
size="300"
|
||||
radii="0"
|
||||
/>
|
||||
</Box>
|
||||
<Box gap="200">
|
||||
<Box shrink="No" direction="Column">
|
||||
<UsageSwitcher usage={unsavedUsage} onChange={setUnsavedUsages} canEdit />
|
||||
</Box>
|
||||
<Box grow="Yes" />
|
||||
<Button type="submit" variant="Success" size="300" radii="300">
|
||||
<Text size="B300">Save</Text>
|
||||
</Button>
|
||||
<Button
|
||||
type="reset"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
size="300"
|
||||
radii="300"
|
||||
onClick={() => onCancel(defaultShortcode)}
|
||||
>
|
||||
<Text size="B300">Cancel</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</SettingTile>
|
||||
);
|
||||
}
|
||||
232
src/app/components/image-pack-view/PackMeta.tsx
Normal file
232
src/app/components/image-pack-view/PackMeta.tsx
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
import React, { FormEventHandler, useCallback, useMemo, useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Text,
|
||||
Avatar,
|
||||
AvatarImage,
|
||||
AvatarFallback,
|
||||
Button,
|
||||
Icon,
|
||||
Icons,
|
||||
Input,
|
||||
TextArea,
|
||||
Chip,
|
||||
} from 'folds';
|
||||
import Linkify from 'linkify-react';
|
||||
import { mxcUrlToHttp } from '../../utils/matrix';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { nameInitials } from '../../utils/common';
|
||||
import { BreakWord } from '../../styles/Text.css';
|
||||
import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
|
||||
import { ContainerColor } from '../../styles/ContainerColor.css';
|
||||
import { useFilePicker } from '../../hooks/useFilePicker';
|
||||
import { useObjectURL } from '../../hooks/useObjectURL';
|
||||
import { createUploadAtom, UploadSuccess } from '../../state/upload';
|
||||
import { CompactUploadCardRenderer } from '../upload-card';
|
||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||
import { PackMetaReader } from '../../plugins/custom-emoji';
|
||||
|
||||
type ImagePackAvatarProps = {
|
||||
url?: string;
|
||||
name?: string;
|
||||
};
|
||||
function ImagePackAvatar({ url, name }: ImagePackAvatarProps) {
|
||||
return (
|
||||
<Avatar size="500" className={ContainerColor({ variant: 'Secondary' })}>
|
||||
{url ? (
|
||||
<AvatarImage src={url} alt={name ?? 'Unknown'} />
|
||||
) : (
|
||||
<AvatarFallback>
|
||||
<Text size="H2">{nameInitials(name ?? 'Unknown')}</Text>
|
||||
</AvatarFallback>
|
||||
)}
|
||||
</Avatar>
|
||||
);
|
||||
}
|
||||
|
||||
type ImagePackProfileProps = {
|
||||
meta: PackMetaReader;
|
||||
canEdit?: boolean;
|
||||
onEdit?: () => void;
|
||||
};
|
||||
export function ImagePackProfile({ meta, canEdit, onEdit }: ImagePackProfileProps) {
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const avatarUrl = meta.avatar
|
||||
? mxcUrlToHttp(mx, meta.avatar, useAuthentication) ?? undefined
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<Box gap="400">
|
||||
<Box grow="Yes" direction="Column" gap="300">
|
||||
<Box direction="Column" gap="100">
|
||||
<Text className={BreakWord} size="H5">
|
||||
{meta.name ?? 'Unknown'}
|
||||
</Text>
|
||||
{meta.attribution && (
|
||||
<Text className={BreakWord} size="T200">
|
||||
<Linkify options={LINKIFY_OPTS}>{meta.attribution}</Linkify>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
{canEdit && (
|
||||
<Box gap="200">
|
||||
<Chip
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
radii="300"
|
||||
before={<Icon size="50" src={Icons.Pencil} />}
|
||||
onClick={onEdit}
|
||||
outlined
|
||||
>
|
||||
<Text size="B300">Edit</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<Box shrink="No">
|
||||
<ImagePackAvatar url={avatarUrl} name={meta.name} />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type ImagePackProfileEditProps = {
|
||||
meta: PackMetaReader;
|
||||
onCancel: () => void;
|
||||
onSave: (meta: PackMetaReader) => void;
|
||||
};
|
||||
export function ImagePackProfileEdit({ meta, onCancel, onSave }: ImagePackProfileEditProps) {
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const [avatar, setAvatar] = useState(meta.avatar);
|
||||
|
||||
const avatarUrl = avatar ? mxcUrlToHttp(mx, avatar, useAuthentication) ?? undefined : undefined;
|
||||
|
||||
const [imageFile, setImageFile] = useState<File>();
|
||||
const avatarFileUrl = useObjectURL(imageFile);
|
||||
const uploadingAvatar = avatarFileUrl ? avatar === meta.avatar : false;
|
||||
const uploadAtom = useMemo(() => {
|
||||
if (imageFile) return createUploadAtom(imageFile);
|
||||
return undefined;
|
||||
}, [imageFile]);
|
||||
|
||||
const pickFile = useFilePicker(setImageFile, false);
|
||||
|
||||
const handleRemoveUpload = useCallback(() => {
|
||||
setImageFile(undefined);
|
||||
setAvatar(meta.avatar);
|
||||
}, [meta.avatar]);
|
||||
|
||||
const handleUploaded = useCallback((upload: UploadSuccess) => {
|
||||
setAvatar(upload.mxc);
|
||||
}, []);
|
||||
|
||||
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
if (uploadingAvatar) return;
|
||||
|
||||
const target = evt.target as HTMLFormElement | undefined;
|
||||
const nameInput = target?.nameInput as HTMLInputElement | undefined;
|
||||
const attributionTextArea = target?.attributionTextArea as HTMLTextAreaElement | undefined;
|
||||
if (!nameInput || !attributionTextArea) return;
|
||||
|
||||
const name = nameInput.value.trim();
|
||||
const attribution = attributionTextArea.value.trim();
|
||||
if (!name) return;
|
||||
|
||||
const metaReader = new PackMetaReader({
|
||||
avatar_url: avatar,
|
||||
display_name: name,
|
||||
attribution,
|
||||
});
|
||||
onSave(metaReader);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box as="form" onSubmit={handleSubmit} direction="Column" gap="400">
|
||||
<Box gap="400">
|
||||
<Box grow="Yes" direction="Column" gap="100">
|
||||
<Text size="L400">Pack Avatar</Text>
|
||||
{uploadAtom ? (
|
||||
<Box gap="200" direction="Column">
|
||||
<CompactUploadCardRenderer
|
||||
uploadAtom={uploadAtom}
|
||||
onRemove={handleRemoveUpload}
|
||||
onComplete={handleUploaded}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
<Box gap="200">
|
||||
<Button
|
||||
type="button"
|
||||
size="300"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
radii="300"
|
||||
onClick={() => pickFile('image/*')}
|
||||
>
|
||||
<Text size="B300">Upload</Text>
|
||||
</Button>
|
||||
{!avatar && meta.avatar && (
|
||||
<Button
|
||||
type="button"
|
||||
size="300"
|
||||
variant="Success"
|
||||
fill="None"
|
||||
radii="300"
|
||||
onClick={() => setAvatar(meta.avatar)}
|
||||
>
|
||||
<Text size="B300">Reset</Text>
|
||||
</Button>
|
||||
)}
|
||||
{avatar && (
|
||||
<Button
|
||||
type="button"
|
||||
size="300"
|
||||
variant="Critical"
|
||||
fill="None"
|
||||
radii="300"
|
||||
onClick={() => setAvatar(undefined)}
|
||||
>
|
||||
<Text size="B300">Remove</Text>
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<Box shrink="No">
|
||||
<ImagePackAvatar url={avatarFileUrl ?? avatarUrl} name={meta.name} />
|
||||
</Box>
|
||||
</Box>
|
||||
<Box direction="Inherit" gap="100">
|
||||
<Text size="L400">Name</Text>
|
||||
<Input name="nameInput" defaultValue={meta.name} variant="Secondary" radii="300" required />
|
||||
</Box>
|
||||
<Box direction="Inherit" gap="100">
|
||||
<Text size="L400">Attribution</Text>
|
||||
<TextArea
|
||||
name="attributionTextArea"
|
||||
defaultValue={meta.attribution}
|
||||
variant="Secondary"
|
||||
radii="300"
|
||||
/>
|
||||
</Box>
|
||||
<Box gap="300">
|
||||
<Button type="submit" variant="Success" size="300" radii="300" disabled={uploadingAvatar}>
|
||||
<Text size="B300">Save</Text>
|
||||
</Button>
|
||||
<Button
|
||||
type="reset"
|
||||
onClick={onCancel}
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
size="300"
|
||||
radii="300"
|
||||
>
|
||||
<Text size="B300">Cancel</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
55
src/app/components/image-pack-view/RoomImagePack.tsx
Normal file
55
src/app/components/image-pack-view/RoomImagePack.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
import React, { useCallback, useMemo } from 'react';
|
||||
import { Room } from 'matrix-js-sdk';
|
||||
import { usePowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { ImagePackContent } from './ImagePackContent';
|
||||
import { ImagePack, PackContent } from '../../plugins/custom-emoji';
|
||||
import { StateEvent } from '../../../types/matrix/room';
|
||||
import { useRoomImagePack } from '../../hooks/useImagePacks';
|
||||
import { randomStr } from '../../utils/common';
|
||||
|
||||
type RoomImagePackProps = {
|
||||
room: Room;
|
||||
stateKey: string;
|
||||
};
|
||||
|
||||
export function RoomImagePack({ room, stateKey }: RoomImagePackProps) {
|
||||
const mx = useMatrixClient();
|
||||
const userId = mx.getUserId()!;
|
||||
const powerLevels = usePowerLevels(room);
|
||||
|
||||
const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
|
||||
const canEditImagePack = canSendStateEvent(StateEvent.PoniesRoomEmotes, getPowerLevel(userId));
|
||||
|
||||
const fallbackPack = useMemo(() => {
|
||||
const fakePackId = randomStr(4);
|
||||
return new ImagePack(
|
||||
fakePackId,
|
||||
{},
|
||||
{
|
||||
roomId: room.roomId,
|
||||
stateKey,
|
||||
}
|
||||
);
|
||||
}, [room.roomId, stateKey]);
|
||||
const imagePack = useRoomImagePack(room, stateKey) ?? fallbackPack;
|
||||
|
||||
const handleUpdate = useCallback(
|
||||
async (packContent: PackContent) => {
|
||||
const { address } = imagePack;
|
||||
if (!address) return;
|
||||
|
||||
await mx.sendStateEvent(
|
||||
address.roomId,
|
||||
StateEvent.PoniesRoomEmotes,
|
||||
packContent,
|
||||
address.stateKey
|
||||
);
|
||||
},
|
||||
[mx, imagePack]
|
||||
);
|
||||
|
||||
return (
|
||||
<ImagePackContent imagePack={imagePack} canEdit={canEditImagePack} onUpdate={handleUpdate} />
|
||||
);
|
||||
}
|
||||
116
src/app/components/image-pack-view/UsageSwitcher.tsx
Normal file
116
src/app/components/image-pack-view/UsageSwitcher.tsx
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
import React, { MouseEventHandler, useMemo, useState } from 'react';
|
||||
import { Box, Button, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { ImageUsage } from '../../plugins/custom-emoji';
|
||||
import { stopPropagation } from '../../utils/keyboard';
|
||||
|
||||
export const useUsageStr = (): ((usage: ImageUsage[]) => string) => {
|
||||
const getUsageStr = (usage: ImageUsage[]): string => {
|
||||
const sticker = usage.includes(ImageUsage.Sticker);
|
||||
const emoticon = usage.includes(ImageUsage.Emoticon);
|
||||
|
||||
if (sticker && emoticon) return 'Both';
|
||||
if (sticker) return 'Sticker';
|
||||
if (emoticon) return 'Emoji';
|
||||
return 'Both';
|
||||
};
|
||||
return getUsageStr;
|
||||
};
|
||||
|
||||
type UsageSelectorProps = {
|
||||
selected: ImageUsage[];
|
||||
onChange: (usage: ImageUsage[]) => void;
|
||||
};
|
||||
export function UsageSelector({ selected, onChange }: UsageSelectorProps) {
|
||||
const getUsageStr = useUsageStr();
|
||||
|
||||
const selectedUsageStr = getUsageStr(selected);
|
||||
const isSelected = (usage: ImageUsage[]) => getUsageStr(usage) === selectedUsageStr;
|
||||
|
||||
const allUsages: ImageUsage[][] = useMemo(
|
||||
() => [[ImageUsage.Emoticon], [ImageUsage.Sticker], [ImageUsage.Sticker, ImageUsage.Emoticon]],
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
|
||||
{allUsages.map((usage) => (
|
||||
<MenuItem
|
||||
key={getUsageStr(usage)}
|
||||
size="300"
|
||||
variant={isSelected(usage) ? 'SurfaceVariant' : 'Surface'}
|
||||
aria-selected={isSelected(usage)}
|
||||
radii="300"
|
||||
onClick={() => onChange(usage)}
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="T300">{getUsageStr(usage)}</Text>
|
||||
</Box>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type UsageSwitcherProps = {
|
||||
usage: ImageUsage[];
|
||||
canEdit?: boolean;
|
||||
onChange: (usage: ImageUsage[]) => void;
|
||||
};
|
||||
export function UsageSwitcher({ usage, onChange, canEdit }: UsageSwitcherProps) {
|
||||
const getUsageStr = useUsageStr();
|
||||
|
||||
const [menuCords, setMenuCords] = useState<RectCords>();
|
||||
|
||||
const handleSelectUsage: MouseEventHandler<HTMLButtonElement> = (event) => {
|
||||
setMenuCords(event.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
size="300"
|
||||
radii="300"
|
||||
type="button"
|
||||
outlined
|
||||
aria-disabled={!canEdit}
|
||||
after={canEdit && <Icon src={Icons.ChevronBottom} size="100" />}
|
||||
onClick={canEdit ? handleSelectUsage : undefined}
|
||||
>
|
||||
<Text size="B300">{getUsageStr(usage)}</Text>
|
||||
</Button>
|
||||
<PopOut
|
||||
anchor={menuCords}
|
||||
offset={5}
|
||||
position="Bottom"
|
||||
align="End"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: () => setMenuCords(undefined),
|
||||
clickOutsideDeactivates: true,
|
||||
isKeyForward: (evt: KeyboardEvent) =>
|
||||
evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
|
||||
isKeyBackward: (evt: KeyboardEvent) =>
|
||||
evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Menu>
|
||||
<UsageSelector
|
||||
selected={usage}
|
||||
onChange={(usg) => {
|
||||
setMenuCords(undefined);
|
||||
onChange(usg);
|
||||
}}
|
||||
/>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
22
src/app/components/image-pack-view/UserImagePack.tsx
Normal file
22
src/app/components/image-pack-view/UserImagePack.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import React, { useCallback, useMemo } from 'react';
|
||||
import { ImagePackContent } from './ImagePackContent';
|
||||
import { ImagePack, PackContent } from '../../plugins/custom-emoji';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { AccountDataEvent } from '../../../types/matrix/accountData';
|
||||
import { useUserImagePack } from '../../hooks/useImagePacks';
|
||||
|
||||
export function UserImagePack() {
|
||||
const mx = useMatrixClient();
|
||||
|
||||
const defaultPack = useMemo(() => new ImagePack(mx.getUserId() ?? '', {}, undefined), [mx]);
|
||||
const imagePack = useUserImagePack();
|
||||
|
||||
const handleUpdate = useCallback(
|
||||
async (packContent: PackContent) => {
|
||||
await mx.setAccountData(AccountDataEvent.PoniesUserEmotes, packContent);
|
||||
},
|
||||
[mx]
|
||||
);
|
||||
|
||||
return <ImagePackContent imagePack={imagePack ?? defaultPack} canEdit onUpdate={handleUpdate} />;
|
||||
}
|
||||
1
src/app/components/image-pack-view/index.ts
Normal file
1
src/app/components/image-pack-view/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './ImagePackView';
|
||||
37
src/app/components/image-pack-view/style.css.ts
Normal file
37
src/app/components/image-pack-view/style.css.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import { style } from '@vanilla-extract/css';
|
||||
import { color, config, DefaultReset, toRem } from 'folds';
|
||||
|
||||
export const ImagePackImage = style([
|
||||
DefaultReset,
|
||||
{
|
||||
width: toRem(36),
|
||||
height: toRem(36),
|
||||
objectFit: 'contain',
|
||||
},
|
||||
]);
|
||||
|
||||
export const DeleteImageShortcode = style([
|
||||
DefaultReset,
|
||||
{
|
||||
color: color.Critical.Main,
|
||||
textDecoration: 'line-through',
|
||||
},
|
||||
]);
|
||||
|
||||
export const ImagePackImageInputs = style([
|
||||
DefaultReset,
|
||||
{
|
||||
overflow: 'hidden',
|
||||
borderRadius: config.radii.R300,
|
||||
},
|
||||
]);
|
||||
|
||||
export const UnsavedMenu = style({
|
||||
position: 'sticky',
|
||||
padding: config.space.S200,
|
||||
paddingLeft: config.space.S400,
|
||||
top: config.space.S400,
|
||||
left: config.space.S400,
|
||||
right: 0,
|
||||
zIndex: 1,
|
||||
});
|
||||
53
src/app/components/info-card/InfoCard.tsx
Normal file
53
src/app/components/info-card/InfoCard.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import { Box, ContainerColor, Text } from 'folds';
|
||||
import React, { ReactNode } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { BreakWord } from '../../styles/Text.css';
|
||||
import { ContainerColor as ContainerClr } from '../../styles/ContainerColor.css';
|
||||
import * as css from './styles.css';
|
||||
|
||||
type InfoCardProps = {
|
||||
variant?: ContainerColor;
|
||||
title?: ReactNode;
|
||||
description?: ReactNode;
|
||||
before?: ReactNode;
|
||||
after?: ReactNode;
|
||||
children?: ReactNode;
|
||||
};
|
||||
export function InfoCard({
|
||||
variant = 'Primary',
|
||||
title,
|
||||
description,
|
||||
before,
|
||||
after,
|
||||
children,
|
||||
}: InfoCardProps) {
|
||||
return (
|
||||
<Box
|
||||
direction="Column"
|
||||
className={classNames(css.InfoCard, ContainerClr({ variant }))}
|
||||
gap="300"
|
||||
>
|
||||
<Box gap="200" alignItems="Center">
|
||||
{before && (
|
||||
<Box shrink="No" alignSelf="Start">
|
||||
{before}
|
||||
</Box>
|
||||
)}
|
||||
<Box grow="Yes" direction="Column" gap="100">
|
||||
{title && (
|
||||
<Text size="L400" className={BreakWord}>
|
||||
{title}
|
||||
</Text>
|
||||
)}
|
||||
{description && (
|
||||
<Text size="T200" className={BreakWord}>
|
||||
{description}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
{after && <Box shrink="No">{after}</Box>}
|
||||
</Box>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
1
src/app/components/info-card/index.ts
Normal file
1
src/app/components/info-card/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './InfoCard';
|
||||
10
src/app/components/info-card/styles.css.ts
Normal file
10
src/app/components/info-card/styles.css.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { style } from '@vanilla-extract/css';
|
||||
import { config } from 'folds';
|
||||
|
||||
export const InfoCard = style([
|
||||
{
|
||||
padding: config.space.S200,
|
||||
borderRadius: config.radii.R300,
|
||||
borderWidth: config.borderWidth.B300,
|
||||
},
|
||||
]);
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { Box, Icon, IconSrc } from 'folds';
|
||||
import React, { ReactNode } from 'react';
|
||||
import { CompactLayout, ModernLayout } from '..';
|
||||
import { MessageLayout } from '../../../state/settings';
|
||||
|
||||
export type EventContentProps = {
|
||||
messageLayout: number;
|
||||
|
|
@ -11,9 +12,9 @@ export type EventContentProps = {
|
|||
export function EventContent({ messageLayout, time, iconSrc, content }: EventContentProps) {
|
||||
const beforeJSX = (
|
||||
<Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
|
||||
{messageLayout === 1 && time}
|
||||
{messageLayout === MessageLayout.Compact && time}
|
||||
<Box
|
||||
grow={messageLayout === 1 ? undefined : 'Yes'}
|
||||
grow={messageLayout === MessageLayout.Compact ? undefined : 'Yes'}
|
||||
alignItems="Center"
|
||||
justifyContent="Center"
|
||||
>
|
||||
|
|
@ -25,11 +26,11 @@ export function EventContent({ messageLayout, time, iconSrc, content }: EventCon
|
|||
const msgContentJSX = (
|
||||
<Box justifyContent="SpaceBetween" alignItems="Baseline" gap="200">
|
||||
{content}
|
||||
{messageLayout !== 1 && time}
|
||||
{messageLayout !== MessageLayout.Compact && time}
|
||||
</Box>
|
||||
);
|
||||
|
||||
return messageLayout === 1 ? (
|
||||
return messageLayout === MessageLayout.Compact ? (
|
||||
<CompactLayout before={beforeJSX}>{msgContentJSX}</CompactLayout>
|
||||
) : (
|
||||
<ModernLayout before={beforeJSX}>{msgContentJSX}</ModernLayout>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@ import {
|
|||
getFileNameExt,
|
||||
mimeTypeToExt,
|
||||
} from '../../../utils/mimeTypes';
|
||||
import * as css from './style.css';
|
||||
import { stopPropagation } from '../../../utils/keyboard';
|
||||
import {
|
||||
decryptFile,
|
||||
|
|
@ -36,6 +35,7 @@ import {
|
|||
mxcUrlToHttp,
|
||||
} from '../../../utils/matrix';
|
||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||
import { ModalWide } from '../../../styles/Modal.css';
|
||||
|
||||
const renderErrorButton = (retry: () => void, text: string) => (
|
||||
<TooltipProvider
|
||||
|
|
@ -111,7 +111,7 @@ export function ReadTextFile({ body, mimeType, url, encInfo, renderViewer }: Rea
|
|||
}}
|
||||
>
|
||||
<Modal
|
||||
className={css.ModalWide}
|
||||
className={ModalWide}
|
||||
size="500"
|
||||
onContextMenu={(evt: any) => evt.stopPropagation()}
|
||||
>
|
||||
|
|
@ -199,7 +199,7 @@ export function ReadPdfFile({ body, mimeType, url, encInfo, renderViewer }: Read
|
|||
}}
|
||||
>
|
||||
<Modal
|
||||
className={css.ModalWide}
|
||||
className={ModalWide}
|
||||
size="500"
|
||||
onContextMenu={(evt: any) => evt.stopPropagation()}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ import { FALLBACK_MIMETYPE } from '../../../utils/mimeTypes';
|
|||
import { stopPropagation } from '../../../utils/keyboard';
|
||||
import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../../utils/matrix';
|
||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||
import { ModalWide } from '../../../styles/Modal.css';
|
||||
|
||||
type RenderViewerProps = {
|
||||
src: string;
|
||||
|
|
@ -121,7 +122,7 @@ export const ImageContent = as<'div', ImageContentProps>(
|
|||
}}
|
||||
>
|
||||
<Modal
|
||||
className={css.ModalWide}
|
||||
className={ModalWide}
|
||||
size="500"
|
||||
onContextMenu={(evt: any) => evt.stopPropagation()}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -30,8 +30,3 @@ export const AbsoluteFooter = style([
|
|||
right: config.space.S100,
|
||||
},
|
||||
]);
|
||||
|
||||
export const ModalWide = style({
|
||||
minWidth: '85vw',
|
||||
minHeight: '90vh',
|
||||
});
|
||||
|
|
|
|||
|
|
@ -27,14 +27,14 @@ export function PageRoot({ nav, children }: PageRootProps) {
|
|||
type ClientDrawerLayoutProps = {
|
||||
children: ReactNode;
|
||||
};
|
||||
export function PageNav({ children }: ClientDrawerLayoutProps) {
|
||||
export function PageNav({ size, children }: ClientDrawerLayoutProps & css.PageNavVariants) {
|
||||
const screenSize = useScreenSizeContext();
|
||||
const isMobile = screenSize === ScreenSize.Mobile;
|
||||
|
||||
return (
|
||||
<Box
|
||||
grow={isMobile ? 'Yes' : undefined}
|
||||
className={css.PageNav}
|
||||
className={css.PageNav({ size })}
|
||||
shrink={isMobile ? 'Yes' : 'No'}
|
||||
>
|
||||
<Box grow="Yes" direction="Column">
|
||||
|
|
@ -44,15 +44,17 @@ export function PageNav({ children }: ClientDrawerLayoutProps) {
|
|||
);
|
||||
}
|
||||
|
||||
export const PageNavHeader = as<'header'>(({ className, ...props }, ref) => (
|
||||
<Header
|
||||
className={classNames(css.PageNavHeader, className)}
|
||||
variant="Background"
|
||||
size="600"
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
));
|
||||
export const PageNavHeader = as<'header', css.PageNavHeaderVariants>(
|
||||
({ className, outlined, ...props }, ref) => (
|
||||
<Header
|
||||
className={classNames(css.PageNavHeader({ outlined }), className)}
|
||||
variant="Background"
|
||||
size="600"
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
export function PageNavContent({
|
||||
scrollRef,
|
||||
|
|
@ -88,11 +90,11 @@ export const Page = as<'div'>(({ className, ...props }, ref) => (
|
|||
));
|
||||
|
||||
export const PageHeader = as<'div', css.PageHeaderVariants>(
|
||||
({ className, balance, ...props }, ref) => (
|
||||
({ className, outlined, balance, ...props }, ref) => (
|
||||
<Header
|
||||
as="header"
|
||||
size="600"
|
||||
className={classNames(css.PageHeader({ balance }), className)}
|
||||
className={classNames(css.PageHeader({ balance, outlined }), className)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -2,30 +2,55 @@ import { style } from '@vanilla-extract/css';
|
|||
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
|
||||
import { DefaultReset, color, config, toRem } from 'folds';
|
||||
|
||||
export const PageNav = style({
|
||||
width: toRem(256),
|
||||
});
|
||||
|
||||
export const PageNavHeader = style({
|
||||
padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
|
||||
flexShrink: 0,
|
||||
borderBottomWidth: 1,
|
||||
|
||||
selectors: {
|
||||
'button&': {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
'button&[aria-pressed=true]': {
|
||||
backgroundColor: color.Background.ContainerActive,
|
||||
},
|
||||
'button&:hover, button&:focus-visible': {
|
||||
backgroundColor: color.Background.ContainerHover,
|
||||
},
|
||||
'button&:active': {
|
||||
backgroundColor: color.Background.ContainerActive,
|
||||
export const PageNav = recipe({
|
||||
variants: {
|
||||
size: {
|
||||
'400': {
|
||||
width: toRem(256),
|
||||
},
|
||||
'300': {
|
||||
width: toRem(222),
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
size: '400',
|
||||
},
|
||||
});
|
||||
export type PageNavVariants = RecipeVariants<typeof PageNav>;
|
||||
|
||||
export const PageNavHeader = recipe({
|
||||
base: {
|
||||
padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
|
||||
flexShrink: 0,
|
||||
selectors: {
|
||||
'button&': {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
'button&[aria-pressed=true]': {
|
||||
backgroundColor: color.Background.ContainerActive,
|
||||
},
|
||||
'button&:hover, button&:focus-visible': {
|
||||
backgroundColor: color.Background.ContainerHover,
|
||||
},
|
||||
'button&:active': {
|
||||
backgroundColor: color.Background.ContainerActive,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
variants: {
|
||||
outlined: {
|
||||
true: {
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
outlined: true,
|
||||
},
|
||||
});
|
||||
export type PageNavHeaderVariants = RecipeVariants<typeof PageNavHeader>;
|
||||
|
||||
export const PageNavContent = style({
|
||||
minHeight: '100%',
|
||||
|
|
@ -38,7 +63,6 @@ export const PageHeader = recipe({
|
|||
base: {
|
||||
paddingLeft: config.space.S400,
|
||||
paddingRight: config.space.S200,
|
||||
borderBottomWidth: config.borderWidth.B300,
|
||||
},
|
||||
variants: {
|
||||
balance: {
|
||||
|
|
@ -46,6 +70,14 @@ export const PageHeader = recipe({
|
|||
paddingLeft: config.space.S200,
|
||||
},
|
||||
},
|
||||
outlined: {
|
||||
true: {
|
||||
borderBottomWidth: config.borderWidth.B300,
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
outlined: true,
|
||||
},
|
||||
});
|
||||
export type PageHeaderVariants = RecipeVariants<typeof PageHeader>;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ type PasswordInputProps = Omit<ComponentProps<typeof Input>, 'type' | 'size'> &
|
|||
size: '400' | '500';
|
||||
};
|
||||
export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
|
||||
({ variant, size, style, after, ...props }, ref) => {
|
||||
({ variant = 'Background', size, style, after, ...props }, ref) => {
|
||||
const paddingRight: string = size === '500' ? config.space.S300 : config.space.S200;
|
||||
|
||||
return (
|
||||
|
|
|
|||
1
src/app/components/password-input/index.ts
Normal file
1
src/app/components/password-input/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './PasswordInput';
|
||||
32
src/app/components/setting-tile/SettingTile.tsx
Normal file
32
src/app/components/setting-tile/SettingTile.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import React, { ReactNode } from 'react';
|
||||
import { Box, Text } from 'folds';
|
||||
import { BreakWord } from '../../styles/Text.css';
|
||||
|
||||
type SettingTileProps = {
|
||||
title?: ReactNode;
|
||||
description?: ReactNode;
|
||||
before?: ReactNode;
|
||||
after?: ReactNode;
|
||||
children?: ReactNode;
|
||||
};
|
||||
export function SettingTile({ title, description, before, after, children }: SettingTileProps) {
|
||||
return (
|
||||
<Box alignItems="Center" gap="300">
|
||||
{before && <Box shrink="No">{before}</Box>}
|
||||
<Box grow="Yes" direction="Column" gap="100">
|
||||
{title && (
|
||||
<Text className={BreakWord} size="T300">
|
||||
{title}
|
||||
</Text>
|
||||
)}
|
||||
{description && (
|
||||
<Text className={BreakWord} size="T200" priority="300">
|
||||
{description}
|
||||
</Text>
|
||||
)}
|
||||
{children}
|
||||
</Box>
|
||||
{after && <Box shrink="No">{after}</Box>}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
1
src/app/components/setting-tile/index.ts
Normal file
1
src/app/components/setting-tile/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './SettingTile';
|
||||
89
src/app/components/uia-stages/PasswordStage.tsx
Normal file
89
src/app/components/uia-stages/PasswordStage.tsx
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
import { Box, Button, color, config, Dialog, Header, Icon, IconButton, Icons, Text } from 'folds';
|
||||
import React, { FormEventHandler } from 'react';
|
||||
import { AuthType } from 'matrix-js-sdk';
|
||||
import { StageComponentProps } from './types';
|
||||
import { ErrorCode } from '../../cs-errorcode';
|
||||
import { PasswordInput } from '../password-input';
|
||||
|
||||
export function PasswordStage({
|
||||
stageData,
|
||||
submitAuthDict,
|
||||
onCancel,
|
||||
userId,
|
||||
}: StageComponentProps & {
|
||||
userId: string;
|
||||
}) {
|
||||
const { errorCode, error, session } = stageData;
|
||||
|
||||
const handleFormSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
const { passwordInput } = evt.target as HTMLFormElement & {
|
||||
passwordInput: HTMLInputElement;
|
||||
};
|
||||
const password = passwordInput.value;
|
||||
if (!password) return;
|
||||
submitAuthDict({
|
||||
type: AuthType.Password,
|
||||
identifier: {
|
||||
type: 'm.id.user',
|
||||
user: userId,
|
||||
},
|
||||
password,
|
||||
session,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<Header
|
||||
style={{
|
||||
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
|
||||
}}
|
||||
variant="Surface"
|
||||
size="500"
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="H4">Account Password</Text>
|
||||
</Box>
|
||||
<IconButton size="300" onClick={onCancel} radii="300">
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Header>
|
||||
<Box
|
||||
as="form"
|
||||
onSubmit={handleFormSubmit}
|
||||
style={{ padding: `0 ${config.space.S400} ${config.space.S400}` }}
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<Box direction="Column" gap="400">
|
||||
<Text size="T200">
|
||||
To perform this action you need to authenticate yourself by entering you account
|
||||
password.
|
||||
</Text>
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Password</Text>
|
||||
<PasswordInput size="400" name="passwordInput" outlined autoFocus required />
|
||||
{errorCode && (
|
||||
<Box alignItems="Center" gap="100" style={{ color: color.Critical.Main }}>
|
||||
<Icon size="50" src={Icons.Warning} filled />
|
||||
<Text size="T200">
|
||||
<b>
|
||||
{errorCode === ErrorCode.M_FORBIDDEN
|
||||
? 'Invalid Password!'
|
||||
: `${errorCode}: ${error}`}
|
||||
</b>
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<Button variant="Primary" type="submit">
|
||||
<Text as="span" size="B400">
|
||||
Continue
|
||||
</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
91
src/app/components/uia-stages/SSOStage.tsx
Normal file
91
src/app/components/uia-stages/SSOStage.tsx
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
import { Box, Button, color, config, Dialog, Header, Icon, IconButton, Icons, Text } from 'folds';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { StageComponentProps } from './types';
|
||||
|
||||
export function SSOStage({
|
||||
ssoRedirectURL,
|
||||
stageData,
|
||||
submitAuthDict,
|
||||
onCancel,
|
||||
}: StageComponentProps & {
|
||||
ssoRedirectURL: string;
|
||||
}) {
|
||||
const { errorCode, error, session } = stageData;
|
||||
const [ssoWindow, setSSOWindow] = useState<Window>();
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
submitAuthDict({
|
||||
session,
|
||||
});
|
||||
}, [submitAuthDict, session]);
|
||||
|
||||
const handleContinue = () => {
|
||||
const w = window.open(ssoRedirectURL, '_blank');
|
||||
setSSOWindow(w ?? undefined);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleMessage = (evt: MessageEvent) => {
|
||||
if (ssoWindow && evt.data === 'authDone' && evt.source === ssoWindow) {
|
||||
ssoWindow.close();
|
||||
setSSOWindow(undefined);
|
||||
handleSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('message', handleMessage);
|
||||
return () => {
|
||||
window.removeEventListener('message', handleMessage);
|
||||
};
|
||||
}, [ssoWindow, handleSubmit]);
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<Header
|
||||
style={{
|
||||
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
|
||||
}}
|
||||
variant="Surface"
|
||||
size="500"
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="H4">SSO Login</Text>
|
||||
</Box>
|
||||
<IconButton size="300" onClick={onCancel} radii="300">
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Header>
|
||||
<Box
|
||||
style={{ padding: `0 ${config.space.S400} ${config.space.S400}` }}
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<Text size="T200">
|
||||
To perform this action you need to authenticate yourself by SSO login.
|
||||
</Text>
|
||||
{errorCode && (
|
||||
<Box alignItems="Center" gap="100" style={{ color: color.Critical.Main }}>
|
||||
<Icon size="50" src={Icons.Warning} filled />
|
||||
<Text size="T200">
|
||||
<b>{`${errorCode}: ${error}`}</b>
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{ssoWindow ? (
|
||||
<Button variant="Primary" onClick={handleSubmit}>
|
||||
<Text as="span" size="B400">
|
||||
Continue
|
||||
</Text>
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="Primary" onClick={handleContinue}>
|
||||
<Text as="span" size="B400">
|
||||
Continue with SSO
|
||||
</Text>
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
export * from './types';
|
||||
export * from './DummyStage';
|
||||
export * from './EmailStage';
|
||||
export * from './PasswordStage';
|
||||
export * from './ReCaptchaStage';
|
||||
export * from './RegistrationTokenStage';
|
||||
export * from './SSOStage';
|
||||
export * from './TermsStage';
|
||||
|
|
|
|||
94
src/app/components/upload-card/CompactUploadCardRenderer.tsx
Normal file
94
src/app/components/upload-card/CompactUploadCardRenderer.tsx
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { Chip, Icon, IconButton, Icons, Text, color } from 'folds';
|
||||
import { UploadCard, UploadCardError, CompactUploadCardProgress } from './UploadCard';
|
||||
import { TUploadAtom, UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { TUploadContent } from '../../utils/matrix';
|
||||
import { getFileTypeIcon } from '../../utils/common';
|
||||
|
||||
type CompactUploadCardRendererProps = {
|
||||
isEncrypted?: boolean;
|
||||
uploadAtom: TUploadAtom;
|
||||
onRemove: (file: TUploadContent) => void;
|
||||
onComplete?: (upload: UploadSuccess) => void;
|
||||
};
|
||||
export function CompactUploadCardRenderer({
|
||||
isEncrypted,
|
||||
uploadAtom,
|
||||
onRemove,
|
||||
onComplete,
|
||||
}: CompactUploadCardRendererProps) {
|
||||
const mx = useMatrixClient();
|
||||
const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted);
|
||||
const { file } = upload;
|
||||
|
||||
if (upload.status === UploadStatus.Idle) startUpload();
|
||||
|
||||
const removeUpload = () => {
|
||||
cancelUpload();
|
||||
onRemove(file);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (upload.status === UploadStatus.Success) {
|
||||
onComplete?.(upload);
|
||||
}
|
||||
}, [upload, onComplete]);
|
||||
|
||||
return (
|
||||
<UploadCard
|
||||
compact
|
||||
outlined
|
||||
radii="300"
|
||||
before={<Icon src={getFileTypeIcon(Icons, file.type)} />}
|
||||
after={
|
||||
<>
|
||||
{upload.status === UploadStatus.Error && (
|
||||
<Chip
|
||||
as="button"
|
||||
onClick={startUpload}
|
||||
aria-label="Retry Upload"
|
||||
variant="Critical"
|
||||
radii="Pill"
|
||||
outlined
|
||||
>
|
||||
<Text size="B300">Retry</Text>
|
||||
</Chip>
|
||||
)}
|
||||
<IconButton
|
||||
onClick={removeUpload}
|
||||
aria-label="Cancel Upload"
|
||||
variant="SurfaceVariant"
|
||||
radii="Pill"
|
||||
size="300"
|
||||
>
|
||||
<Icon src={Icons.Cross} size="200" />
|
||||
</IconButton>
|
||||
</>
|
||||
}
|
||||
>
|
||||
{upload.status === UploadStatus.Success ? (
|
||||
<>
|
||||
<Text size="H6" truncate>
|
||||
{file.name}
|
||||
</Text>
|
||||
<Icon style={{ color: color.Success.Main }} src={Icons.Check} size="100" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{upload.status === UploadStatus.Idle && (
|
||||
<CompactUploadCardProgress sentBytes={0} totalBytes={file.size} />
|
||||
)}
|
||||
{upload.status === UploadStatus.Loading && (
|
||||
<CompactUploadCardProgress sentBytes={upload.progress.loaded} totalBytes={file.size} />
|
||||
)}
|
||||
{upload.status === UploadStatus.Error && (
|
||||
<UploadCardError>
|
||||
<Text size="T200">{upload.error.message}</Text>
|
||||
</UploadCardError>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</UploadCard>
|
||||
);
|
||||
}
|
||||
|
|
@ -7,9 +7,21 @@ export const UploadCard = recipe({
|
|||
padding: config.space.S300,
|
||||
backgroundColor: color.SurfaceVariant.Container,
|
||||
color: color.SurfaceVariant.OnContainer,
|
||||
borderColor: color.SurfaceVariant.ContainerLine,
|
||||
},
|
||||
variants: {
|
||||
radii: RadiiVariant,
|
||||
outlined: {
|
||||
true: {
|
||||
borderStyle: 'solid',
|
||||
borderWidth: config.borderWidth.B300,
|
||||
},
|
||||
},
|
||||
compact: {
|
||||
true: {
|
||||
padding: config.space.S100,
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
radii: '400',
|
||||
|
|
|
|||
|
|
@ -12,8 +12,13 @@ type UploadCardProps = {
|
|||
};
|
||||
|
||||
export const UploadCard = forwardRef<HTMLDivElement, UploadCardProps & css.UploadCardVariant>(
|
||||
({ before, after, children, bottom, radii }, ref) => (
|
||||
<Box className={css.UploadCard({ radii })} direction="Column" gap="200" ref={ref}>
|
||||
({ before, after, children, bottom, radii, outlined, compact }, ref) => (
|
||||
<Box
|
||||
className={css.UploadCard({ radii, outlined, compact })}
|
||||
direction="Column"
|
||||
gap="200"
|
||||
ref={ref}
|
||||
>
|
||||
<Box alignItems="Center" gap="200">
|
||||
{before}
|
||||
<Box alignItems="Center" grow="Yes" gap="200">
|
||||
|
|
@ -33,7 +38,7 @@ type UploadCardProgressProps = {
|
|||
|
||||
export function UploadCardProgress({ sentBytes, totalBytes }: UploadCardProgressProps) {
|
||||
return (
|
||||
<Box direction="Column" gap="200">
|
||||
<Box grow="Yes" direction="Column" gap="200">
|
||||
<ProgressBar variant="Secondary" size="300" min={0} max={totalBytes} value={sentBytes} />
|
||||
<Box alignItems="Center" justifyContent="SpaceBetween">
|
||||
<Badge variant="Secondary" fill="Solid" radii="Pill">
|
||||
|
|
@ -49,6 +54,24 @@ export function UploadCardProgress({ sentBytes, totalBytes }: UploadCardProgress
|
|||
);
|
||||
}
|
||||
|
||||
export function CompactUploadCardProgress({ sentBytes, totalBytes }: UploadCardProgressProps) {
|
||||
return (
|
||||
<Box grow="Yes" gap="200" alignItems="Center">
|
||||
<Badge variant="Secondary" fill="Solid" radii="Pill">
|
||||
<Text size="L400">{`${Math.round(percent(0, totalBytes, sentBytes))}%`}</Text>
|
||||
</Badge>
|
||||
<Box grow="Yes" direction="Column">
|
||||
<ProgressBar variant="Secondary" size="300" min={0} max={totalBytes} value={sentBytes} />
|
||||
</Box>
|
||||
<Badge variant="Secondary" fill="Soft" radii="Pill">
|
||||
<Text size="L400">
|
||||
{bytesToSize(sentBytes)} / {bytesToSize(totalBytes)}
|
||||
</Text>
|
||||
</Badge>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type UploadCardErrorProps = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,30 +1,26 @@
|
|||
import React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import { Chip, Icon, IconButton, Icons, Text, color } from 'folds';
|
||||
import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard';
|
||||
import { TUploadAtom, UploadStatus, useBindUploadAtom } from '../../state/upload';
|
||||
import { TUploadAtom, UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { TUploadContent } from '../../utils/matrix';
|
||||
import { getFileTypeIcon } from '../../utils/common';
|
||||
|
||||
type UploadCardRendererProps = {
|
||||
file: TUploadContent;
|
||||
isEncrypted?: boolean;
|
||||
uploadAtom: TUploadAtom;
|
||||
onRemove: (file: TUploadContent) => void;
|
||||
onComplete?: (upload: UploadSuccess) => void;
|
||||
};
|
||||
export function UploadCardRenderer({
|
||||
file,
|
||||
isEncrypted,
|
||||
uploadAtom,
|
||||
onRemove,
|
||||
onComplete,
|
||||
}: UploadCardRendererProps) {
|
||||
const mx = useMatrixClient();
|
||||
const { upload, startUpload, cancelUpload } = useBindUploadAtom(
|
||||
mx,
|
||||
file,
|
||||
uploadAtom,
|
||||
isEncrypted
|
||||
);
|
||||
const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted);
|
||||
const { file } = upload;
|
||||
|
||||
if (upload.status === UploadStatus.Idle) startUpload();
|
||||
|
||||
|
|
@ -33,6 +29,12 @@ export function UploadCardRenderer({
|
|||
onRemove(file);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (upload.status === UploadStatus.Success) {
|
||||
onComplete?.(upload);
|
||||
}
|
||||
}, [upload, onComplete]);
|
||||
|
||||
return (
|
||||
<UploadCard
|
||||
radii="300"
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
export * from './UploadCard';
|
||||
export * from './UploadCardRenderer';
|
||||
export * from './CompactUploadCardRenderer';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue