add web qrcode page

frontend/layouts/PlainLayout.js

@@ -22,14 +22,13 @@ const useStyles = makeStyles((theme) => ({
     appBarSpacer: theme.mixins.toolbar,
 }));
 
-export default function PlainLayout({children}) {
+export default function PlainLayout(props) {
     const classes = useStyles();
-
     return <div className={classes.root}>
         <AppBar className={classes.appBar}>
             <Toolbar>
                 <Typography variant="h6" className={classes.title}>
-                    BBGO Setup Wizard
+                    { props && props.title ? props.title : "BBGO Setup Wizard" }
                 </Typography>
             </Toolbar>
         </AppBar>
@@ -37,7 +36,7 @@ export default function PlainLayout({children}) {
         <main className={classes.content}>
             <div className={classes.appBarSpacer}/>
             <Container>
-                {children}
+                {props.children}
             </Container>
         </main>
     </div>;

frontend/pages/connect/index.js

@@ -4,6 +4,7 @@ import {makeStyles} from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
 import PlainLayout from '../../layouts/PlainLayout';
+import {QRCodeSVG} from 'qrcode.react';
 
 const useStyles = makeStyles((theme) => ({
     paper: {
@@ -12,28 +13,39 @@ const useStyles = makeStyles((theme) => ({
     },
     dataGridContainer: {
         display: 'flex',
-        height: 'calc(100vh - 64px - 120px)',
+        textAlign: 'center',
+        alignItems: 'center',
+        alignContent: 'center',
+        height: 320,
     }
 }));
 
-export default function Orders() {
+function fetchConnectUrl(cb) {
+    cb(window.location.protocol + "//" + window.location.host)
+}
+
+export default function Connect() {
     const classes = useStyles();
 
-    const [orders, setOrders] = useState([])
+    const [connectUrl, setConnectUrl] = useState([])
 
     useEffect(() => {
+        fetchConnectUrl(function (url) {
+            setConnectUrl(url)
+        })
     }, [])
 
     return (
-        <PlainLayout>
+        <PlainLayout title={"Connect"}>
             <Paper className={classes.paper}>
                 <Typography variant="h4" gutterBottom>
                     Sign In Using QR Codes
                 </Typography>
                 <div className={classes.dataGridContainer}>
-                    <div style={{flexGrow: 1}}>
-                        QRCode
-                    </div>
+                    <QRCodeSVG
+                        size={160}
+                        style={{flexGrow: 1}}
+                        value={connectUrl}/>
                 </div>
             </Paper>
         </PlainLayout>