Merge pull request podkrepi-bg#12 from daritelska-platforma/create-co…

…mmon-components

Added LoginPage, RegisterPage and Footer component

src/common/routes.ts

@@ -1,4 +1,6 @@
 export const routes = {
   index: '/',
   about: '/about',
+  login: '/login',
+  register: '/register',
 }

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>
   )
 }

src/components/layout/Nav.tsx

@@ -11,10 +11,12 @@ export default function Nav() {
       <ButtonGroup
         disableRipple
         variant="text"
-        color="secondary"
+        color="primary"
         aria-label="text primary button group">
         <LinkButton href={routes.index}>{t('ONE')}</LinkButton>
         <LinkButton href={routes.about}>{t('TWO')}</LinkButton>
+        <LinkButton href={routes.login}>Login</LinkButton>
+        <LinkButton href={routes.register}>Register</LinkButton>
       </ButtonGroup>
     </Box>
   )

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

src/components/layout/footer/footer.module.scss

@@ -0,0 +1,6 @@
+.footer {
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  width: 100%;
+}

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: React.FormEvent) {
+    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>
+  )
+}

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: React.FormEvent) {
+    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>
+  )
+}

src/pages/login.tsx

@@ -0,0 +1,3 @@
+import LoginPage from 'components/login/LoginPage'
+
+export default LoginPage

src/pages/register.tsx

@@ -0,0 +1,3 @@
+import RegisterPage from 'components/register/RegisterPage'
+
+export default RegisterPage