From 04f1eb8ec420a518c4783a22c4ea9f5c09de01ec Mon Sep 17 00:00:00 2001
From: Ani Kalpachka <ani.kalpachka@scalefocus.com>
Date: Sat, 16 Jan 2021 15:16:17 +0200
Subject: [PATCH 1/2] add LoginPage, RegisterPage, Footer component

---
 src/common/routes.ts                          |  2 +
 src/components/layout/Layout.tsx              |  2 +
 src/components/layout/Nav.tsx                 |  8 +-
 src/components/layout/footer/Footer.tsx       | 14 ++++
 .../layout/footer/footer.module.scss          |  6 ++
 src/components/login/LoginPage.tsx            | 56 +++++++++++++
 src/components/register/RegisterPage.tsx      | 82 +++++++++++++++++++
 src/pages/login.tsx                           |  3 +
 src/pages/register.tsx                        |  3 +
 9 files changed, 173 insertions(+), 3 deletions(-)
 create mode 100644 src/components/layout/footer/Footer.tsx
 create mode 100644 src/components/layout/footer/footer.module.scss
 create mode 100644 src/components/login/LoginPage.tsx
 create mode 100644 src/components/register/RegisterPage.tsx
 create mode 100644 src/pages/login.tsx
 create mode 100644 src/pages/register.tsx

diff --git a/src/common/routes.ts b/src/common/routes.ts
index 18c2f2dea..d6d9272eb 100644
--- a/src/common/routes.ts
+++ b/src/common/routes.ts
@@ -1,4 +1,6 @@
 export const routes = {
   index: '/',
   about: '/about',
+  login: '/login',
+  register: '/register',
 }
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 59c220c73..9cd6a34c3 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import Footer from './footer/Footer'
 import { Box, Container, Typography } from '@material-ui/core'
 
 import Nav from 'components/layout/Nav'
@@ -20,6 +21,7 @@ export default function Layout({ title, children }: LayoutProps) {
         </Typography>
         {children}
       </Box>
+      <Footer />
     </Container>
   )
 }
diff --git a/src/components/layout/Nav.tsx b/src/components/layout/Nav.tsx
index ed7b37002..1b38a032f 100644
--- a/src/components/layout/Nav.tsx
+++ b/src/components/layout/Nav.tsx
@@ -8,10 +8,12 @@ export default function Nav() {
       <ButtonGroup
         disableRipple
         variant="text"
-        color="secondary"
+        color="primary"
         aria-label="text primary button group">
-        <LinkButton href={routes.index}>One</LinkButton>
-        <LinkButton href={routes.about}>Two</LinkButton>
+        <LinkButton href={routes.index}>Index</LinkButton>
+        <LinkButton href={routes.about}>About</LinkButton>
+        <LinkButton href={routes.login}>Login</LinkButton>
+        <LinkButton href={routes.register}>Register</LinkButton>
       </ButtonGroup>
     </Box>
   )
diff --git a/src/components/layout/footer/Footer.tsx b/src/components/layout/footer/Footer.tsx
new file mode 100644
index 000000000..24311b64d
--- /dev/null
+++ b/src/components/layout/footer/Footer.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Typography } from '@material-ui/core'
+
+import styles from './footer.module.scss'
+
+const Footer = () => (
+  <footer className={styles.footer}>
+    <Typography color="primary" align="center">
+      Footer Component
+    </Typography>
+  </footer>
+)
+
+export default Footer
diff --git a/src/components/layout/footer/footer.module.scss b/src/components/layout/footer/footer.module.scss
new file mode 100644
index 000000000..8af04db77
--- /dev/null
+++ b/src/components/layout/footer/footer.module.scss
@@ -0,0 +1,6 @@
+.footer {
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  width: 100%;
+}
diff --git a/src/components/login/LoginPage.tsx b/src/components/login/LoginPage.tsx
new file mode 100644
index 000000000..10c7b07b5
--- /dev/null
+++ b/src/components/login/LoginPage.tsx
@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+import Layout from 'components/layout/Layout'
+import { Typography, Container, Grid, TextField, Button } from '@material-ui/core'
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+
+  function handleSubmit(event) {
+    event.preventDefault()
+  }
+
+  return (
+    <Layout>
+      <Container maxWidth="xs">
+        <Typography align="center" variant="h5" color="primary" paragraph={true}>
+          Login
+        </Typography>
+        <form onSubmit={handleSubmit}>
+          <Grid container spacing={3}>
+            <Grid item xs={12}>
+              <TextField
+                fullWidth
+                label="Email"
+                name="email"
+                type="text"
+                size="small"
+                variant="outlined"
+                autoFocus
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <TextField
+                fullWidth
+                label="Password"
+                name="password"
+                type="password"
+                size="small"
+                variant="outlined"
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <Button fullWidth type="submit" color="primary" variant="contained">
+                Log in
+              </Button>
+            </Grid>
+          </Grid>
+        </form>
+      </Container>
+    </Layout>
+  )
+}
diff --git a/src/components/register/RegisterPage.tsx b/src/components/register/RegisterPage.tsx
new file mode 100644
index 000000000..02f3cfc9d
--- /dev/null
+++ b/src/components/register/RegisterPage.tsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react'
+import Layout from 'components/layout/Layout'
+import { Typography, Container, Grid, TextField, Button } from '@material-ui/core'
+
+export default function RegisterPage() {
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+
+  function handleSubmit(event) {
+    event.preventDefault()
+  }
+
+  return (
+    <Layout>
+      <Container maxWidth="xs">
+        <Typography align="center" variant="h5" color="primary" paragraph={true}>
+          Register
+        </Typography>
+        <form onSubmit={handleSubmit}>
+          <Grid container spacing={3}>
+            <Grid item xs={12} sm={6}>
+              <TextField
+                fullWidth
+                label="First Name"
+                name="firstName"
+                type="text"
+                size="small"
+                variant="outlined"
+                autoFocus
+                value={firstName}
+                onChange={(event) => setFirstName(event.target.value)}
+              />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <TextField
+                fullWidth
+                label="Last Name"
+                name="lastName"
+                type="text"
+                size="small"
+                variant="outlined"
+                value={lastName}
+                onChange={(event) => setLastName(event.target.value)}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <TextField
+                fullWidth
+                label="Email"
+                name="email"
+                type="text"
+                size="small"
+                variant="outlined"
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <TextField
+                fullWidth
+                label="Password"
+                name="password"
+                type="password"
+                size="small"
+                variant="outlined"
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <Button fullWidth type="submit" color="primary" variant="contained">
+                Register
+              </Button>
+            </Grid>
+          </Grid>
+        </form>
+      </Container>
+    </Layout>
+  )
+}
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
new file mode 100644
index 000000000..3356225d9
--- /dev/null
+++ b/src/pages/login.tsx
@@ -0,0 +1,3 @@
+import LoginPage from 'components/login/LoginPage'
+
+export default LoginPage
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
new file mode 100644
index 000000000..50a8ee02b
--- /dev/null
+++ b/src/pages/register.tsx
@@ -0,0 +1,3 @@
+import RegisterPage from 'components/register/RegisterPage'
+
+export default RegisterPage

From 199126800bd86c7ef98cd2ddc8864d45f8b6f97d Mon Sep 17 00:00:00 2001
From: Ani Kalpachka <ani.kalpachka@scalefocus.com>
Date: Sat, 16 Jan 2021 16:03:54 +0200
Subject: [PATCH 2/2] build fixes

---
 src/components/login/LoginPage.tsx       | 2 +-
 src/components/register/RegisterPage.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/login/LoginPage.tsx b/src/components/login/LoginPage.tsx
index 10c7b07b5..f5d3a5976 100644
--- a/src/components/login/LoginPage.tsx
+++ b/src/components/login/LoginPage.tsx
@@ -6,7 +6,7 @@ export default function LoginPage() {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
 
-  function handleSubmit(event) {
+  function handleSubmit(event: React.FormEvent) {
     event.preventDefault()
   }
 
diff --git a/src/components/register/RegisterPage.tsx b/src/components/register/RegisterPage.tsx
index 02f3cfc9d..fc9e3e84e 100644
--- a/src/components/register/RegisterPage.tsx
+++ b/src/components/register/RegisterPage.tsx
@@ -8,7 +8,7 @@ export default function RegisterPage() {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
 
-  function handleSubmit(event) {
+  function handleSubmit(event: React.FormEvent) {
     event.preventDefault()
   }