Skip to content

Commit 681dc27

Browse files
JeremyPleaseJeremyPlease
committed
Restore login related files (with some tweaks) from 9afc03b 
1 parent 14d73e9 commit 681dc27

File tree

10 files changed

+362
-2
lines changed

10 files changed

+362
-2
lines changed

‎src/components/LoginForm/LoginForm.example.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/*
2+
* Copyright (c) 2016-present, Parse, LLC
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the license found in the LICENSE file in
6+
* the root directory of this source tree.
7+
*/
8+
import LoginForm from 'components/LoginForm/LoginForm.react';
9+
import LoginRow from 'components/LoginRow/LoginRow.react';
10+
import React from 'react';
11+
12+
export const component = LoginForm;
13+
14+
export const demos = [
15+
{
16+
render() {
17+
return (
18+
<div style={{ background: '#06283D', height: 500, position: 'relative' }}>
19+
<LoginForm
20+
header='Access your Dashboard'
21+
footer={<a href='javascript:;'>Forgot something?</a>}
22+
action='Log In'>
23+
<LoginRow
24+
label='Email'
25+
input={<input type='email' />} />
26+
<LoginRow
27+
label='Password'
28+
input={<input type='password' />} />
29+
</LoginForm>
30+
</div>
31+
);
32+
}
33+
}, {
34+
render() {
35+
return (
36+
<div style={{ background: '#06283D', height: 700, position: 'relative' }}>
37+
<LoginForm
38+
header='Sign up with Parse'
39+
footer={
40+
<div>
41+
<span>Signing up signifies that you have read and agree to the </span>
42+
<a href='https://parse.com/about/terms'>Terms of Service</a>
43+
<span> and </span>
44+
<a href='https://parse.com/about/privacy'>Privacy Policy</a>.
45+
</div>
46+
}
47+
action='Sign Up'>
48+
<LoginRow
49+
label='Email'
50+
input={<input type='email' placeholder='email@domain' autoComplete='off' />} />
51+
<LoginRow
52+
label='Password'
53+
input={<input type='password' placeholder='The stronger, the better' autoComplete='off' />} />
54+
<LoginRow
55+
label='App Name'
56+
input={<input type='text' placeholder='Name your first app' />} />
57+
<LoginRow
58+
label='Company'
59+
input={<input type='text' placeholder='(Optional)' />} />
60+
</LoginForm>
61+
</div>
62+
);
63+
}
64+
}
65+
];

‎src/components/LoginForm/LoginForm.react.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/*
2+
* Copyright (c) 2016-present, Parse, LLC
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the license found in the LICENSE file in
6+
* the root directory of this source tree.
7+
*/
8+
import CSRFInput from 'components/CSRFInput/CSRFInput.react';
9+
import Icon from 'components/Icon/Icon.react';
10+
import PropTypes from 'lib/PropTypes';
11+
import React from 'react';
12+
import styles from 'components/LoginForm/LoginForm.scss';
13+
import { verticalCenter } from 'stylesheets/base.scss';
14+
15+
// Class-style component, because we need refs
16+
export default class LoginForm extends React.Component {
17+
render() {
18+
return (
19+
<div className={styles.login} style={{ marginTop: this.props.marginTop || '-220px' }}>
20+
<Icon width={80} height={80} name='infinity' fill='#093A59' />
21+
<form method='post' ref='form' action={this.props.endpoint} className={styles.form}>
22+
<CSRFInput />
23+
<div className={styles.header}>{this.props.header}</div>
24+
{this.props.children}
25+
<div className={styles.footer}>
26+
<div className={verticalCenter} style={{ width: '100%' }}>
27+
{this.props.footer}
28+
</div>
29+
</div>
30+
<input
31+
type='submit'
32+
disabled={!!this.props.disableSubmit}
33+
onClick={() => {
34+
if (this.props.disableSubmit) {
35+
return;
36+
}
37+
this.refs.form.submit()
38+
}}
39+
className={styles.submit}
40+
value={this.props.action} />
41+
</form>
42+
<div className={styles.oauth}>
43+
<span>Or, log in with</span>
44+
<a className={styles.facebook} href='/auth/facebook'><Icon name='facebook' width={18} height={18} fill='#ffffff' /></a>
45+
<a className={styles.github} href='/auth/github'><Icon name='github' width={18} height={18} fill='#ffffff' /></a>
46+
<a className={styles.google} href='/auth/google_oauth2'><Icon name='google' width={18} height={18} fill='#ffffff' /></a>
47+
</div>
48+
<a
49+
className={styles.swap}
50+
href={this.props.swapTarget}>
51+
{this.props.swapText}
52+
</a>
53+
</div>
54+
);
55+
}
56+
}

‎src/components/LoginForm/LoginForm.scss

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
/*
2+
* Copyright (c) 2016-present, Parse, LLC
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the license found in the LICENSE file in
6+
* the root directory of this source tree.
7+
*/
8+
@import 'stylesheets/globals.scss';
9+
10+
.login {
11+
position: absolute;
12+
top: 50%;
13+
left: 50%;
14+
margin-left: -175px;
15+
text-align: center;
16+
width: 350px;
17+
}
18+
19+
.form {
20+
margin-top: 30px;
21+
}
22+
23+
.header {
24+
height: 50px;
25+
line-height: 50px;
26+
border-radius: 5px 5px 0 0;
27+
color: $blue;
28+
font-size: 16px;
29+
font-weight: 700;
30+
text-align: center;
31+
background: white;
32+
border-bottom: 1px solid #e0e0e1;
33+
}
34+
35+
.footer {
36+
@include NotoSansFont;
37+
position: relative;
38+
height: 40px;
39+
padding: 10px 0;
40+
width: 100%;
41+
background: white;
42+
border-radius: 0 0 5px 5px;
43+
color: #c1c0c9;
44+
font-size: 12px;
45+
text-align: center;
46+
47+
a {
48+
color: #c1c0c9;
49+
50+
&:hover {
51+
color: $mainTextColor;
52+
}
53+
}
54+
}
55+
56+
.submit {
57+
@include NotoSansFont;
58+
display: block;
59+
background: $green;
60+
height: 42px;
61+
width: 100%;
62+
font-size: 16px;
63+
line-height: 42px;
64+
border-radius: 5px;
65+
color: white;
66+
margin-top: 15px;
67+
outline: none;
68+
border: none;
69+
cursor: pointer;
70+
71+
&:hover, &:focus {
72+
background: $darkGreen;
73+
}
74+
75+
&:disabled {
76+
background: #dadada;
77+
cursor: default;
78+
}
79+
}
80+
81+
.oauth {
82+
@include NotoSansFont;
83+
color: white;
84+
margin-top: 24px;
85+
height: 38px;
86+
87+
> span {
88+
display: inline-block;
89+
line-height: 38px;
90+
margin-right: 22px;
91+
}
92+
}
93+
94+
.facebook, .github, .google {
95+
display: inline-block;
96+
width: 38px;
97+
height: 38px;
98+
border-radius: 100%;
99+
background: #1d3c4f;
100+
padding-top: 10px;
101+
margin-right: 16px;
102+
transition: background 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
103+
104+
svg {
105+
vertical-align: top;
106+
}
107+
108+
&:last-child {
109+
margin-right: 0;
110+
}
111+
}
112+
113+
.facebook:hover {
114+
background: #3b5998;
115+
}
116+
117+
.github:hover {
118+
background: #667f8f;
119+
}
120+
121+
.google:hover {
122+
background: #dc4937;
123+
}
124+
125+
.swap {
126+
@include NotoSansFont;
127+
display: block;
128+
width: 310px;
129+
height: 42px;
130+
line-height: 40px;
131+
text-align: center;
132+
color: white;
133+
margin: 70px auto 40px auto;
134+
border: 1px solid white;
135+
border-radius: 5px;
136+
opacity: 0.6;
137+
138+
&:hover {
139+
opacity: 1;
140+
}
141+
}

‎src/login/Login.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/*
2+
* Copyright (c) 2016-present, Parse, LLC
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the license found in the LICENSE file in
6+
* the root directory of this source tree.
7+
*/
8+
import LoginForm from 'components/LoginForm/LoginForm.react';
9+
import LoginRow from 'components/LoginRow/LoginRow.react';
10+
import React from 'react';
11+
import styles from './Login.scss';
12+
import { setBasePath } from 'lib/AJAX';
13+
14+
export default class Login extends React.Component {
15+
constructor(props) {
16+
super();
17+
18+
let errorDiv = document.getElementById('login_errors');
19+
if (errorDiv) {
20+
this.errors = errorDiv.innerHTML;
21+
}
22+
23+
this.state = {
24+
forgot: false
25+
};
26+
setBasePath(props.path);
27+
}
28+
29+
render() {
30+
return (
31+
<LoginForm
32+
header='Access your Dashboard'
33+
action='Log In'
34+
endpoint='/user_session'
35+
>
36+
<LoginRow
37+
label='Username'
38+
input={<input name='user_session[username]' type='username' />} />
39+
<LoginRow
40+
label='Password'
41+
input={<input name='user_session[password]' type='password' />} />
42+
{this.errors ?
43+
<div className={styles.error}>
44+
{this.errors}
45+
</div> : null}
46+
</LoginForm>
47+
);
48+
}
49+
}

‎src/login/Login.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/*
2+
* Copyright (c) 2016-present, Parse, LLC
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the license found in the LICENSE file in
6+
* the root directory of this source tree.
7+
*/
8+
@import 'stylesheets/globals.scss';
9+
10+
.message {
11+
background: #f9f9fa;
12+
height: 50px;
13+
padding: 10px;
14+
font-size: 13px;
15+
}
16+
17+
.error {
18+
background: #f9f9fa;
19+
height: 50px;
20+
line-height: 50px;
21+
overflow: hidden;
22+
font-size: 13px;
23+
color: $red;
24+
}

‎src/login/index.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*
2+
* Copyright (c) 2016-present, Parse, LLC
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the license found in the LICENSE file in
6+
* the root directory of this source tree.
7+
*/
8+
import Login from './Login';
9+
import React from 'react';
10+
import ReactDOM from 'react-dom';
11+
12+
require('stylesheets/fonts.scss');
13+
14+
// App entry point
15+
16+
var path = window.PARSE_DASHBOARD_PATH || '/';
17+
ReactDOM.render(<Login path={path}/>, document.getElementById('login_mount'));

‎src/parse-interface-guide/ComponentsMap.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export let LiveReload = require('components/LiveReload/LiveReload
4343
export let Loader = require('components/Loader/Loader.example');
4444
export let LoaderContainer = require('components/LoaderContainer/LoaderContainer.example');
4545
export let LoaderDots = require('components/LoaderDots/LoaderDots.example');
46+
export let LoginForm = require('components/LoginForm/LoginForm.example');
4647
export let LogView = require('components/LogView/LogView.example');
4748
export let LogViewEntry = require('components/LogView/LogViewEntry.example');
4849
export let Markdown = require('components/Markdown/Markdown.example');

‎webpack/build.config.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
*/
88
var configuration = require('./base.config.js');
99

10-
configuration.entry = {dashboard: './dashboard/index.js'};
10+
configuration.entry = {
11+
dashboard: './dashboard/index.js',
12+
login: './login/index.js'
13+
};
1114
configuration.output.path = './Parse-Dashboard/public/bundles';
1215

1316
module.exports = configuration;

‎webpack/production.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ var configuration = require('./base.config.js');
99

1010
configuration.entry = {
1111
dashboard: './dashboard/index.js',
12+
login: './login/index.js',
1213
PIG: './parse-interface-guide/index.js',
1314
quickstart: './quickstart/index.js',
1415
};

‎webpack/publish.config.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
*/
88
var configuration = require('./base.config.js');
99

10-
configuration.entry = {dashboard: './dashboard/index.js'};
10+
configuration.entry = {
11+
dashboard: './dashboard/index.js',
12+
login: './login/index.js'
13+
};
1114
configuration.output.path = './Parse-Dashboard/public/bundles';
1215

1316
var webpack = require('webpack');

0 commit comments

Comments
 (0)