bbgo_origin/frontend/pages/connect/index.js

58 lines
1.5 KiB
JavaScript
Raw Normal View History

2022-04-13 15:55:25 +00:00
import React, {useEffect, useState} from 'react';
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';
2022-04-13 16:53:01 +00:00
import {QRCodeSVG} from 'qrcode.react';
2022-04-14 02:19:22 +00:00
import {queryOutboundIP} from '../../api/bbgo';
2022-04-13 15:55:25 +00:00
const useStyles = makeStyles((theme) => ({
paper: {
margin: theme.spacing(2),
padding: theme.spacing(2),
},
dataGridContainer: {
display: 'flex',
2022-04-13 16:53:01 +00:00
textAlign: 'center',
alignItems: 'center',
alignContent: 'center',
height: 320,
2022-04-13 15:55:25 +00:00
}
}));
2022-04-13 16:53:01 +00:00
function fetchConnectUrl(cb) {
2022-04-14 02:19:22 +00:00
return queryOutboundIP((outboundIP) => {
cb(window.location.protocol + "//" + outboundIP + ":" + window.location.port)
})
2022-04-13 16:53:01 +00:00
}
export default function Connect() {
2022-04-13 15:55:25 +00:00
const classes = useStyles();
2022-04-13 16:53:01 +00:00
const [connectUrl, setConnectUrl] = useState([])
2022-04-13 15:55:25 +00:00
useEffect(() => {
2022-04-13 16:53:01 +00:00
fetchConnectUrl(function (url) {
setConnectUrl(url)
})
2022-04-13 15:55:25 +00:00
}, [])
return (
2022-04-13 16:53:01 +00:00
<PlainLayout title={"Connect"}>
2022-04-13 15:55:25 +00:00
<Paper className={classes.paper}>
<Typography variant="h4" gutterBottom>
Sign In Using QR Codes
</Typography>
<div className={classes.dataGridContainer}>
2022-04-13 16:53:01 +00:00
<QRCodeSVG
size={160}
style={{flexGrow: 1}}
value={connectUrl}/>
2022-04-13 15:55:25 +00:00
</div>
</Paper>
</PlainLayout>
);
}