add settings page

1 files changed, 80 insertions, 0 deletions

diff --git a/src/Settings.js b/src/Settings.js
new file mode 100644
index 0000000..11167a0
--- /dev/null
+++ b/src/Settings.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import FormControl from '@material-ui/core/FormControl';
+import FormGroup from '@material-ui/core/FormGroup';
+import Grid from '@material-ui/core/Grid';
+import AddCircleIcon from '@material-ui/icons/AddCircle';
+import IconButton from '@material-ui/core/IconButton';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableRow from '@material-ui/core/TableRow';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import * as gapi from './gapi';
+import { msgType, MsgClient } from './msg';
+import { Pattern, PatternEntry } from './pattern';
+
+const styles = theme => ({
+});
+
+const STableCell = withStyles(theme => ({
+    body: {
+        fontSize: 16,
+    },
+}))(TableCell);
+
+class Settings extends React.Component {
+    state = {
+        isLoggedIn: false
+    };
+
+    constructor(props) {
+        super(props);
+        gapi.getLoggedIn().then(b => this.setState({ isLoggedIn: b }));
+    }
+
+    handleLogin = () => {
+        gapi.login().then(() => this.setState({ isLoggedIn: true }));
+    }
+
+    handleLogout = () => {
+        gapi.logout().then(() => this.setState({ isLoggedIn: false }));
+    }
+
+    render() {
+        const { classes } = this.props;
+        return (
+            <Grid container spacing={16}>
+                <Grid item md={6} xs={12}>
+                    <Typography variant="h6" component="h1" gutterBottom>
+                        General
+                    </Typography>
+                    <Table>
+                        <TableBody>
+                            <TableRow>
+                                <STableCell align='right'>Account</STableCell>
+                                <STableCell align='left'>
+                                    {
+                                        (this.state.isLoggedIn &&
+                                            <Button variant="contained" color="primary" onClick={this.handleLogout}>Logout</Button>) ||
+                                            <Button variant="contained" color="primary" onClick={this.handleLogin}>Login</Button>
+                                    }
+                                </STableCell>
+                            </TableRow>
+                        </TableBody>
+                    </Table>
+                </Grid>
+            </Grid>
+        );
+    }
+}
+
+Settings.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Settings);