mirror of
https://github.com/hazemKrimi/crimson-quirks-ui.git
synced 2026-05-01 18:20:28 +00:00
Add auth pages ui
This commit is contained in:
Hazem Krimi
@@ -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;
|
||||
@@ -0,0 +1,5 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
background: ${({ theme }) => theme.colors.client.main};
|
||||
`;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,3 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div``;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,7 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
button svg path {
|
||||
stroke: transparent !important;
|
||||
}
|
||||
`;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,3 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div``;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,7 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
button svg path {
|
||||
stroke: transparent !important;
|
||||
}
|
||||
`;
|
||||
@@ -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 };
|
||||
Reference in New Issue
Block a user