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

login page

Browse Source
This commit is contained in:
mattyl006 2022-08-08 17:34:35 +02:00
parent bd56a99e97
commit 2d79baa9f6
8 changed files with 150 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.js
View File

@ -7,8 +7,8 @@ import NavBar from './components/elements/NavBar';
import Footer from './components/sections/Footer';
import {CHALLENGE_PAGE, CHALLENGES_PAGE} from './utils/globals';
import Challenge from './pages/Challenge';
import Register from './pages/Register';
import Login from './pages/Login';
import Register from './pages/auth/Register';
import Login from './pages/auth/Login';
const App = () => {
return (

13
src/pages/Login.js
View File

@ -1,13 +0,0 @@
import React from 'react';
import AuthHeader from '../components/elements/AuthHeader';
import {FlexColumn} from '../utils/containers';
const Login = () => {
return (
<FlexColumn width='100%' height='100vh'>
<AuthHeader register={false}/>
</FlexColumn>
);
};
export default Login;

84
src/pages/Register.js
View File

@ -1,84 +0,0 @@
import React from 'react';
import {FlexColumn} from '../utils/containers';
import AuthHeader from '../components/elements/AuthHeader';
import {Body, Medium} from '../utils/fonts';
import {Link} from 'react-router-dom';
import styled from 'styled-components';
import AuthOption from '../components/elements/AuthOption';
import githubIco from '../assets/github_ico.svg';
import emailIco from '../assets/email_ico.svg';
import googleIco from '../assets/google_ico.svg';
const MainContainerStyle = styled(FlexColumn)`
width: 100%;
height: calc(100vh - 48px);
@media (min-width: ${({theme}) => theme.overMobile}) {
height: calc(100vh - 72px);
}
`;
const OptionsContainerStyle = styled(FlexColumn)`
width: 260px;
border: 1px solid ${({theme}) => theme.colors.dark03};
gap: 32px;
padding: 32px;
box-shadow: ${({theme}) => theme.shadow};
@media (min-width: ${({theme}) => theme.overMobile}) {
width: 400px;
height: 382px;
}
`;
const LinkStyle = styled(Medium)`
cursor: pointer;
color: ${({theme}) => theme.colors.green};
transition: color 0.3s ease-in-out;
&:hover {
color: ${({theme}) => theme.colors.green};
}
@media (min-width: ${({theme}) => theme.overMobile}) {
color: ${({theme}) => theme.colors.dark};
}
`;
const Register = () => {
return (
<MainContainerStyle as='main'>
<AuthHeader register={true}/>
<OptionsContainerStyle>
<FlexColumn gap='24px'>
<AuthOption icon={googleIco}>
Sign in with&nbsp;
<Medium>
Google
</Medium>
</AuthOption>
<AuthOption icon={githubIco}>
Sign in with&nbsp;
<Medium>
Github
</Medium>
</AuthOption>
<AuthOption icon={emailIco}>
Sign in with&nbsp;
<Medium>
Email
</Medium>
</AuthOption>
</FlexColumn>
<Body>
Have an account?&nbsp;
<LinkStyle as={Link} to='/login'>
Sign in.
</LinkStyle>
</Body>
</OptionsContainerStyle>
</MainContainerStyle>
);
};
export default Register;

50
src/pages/auth/Login.js Normal file
View File

@ -0,0 +1,50 @@
import React from 'react';
import {FlexColumn} from '../../utils/containers';
import AuthHeader from '../../components/elements/AuthHeader';
import {Body, Medium} from '../../utils/fonts';
import {Link} from 'react-router-dom';
import AuthOption from '../../components/elements/AuthOption';
import githubIco from '../../assets/github_ico.svg';
import emailIco from '../../assets/email_ico.svg';
import googleIco from '../../assets/google_ico.svg';
import MainContainerStyle from './styles/MainContainerStyle';
import OptionsContainerStyle from './styles/OptionsContainerStyle';
import LinkStyle from './styles/LinkStyle';
const Login = () => {
return (
<MainContainerStyle as='main'>
<AuthHeader register={false}/>
<OptionsContainerStyle>
<FlexColumn gap='24px'>
<AuthOption icon={googleIco}>
Sign in with&nbsp;
<Medium>
Google
</Medium>
</AuthOption>
<AuthOption icon={githubIco}>
Sign in with&nbsp;
<Medium>
Github
</Medium>
</AuthOption>
<AuthOption icon={emailIco}>
Sign in with&nbsp;
<Medium>
Email
</Medium>
</AuthOption>
</FlexColumn>
<Body>
No account?&nbsp;
<LinkStyle as={Link} to='/register'>
Create one.
</LinkStyle>
</Body>
</OptionsContainerStyle>
</MainContainerStyle>
);
};
export default Login;

50
src/pages/auth/Register.js Normal file
View File

@ -0,0 +1,50 @@
import React from 'react';
import {FlexColumn} from '../../utils/containers';
import AuthHeader from '../../components/elements/AuthHeader';
import {Body, Medium} from '../../utils/fonts';
import {Link} from 'react-router-dom';
import AuthOption from '../../components/elements/AuthOption';
import githubIco from '../../assets/github_ico.svg';
import emailIco from '../../assets/email_ico.svg';
import googleIco from '../../assets/google_ico.svg';
import MainContainerStyle from './styles/MainContainerStyle';
import OptionsContainerStyle from './styles/OptionsContainerStyle';
import LinkStyle from './styles/LinkStyle';
const Register = () => {
return (
<MainContainerStyle as='main'>
<AuthHeader register={true}/>
<OptionsContainerStyle>
<FlexColumn gap='24px'>
<AuthOption icon={googleIco}>
Register with&nbsp;
<Medium>
Google
</Medium>
</AuthOption>
<AuthOption icon={githubIco}>
Register with&nbsp;
<Medium>
Github
</Medium>
</AuthOption>
<AuthOption icon={emailIco}>
Register with&nbsp;
<Medium>
Email
</Medium>
</AuthOption>
</FlexColumn>
<Body>
Have an account?&nbsp;
<LinkStyle as={Link} to='/login'>
Sign in.
</LinkStyle>
</Body>
</OptionsContainerStyle>
</MainContainerStyle>
);
};
export default Register;

18
src/pages/auth/styles/LinkStyle.js Normal file
View File

@ -0,0 +1,18 @@
import styled from 'styled-components';
import {Medium} from '../../../utils/fonts';
const LinkStyle = styled(Medium)`
cursor: pointer;
color: ${({theme}) => theme.colors.green};
transition: color 0.3s ease-in-out;
&:hover {
color: ${({theme}) => theme.colors.green};
}
@media (min-width: ${({theme}) => theme.overMobile}) {
color: ${({theme}) => theme.colors.dark};
}
`;
export default LinkStyle;

13
src/pages/auth/styles/MainContainerStyle.js Normal file
View File

@ -0,0 +1,13 @@
import styled from 'styled-components';
import {FlexColumn} from '../../../utils/containers';
const MainContainerStyle = styled(FlexColumn)`
width: 100%;
height: calc(100vh - 48px);
@media (min-width: ${({theme}) => theme.overMobile}) {
height: calc(100vh - 72px);
}
`;
export default MainContainerStyle;

17
src/pages/auth/styles/OptionsContainerStyle.js Normal file
View File

@ -0,0 +1,17 @@
import styled from 'styled-components';
import {FlexColumn} from '../../../utils/containers';
const OptionsContainerStyle = styled(FlexColumn)`
width: 260px;
border: 1px solid ${({theme}) => theme.colors.dark03};
gap: 32px;
padding: 32px;
box-shadow: ${({theme}) => theme.shadow};
@media (min-width: ${({theme}) => theme.overMobile}) {
width: 400px;
height: 382px;
}
`;
export default OptionsContainerStyle;