From fc2b1a95e61dcc1bacb624f94b5b77374eb65faa Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 15 Nov 2020 04:42:11 +0300
Subject: refactor: LoginSection -> LoginForm

---
 src/containers/BsuFantomSection/LoginForm.tsx | 70 +++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 src/containers/BsuFantomSection/LoginForm.tsx

(limited to 'src/containers/BsuFantomSection/LoginForm.tsx')

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;
-- 
cgit v1.2.3