Skip to content

Instantly share code, notes, and snippets.

@nparsons08 nparsons08/Login.js Secret forked from LukeSmetham/Login.js
Created Sep 24, 2019

Embed
What would you like to do?
import React, { Component } from 'react';
import styled from 'styled-components';
import shortid from 'shortid';
// Assets //
import BackgroundImg from 'assets/bg.jpg';
import StreamLogo from 'assets/stream.svg';
// Forms //
import LoginForm from 'forms/LoginForm';
// Components //
import Logo from 'components/Logo';
import Text from 'components/Text';
const Root = styled.div`
display: flex;
flex: 1;
background-image: url(${BackgroundImg});
background-size: cover;
`;
const Overlay = styled.div`
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: ${({ theme }) => theme.colorUtils.fade(theme.color.background, 0.88)};
`;
const Container = styled.div`
max-width: 1280px;
width: 100%;
padding: 0px 24px;
margin: 0 auto;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
align-self: center;
`;
const Title = styled(Text)`
margin-top: 16px;
text-transform: capitalize;
`;
const Header = styled.div`
display: flex;
max-width: 1280px;
width: 100%;
margin: 0 auto;
padding: 80px 24px 40px 24px;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
`;
const Stream = styled.img`
max-height: 96px;
margin-left: 40px;
`;
class Login extends Component {
handleLogin = (val) => {
console.log('login', val);
};
renderForm = () => {
return (
<Container>
<Title size={40} weight='600'>
Welcome.
</Title>
<Text size={16}>Enter a username to get started.</Text>
<LoginForm conferenceAlias={this.conferenceAlias} onSubmit={this.handleLogin} />
</Container>
);
};
render() {
return (
<Root>
<Overlay />
<Header>
<Logo color='white' size={56} />
<Stream src={StreamLogo} />
</Header>
{this.renderForm()}
</Root>
);
}
}
export default Login;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.