refactor: LoginSection -> LoginForm

2 files changed, 100 insertions, 12 deletions

diff --git a/src/containers/BsuFantomSection/BsuFantomSection.tsx b/src/containers/BsuFantomSection/BsuFantomSection.tsx
index 496c210..33f39b2 100644
--- a/src/containers/BsuFantomSection/BsuFantomSection.tsx
+++ b/src/containers/BsuFantomSection/BsuFantomSection.tsx
@@ -4,28 +4,46 @@ import { Grid, Link } from '@material-ui/core';
 import EventCard from '../../components/EventCard/EventCard';
 import { useEvents } from '../../hooks/APIClient';
 import EventForm from './EventForm';
+import LoginForm from './LoginForm';
+import { useAuth } from '../../hooks/useAuth';
 
 
 const BsuFantomSection: React.FC = () => {
   const { data: events, mutate } = useEvents();
+  const { isAuthenticated } = useAuth();
 
   return (
     <ContentSection sectionName="bsu-fantom" level={1}>
       <p>
         Schedule your offline <Link href="https://edufpmi.bsu.by">EDUFPMI</Link> conference attendance
       </p>
-      <ContentSection sectionName="Schedule an event" level={2}>
-        <EventForm mutate={mutate} />
-      </ContentSection>
-      <ContentSection sectionName="Upcoming events" level={2}>
-        <Grid container spacing={2}>
-          {events?.map((event, index) => (
-            <Grid item xs={4}>
-              <EventCard event={event} mutate={mutate} />
-            </Grid>
-          ))}
-        </Grid>
-      </ContentSection>
+      {
+        isAuthenticated
+        ? (
+          <>
+            <ContentSection sectionName="Schedule an event" level={2}>
+              <EventForm mutate={mutate} />
+            </ContentSection>
+            <ContentSection sectionName="Upcoming events" level={2}>
+              <Grid container spacing={2}>
+                {events?.map((event, index) => (
+                  <Grid item xs={4}>
+                    <EventCard event={event} mutate={mutate} />
+                  </Grid>
+                ))}
+              </Grid>
+            </ContentSection>
+          </>
+        ) : (
+          <ContentSection sectionName="Login" level={2}>
+            <p>
+              In order to use <b>bsu-fantom</b> you must log in
+              using your <Link href="https://edufpmi.bsu.by">EDUFPMI</Link> credentials:
+            </p>
+            <LoginForm />
+          </ContentSection>
+        )
+      }
     </ContentSection>
   );
 };
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;