refactor: LoginSection -> LoginForm

4 files changed, 100 insertions, 78 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;
diff --git a/src/containers/LoginSection/LoginSection.tsx b/src/containers/LoginSection/LoginSection.tsx
deleted file mode 100644
index 812afd8..0000000
--- a/src/containers/LoginSection/LoginSection.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React, { useState } from 'react';
-import { ContentSection } from 'react-benzin';
-import { Link, TextField, Button } 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 LoginSection: React.FC = () => {
-  const classes = useStyles();
-  const { login, isAuthenticated } = 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 isAuthenticated ? null : (
-    <ContentSection sectionName="Login" level={1}>
-      Log in using your <Link href="https://edufpmi.bsu.by">EDUFPMI</Link> credentials
-      <p className={classes.form}>
-        <TextField
-          onChange={handleChangeUsername}
-          variant="outlined"
-          label="Username"
-        />
-        <TextField
-          onChange={handleChangePassword}
-          variant="outlined"
-          label="Password"
-          type="password"
-        />
-        <Button
-          onClick={handleSubmit}
-          variant="contained"
-          size="large"
-          color="primary"
-        >
-          Login
-        </Button>
-      </p>
-    </ContentSection>
-  );
-};
-
-export default LoginSection;
diff --git a/src/index.tsx b/src/index.tsx
index ddde049..5155ab7 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,7 +4,6 @@ import { Benzin, ContentSection } from 'react-benzin';
 import { Paper } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import BsuFantomSection from './containers/BsuFantomSection/BsuFantomSection';
-import LoginSection from './containers/LoginSection/LoginSection';
 import { AuthProvider } from './hooks/useAuth';
 
 const useStyles = makeStyles(theme => ({
@@ -24,7 +23,6 @@ const App: React.FC = () => {
       <Benzin>
         <Paper className={classes.root}>
           <ContentSection sectionName="famcs-kit">
-            <LoginSection />
             <BsuFantomSection />
           </ContentSection>
         </Paper>