Add Login Page and auth for http requests

NCTUCSUnion · Sep 19, 2020 · 4311faf · 4311faf
1 parent 540b265
commit 4311faf
Show file tree

Hide file tree

Showing 5 changed files with 882 additions and 231 deletions.
diff --git a/src/Component/NavBar.js b/src/Component/NavBar.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import classNames from 'classnames'
-import {Link} from 'react-router-dom'
-import {connect} from 'react-redux'
-import {filterToggle} from '../Redux'
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+import { filterToggle } from '../Redux'
 import { withStyles } from '@material-ui/core/styles'
-import {withRouter} from 'react-router'
+import { withRouter } from 'react-router'
 import {
   AppBar,
   Toolbar,
@@ -18,19 +18,23 @@ import {
   ListItemText,
   FormControlLabel,
   Switch,
-  Button,
-  Tooltip
+  Tooltip,
+  Button
 } from '@material-ui/core'
 // import MenuIcon from '@material-ui/icons/Menu'
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'
 import DoneIcon from '@material-ui/icons/Done'
+import axios from 'axios'
+
+axios.defaults.withCredentials = true
+const URL = 'http://localhost:8080'
 
 const drawerWidth = 240
 
-const styles =(theme)=>({
+const styles = (theme) => ({
   flex: {
     flexGrow: 1,
-    userSelect:'none'
+    userSelect: 'none'
   },
   appBar: {
     transition: theme.transitions.create(['margin', 'width'], {
@@ -39,14 +43,14 @@ const styles =(theme)=>({
     }),
   },
   appBarShift: {
-      width: `calc(100% - ${drawerWidth}px)`,
-      transition: theme.transitions.create(['margin', 'width'], {
-        easing: theme.transitions.easing.easeOut,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
+    width: `calc(100% - ${drawerWidth}px)`,
+    transition: theme.transitions.create(['margin', 'width'], {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
   },
   'appBarShift-left': {
-      marginLeft: drawerWidth,
+    marginLeft: drawerWidth,
   },
   menuButton: {
     marginLeft: -12,
@@ -73,56 +77,63 @@ const menu = (
       <ListItemIcon>
         <DoneIcon />
       </ListItemIcon>
-      <ListItemText primary="已繳系學會費"/>
+      <ListItemText primary="已繳系學會費" />
     </ListItem>
   </Link>
 )
 
 class NavBar extends React.Component {
-  constructor(props){
+  constructor(props) {
     super(props)
     this.state = {
       open: false
     }
     this.drawerOpen = this.drawerOpen.bind(this)
     this.drawerClose = this.drawerClose.bind(this)
   }
-  drawerOpen(){
+  drawerOpen() {
     this.props.check(true)
-    this.setState({open:true})
+    this.setState({ open: true })
   }
-  drawerClose(){
+  drawerClose() {
     this.props.check(false)
-    this.setState({open:false})
+    this.setState({ open: false })
+  }
+  logout() {
+    axios.post(`${URL}/_api/fee_logout`, {}).then(
+      res => {
+        window.location.href = '/login'
+      }
+    )
   }
   render() {
     const { classes } = this.props
     const LDrawer = (
-    <Drawer
-      variant="persistent"
-      open={this.state.open}
-      classes={{
+      <Drawer
+        variant="persistent"
+        open={this.state.open}
+        classes={{
           paper: classes.drawerPaper,
-      }}
-    >
-      <div className={classes.drawerHeader}>
-        <IconButton onClick={this.drawerClose}>
-          <ChevronLeftIcon />
-        </IconButton>
-      </div>
-      <Divider />
-      <List>
-        {menu}
-      </List>
-    </Drawer>)
+        }}
+      >
+        <div className={classes.drawerHeader}>
+          <IconButton onClick={this.drawerClose}>
+            <ChevronLeftIcon />
+          </IconButton>
+        </div>
+        <Divider />
+        <List>
+          {menu}
+        </List>
+      </Drawer>)
 
     return (
       <React.Fragment>
         <AppBar position="sticky"
-        className={classNames(classes.appBar, {
-              [classes.appBarShift]: this.state.open,
-              [classes['appBarShift-left']]: this.state.open,
-            })}>
+          className={classNames(classes.appBar, {
+            [classes.appBarShift]: this.state.open,
+            [classes['appBarShift-left']]: this.state.open,
+          })}>
           <Toolbar>
             {/* <IconButton 
               className={classNames(classes.menuButton, this.state.open && classes.hide)} 
@@ -134,7 +145,7 @@ class NavBar extends React.Component {
             </Typography>
             {
               this.props.location.pathname === '/' &&
-              <Tooltip title={this.props.filter?'僅顯示已繳系學會費':'顯示全部'}>
+              <Tooltip title={this.props.filter ? '僅顯示已繳系學會費' : '顯示全部'}>
                 <FormControlLabel
                   control={
                     <Switch
@@ -148,9 +159,9 @@ class NavBar extends React.Component {
               </Tooltip>
             }
             {
-              this.props.location.pathname === '/login' &&
-              <Button color="inherit" onClick={() => (window.location.href = 'https://csunion.nctu.me/_api/oauth')}>
-                登入
+              this.props.location.pathname !== '/login' &&
+              <Button color="inherit" onClick={() => this.logout()}>
+                登出
               </Button>
             }
           </Toolbar>

diff --git a/src/Page/Login.js b/src/Page/Login.js
@@ -1,14 +1,23 @@
 import React from 'react'
 import { withStyles } from '@material-ui/core/styles'
+import {
+  InputLabel,
+  TextField,
+  Button
+} from '@material-ui/core'
+import axios from 'axios'
 
-const styles = (theme)=>({
+axios.defaults.withCredentials = true
+
+const URL = 'http://localhost:8080'
+const styles = (theme) => ({
   root: {
     flexGrow: 1,
     fontSize: '1.1em',
     fontWeight: 300
   },
   content: {
-    position:'relative',
+    position: 'relative',
     flexGrow: 1,
     padding: theme.spacing.unit * 3,
     transition: theme.transitions.create('margin', {
@@ -18,8 +27,8 @@ const styles = (theme)=>({
   },
   title: {
     position: 'absolute',
-    top:'calc( 50vh - 2em )',
-    left:'1.4em',
+    top: 'calc( 50vh - 2em )',
+    left: '1.4em',
     fontSize: '4em',
     fontWeight: '500',
     color: '#666',
@@ -30,28 +39,103 @@ const styles = (theme)=>({
   button: {
     display: 'block',
     position: 'absolute',
-    top:'52vh',
-    right:'23vw',
+    top: '52vh',
+    right: '23vw',
     fontSize: '1.1em',
     padding: '1% 3%'
+  },
+  container: {
+    margin: '0 auto',
+    width: 'fit-content',
+    backgroundColor: '#f5f5f5',
+    boxShadow: '1px 1px 2px #999999',
+    padding: '20px',
+    borderRadius: '.7rem',
+  },
+  column: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    rowGap: '10px'
+  },
+  row: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    columnGap: '5px'
   }
 })
 
-const Login = (props)=>{
-  const {classes} = props
-  return(
-    <div className={classes.root}>
-      <div className={classes.content}>
-          {/* <div className={classes.title}>
-              NCTU CS Union
+class Login extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      username: '',
+      password: ''
+    }
+  }
+
+  tryLogin() {
+    axios.post(`${URL}/_api/fee_auth`, {
+      username: this.state.username,
+      password: this.state.password
+    }).then(
+      res => {
+        if (res.data)
+          window.location.href = '/'
+        else
+          window.location.reload()
+      }
+    )
+  }
+
+  handleUsernameChange(evt) {
+    const password = this.state.password
+    this.setState({
+      username: evt.target.value,
+      password: password
+    })
+  }
+
+  handlePasswordChange(evt) {
+    const username = this.state.username
+    this.setState({
+      username: username,
+      password: evt.target.value
+    })
+  }
+
+  render() {
+    axios.post(`${URL}/_api/fee_check`, {}).then(
+      res => {
+        if (res.data)
+          window.location.href = '/'
+      }
+    )
+    const { classes } = this.props
+    return (
+      <div className={classes.root}>
+        <div className={classes.content}>
+          <div className={classes.container}>
+            <div className={classes.column}>
+              <div className={classes.row}>
+                <InputLabel htmlFor="username">Username</InputLabel>
+                <TextField id="username" name="username" aria-describedby="Username" onChange={evt => this.handleUsernameChange(evt)} />
+              </div>
+              <div className={classes.row}>
+                <InputLabel htmlFor="password">Password</InputLabel>
+                <TextField id="password" name="password" aria-describedby="Password" type="password" onChange={evt => this.handlePasswordChange(evt)} />
+              </div>
+              <Button type="button" variant="outlined" color="primary" onClick={() => this.tryLogin()}>
+                登入
+              </Button>
+            </div>
           </div>
-        <Button variant="contained" size="large" color="primary" className={classes.button}>
-          交大單一入口登入
-        </Button> */}
-        登入已查看繳費情形...
+        </div>
       </div>
-    </div>
-  )
+    )
+  }
 }
 
 export default withStyles(styles)(Login)