diff --git a/package-lock.json b/package-lock.json index 3e33a68..4bb6260 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "fast-memoize": "^2.5.2", "fun-animal-names": "^0.1.1", "localforage": "^1.10.0", + "mui-markdown": "^0.5.5", "react": "^18.2.0", "react-dom": "^18.2.0", "react-markdown": "^8.0.3", @@ -16562,6 +16563,18 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/markdown-to-jsx": { + "version": "7.1.7", + "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.7.tgz", + "integrity": "sha512-VI3TyyHlGkO8uFle0IOibzpO1c1iJDcXcS/zBrQrXQQvJ2tpdwVzVZ7XdKsyRz1NdRmre4dqQkMZzUHaKIG/1w==", + "peer": true, + "engines": { + "node": ">= 10" + }, + "peerDependencies": { + "react": ">= 0.14.0" + } + }, "node_modules/mdast-util-definitions": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-5.1.1.tgz", @@ -17608,6 +17621,20 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, + "node_modules/mui-markdown": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/mui-markdown/-/mui-markdown-0.5.5.tgz", + "integrity": "sha512-oy+93K5GXfyo3q6DMTX85Wed1XKWAa/wOqwF8/0hgojlPEc64E/3nDZzTh0kqs68x+yax/bctaNo/7ckJHQBIA==", + "peerDependencies": { + "@emotion/react": "^11.7.1", + "@emotion/styled": "^11.6.0", + "@mui/material": "^5.3.0", + "markdown-to-jsx": "^7.1.6", + "prism-react-renderer": "^1.2.1", + "react": ">= 17.0.2", + "react-dom": ">= 17.0.2" + } + }, "node_modules/multiaddr": { "version": "10.0.1", "resolved": "https://registry.npmjs.org/multiaddr/-/multiaddr-10.0.1.tgz", @@ -20133,6 +20160,15 @@ "node": ">=8" } }, + "node_modules/prism-react-renderer": { + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz", + "integrity": "sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==", + "peer": true, + "peerDependencies": { + "react": ">=0.14.9" + } + }, "node_modules/prismjs": { "version": "1.29.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", @@ -36777,6 +36813,13 @@ "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.2.tgz", "integrity": "sha512-y8j3a5/DkJCmS5x4dMCQL+OR0+2EAq3DOtio1COSHsmW2BGXnNCK3v12hJt1LrUz5iZH5g0LmuYOjDdI+czghA==" }, + "markdown-to-jsx": { + "version": "7.1.7", + "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.7.tgz", + "integrity": "sha512-VI3TyyHlGkO8uFle0IOibzpO1c1iJDcXcS/zBrQrXQQvJ2tpdwVzVZ7XdKsyRz1NdRmre4dqQkMZzUHaKIG/1w==", + "peer": true, + "requires": {} + }, "mdast-util-definitions": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-5.1.1.tgz", @@ -37449,6 +37492,12 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, + "mui-markdown": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/mui-markdown/-/mui-markdown-0.5.5.tgz", + "integrity": "sha512-oy+93K5GXfyo3q6DMTX85Wed1XKWAa/wOqwF8/0hgojlPEc64E/3nDZzTh0kqs68x+yax/bctaNo/7ckJHQBIA==", + "requires": {} + }, "multiaddr": { "version": "10.0.1", "resolved": "https://registry.npmjs.org/multiaddr/-/multiaddr-10.0.1.tgz", @@ -39088,6 +39137,13 @@ } } }, + "prism-react-renderer": { + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz", + "integrity": "sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==", + "peer": true, + "requires": {} + }, "prismjs": { "version": "1.29.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", diff --git a/package.json b/package.json index c7aa4f8..a8a0fce 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "fast-memoize": "^2.5.2", "fun-animal-names": "^0.1.1", "localforage": "^1.10.0", + "mui-markdown": "^0.5.5", "react": "^18.2.0", "react-dom": "^18.2.0", "react-markdown": "^8.0.3", diff --git a/src/Bootstrap.tsx b/src/Bootstrap.tsx index 91c3fcd..a0d32f9 100644 --- a/src/Bootstrap.tsx +++ b/src/Bootstrap.tsx @@ -9,6 +9,7 @@ import { SettingsContext } from 'contexts/SettingsContext' import { routes } from 'config/routes' import { Home } from 'pages/Home' import { About } from 'pages/About' +import { Disclaimer } from 'pages/Disclaimer' import { Settings } from 'pages/Settings' import { PublicRoom } from 'pages/PublicRoom' import { UserSettings } from 'models/settings' @@ -104,6 +105,7 @@ function Bootstrap({ /> ))} } /> + } /> } diff --git a/src/components/Shell/Drawer.tsx b/src/components/Shell/Drawer.tsx index 43c062c..56b2fa4 100644 --- a/src/components/Shell/Drawer.tsx +++ b/src/components/Shell/Drawer.tsx @@ -17,6 +17,7 @@ import SettingsApplications from '@mui/icons-material/SettingsRounded' import QuestionMark from '@mui/icons-material/QuestionMark' import Brightness4Icon from '@mui/icons-material/Brightness4' import Brightness7Icon from '@mui/icons-material/Brightness7' +import ReportIcon from '@mui/icons-material/Report' import { routes } from 'config/routes' import { SettingsContext } from 'contexts/SettingsContext' @@ -29,6 +30,7 @@ export const drawerWidth = 240 export interface DrawerProps extends PropsWithChildren { isDrawerOpen: boolean onAboutLinkClick: () => void + onDisclaimerClick: () => void onDrawerClose: () => void onHomeLinkClick: () => void onSettingsLinkClick: () => void @@ -39,6 +41,7 @@ export interface DrawerProps extends PropsWithChildren { export const Drawer = ({ isDrawerOpen, onAboutLinkClick, + onDisclaimerClick, onDrawerClose, onHomeLinkClick, onSettingsLinkClick, @@ -124,6 +127,16 @@ export const Drawer = ({ + + + + + + + + + + diff --git a/src/components/Shell/Shell.tsx b/src/components/Shell/Shell.tsx index 46cc1fe..806a709 100644 --- a/src/components/Shell/Shell.tsx +++ b/src/components/Shell/Shell.tsx @@ -150,6 +150,10 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => { setIsDrawerOpen(false) } + const handleDisclaimerLinkClick = () => { + setIsDrawerOpen(false) + } + const handleSettingsLinkClick = () => { setIsDrawerOpen(false) } @@ -185,6 +189,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => { { const { setTitle } = useContext(ShellContext) @@ -15,83 +15,30 @@ export const About = () => { }, [setTitle]) return ( - - - Chitchatter is a communication tool designed to make secure and private - communication accessible to all. Please{' '} - - see the README - {' '} - for full project documentation. - - - ({ - fontSize: theme.typography.h3.fontSize, - fontWeight: theme.typography.fontWeightMedium, - mb: 2, - })} - > - User Guide - - ({ - fontSize: theme.typography.h5.fontSize, - fontWeight: theme.typography.fontWeightMedium, - mb: 1.5, - })} - > - Chat rooms - - - Public rooms can be joined by anyone with the room URL. - By default, rooms are given a random and un-guessable name. You can name - your room whatever you'd like, but keep in mind that simpler room names - are more guessable by others. For maximum security, consider using the - default room name. - - - To connect to others, share the room URL with a secure tool such as{' '} - - Burner Note - {' '} - or{' '} - - Yopass - - . You will be notified when others join the room. - - - Chat message transcripts are erased as soon as you close the page or - navigate away from the room. - - ({ - fontSize: theme.typography.h5.fontSize, - fontWeight: theme.typography.fontWeightMedium, - mb: 1.5, - })} - > - Message Authoring - - - Chat messages support{' '} - - GitHub-flavored Markdown - - . - - - Press Enter to send a message. Press{' '} - Shift + Enter to insert a line break. Message size is - limited to {messageCharacterSizeLimit.toLocaleString()} characters. - + + + {` +### User Guide + +Chitchatter is a communication tool designed to make secure and private communication accessible to all. Please [see the README](https://github.com/jeremyckahn/chitchatter/blob/develop/README.md) for full project documentation. + +#### Chat rooms + +Public rooms can be joined by **anyone** with the room URL. By default, rooms are given a random and un-guessable name. You can name your room whatever you'd like, but keep in mind that simpler room names are more guessable by others. For maximum security, consider using the default room name. + +To connect to others, share the room URL with a secure tool such as [Burner Note](https://burnernote.com/) or [Yopass](https://yopass.se/). You will be notified when others join the room. + +Chat message transcripts are erased as soon as you close the page or navigate away from the room. + +#### Message Authoring + +Chat messages support [GitHub-flavored Markdown](https://github.github.com/gfm/). + +Press \`Enter\` to send a message. Press \`Shift + Enter\` to insert a line break. Message size is limited to ${Intl.NumberFormat().format( + messageCharacterSizeLimit + )} characters. + `} + ) } diff --git a/src/pages/About/index.sass b/src/pages/About/index.sass new file mode 100644 index 0000000..4db1ba3 --- /dev/null +++ b/src/pages/About/index.sass @@ -0,0 +1,3 @@ +.About + p + @apply mb-4 diff --git a/src/pages/Disclaimer/Disclaimer.tsx b/src/pages/Disclaimer/Disclaimer.tsx new file mode 100644 index 0000000..491709d --- /dev/null +++ b/src/pages/Disclaimer/Disclaimer.tsx @@ -0,0 +1,76 @@ +import { useContext, useEffect } from 'react' +import Box from '@mui/material/Box' +import MuiMarkdown from 'mui-markdown' + +import { ShellContext } from 'contexts/ShellContext' + +import './index.sass' + +export const Disclaimer = () => { + const { setTitle } = useContext(ShellContext) + + useEffect(() => { + setTitle('Disclaimer') + }, [setTitle]) + + return ( + + + {` +### Interpretation and Definitions + +#### Interpretation + +The words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural. + +#### Definitions + +For the purposes of this Disclaimer: + +* **Project** (referred to as either "the Project", "We", "Us" or "Our" in this Disclaimer) refers to Chitchatter. +* **Service** refers to the Website. +* **You** means the individual accessing the Service, or the company, or other legal entity on behalf of which such individual is accessing or using the Service, as applicable. +* **Website** refers to Chitchatter, accessible from [https://chitchatter.im](https://chitchatter.im) + +### Disclaimer + +The information contained on the Service is for general information purposes only. + +The Project assumes no responsibility for errors or omissions in the contents of the Service. + +In no event shall the Project be liable for any special, direct, indirect, consequential, or incidental damages or any damages whatsoever, whether in an action of contract, negligence or other tort, arising out of or in connection with the use of the Service or the contents of the Service. The Project reserves the right to make additions, deletions, or modifications to the contents on the Service at any time without prior notice. + +The Project does not warrant that the Service is free of viruses or other harmful components. + +#### External Links Disclaimer + +The Service may contain links to external websites that are not provided or maintained by or in any way affiliated with the Project. + +Please note that the Project does not guarantee the accuracy, relevance, timeliness, or completeness of any information on these external websites. + +#### Errors and Omissions Disclaimer + +The information given by the Service is for general guidance on matters of interest only. Even if the Project takes every precaution to insure that the content of the Service is both current and accurate, errors can occur. Plus, given the changing nature of laws, rules and regulations, there may be delays, omissions or inaccuracies in the information contained on the Service. + +The Project is not responsible for any errors or omissions, or for the results obtained from the use of this information. + +#### Views Expressed Disclaimer + +The Service may contain views and opinions which are those of the authors and do not necessarily reflect the official policy or position of any other author, agency, organization, employer or company, including the Project. + +Messages sent by users are their sole responsibility and the users will take full responsibility, liability and blame for any libel or litigation that results from something written in or as a direct result of something written in a message. The Project is not liable for any messages sent by users. + +#### No Responsibility Disclaimer + +In no event shall the Project or its suppliers be liable for any special, incidental, indirect, or consequential damages whatsoever arising out of or in connection with your access or use or inability to access or use the Service. + +#### "Use at Your Own Risk" Disclaimer + +All information in the Service is provided "as is", with no guarantee of completeness, accuracy, timeliness or of the results obtained from the use of this information, and without warranty of any kind, express or implied, including, but not limited to warranties of performance, merchantability and fitness for a particular purpose. + +The Project will not be liable to You or anyone else for any decision made or action taken in reliance on the information given by the Service or for any consequential, special or similar damages, even if advised of the possibility of such damages. +`} + + + ) +} diff --git a/src/pages/Disclaimer/index.sass b/src/pages/Disclaimer/index.sass new file mode 100644 index 0000000..ceebda9 --- /dev/null +++ b/src/pages/Disclaimer/index.sass @@ -0,0 +1,6 @@ +.Disclaimer + ul + @apply my-4 + + p + @apply mb-4 diff --git a/src/pages/Disclaimer/index.ts b/src/pages/Disclaimer/index.ts new file mode 100644 index 0000000..9168fa0 --- /dev/null +++ b/src/pages/Disclaimer/index.ts @@ -0,0 +1 @@ +export * from './Disclaimer'