-
-
Notifications
You must be signed in to change notification settings - Fork 181
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* refactor(bootstrap): add BootstrapShim * feat(security): [#209] generate public/private keys * refactor(encryption): move encryption utils to a service * feat(encryption): [wip] implement convertCryptoKeyToString * fix(user-settings): serialize crypto keys to strings * feat(user-settings): deserialize user settings from IndexedDB * feat(user-settings): upgrade persisted settings on boot * feat(user-settings): automatically migrate persisted user settings * refactor(encryption): simplify CryptoKey stringification * refactor(encryption): DRY up EncryptionService * feat(verification): send public key to new peers * refactor(encryption): use class instance * refactor(serialization): use class instance * refactor(verification): [wip] create usePeerVerification hook * feat(verification): encrypt verification token * feat(verification): send encrypted token to peer * feat(verification): verify peer * refactor(verification): use enum for verification state * feat(verification): expire verification requests * fix(updatePeer): update with fresh state data * feat(verification): display verification state * refactor(usePeerVerification): store verification timer in Peer * feat(verification): present tooltips explaining verification state * feat(ui): show full page loading indicator * feat(init): present bootup failure reasons * refactor(init): move init to its own file * feat(verification): show errors upon verification failure * refactor(verification): move workaround to usePeerVerification * feat(verification): present peer public keys * refactor(verification): move peer public key rendering to its own component * refactor(verification): only pass publicKey into renderer * feat(verification): show user's own public key * refactor(naming): rename Username to UserInfo * refactor(loading): encapsulate height styling * feat(verification): improve user messaging * refactor(style): improve formatting and variable names * feat(verification): add user info tooltip * docs(verification): explain verification
- Loading branch information
1 parent
c19bbbe
commit 6cbfaac
Showing
38 changed files
with
1,000 additions
and
216 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
import { useEffect, useState } from 'react' | ||
import Box from '@mui/material/Box' | ||
import Typography from '@mui/material/Typography' | ||
import { v4 as uuid } from 'uuid' | ||
|
||
import { encryptionService } from 'services/Encryption' | ||
import { | ||
EnvironmentUnsupportedDialog, | ||
isEnvironmentSupported, | ||
} from 'components/Shell/EnvironmentUnsupportedDialog' | ||
import { WholePageLoading } from 'components/Loading/Loading' | ||
import { ColorMode, UserSettings } from 'models/settings' | ||
|
||
import { Bootstrap, BootstrapProps } from './Bootstrap' | ||
|
||
export interface InitProps extends Omit<BootstrapProps, 'initialUserSettings'> { | ||
getUuid?: typeof uuid | ||
} | ||
|
||
// NOTE: This is meant to be a thin layer around the Bootstrap component that | ||
// only handles asynchronous creation of the public/private keys that Bootstrap | ||
// requires. | ||
const Init = ({ getUuid = uuid, ...props }: InitProps) => { | ||
const [userSettings, setUserSettings] = useState<UserSettings | null>(null) | ||
const [errorMessage, setErrorMessage] = useState<string | null>(null) | ||
|
||
useEffect(() => { | ||
;(async () => { | ||
if (userSettings !== null) return | ||
|
||
try { | ||
const { publicKey, privateKey } = | ||
await encryptionService.generateKeyPair() | ||
|
||
setUserSettings({ | ||
userId: getUuid(), | ||
customUsername: '', | ||
colorMode: ColorMode.DARK, | ||
playSoundOnNewMessage: true, | ||
showNotificationOnNewMessage: true, | ||
showActiveTypingStatus: true, | ||
publicKey, | ||
privateKey, | ||
}) | ||
} catch (e) { | ||
console.error(e) | ||
setErrorMessage( | ||
'Chitchatter was unable to boot up. Please check the browser console.' | ||
) | ||
} | ||
})() | ||
}, [getUuid, userSettings]) | ||
|
||
if (!isEnvironmentSupported) { | ||
return <EnvironmentUnsupportedDialog /> | ||
} | ||
|
||
if (errorMessage) { | ||
return ( | ||
<Box | ||
sx={{ | ||
display: 'flex', | ||
height: '100vh', | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
}} | ||
> | ||
<Typography>{errorMessage}</Typography> | ||
</Box> | ||
) | ||
} | ||
|
||
if (userSettings === null) { | ||
return <WholePageLoading /> | ||
} | ||
|
||
return <Bootstrap {...props} initialUserSettings={userSettings} /> | ||
} | ||
|
||
export default Init |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import Box, { BoxProps } from '@mui/material/Box' | ||
import CircularProgress from '@mui/material/CircularProgress' | ||
|
||
interface WholePageLoadingProps extends BoxProps {} | ||
|
||
export const WholePageLoading = ({ | ||
sx = [], | ||
...props | ||
}: WholePageLoadingProps) => { | ||
return ( | ||
<Box | ||
sx={[ | ||
{ | ||
display: 'flex', | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
height: '100vh', | ||
}, | ||
...(Array.isArray(sx) ? sx : [sx]), | ||
]} | ||
{...props} | ||
> | ||
<CircularProgress /> | ||
</Box> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './Loading' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { useEffect, useState } from 'react' | ||
import { materialDark } from 'react-syntax-highlighter/dist/esm/styles/prism' | ||
import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter' | ||
import { CopyableBlock } from 'components/CopyableBlock/CopyableBlock' | ||
import { encryptionService } from 'services/Encryption/Encryption' | ||
|
||
interface PeerPublicKeyProps { | ||
publicKey: CryptoKey | ||
} | ||
|
||
export const PublicKey = ({ publicKey }: PeerPublicKeyProps) => { | ||
const [publicKeyString, setPublicKeyString] = useState('') | ||
|
||
useEffect(() => { | ||
;(async () => { | ||
setPublicKeyString(await encryptionService.stringifyCryptoKey(publicKey)) | ||
})() | ||
}, [publicKey]) | ||
|
||
return ( | ||
<CopyableBlock> | ||
<SyntaxHighlighter | ||
language="plaintext" | ||
style={materialDark} | ||
PreTag="div" | ||
lineProps={{ | ||
style: { | ||
wordBreak: 'break-all', | ||
whiteSpace: 'pre-wrap', | ||
}, | ||
}} | ||
wrapLines={true} | ||
> | ||
{publicKeyString} | ||
</SyntaxHighlighter> | ||
</CopyableBlock> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './PublicKey' |
Oops, something went wrong.
6cbfaac
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
chitchatter – ./
chitchatter-jeremyckahn.vercel.app
chitchatter-git-main-jeremyckahn.vercel.app
chitchatter.vercel.app