1 files changed, 70 insertions, 0 deletions
diff --git a/src/containers/BsuFantomSection/LoginForm.tsx b/src/containers/BsuFantomSection/LoginForm.tsx
new file mode 100644
index 0000000..208c1f7
--- /dev/null
+++ b/src/containers/BsuFantomSection/LoginForm.tsx
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { ContentSection } from 'react-benzin';
+import { Link, TextField, Button, Grid } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { useAuth } from '../../hooks/useAuth';
+
+
+const useStyles = makeStyles(theme => ({
+  form: {
+    width: theme.spacing(50),
+    display: 'flex',
+    flexDirection: 'column',
+    '& > *': {
+      margin: theme.spacing(1)
+    }
+  },
+}));
+
+
+const LoginForm: React.FC = () => {
+  const classes = useStyles();
+  const { login } = useAuth();
+  const [username, setUsername] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+
+  const handleChangeUsername = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setUsername(event.target.value);
+  };
+
+  const handleChangePassword = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setPassword(event.target.value);
+  };
+
+  const handleSubmit = () => login(username, password);
+
+  return (
+      <Grid container direction="column" spacing={2}>
+        <Grid item xs={3}>
+          <TextField
+            onChange={handleChangeUsername}
+            variant="outlined"
+            label="Username"
+            fullWidth
+          />
+        </Grid>
+        <Grid item xs={3}>
+          <TextField
+            onChange={handleChangePassword}
+            variant="outlined"
+            label="Password"
+            type="password"
+            fullWidth
+          />
+        </Grid>
+        <Grid item xs={3}>
+          <Button
+            onClick={handleSubmit}
+            variant="contained"
+            size="large"
+            color="primary"
+            fullWidth
+          >
+            Login
+          </Button>
+        </Grid>
+      </Grid>
+  );
+};
+
+export default LoginForm;