s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

sign in with email design

Browse Source
This commit is contained in:
mattyl006 2022-08-09 15:59:48 +02:00
parent 2d79baa9f6
commit 9d186b66f1
8 changed files with 88 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -9,6 +9,7 @@ import {CHALLENGE_PAGE, CHALLENGES_PAGE} from './utils/globals';
import Challenge from './pages/Challenge'; import Challenge from './pages/Challenge';
import Register from './pages/auth/Register'; import Register from './pages/auth/Register';
import Login from './pages/auth/Login'; import Login from './pages/auth/Login';
import LoginWithEmail from './pages/auth/LoginWithEmail';
const App = () => { const App = () => {
return ( return (
@ -16,6 +17,7 @@ const App = () => {
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<NavBar/> <NavBar/>
<Routes> <Routes>
<Route path='/login-email' element={<LoginWithEmail/>}/>
<Route path='/login' element={<Login/>}/> <Route path='/login' element={<Login/>}/>
<Route path='/register' element={<Register/>}/> <Route path='/register' element={<Register/>}/>
<Route path={`${CHALLENGE_PAGE}/:challengeId`} element={<Challenge/>}/> <Route path={`${CHALLENGE_PAGE}/:challengeId`} element={<Challenge/>}/>

36
src/components/elements/AuthInput.js Normal file
View File

@ -0,0 +1,36 @@
import React from 'react';
import {FlexColumn, FlexRow} from '../../utils/containers';
import styled from 'styled-components';
import {Medium} from '../../utils/fonts';
const AuthInputStyle = styled(Medium)`
width: 188px;
height: 36px;
padding: 4px;
border: 1px solid ${({theme}) => theme.colors.dark05};
`;
const AuthLabel = styled(FlexRow)`
position: absolute;
top: -10px;
left: 14px;
background-color: ${({theme}) => theme.colors.white};
font-size: 10px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
padding: 4px;
z-index: 2;
`;
const AuthInput = (props) => {
return (
<FlexColumn position='relative'>
<AuthLabel as='label' htmlFor={props.label}>
{props.label}
</AuthLabel>
<AuthInputStyle as='input' id={props.label} name={props.label}/>
</FlexColumn>
);
};
export default AuthInput;

5
src/components/elements/AuthOption.js
View File

@ -4,6 +4,7 @@ import theme from '../../utils/theme';
import PropsTypes from 'prop-types'; import PropsTypes from 'prop-types';
import {Body} from '../../utils/fonts'; import {Body} from '../../utils/fonts';
import styled from 'styled-components'; import styled from 'styled-components';
import {Link} from 'react-router-dom';
const AuthOptionStyle = styled(FlexRow)` const AuthOptionStyle = styled(FlexRow)`
gap: 16px; gap: 16px;
@ -33,7 +34,7 @@ const AuthOptionStyle = styled(FlexRow)`
const AuthOption = (props) => { const AuthOption = (props) => {
return ( return (
<AuthOptionStyle as='button'> <AuthOptionStyle as={Link} to={props.to}>
<Svg width='20px' height='20px' src={props.icon} backgroundColor={theme.colors.dark}/> <Svg width='20px' height='20px' src={props.icon} backgroundColor={theme.colors.dark}/>
<Body> <Body>
{props.children} {props.children}
@ -45,11 +46,13 @@ const AuthOption = (props) => {
AuthOption.propTypes = { AuthOption.propTypes = {
children: PropsTypes.node, children: PropsTypes.node,
icon: PropsTypes.string, icon: PropsTypes.string,
to: PropsTypes.string,
}; };
AuthOption.defaultProps = { AuthOption.defaultProps = {
children: '', children: '',
icon: '', icon: '',
to: '#'
}; };
export default AuthOption; export default AuthOption;

4
src/components/elements/MobileNavMenu.js
View File

@ -57,13 +57,13 @@ const MobileNavMenu = (props) => {
Challenges Challenges
</Menu> </Menu>
</FlexRow> </FlexRow>
<FlexRow as={Link} to='/' gap='16px'> <FlexRow as={Link} to='/register' gap='16px'>
<Svg width='16px' height='16px' src={registerIco}/> <Svg width='16px' height='16px' src={registerIco}/>
<Menu as='li'> <Menu as='li'>
Register Register
</Menu> </Menu>
</FlexRow> </FlexRow>
<FlexRow as={Link} to='/' gap='16px'> <FlexRow as={Link} to='/login' gap='16px'>
<Svg width='16px' height='16px' src={loginIco}/> <Svg width='16px' height='16px' src={loginIco}/>
<Menu as='li'> <Menu as='li'>
Sign in Sign in

2
src/pages/auth/Login.js
View File

@ -29,7 +29,7 @@ const Login = () => {
Github Github
</Medium> </Medium>
</AuthOption> </AuthOption>
<AuthOption icon={emailIco}> <AuthOption to='/login-email' icon={emailIco}>
Sign in with&nbsp; Sign in with&nbsp;
<Medium> <Medium>
Email Email

39
src/pages/auth/LoginWithEmail.js Normal file
View File

@ -0,0 +1,39 @@
import React from 'react';
import AuthHeader from '../../components/elements/AuthHeader';
import OptionsContainerStyle from './styles/OptionsContainerStyle';
import MainContainerStyle from './styles/MainContainerStyle';
import AuthInput from '../../components/elements/AuthInput';
import Button from '../../components/elements/Button';
import {FlexRow} from '../../utils/containers';
import LinkStyle from './styles/LinkStyle';
import {Link} from 'react-router-dom';
import {Body} from '../../utils/fonts';
import theme from '../../utils/theme';
const LoginWithEmail = () => {
return (
<MainContainerStyle as='main'>
<AuthHeader register={false}/>
<OptionsContainerStyle>
<AuthInput label='Email / Username'/>
<AuthInput label='Password'/>
<FlexRow width='100%' alignmentX='flex-end'>
<Button>
Sign in
</Button>
</FlexRow>
</OptionsContainerStyle>
<Body margin='32px 0 0 0'>
Forgot&nbsp;
<LinkStyle as={Link} to='#' color={theme.colors.dark}>
Username
</LinkStyle>&nbsp;/&nbsp;
<LinkStyle as={Link} to='#' color={theme.colors.dark}>
Password
</LinkStyle>?
</Body>
</MainContainerStyle>
);
};
export default LoginWithEmail;

2
src/pages/auth/styles/LinkStyle.js
View File

@ -3,7 +3,7 @@ import {Medium} from '../../../utils/fonts';
const LinkStyle = styled(Medium)` const LinkStyle = styled(Medium)`
cursor: pointer; cursor: pointer;
color: ${({theme}) => theme.colors.green}; color: ${({theme, color}) => color ? color : theme.colors.green};
transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out;
&:hover { &:hover {

19
src/utils/fonts.js
View File

@ -14,12 +14,8 @@ const H1 = styled(Container)`
} }
`; `;
const H2 = styled(Container)` const H2 = styled(H1)`
display: inline-block;
font-family: 'Kanit', sans-serif;
font-weight: 400;
font-size: 20px; font-size: 20px;
line-height: 24px;
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({theme}) => theme.overMobile}) {
font-size: 32px; font-size: 32px;
@ -27,10 +23,7 @@ const H2 = styled(Container)`
} }
`; `;
const H3 = styled(Container)` const H3 = styled(H1)`
display: inline-block;
font-family: 'Kanit', sans-serif;
font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 22px;
@ -54,16 +47,10 @@ const Body = styled(Container)`
} }
`; `;
const Medium = styled(Container)` const Medium = styled(Body)`
display: inline-block;
font-family: 'Roboto', sans-serif;
font-weight: 400; font-weight: 400;
font-size: 14px;
line-height: 20px;
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({theme}) => theme.overMobile}) {
font-size: 16px;
line-height: 22px;
font-weight: 500; font-weight: 500;
} }
`; `;