Skip to content

create login signup pages #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SofieDunt merged 9 commits into from
Nov 2, 2020
Merged

create login signup pages #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3ff51b3
Add Login/Signup Paths
SofieDunt Oct 29, 2020
111d79d
SFTT logo
SofieDunt Oct 29, 2020
6f7913c
Create Login/Signup Pages
SofieDunt Oct 29, 2020
e6e4234
Remove confirm email
SofieDunt Oct 30, 2020
087f8c5
Merge branch 'master' into SD.createLoginSignupPages
Oct 30, 2020
7de22ed
lint
Oct 31, 2020
53cdc5d
Merge branch 'master' into SD.createLoginSignupPages
Oct 31, 2020
f72756a
Merge branch 'master' into SD.createLoginSignupPages
Oct 31, 2020
68d7c27
prettier
Oct 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { Helmet } from 'react-helmet';
import 'antd/dist/antd.css';
import './App.less';
import Home from './containers/home/Home';
import Signup from './containers/signup/Signup';
import Login from './containers/login/Login';
import Signup from './containers/signup/Signup';
import BlockTemplate from './containers/template-1-col-block/Template';
import GridTemplate from './containers/template-24-col-grid/Template';

Expand All @@ -34,6 +34,8 @@ const App: React.FC = () => {
<div className="content-inner-container">
<Switch>
<Route path="/" exact component={Home} />
<Route path="/login" exact component={Login} />
<Route path="/signup" exact component={Signup} />
<Route path="/block-template" exact component={BlockTemplate} />
<Route path="/grid-template" exact component={GridTemplate} />
<Route path="/login" exact component={Login} />
Expand Down
Binary file added src/SFTTicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
116 changes: 76 additions & 40 deletions src/containers/login/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import React from 'react';
import { Helmet } from 'react-helmet';
import './login.less';
import { Button, Form, Input, Typography } from 'antd';
import { Button, Col, Form, Input, Row, Typography } from 'antd';
import { login } from '../../auth/authAPI';
import { Link } from 'react-router-dom';
const { Title, Paragraph } = Typography;
import { Helmet } from 'react-helmet';

const Login: React.FC = () => {
const onFinish = (values: any) => {
Expand All @@ -17,47 +16,84 @@ const Login: React.FC = () => {
<title>Login</title>
<meta name="description" content="Description goes here." />
</Helmet>
<div className="content-container">
<Title>Login</Title>
<Form name="basic" onFinish={onFinish}>
<Form.Item
label="Username"
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
<div className="body-content-container">
<Row>
<Col span={10} className="input-container">
<h1>Log In</h1>
<hr />
<Form
name="basic"
initialValues={{ remember: true }}
onFinish={onFinish}
>
<Row id="inputs">
<Col className="leftInput">
<Form.Item
name="username"
rules={[
{
required: true,
message: 'Please input your username!',
},
]}
>
<Input placeholder="Username" />
</Form.Item>
</Col>
<Col>
<Form.Item
name="password"
rules={[
{
required: true,
message: 'Please input your password!',
},
]}
>
<Input.Password placeholder="Password" />
</Form.Item>
</Col>
</Row>

<Form.Item id={'loginButton'} style={{ marginBottom: '10px' }}>
<Button
type="primary"
htmlType="submit"
size={'large'}
style={{ backgroundColor: '#9AC356', borderColor: '#9AC356' }}
>
Log In
</Button>
</Form.Item>
</Form>

<Form.Item
label="Password"
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password />
</Form.Item>
<p id="forgotPassword">
<Link to="/" component={Typography.Link} className="Link">
Forgot Password?
</Link>
</p>

<Paragraph>
Need an account? Sign up{' '}
<Link to="/signup" component={Typography.Link}>
here
</Link>
!
</Paragraph>
<p>New to speak for the trees?</p>
<p>
Sign up{' '}
<Link className="Link" to="/signup" component={Typography.Link}>
here!
</Link>
</p>
</Col>

<Paragraph>
Forgot your password? Click{' '}
<Link to="/" component={Typography.Link}>
here
</Link>{' '}
to reset it.
</Paragraph>
<Col span={2}></Col>

<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
<Col span={12} className="info-container">
<h1>Welcome Back!</h1>
<p>
Dreamcatcher kogi taiyaki keytar. Swag typewriter craft beer
cronut pok pok gentrify flannel salvia deep v pork belly
pitchfork. Swag fashion axe fam. Occupy biodiesel jean shorts
affogato PBR&B freegan bushwick vegan four loko pickled.
</p>
</Col>
</Row>
</div>
</>
);
Expand Down
78 changes: 78 additions & 0 deletions src/containers/login/login.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
.body-content-container {
Copy link
Member

@jackblanc jackblanc Oct 31, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💭 Could we share some of these styles between the two containers? It looks like a lot of them are the same between the two pages.

font-family: Circular, 'Circular', sans-serif;
position: fixed;
padding: 8%;
height: 100%;
width: 100%;
background: white;
overflow: auto;
}

.Link {
color: #3a681a;
}

hr {
display: block;
width: 100%;
margin-top: 5%;
border-top: 1.58px solid white;
}

.input-container {
height: 481px;
padding: 30px 20px 20px 50px;
background: #e5e5e5;
box-shadow: 1.58105px 3.16211px 6.32421px rgba(0, 0, 0, 0.09);
border-radius: 6.32421px;
min-width: 500px;
}

.input-container h1 {
font-size: 30px;
line-height: 36px;
}

.input-container p {
font-family: Roboto;
text-transform: uppercase;
margin-bottom: 0px;
font-size: 10px;
color: #afaeae;
}

#inputs {
margin-top: 80px;
}

.leftInput {
margin-right: 25px;
margin-bottom: 35px;
}

.info-container {
padding: 70px 70px 20px;
height: 481px;
background: url('../../SFTTicon.png') no-repeat bottom right #d4edaa;
box-shadow: 1.58105px 3.16211px 6.32421px rgba(0, 0, 0, 0.09);
border-radius: 6.32421px;
min-width: 500px;
}

.info-container h1 {
font-weight: bold;
font-size: 44px;
line-height: 76px;
margin-bottom: 5px;
}

.info-container p {
font-size: 13px;
line-height: 28px;
color: #000000;
width: 380px;
}

#forgotPassword {
margin-bottom: 12%;
}
Loading