diff --git a/screenshots/get-connected-ios.png b/screenshots/get-connected-ios.png index 8563bdf6..91a4ef97 100644 Binary files a/screenshots/get-connected-ios.png and b/screenshots/get-connected-ios.png differ diff --git a/screenshots/get-connected-windows.png b/screenshots/get-connected-windows.png index d611708d..80754b20 100644 Binary files a/screenshots/get-connected-windows.png and b/screenshots/get-connected-windows.png differ diff --git a/website/public/index.html b/website/public/index.html index c240d2ca..e8fe1b31 100644 --- a/website/public/index.html +++ b/website/public/index.html @@ -3,7 +3,7 @@ - + ({ + hidden: { + display: 'none', + }, + button: { + margin: theme.spacing(1), + }, + fabButton: { + position: 'absolute', + margin: '0 auto', + left: 0, + right: 0, + }, + paper: { + padding: theme.spacing(2), + }, +})); + +export default function AddDevice() { + const classes = useStyles(); + const [formOpen, setFormOpen] = React.useState(false); + const [dialogOpen, setDialogOpen] = React.useState(false); + const [error, setError] = React.useState(''); + const [name, setName] = React.useState(''); + const [qrCodeUri, setQrCodeUri] = React.useState(''); + const [configFileUri, setConfigFileUri] = React.useState(''); + + var closeForm = () => { + setFormOpen(false); + setName(''); }; - onAdd = async (event: React.FormEvent) => { + var addDevice = async (event: React.FormEvent) => { event.preventDefault(); + const keypair = box_keyPair(); const b64PublicKey = window.btoa(String.fromCharCode(...(new Uint8Array(keypair.publicKey) as any))); const b64PrivateKey = window.btoa(String.fromCharCode(...(new Uint8Array(keypair.secretKey) as any))); @@ -36,12 +66,12 @@ class AddDevice extends React.Component { const res = await fetch('/api/devices', { method: 'POST', body: JSON.stringify({ - name: this.state.name, + name: name, publicKey: b64PublicKey, }), }); if (res.status >= 400) { - this.setState({ error: await res.text() }); + setError(await res.text()); return; } const { device } = (await res.json()) as { device: IDevice }; @@ -60,49 +90,78 @@ class AddDevice extends React.Component { Endpoint = ${device.endpoint || `${window.location.hostname}:51820`} `; - this.setState({ - open: true, - qrCodeUri: await qrcode.toDataURL(configFile), - configFileUri: URL.createObjectURL(new Blob([configFile])), - }); - }; + setQrCodeUri(await qrcode.toDataURL(configFile)); + setConfigFileUri(URL.createObjectURL(new Blob([configFile]))); - render() { - return ( -
- - - - this.setState({ name: event.currentTarget.value })} - style={{ marginTop: -20, marginBottom: 8 }} - fullWidth - /> - {this.state.error !== '' && {this.state.error}} - - - - - Get Connected - - - - - - - - - -
- ); - } -} + closeForm(); + setDialogOpen(true); + }; -export default view(AddDevice); + return ( + + + + + + + + + + + Get Connected + + + + + + + + + ); +} \ No newline at end of file diff --git a/website/src/components/Devices.tsx b/website/src/components/Devices.tsx index d50e4dc3..edc275e6 100644 --- a/website/src/components/Devices.tsx +++ b/website/src/components/Devices.tsx @@ -18,15 +18,9 @@ class Devices extends React.Component { render() { return ( - - -

Your Devices

- - - - + {AppState.devices.map((device, i) => ( - + ))} diff --git a/website/src/components/Navigation.tsx b/website/src/components/Navigation.tsx new file mode 100644 index 00000000..b27b1237 --- /dev/null +++ b/website/src/components/Navigation.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; + +const useStyles = makeStyles(theme => ({ + title: { + flexGrow: 1, + }, +})); + +export default function Navigation() { + const classes = useStyles(); + + return ( + + + + Your Devices + + + + ); +} \ No newline at end of file diff --git a/website/src/index.css b/website/src/index.css deleted file mode 100644 index ec2585e8..00000000 --- a/website/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/website/src/index.tsx b/website/src/index.tsx index e5b0687b..6e13f307 100644 --- a/website/src/index.tsx +++ b/website/src/index.tsx @@ -1,12 +1,24 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import Box from '@material-ui/core/Box'; +import AddDevice from './components/AddDevice'; import Devices from './components/Devices'; +import Navigation from './components/Navigation'; import { view } from 'react-easy-state'; import 'typeface-roboto'; -import './index.css'; const App = view(() => { - return ; + return ( + + + + + + + + + ); }); ReactDOM.render(, document.getElementById('root'));