From 848016d0cbc68cccc9253e6a040d0c812814ffeb Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Fri, 23 Apr 2021 18:26:02 +0100
Subject: [PATCH] Add auth pages ui

---
 src/pages/Auth/AdditionalInfo/index.tsx |  99 +++++++++++++++++++++
 src/pages/Auth/AdditionalInfo/styles.ts |   5 ++
 src/pages/Auth/ForgotPassword/index.tsx |  98 +++++++++++++++++++++
 src/pages/Auth/ForgotPassword/styles.ts |   3 +
 src/pages/Auth/Login/index.tsx          | 110 +++++++++++++++++++++++
 src/pages/Auth/Login/styles.ts          |   7 ++
 src/pages/Auth/RecoverAccount/index.tsx |  97 ++++++++++++++++++++
 src/pages/Auth/RecoverAccount/styles.ts |   3 +
 src/pages/Auth/Signup/index.tsx         | 112 ++++++++++++++++++++++++
 src/pages/Auth/Signup/styles.ts         |   7 ++
 src/pages/index.tsx                     |   7 ++
 11 files changed, 548 insertions(+)
 create mode 100644 src/pages/Auth/AdditionalInfo/index.tsx
 create mode 100644 src/pages/Auth/AdditionalInfo/styles.ts
 create mode 100644 src/pages/Auth/ForgotPassword/index.tsx
 create mode 100644 src/pages/Auth/ForgotPassword/styles.ts
 create mode 100644 src/pages/Auth/Login/index.tsx
 create mode 100644 src/pages/Auth/Login/styles.ts
 create mode 100644 src/pages/Auth/RecoverAccount/index.tsx
 create mode 100644 src/pages/Auth/RecoverAccount/styles.ts
 create mode 100644 src/pages/Auth/Signup/index.tsx
 create mode 100644 src/pages/Auth/Signup/styles.ts
 create mode 100644 src/pages/index.tsx

diff --git a/src/pages/Auth/AdditionalInfo/index.tsx b/src/pages/Auth/AdditionalInfo/index.tsx
new file mode 100644
index 0000000..b7ac3a0
--- /dev/null
+++ b/src/pages/Auth/AdditionalInfo/index.tsx
@@ -0,0 +1,99 @@
+import { Box, Button, Input, Select, Text } from '../../../components';
+import { theme } from '../../../themes';
+import { Wrapper } from './styles';
+
+const AdditionalInfo = () => {
+  return (
+    <Wrapper>
+      <Box
+        display='grid'
+        alignItems='center'
+        justifyContent='center'
+        padding='100px 300px'
+      >
+        <Box
+          background={theme.colors.white.main}
+          padding='80px 175px'
+          borderRadius='5px'
+        >
+          <Box marginBottom='35px' textAlign='center'>
+            <Text variant='headline' weight='bold'>
+              Tell us more about yourself
+            </Text>
+          </Box>
+          <Box
+            display='grid'
+            gridTemplateColumns='auto'
+            rowGap='0.5rem'
+            position='relative'
+          >
+            <Input
+              name='firstName'
+              label='First Name'
+              value=''
+              onChange={() => {}}
+            />
+            <Input
+              name='lastName'
+              label='Last Name'
+              value=''
+              onChange={() => {}}
+            />
+            <Box
+              display='grid'
+              gridTemplateColumns='1fr 1.5fr'
+              columnGap='10px'
+            >
+              <Select
+                name='coutryConde'
+                label='Country Code'
+                options={[{ value: '+216', label: '+216' }]}
+                onChange={() => {}}
+                value=''
+              />
+              <Input
+                name='phone'
+                type='tel'
+                label='Phone'
+                value=''
+                onChange={() => {}}
+              />
+            </Box>
+            <Input
+              name='address'
+              label='Address'
+              value=''
+              onChange={() => {}}
+            />
+            <Input
+              name='country'
+              label='Country'
+              value=''
+              onChange={() => {}}
+            />
+            <Box display='grid' gridTemplateColumns='2fr 1fr' columnGap='10px'>
+              <Input name='city' label='City' value='' onChange={() => {}} />
+              <Input
+                name='zipCode'
+                label='Zip Code'
+                value=''
+                onChange={() => {}}
+              />
+            </Box>
+            <Box marginTop='0.5rem'>
+              <Button
+                fullWidth
+                variant='primary-action'
+                color='client'
+                text='Done'
+                onClick={() => {}}
+              />
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+};
+
+export default AdditionalInfo;
diff --git a/src/pages/Auth/AdditionalInfo/styles.ts b/src/pages/Auth/AdditionalInfo/styles.ts
new file mode 100644
index 0000000..cd082fe
--- /dev/null
+++ b/src/pages/Auth/AdditionalInfo/styles.ts
@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  background: ${({ theme }) => theme.colors.client.main};
+`;
diff --git a/src/pages/Auth/ForgotPassword/index.tsx b/src/pages/Auth/ForgotPassword/index.tsx
new file mode 100644
index 0000000..7d48c4e
--- /dev/null
+++ b/src/pages/Auth/ForgotPassword/index.tsx
@@ -0,0 +1,98 @@
+import { Login as LoginIllustration, Logo } from '../../../assets';
+import { Box, Button, Input, Link, Text } from '../../../components';
+import { theme } from '../../../themes';
+import { Wrapper } from './styles';
+
+const ForgotPassword = () => {
+  return (
+    <Wrapper>
+      <Box
+        display='grid'
+        gridTemplateColumns='1fr 1.25fr'
+        height='100vh'
+        overflow='hidden'
+      >
+        <Box padding='3.438rem 4.375rem'>
+          <Box
+            display='flex'
+            flexDirection='row'
+            alignItems='center'
+            marginBottom='3.125rem'
+          >
+            <Box marginRight='0.625rem'>
+              <Logo />
+            </Box>
+            <Text variant='headline' weight='bold'>
+              astrobuild
+            </Text>
+          </Box>
+          <Text variant='headline' weight='bold'>
+            Forgot Password
+          </Text>
+          <Box
+            display='grid'
+            gridTemplateColumns='auto'
+            alignItems='center'
+            rowGap='0.5rem'
+            padding='1.563rem 0rem'
+          >
+            <Input label='Email' name='email' value='' onChange={() => {}} />
+            <Input label='Code' name='code' value='' onChange={() => {}} />
+            <Box
+              display='grid'
+              gridTemplateColumns='auto'
+              rowGap='1rem'
+              marginTop='0.5rem'
+            >
+              <Button
+                variant='primary-action'
+                fullWidth
+                color='client'
+                text='Receive Code'
+                onClick={() => {}}
+              />
+            </Box>
+            <Box display='flex' flexDirection='row'>
+              <Box flexGrow='1'>
+                <Text variant='body' display='inline'>
+                  Don’t have an account ?{' '}
+                </Text>
+                <Link href='/signup'>Signup</Link>
+              </Box>
+              <Link href='/' color='gray'>
+                Build a Project
+              </Link>
+            </Box>
+          </Box>
+        </Box>
+        <Box
+          background={theme.colors.client.main}
+          display='flex'
+          flexDirection='column'
+          alignItems='center'
+          justifyContent='center'
+        >
+          <Box>
+            <LoginIllustration />
+          </Box>
+          <Box marginTop='1.563rem'>
+            <Text color='white' variant='headline' align='center'>
+              Make your idea alive
+            </Text>
+          </Box>
+          <Box marginTop='0.938rem'>
+            <Text
+              color='rgba(255, 255, 255, 0.6)'
+              variant='subheader'
+              align='center'
+            >
+              Create your dream software with no coding skills
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+};
+
+export default ForgotPassword;
diff --git a/src/pages/Auth/ForgotPassword/styles.ts b/src/pages/Auth/ForgotPassword/styles.ts
new file mode 100644
index 0000000..14ea300
--- /dev/null
+++ b/src/pages/Auth/ForgotPassword/styles.ts
@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div``;
diff --git a/src/pages/Auth/Login/index.tsx b/src/pages/Auth/Login/index.tsx
new file mode 100644
index 0000000..b38e6ba
--- /dev/null
+++ b/src/pages/Auth/Login/index.tsx
@@ -0,0 +1,110 @@
+import { Google, Login as LoginIllustration, Logo } from '../../../assets';
+import { Box, Button, Input, Link, Text } from '../../../components';
+import { theme } from '../../../themes';
+import { Wrapper } from './styles';
+
+const Login = () => {
+  return (
+    <Wrapper>
+      <Box
+        display='grid'
+        gridTemplateColumns='1fr 1.25fr'
+        height='100vh'
+        overflow='hidden'
+      >
+        <Box padding='3.438rem 4.375rem'>
+          <Box
+            display='flex'
+            flexDirection='row'
+            alignItems='center'
+            marginBottom='3.125rem'
+          >
+            <Box marginRight='0.625rem'>
+              <Logo />
+            </Box>
+            <Text variant='headline' weight='bold'>
+              astrobuild
+            </Text>
+          </Box>
+          <Text variant='headline' weight='bold'>
+            Login
+          </Text>
+          <Box
+            display='grid'
+            gridTemplateColumns='auto'
+            alignItems='center'
+            rowGap='0.5rem'
+            padding='1.563rem 0rem'
+          >
+            <Input label='Email' name='email' value='' onChange={() => {}} />
+            <Input
+              label='Password'
+              name='password'
+              type='password'
+              value=''
+              onChange={() => {}}
+            />
+            <Box textAlign='right'>
+              <Link href='/forgot-password'>Forgot Password</Link>
+            </Box>
+            <Box display='grid' gridTemplateColumns='auto' rowGap='1rem'>
+              <Button
+                variant='primary-action'
+                fullWidth
+                color='client'
+                text='Login'
+                onClick={() => {}}
+              />
+              <Button
+                variant='secondary-action'
+                fullWidth
+                color='client'
+                text='Login with Google'
+                iconLeft={<Google />}
+                onClick={() => {}}
+              />
+            </Box>
+            <Box display='flex' flexDirection='row'>
+              <Box flexGrow='1'>
+                <Text variant='body' display='inline'>
+                  Don’t have an account ?{' '}
+                </Text>
+                <Link href='/signup'>Signup</Link>
+              </Box>
+              <Link href='/' color='gray'>
+                Build a Project
+              </Link>
+            </Box>
+          </Box>
+        </Box>
+        <Box
+          background={theme.colors.client.main}
+          display='flex'
+          flexDirection='column'
+          alignItems='center'
+          justifyContent='center'
+        >
+          <Box>
+            <LoginIllustration />
+          </Box>
+          <Box marginTop='1.563rem'>
+            <Text color='white' variant='headline' align='center'>
+              Make your idea alive
+            </Text>
+          </Box>
+          <Box marginTop='0.938rem'>
+            <Text
+              color='rgba(255, 255, 255, 0.6)'
+              variant='subheader'
+              align='center'
+            >
+              Create your dream software with no coding skills
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+};
+
+export default Login;
diff --git a/src/pages/Auth/Login/styles.ts b/src/pages/Auth/Login/styles.ts
new file mode 100644
index 0000000..8522aec
--- /dev/null
+++ b/src/pages/Auth/Login/styles.ts
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  button svg path {
+    stroke: transparent !important;
+  }
+`;
diff --git a/src/pages/Auth/RecoverAccount/index.tsx b/src/pages/Auth/RecoverAccount/index.tsx
new file mode 100644
index 0000000..fa102d1
--- /dev/null
+++ b/src/pages/Auth/RecoverAccount/index.tsx
@@ -0,0 +1,97 @@
+import { Login as LoginIllustration, Logo } from '../../../assets';
+import { Box, Button, Input, Text } from '../../../components';
+import { theme } from '../../../themes';
+import { Wrapper } from './styles';
+
+const RecoverAccount = () => {
+  return (
+    <Wrapper>
+      <Box
+        display='grid'
+        gridTemplateColumns='1fr 1.25fr'
+        height='100vh'
+        overflow='hidden'
+      >
+        <Box padding='3.438rem 4.375rem'>
+          <Box
+            display='flex'
+            flexDirection='row'
+            alignItems='center'
+            marginBottom='3.125rem'
+          >
+            <Box marginRight='0.625rem'>
+              <Logo />
+            </Box>
+            <Text variant='headline' weight='bold'>
+              astrobuild
+            </Text>
+          </Box>
+          <Text variant='headline' weight='bold'>
+            Recover Account
+          </Text>
+          <Box
+            display='grid'
+            gridTemplateColumns='auto'
+            alignItems='center'
+            rowGap='0.5rem'
+            padding='1.563rem 0rem'
+          >
+            <Input
+              label='New Password'
+              name='newPassword'
+              value=''
+              onChange={() => {}}
+            />
+            <Input
+              label='Confirm New Password'
+              name='confirmNewPassword'
+              value=''
+              onChange={() => {}}
+            />
+            <Box
+              display='grid'
+              gridTemplateColumns='auto'
+              rowGap='1rem'
+              marginTop='0.5rem'
+            >
+              <Button
+                variant='primary-action'
+                fullWidth
+                color='client'
+                text='Recover Account'
+                onClick={() => {}}
+              />
+            </Box>
+          </Box>
+        </Box>
+        <Box
+          background={theme.colors.client.main}
+          display='flex'
+          flexDirection='column'
+          alignItems='center'
+          justifyContent='center'
+        >
+          <Box>
+            <LoginIllustration />
+          </Box>
+          <Box marginTop='1.563rem'>
+            <Text color='white' variant='headline' align='center'>
+              Make your idea alive
+            </Text>
+          </Box>
+          <Box marginTop='0.938rem'>
+            <Text
+              color='rgba(255, 255, 255, 0.6)'
+              variant='subheader'
+              align='center'
+            >
+              Create your dream software with no coding skills
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+};
+
+export default RecoverAccount;
diff --git a/src/pages/Auth/RecoverAccount/styles.ts b/src/pages/Auth/RecoverAccount/styles.ts
new file mode 100644
index 0000000..14ea300
--- /dev/null
+++ b/src/pages/Auth/RecoverAccount/styles.ts
@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div``;
diff --git a/src/pages/Auth/Signup/index.tsx b/src/pages/Auth/Signup/index.tsx
new file mode 100644
index 0000000..4deb5d2
--- /dev/null
+++ b/src/pages/Auth/Signup/index.tsx
@@ -0,0 +1,112 @@
+import { Google, Signup as SignupIllustration, Logo } from '../../../assets';
+import { Box, Button, Input, Link, Text } from '../../../components';
+import { theme } from '../../../themes';
+import { Wrapper } from './styles';
+
+const Signup = () => {
+  return (
+    <Wrapper>
+      <Box
+        display='grid'
+        gridTemplateColumns='1fr 1.25fr'
+        height='100vh'
+        overflow='hidden'
+      >
+        <Box padding='3.438rem 4.375rem'>
+          <Box
+            display='flex'
+            flexDirection='row'
+            alignItems='center'
+            marginBottom='3.125rem'
+          >
+            <Box marginRight='0.625rem'>
+              <Logo />
+            </Box>
+            <Text variant='headline' weight='bold'>
+              astrobuild
+            </Text>
+          </Box>
+          <Text variant='headline' weight='bold'>
+            Signup
+          </Text>
+          <Box
+            display='grid'
+            gridTemplateColumns='auto'
+            alignItems='center'
+            rowGap='0.5rem'
+            padding='1.563rem 0rem'
+          >
+            <Input label='Email' name='email' value='' onChange={() => {}} />
+            <Input
+              label='Password'
+              name='password'
+              type='password'
+              value=''
+              onChange={() => {}}
+            />
+            <Box
+              display='grid'
+              gridTemplateColumns='auto'
+              marginTop='0.5rem'
+              rowGap='1rem'
+            >
+              <Button
+                variant='primary-action'
+                fullWidth
+                color='client'
+                text='Signup'
+                onClick={() => {}}
+              />
+              <Button
+                variant='secondary-action'
+                fullWidth
+                color='client'
+                text='Signup with Google'
+                iconLeft={<Google />}
+                onClick={() => {}}
+              />
+            </Box>
+            <Box display='flex' flexDirection='row'>
+              <Box flexGrow='1'>
+                <Text variant='body' display='inline'>
+                  Already have an account ?{' '}
+                </Text>
+                <Link href='/login'>Login</Link>
+              </Box>
+              <Link href='/' color='gray'>
+                Build a Project
+              </Link>
+            </Box>
+          </Box>
+        </Box>
+        <Box
+          background={theme.colors.client.main}
+          display='flex'
+          flexDirection='column'
+          alignItems='center'
+          justifyContent='center'
+        >
+          <Box>
+            <SignupIllustration />
+          </Box>
+          <Box>
+            <Text color='white' variant='headline' align='center'>
+              Make your idea alive
+            </Text>
+          </Box>
+          <Box marginTop='0.938rem'>
+            <Text
+              color='rgba(255, 255, 255, 0.6)'
+              variant='subheader'
+              align='center'
+            >
+              Create your dream software with no coding skills
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+};
+
+export default Signup;
diff --git a/src/pages/Auth/Signup/styles.ts b/src/pages/Auth/Signup/styles.ts
new file mode 100644
index 0000000..8522aec
--- /dev/null
+++ b/src/pages/Auth/Signup/styles.ts
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  button svg path {
+    stroke: transparent !important;
+  }
+`;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
new file mode 100644
index 0000000..ff59dc8
--- /dev/null
+++ b/src/pages/index.tsx
@@ -0,0 +1,7 @@
+import Login from './Auth/Login';
+import Signup from './Auth/Signup';
+import AdditionalInfo from './Auth/AdditionalInfo';
+import ForgotPassword from './Auth/ForgotPassword';
+import RecoverAccount from './Auth/RecoverAccount';
+
+export { Login, Signup, AdditionalInfo, ForgotPassword, RecoverAccount };