Skip to content

Commit a7b465d

Browse files
andrewnandrewn
committed
Merge branch 'feature/public-api' of https://github.com/processing/p5.js-web-editor into feature/public-api
2 parents f8d6cb4 + 1ef07ed commit a7b465d

29 files changed

+409
-286
lines changed

‎client/components/Nav.jsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -530,12 +530,16 @@ class Nav extends React.PureComponent {
530530
</ul>
531531
{ __process.env.LOGIN_ENABLED && !this.props.user.authenticated &&
532532
<ul className="nav__items-right" title="user-menu">
533-
<li className="nav__item">
534-
<p>
535-
<Link to="/login">Log in</Link>
536-
<span className="nav__item-spacer">or</span>
537-
<Link to="/signup">Sign up</Link>
538-
</p>
533+
<li>
534+
<Link to="/login">
535+
<span className="nav__item-header">Log in</span>
536+
</Link>
537+
</li>
538+
<span className="nav__item-spacer">or</span>
539+
<li>
540+
<Link to="/signup">
541+
<span className="nav__item-header">Sign up</span>
542+
</Link>
539543
</li>
540544
</ul>}
541545
{ __process.env.LOGIN_ENABLED && this.props.user.authenticated &&

‎client/components/NavBasic.jsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import PropTypes from 'prop-types';
2+
import React from 'react';
3+
import InlineSVG from 'react-inlinesvg';
4+
5+
const logoUrl = require('../images/p5js-logo-small.svg');
6+
const arrowUrl = require('../images/triangle-arrow-left.svg');
7+
8+
class NavBasic extends React.PureComponent {
9+
static defaultProps = {
10+
onBack: null
11+
}
12+
13+
render() {
14+
return (
15+
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
16+
<ul className="nav__items-left" title="project-menu">
17+
<li className="nav__item-logo">
18+
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
19+
</li>
20+
{ this.props.onBack && (
21+
<li className="nav__item">
22+
<button onClick={this.props.onBack}>
23+
<span className="nav__item-header">
24+
<InlineSVG src={arrowUrl} alt="Left arrow" />
25+
</span>
26+
Back to the editor
27+
</button>
28+
</li>)
29+
}
30+
</ul>
31+
</nav>
32+
);
33+
}
34+
}
35+
36+
NavBasic.propTypes = {
37+
onBack: PropTypes.func,
38+
};
39+
40+
export default NavBasic;

‎client/images/triangle-arrow-left.svg

Lines changed: 14 additions & 0 deletions
Loading

‎client/modules/IDE/actions/project.js

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -215,32 +215,6 @@ export function autosaveProject() {
215215
};
216216
}
217217

218-
export function createProject() {
219-
return (dispatch, getState) => {
220-
const state = getState();
221-
if (state.project.isSaving) {
222-
Promise.resolve();
223-
return;
224-
}
225-
dispatch(startSavingProject());
226-
axios.post(`${ROOT_URL}/projects`, {}, { withCredentials: true })
227-
.then((response) => {
228-
dispatch(endSavingProject());
229-
dispatch(setUnsavedChanges(false));
230-
browserHistory.push(`/${response.data.user.username}/sketches/${response.data.id}`);
231-
const { hasChanges, synchedProject } = getSynchedProject(getState(), response.data);
232-
if (hasChanges) {
233-
dispatch(setUnsavedChanges(true));
234-
}
235-
dispatch(setNewProject(synchedProject));
236-
})
237-
.catch((response) => {
238-
dispatch(endSavingProject());
239-
dispatch(projectSaveFail(response.data));
240-
});
241-
};
242-
}
243-
244218
export function exportProjectAsZip(projectId) {
245219
const win = window.open(`${ROOT_URL}/projects/${projectId}/zip`, '_blank');
246220
win.focus();

‎client/modules/IDE/components/Preferences.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,9 @@ class Preferences extends React.Component {
5959
</Helmet>
6060
<Tabs>
6161
<TabList>
62-
<div className="preference__subheadings">
63-
<Tab><h4 className="preference__subheading">General Settings</h4></Tab>
64-
<Tab><h4 className="preference__subheading">Accessibility</h4></Tab>
62+
<div className="tabs__titles">
63+
<Tab><h4 className="tabs__title">General Settings</h4></Tab>
64+
<Tab><h4 className="tabs__title">Accessibility</h4></Tab>
6565
</div>
6666
</TabList>
6767
<TabPanel>

‎client/modules/User/pages/AccountView.jsx

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ import AccountForm from '../components/AccountForm';
1212
import { validateSettings } from '../../../utils/reduxFormUtils';
1313
import GithubButton from '../components/GithubButton';
1414
import APIKeyForm from '../components/APIKeyForm';
15+
import NavBasic from '../../../components/NavBasic';
1516

1617
const exitUrl = require('../../../images/exit.svg');
17-
const logoUrl = require('../../../images/p5js-logo.svg');
1818

1919
class AccountView extends React.Component {
2020
constructor(props) {
@@ -24,7 +24,7 @@ class AccountView extends React.Component {
2424
}
2525

2626
componentDidMount() {
27-
document.body.className = 'light';
27+
document.body.className = this.props.theme;
2828
}
2929

3030
closeAccountPage() {
@@ -37,43 +37,40 @@ class AccountView extends React.Component {
3737

3838
render() {
3939
return (
40-
<section className="form-container form-container--align-top form-container--align-left account-container">
40+
<div className="user">
4141
<Helmet>
4242
<title>p5.js Web Editor | Account</title>
4343
</Helmet>
44-
<div className="form-container__header">
45-
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
46-
<InlineSVG src={logoUrl} alt="p5js Logo" />
47-
</button>
48-
<button className="form-container__exit-button" onClick={this.closeAccountPage}>
49-
<InlineSVG src={exitUrl} alt="Close Account Page" />
50-
</button>
51-
</div>
52-
<div className="form-container__content">
53-
<h2 className="form-container__title">My Account</h2>
54-
<Tabs className="account__tabs">
55-
<TabList>
56-
<div className="preference__subheadings">
57-
<Tab><h4 className="preference__subheading">Account</h4></Tab>
58-
<Tab><h4 className="preference__subheading">Access Tokens</h4></Tab>
59-
</div>
60-
</TabList>
61-
<TabPanel>
62-
<AccountForm {...this.props} />
63-
<div className="account__social">
44+
45+
<NavBasic onBack={this.closeAccountPage} />
46+
47+
<section className="modal">
48+
<div className="modal-content">
49+
<div className="modal__header">
50+
<h2 className="modal__title">My Account</h2>
51+
</div>
52+
<Tabs className="account__tabs">
53+
<TabList>
54+
<div className="tabs__titles">
55+
<Tab><h4 className="tabs__title">Account</h4></Tab>
56+
<Tab><h4 className="tabs__title">Access Tokens</h4></Tab>
57+
</div>
58+
</TabList>
59+
<TabPanel>
60+
<AccountForm {...this.props} />
6461
<h2 className="form-container__divider">Social Login</h2>
65-
<p className="account__social__context">
62+
<p className="account__social-text">
6663
Link this account with your GitHub account to allow login from both.
6764
</p>
6865
<GithubButton buttonText="Login with GitHub" />
69-
</div>
70-
</TabPanel>
71-
<TabPanel>
72-
<APIKeyForm {...this.props} />
73-
</TabPanel>
74-
</Tabs>
75-
</div>
76-
</section>
66+
</TabPanel>
67+
<TabPanel>
68+
<APIKeyForm {...this.props} />
69+
</TabPanel>
70+
</Tabs>
71+
</div>
72+
</section>
73+
</div>
7774
);
7875
}
7976
}

‎client/modules/User/pages/EmailVerificationView.jsx

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -65,21 +65,23 @@ class EmailVerificationView extends React.Component {
6565
}
6666

6767
return (
68-
<div className="form-container">
69-
<Helmet>
70-
<title>p5.js Web Editor | Email Verification</title>
71-
</Helmet>
72-
<div className="form-container__header">
73-
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
74-
<InlineSVG src={logoUrl} alt="p5js Logo" />
75-
</button>
76-
<button className="form-container__exit-button" onClick={this.closeLoginPage}>
77-
<InlineSVG src={exitUrl} alt="Close Login Page" />
78-
</button>
79-
</div>
80-
<div className="form-container__content">
81-
<h2 className="form-container__title">Verify your email</h2>
82-
{status}
68+
<div className="user">
69+
<div className="form-container">
70+
<Helmet>
71+
<title>p5.js Web Editor | Email Verification</title>
72+
</Helmet>
73+
<div className="form-container__header">
74+
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
75+
<InlineSVG src={logoUrl} alt="p5js Logo" />
76+
</button>
77+
<button className="form-container__exit-button" onClick={this.closeLoginPage}>
78+
<InlineSVG src={exitUrl} alt="Close Login Page" />
79+
</button>
80+
</div>
81+
<div className="form-container__content">
82+
<h2 className="form-container__title">Verify your email</h2>
83+
{status}
84+
</div>
8385
</div>
8486
</div>
8587
);

‎client/modules/User/pages/LoginView.jsx

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -34,32 +34,34 @@ class LoginView extends React.Component {
3434
return null;
3535
}
3636
return (
37-
<div className="form-container">
38-
<Helmet>
39-
<title>p5.js Web Editor | Login</title>
40-
</Helmet>
41-
<div className="form-container__header">
42-
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
43-
<InlineSVG src={logoUrl} alt="p5js Logo" />
44-
</button>
45-
<button className="form-container__exit-button" onClick={this.closeLoginPage}>
46-
<InlineSVG src={exitUrl} alt="Close Login Page" />
47-
</button>
48-
</div>
49-
<div className="form-container__content">
50-
<h2 className="form-container__title">Log In</h2>
51-
<LoginForm {...this.props} />
52-
<h2 className="form-container__divider">Or</h2>
53-
<GithubButton buttonText="Login with Github" />
54-
<GoogleButton buttonText="Login with Google" />
55-
<p className="form__navigation-options">
56-
Don&apos;t have an account?&nbsp;
57-
<Link className="form__signup-button" to="/signup">Sign Up</Link>
58-
</p>
59-
<p className="form__navigation-options">
60-
Forgot your password?&nbsp;
61-
<Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
62-
</p>
37+
<div className="user">
38+
<div className="form-container">
39+
<Helmet>
40+
<title>p5.js Web Editor | Login</title>
41+
</Helmet>
42+
<div className="form-container__header">
43+
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
44+
<InlineSVG src={logoUrl} alt="p5js Logo" />
45+
</button>
46+
<button className="form-container__exit-button" onClick={this.closeLoginPage}>
47+
<InlineSVG src={exitUrl} alt="Close Login Page" />
48+
</button>
49+
</div>
50+
<div className="form-container__content">
51+
<h2 className="form-container__title">Log In</h2>
52+
<LoginForm {...this.props} />
53+
<h2 className="form-container__divider">Or</h2>
54+
<GithubButton buttonText="Login with Github" />
55+
<GoogleButton buttonText="Login with Google" />
56+
<p className="form__navigation-options">
57+
Don&apos;t have an account?&nbsp;
58+
<Link className="form__signup-button" to="/signup">Sign Up</Link>
59+
</p>
60+
<p className="form__navigation-options">
61+
Forgot your password?&nbsp;
62+
<Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
63+
</p>
64+
</div>
6365
</div>
6466
</div>
6567
);

‎client/modules/User/pages/NewPasswordView.jsx

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -31,27 +31,30 @@ class NewPasswordView extends React.Component {
3131
const newPasswordClass = classNames({
3232
'new-password': true,
3333
'new-password--invalid': this.props.user.resetPasswordInvalid,
34-
'form-container': true
34+
'form-container': true,
35+
'user': true
3536
});
3637
return (
37-
<div className={newPasswordClass}>
38-
<Helmet>
39-
<title>p5.js Web Editor | New Password</title>
40-
</Helmet>
41-
<div className="form-container__header">
42-
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
43-
<InlineSVG src={logoUrl} alt="p5js Logo" />
44-
</button>
45-
<button className="form-container__exit-button" onClick={this.gotoHomePage}>
46-
<InlineSVG src={exitUrl} alt="Close NewPassword Page" />
47-
</button>
48-
</div>
49-
<div className="form-container__content">
50-
<h2 className="form-container__title">Set a New Password</h2>
51-
<NewPasswordForm {...this.props} />
52-
<p className="new-password__invalid">
53-
The password reset token is invalid or has expired.
54-
</p>
38+
<div className="user">
39+
<div className={newPasswordClass}>
40+
<Helmet>
41+
<title>p5.js Web Editor | New Password</title>
42+
</Helmet>
43+
<div className="form-container__header">
44+
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
45+
<InlineSVG src={logoUrl} alt="p5js Logo" />
46+
</button>
47+
<button className="form-container__exit-button" onClick={this.gotoHomePage}>
48+
<InlineSVG src={exitUrl} alt="Close NewPassword Page" />
49+
</button>
50+
</div>
51+
<div className="form-container__content">
52+
<h2 className="form-container__title">Set a New Password</h2>
53+
<NewPasswordForm {...this.props} />
54+
<p className="new-password__invalid">
55+
The password reset token is invalid or has expired.
56+
</p>
57+
</div>
5558
</div>
5659
</div>
5760
);

0 commit comments

Comments
 (0)