Skip to content

Commit 050b3ed

Browse files
catarakcatarak
committed
Merge develop to chore/authentication-improvements
2 parents e5f5a2e + cf5ed7f commit 050b3ed

File tree

114 files changed

+3030
-1049
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

114 files changed

+3030
-1049
lines changed

‎.env.example‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,4 @@ S3_BUCKET_URL_BASE=<alt-for-s3-url>
2626
SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production
2727
UI_ACCESS_TOKEN_ENABLED=false
2828
UPLOAD_LIMIT=250000000
29+
MOBILE_ENABLED=true

‎client/common/icons.jsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,15 @@ import Preferences from '../images/preferences.svg';
1414
import Play from '../images/triangle-arrow-right.svg';
1515
import More from '../images/more.svg';
1616
import Code from '../images/code.svg';
17+
import Save from '../images/save.svg';
1718
import Terminal from '../images/terminal.svg';
1819

20+
import Folder from '../images/folder-padded.svg';
21+
22+
import CircleTerminal from '../images/circle-terminal.svg';
23+
import CircleFolder from '../images/circle-folder.svg';
24+
import CircleInfo from '../images/circle-info.svg';
25+
1926

2027
// HOC that adds the right web accessibility props
2128
// https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
@@ -81,3 +88,10 @@ export const PlayIcon = withLabel(Play);
8188
export const MoreIcon = withLabel(More);
8289
export const TerminalIcon = withLabel(Terminal);
8390
export const CodeIcon = withLabel(Code);
91+
export const SaveIcon = withLabel(Save);
92+
93+
export const FolderIcon = withLabel(Folder);
94+
95+
export const CircleTerminalIcon = withLabel(CircleTerminal);
96+
export const CircleFolderIcon = withLabel(CircleFolder);
97+
export const CircleInfoIcon = withLabel(CircleInfo);

‎client/components/AddRemoveButton.jsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3+
import { withTranslation } from 'react-i18next';
4+
35

46
import AddIcon from '../images/plus.svg';
57
import RemoveIcon from '../images/minus.svg';
68

7-
const AddRemoveButton = ({ type, onClick }) => {
8-
const alt = type === 'add' ? 'Add to collection' : 'Remove from collection';
9+
const AddRemoveButton = ({ type, onClick, t }) => {
10+
const alt = type === 'add' ? t('AddRemoveButton.AltAddARIA') : t('AddRemoveButton.AltRemoveARIA');
911
const Icon = type === 'add' ? AddIcon : RemoveIcon;
1012

1113
return (
@@ -22,6 +24,7 @@ const AddRemoveButton = ({ type, onClick }) => {
2224
AddRemoveButton.propTypes = {
2325
type: PropTypes.oneOf(['add', 'remove']).isRequired,
2426
onClick: PropTypes.func.isRequired,
27+
t: PropTypes.func.isRequired
2528
};
2629

27-
export default AddRemoveButton;
30+
export default withTranslation()(AddRemoveButton);

‎client/components/Dropdown.jsx‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const DropdownWrapper = styled.ul`
2525
display: flex;
2626
flex-direction: column;
2727
height: auto;
28-
z-index: 9999;
28+
z-index: 2;
2929
border-radius: ${remSize(6)};
3030
3131
& li:first-child { border-radius: ${remSize(5)} ${remSize(5)} 0 0; }
@@ -36,9 +36,7 @@ const DropdownWrapper = styled.ul`
3636
background-color: ${prop('Button.hover.background')};
3737
color: ${prop('Button.hover.foreground')};
3838
39-
& button, & a {
40-
color: ${prop('Button.hover.foreground')};
41-
}
39+
* { color: ${prop('Button.hover.foreground')}; }
4240
}
4341
4442
li {
@@ -48,12 +46,21 @@ const DropdownWrapper = styled.ul`
4846
align-items: center;
4947
5048
& button,
49+
& button span,
5150
& a {
51+
padding: ${remSize(8)} ${remSize(16)};
52+
}
53+
54+
* {
55+
text-align: left;
56+
justify-content: left;
57+
5258
color: ${prop('primaryTextColor')};
5359
width: 100%;
54-
text-align: left;
55-
padding: ${remSize(8)} ${remSize(16)};
60+
justify-content: flex-start;
5661
}
62+
63+
& button span { padding: 0px }
5764
}
5865
`;
5966

@@ -63,24 +70,29 @@ const DropdownWrapper = styled.ul`
6370
const Dropdown = ({ items, align }) => (
6471
<DropdownWrapper align={align} >
6572
{/* className="nav__items-left" */}
66-
{items && items.map(({ title, icon, href }) => (
73+
{items && items.map(({
74+
title, icon, href, action
75+
}) => (
6776
<li key={`nav-${title && title.toLowerCase()}`}>
68-
<Link to={href}>
69-
{/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
70-
{title}
71-
</Link>
77+
{/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
78+
{href
79+
? <IconButton to={href}>{title}</IconButton>
80+
: <IconButton onClick={() => action()}>{title}</IconButton>}
81+
7282
</li>
7383
))
7484
}
7585
</DropdownWrapper>
7686
);
7787

88+
7889
Dropdown.propTypes = {
7990
align: PropTypes.oneOf(['left', 'right']),
8091
items: PropTypes.arrayOf(PropTypes.shape({
8192
action: PropTypes.func,
8293
icon: PropTypes.func,
83-
href: PropTypes.string
94+
href: PropTypes.string,
95+
title: PropTypes.string
8496
})),
8597
};
8698

‎client/components/Nav.jsx‎

Lines changed: 19 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ import { withRouter } from 'react-router';
55
import { Link } from 'react-router';
66
import classNames from 'classnames';
77
import { withTranslation } from 'react-i18next';
8-
import i18next from 'i18next';
8+
import { languageKeyToLabel } from '../i18n';
99
import * as IDEActions from '../modules/IDE/actions/ide';
1010
import * as toastActions from '../modules/IDE/actions/toast';
1111
import * as projectActions from '../modules/IDE/actions/project';
12-
import { setAllAccessibleOutput } from '../modules/IDE/actions/preferences';
12+
import { setAllAccessibleOutput, setLanguage } from '../modules/IDE/actions/preferences';
1313
import { logoutUser } from '../modules/User/actions';
1414

1515
import getConfig from '../utils/getConfig';
@@ -72,7 +72,6 @@ class Nav extends React.PureComponent {
7272
document.removeEventListener('mousedown', this.handleClick, false);
7373
document.removeEventListener('keydown', this.closeDropDown, false);
7474
}
75-
7675
setDropdown(dropdown) {
7776
this.setState({
7877
dropdownOpen: dropdown
@@ -170,7 +169,7 @@ class Nav extends React.PureComponent {
170169
}
171170

172171
handleLangSelection(event) {
173-
i18next.changeLanguage(event.target.value);
172+
this.props.setLanguage(event.target.value);
174173
this.props.showToast(1500);
175174
this.props.setToastText('Toast.LangChange');
176175
this.setDropdown('none');
@@ -550,7 +549,7 @@ class Nav extends React.PureComponent {
550549

551550
renderLanguageMenu(navDropdownState) {
552551
return (
553-
<ul className="nav__items-right" title="user-menu">
552+
<React.Fragment>
554553
<li className={navDropdownState.lang}>
555554
<button
556555
onClick={this.toggleDropdownForLang}
@@ -562,21 +561,11 @@ class Nav extends React.PureComponent {
562561
}
563562
}}
564563
>
565-
<span className="nav__item-header"> {this.props.t('Nav.Lang')}</span>
564+
<span className="nav__item-header"> {languageKeyToLabel(this.props.language)}</span>
566565
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
567566
</button>
568567
<ul className="nav__dropdown">
569568

570-
<li className="nav__dropdown-item">
571-
<button
572-
onFocus={this.handleFocusForLang}
573-
onBlur={this.handleBlur}
574-
value="it"
575-
onClick={e => this.handleLangSelection(e)}
576-
>
577-
Italian (Test Fallback)
578-
</button>
579-
</li>
580569
<li className="nav__dropdown-item">
581570
<button
582571
onFocus={this.handleFocusForLang}
@@ -598,23 +587,24 @@ class Nav extends React.PureComponent {
598587
</li>
599588
</ul>
600589
</li>
601-
</ul>
590+
</React.Fragment>
602591
);
603592
}
604593

605594

606595
renderUnauthenticatedUserMenu(navDropdownState) {
607596
return (
608597
<ul className="nav__items-right" title="user-menu">
598+
{getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
609599
<li className="nav__item">
610600
<Link to="/login" className="nav__auth-button">
611-
<span className="nav__item-header">{this.props.t('Nav.Login.Login')}</span>
601+
<span className="nav__item-header">{this.props.t('Nav.Login')}</span>
612602
</Link>
613603
</li>
614-
<span className="nav__item-or">{this.props.t('Nav.Login.LoginOr')}</span>
604+
<span className="nav__item-or">{this.props.t('Nav.LoginOr')}</span>
615605
<li className="nav__item">
616606
<Link to="/signup" className="nav__auth-button">
617-
<span className="nav__item-header">{this.props.t('Nav.Login.SignUp')}</span>
607+
<span className="nav__item-header">{this.props.t('Nav.SignUp')}</span>
618608
</Link>
619609
</li>
620610
</ul>
@@ -624,10 +614,7 @@ class Nav extends React.PureComponent {
624614
renderAuthenticatedUserMenu(navDropdownState) {
625615
return (
626616
<ul className="nav__items-right" title="user-menu">
627-
<li className="nav__item">
628-
<span>{this.props.t('Nav.Auth.Hello')}, {this.props.user.username}!</span>
629-
</li>
630-
<span className="nav__item-spacer">|</span>
617+
{getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
631618
<li className={navDropdownState.account}>
632619
<button
633620
className="nav__item-header"
@@ -640,7 +627,7 @@ class Nav extends React.PureComponent {
640627
}
641628
}}
642629
>
643-
{this.props.t('Nav.Auth.MyAccount')}
630+
<span>{this.props.t('Nav.Auth.Hello')}, {this.props.user.username}!</span>
644631
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
645632
</button>
646633
<ul className="nav__dropdown">
@@ -756,7 +743,6 @@ class Nav extends React.PureComponent {
756743
<header>
757744
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
758745
{this.renderLeftLayout(navDropdownState)}
759-
{getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
760746
{this.renderUserMenu(navDropdownState)}
761747
</nav>
762748
</header>
@@ -808,8 +794,9 @@ Nav.propTypes = {
808794
params: PropTypes.shape({
809795
username: PropTypes.string
810796
}),
811-
t: PropTypes.func.isRequired
812-
797+
t: PropTypes.func.isRequired,
798+
setLanguage: PropTypes.func.isRequired,
799+
language: PropTypes.string.isRequired,
813800
};
814801

815802
Nav.defaultProps = {
@@ -830,7 +817,8 @@ function mapStateToProps(state) {
830817
project: state.project,
831818
user: state.user,
832819
unsavedChanges: state.ide.unsavedChanges,
833-
rootFile: state.files.filter(file => file.name === 'root')[0]
820+
rootFile: state.files.filter(file => file.name === 'root')[0],
821+
language: state.preferences.language
834822
};
835823
}
836824

@@ -839,7 +827,8 @@ const mapDispatchToProps = {
839827
...projectActions,
840828
...toastActions,
841829
logoutUser,
842-
setAllAccessibleOutput
830+
setAllAccessibleOutput,
831+
setLanguage
843832
};
844833

845834
export default withTranslation()(withRouter(connect(mapStateToProps, mapDispatchToProps)(Nav)));

‎client/components/NavBasic.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3+
import { withTranslation } from 'react-i18next';
34

45
import LogoIcon from '../images/p5js-logo-small.svg';
56
import ArrowIcon from '../images/triangle-arrow-left.svg';
@@ -14,7 +15,7 @@ class NavBasic extends React.PureComponent {
1415
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
1516
<ul className="nav__items-left">
1617
<li className="nav__item-logo">
17-
<LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
18+
<LogoIcon role="img" aria-label={this.props.t('Common.p5logoARIA')} focusable="false" className="svg__logo" />
1819
</li>
1920
{ this.props.onBack && (
2021
<li className="nav__item">
@@ -34,6 +35,7 @@ class NavBasic extends React.PureComponent {
3435

3536
NavBasic.propTypes = {
3637
onBack: PropTypes.func,
38+
t: PropTypes.func.isRequired
3739
};
3840

39-
export default NavBasic;
41+
export default withTranslation()(NavBasic);

‎client/components/PreviewNav.jsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33
import { Link } from 'react-router';
4+
import { withTranslation } from 'react-i18next';
45

56
import LogoIcon from '../images/p5js-logo-small.svg';
67
import CodeIcon from '../images/code.svg';
78

8-
const PreviewNav = ({ owner, project }) => (
9+
const PreviewNav = ({ owner, project, t }) => (
910
<nav className="nav preview-nav">
1011
<div className="nav__items-left">
1112
<div className="nav__item-logo">
12-
<LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
13+
<LogoIcon role="img" aria-label={t('Common.p5logoARIA')} focusable="false" className="svg__logo" />
1314
</div>
1415
<Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
15-
<p className="toolbar__project-owner">by</p>
16+
<p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
1617
<Link className="nav__item" to={`/${owner.username}/sketches/`}>{owner.username}</Link>
1718
</div>
1819
<div className="nav__items-right">
19-
<Link to={`/${owner.username}/sketches/${project.id}`} aria-label="Edit Sketch" >
20+
<Link to={`/${owner.username}/sketches/${project.id}`} aria-label={t('PreviewNav.EditSketchARIA')} >
2021
<CodeIcon className="preview-nav__editor-svg" focusable="false" aria-hidden="true" />
2122
</Link>
2223
</div>
@@ -31,6 +32,7 @@ PreviewNav.propTypes = {
3132
name: PropTypes.string.isRequired,
3233
id: PropTypes.string.isRequired,
3334
}).isRequired,
35+
t: PropTypes.func.isRequired
3436
};
3537

36-
export default PreviewNav;
38+
export default withTranslation()(PreviewNav);

‎client/components/__test__/Nav.test.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,9 @@ describe('Nav', () => {
4545
rootFile: {
4646
id: 'root-file'
4747
},
48-
t: jest.fn()
48+
t: jest.fn(),
49+
setLanguage: jest.fn(),
50+
language: 'en-US'
4951
};
5052

5153
it('renders correctly', () => {

0 commit comments

Comments
 (0)