From ac4ad5b0db497d594adfdc0b0b7731d093cb5bea Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Wed, 10 Aug 2022 14:39:52 +0200
Subject: [PATCH] register with email page

---
 src/App.js                                    |  2 +
 src/pages/auth/Register.js                    |  2 +-
 src/pages/auth/RegisterWithEmail.js           | 37 +++++++++++++++++++
 src/pages/auth/styles/MainContainerStyle.js   |  4 +-
 .../auth/styles/OptionsContainerStyle.js      |  3 +-
 5 files changed, 44 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/auth/RegisterWithEmail.js

diff --git a/src/App.js b/src/App.js
index a70c6c0..a853c13 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,6 +10,7 @@ import Challenge from './pages/Challenge';
 import Register from './pages/auth/Register';
 import Login from './pages/auth/Login';
 import LoginWithEmail from './pages/auth/LoginWithEmail';
+import RegisterWithEmail from './pages/auth/RegisterWithEmail';
 
 const App = () => {
     return (
@@ -17,6 +18,7 @@ const App = () => {
             <ThemeProvider theme={theme}>
                 <NavBar/>
                 <Routes>
+                    <Route path='/register-email' element={<RegisterWithEmail/>}/>
                     <Route path='/login-email' element={<LoginWithEmail/>}/>
                     <Route path='/login' element={<Login/>}/>
                     <Route path='/register' element={<Register/>}/>
diff --git a/src/pages/auth/Register.js b/src/pages/auth/Register.js
index 5a87dc6..a516c05 100644
--- a/src/pages/auth/Register.js
+++ b/src/pages/auth/Register.js
@@ -29,7 +29,7 @@ const Register = () => {
                             Github
                         </Medium>
                     </AuthOption>
-                    <AuthOption icon={emailIco}>
+                    <AuthOption to='/register-email' icon={emailIco}>
                         Register with&nbsp;
                         <Medium>
                             Email
diff --git a/src/pages/auth/RegisterWithEmail.js b/src/pages/auth/RegisterWithEmail.js
new file mode 100644
index 0000000..2f9ec0e
--- /dev/null
+++ b/src/pages/auth/RegisterWithEmail.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import AuthHeader from '../../components/elements/AuthHeader';
+import OptionsContainerStyle from './styles/OptionsContainerStyle';
+import AuthInput from '../../components/elements/AuthInput';
+import Media from 'react-media';
+import theme from '../../utils/theme';
+import {FlexRow} from '../../utils/containers';
+import Button from '../../components/elements/Button';
+import MainContainerStyle from './styles/MainContainerStyle';
+
+const RegisterWithEmail = () => {
+    return (
+        <MainContainerStyle as='main'>
+            <AuthHeader register={true}/>
+            <OptionsContainerStyle>
+                <AuthInput label='Email address'/>
+                <AuthInput label='Username'/>
+                <AuthInput label='Type password'/>
+                <AuthInput label='Repeat password'/>
+                <Media query={theme.mobile}>
+                    <FlexRow width='100%' alignmentX='flex-end'>
+                        <Button>
+                            Register
+                        </Button>
+                    </FlexRow>
+                </Media>
+                <Media query={theme.desktop}>
+                    <Button width='112px' height='36px'>
+                        Register
+                    </Button>
+                </Media>
+            </OptionsContainerStyle>
+        </MainContainerStyle>
+    );
+};
+
+export default RegisterWithEmail;
\ No newline at end of file
diff --git a/src/pages/auth/styles/MainContainerStyle.js b/src/pages/auth/styles/MainContainerStyle.js
index 3b3c75f..e622b36 100644
--- a/src/pages/auth/styles/MainContainerStyle.js
+++ b/src/pages/auth/styles/MainContainerStyle.js
@@ -3,10 +3,10 @@ import {FlexColumn} from '../../../utils/containers';
 
 const MainContainerStyle = styled(FlexColumn)`
   width: 100%;
-  height: calc(100vh - 48px);
+  min-height: calc(100vh - 48px);
 
   @media (min-width: ${({theme}) => theme.overMobile}) {
-    height: calc(100vh - 72px);
+    min-height: calc(100vh - 72px);
   }
 `;
 
diff --git a/src/pages/auth/styles/OptionsContainerStyle.js b/src/pages/auth/styles/OptionsContainerStyle.js
index 0b3e2c8..907890d 100644
--- a/src/pages/auth/styles/OptionsContainerStyle.js
+++ b/src/pages/auth/styles/OptionsContainerStyle.js
@@ -10,7 +10,8 @@ const OptionsContainerStyle = styled(FlexColumn)`
 
   @media (min-width: ${({theme}) => theme.overMobile}) {
     width: 400px;
-    height: 382px;
+    min-height: 382px;
+    padding: 48px;
   }
 `;