FINALLY fix #52, this will not work with redirecting to https when authenticating but we will cross that bridge when we get there

This commit is contained in:
Cassie Tarakajian 2016-11-29 15:51:16 -05:00
parent 62409a3bf8
commit 0a459246ac
9 changed files with 111 additions and 5 deletions

3
.gitignore vendored
View file

@ -10,3 +10,6 @@ alpha_editor_p5js_org.key
alpha_editor_p5js_org.ca-bundle alpha_editor_p5js_org.ca-bundle
alpha_editor_p5js_org.crt alpha_editor_p5js_org.crt
cert_chain.crt cert_chain.crt
localhost.crt
localhost.key
privkey.pem

View file

@ -19,7 +19,13 @@ function Nav(props) {
<li className="nav__item"> <li className="nav__item">
<a <a
className="nav__save" className="nav__save"
onClick={() => props.saveProject()} onClick={() => {
if (props.user.authenticated) {
props.saveProject();
} else {
props.openForceAuthentication();
}
}}
> >
Save Save
</a> </a>
@ -153,7 +159,8 @@ Nav.propTypes = {
}), }),
logoutUser: PropTypes.func.isRequired, logoutUser: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired, stopSketch: PropTypes.func.isRequired,
showShareModal: PropTypes.func.isRequired showShareModal: PropTypes.func.isRequired,
openForceAuthentication: PropTypes.func.isRequired
}; };
export default Nav; export default Nav;

View file

@ -105,3 +105,5 @@ export const RESET_JUST_OPENED_PROJECT = 'RESET_JUST_OPENED_PROJECT';
export const SET_PROJECT_SAVED_TIME = 'SET_PROJECT_SAVED_TIME'; export const SET_PROJECT_SAVED_TIME = 'SET_PROJECT_SAVED_TIME';
export const RESET_PROJECT_SAVED_TIME = 'RESET_PROJECT_SAVED_TIME'; export const RESET_PROJECT_SAVED_TIME = 'RESET_PROJECT_SAVED_TIME';
export const SET_PREVIOUS_PATH = 'SET_PREVIOUS_PATH'; export const SET_PREVIOUS_PATH = 'SET_PREVIOUS_PATH';
export const OPEN_FORCE_AUTHENTICATION = 'OPEN_FORCE_AUTHENTICATION';
export const CLOSE_FORCE_AUTHENTICATION = 'CLOSE_FORCE_AUTHENTICATION';

View file

@ -227,3 +227,15 @@ export function setPreviousPath(path) {
path path
}; };
} }
export function openForceAuthentication() {
return {
type: ActionTypes.OPEN_FORCE_AUTHENTICATION
};
}
export function closeForceAuthentication() {
return {
type: ActionTypes.CLOSE_FORCE_AUTHENTICATION
};
}

View file

@ -0,0 +1,36 @@
import React, { PropTypes } from 'react';
import InlineSVG from 'react-inlinesvg';
const exitUrl = require('../../../images/exit.svg');
import { Link } from 'react-router';
class ForceAuthentication extends React.Component {
componentDidMount() {
this.refs.forceAuthentication.focus();
}
render() {
return (
<section className="force-authentication" ref="forceAuthentication" tabIndex="0">
<header className="force-authentication__header">
<button className="force-authentication__exit-button" onClick={this.props.closeModal}>
<InlineSVG src={exitUrl} alt="Close About Overlay" />
</button>
</header>
<div className="force-authentication__copy">
<p>
In order to save sketches, you must be logged in. Please&nbsp;
<Link to="/login" onClick={this.props.closeModal}>Login</Link>
&nbsp;or&nbsp;
<Link to="/signup" onClick={this.props.closeModal}>Sign Up</Link>.
</p>
</div>
</section>
);
}
}
ForceAuthentication.propTypes = {
closeModal: PropTypes.func.isRequired
};
export default ForceAuthentication;

View file

@ -9,6 +9,7 @@ import NewFileModal from '../components/NewFileModal';
import NewFolderModal from '../components/NewFolderModal'; import NewFolderModal from '../components/NewFolderModal';
import ShareModal from '../components/ShareModal'; import ShareModal from '../components/ShareModal';
import KeyboardShortcutModal from '../components/KeyboardShortcutModal'; import KeyboardShortcutModal from '../components/KeyboardShortcutModal';
import ForceAuthentication from '../components/ForceAuthentication';
import Nav from '../../../components/Nav'; import Nav from '../../../components/Nav';
import Console from '../components/Console'; import Console from '../components/Console';
import Toast from '../components/Toast'; import Toast from '../components/Toast';
@ -208,6 +209,7 @@ class IDEView extends React.Component {
logoutUser={this.props.logoutUser} logoutUser={this.props.logoutUser}
stopSketch={this.props.stopSketch} stopSketch={this.props.stopSketch}
showShareModal={this.props.showShareModal} showShareModal={this.props.showShareModal}
openForceAuthentication={this.props.openForceAuthentication}
/> />
<Toolbar <Toolbar
className="Toolbar" className="Toolbar"
@ -466,6 +468,17 @@ class IDEView extends React.Component {
); );
} }
})()} })()}
{(() => { // eslint-disable-line
if (this.props.ide.forceAuthenticationVisible) {
return (
<Overlay>
<ForceAuthentication
closeModal={this.props.closeForceAuthentication}
/>
</Overlay>
);
}
})()}
</div> </div>
); );
@ -507,7 +520,8 @@ IDEView.propTypes = {
previewIsRefreshing: PropTypes.bool.isRequired, previewIsRefreshing: PropTypes.bool.isRequired,
infiniteLoopMessage: PropTypes.string.isRequired, infiniteLoopMessage: PropTypes.string.isRequired,
projectSavedTime: PropTypes.string.isRequired, projectSavedTime: PropTypes.string.isRequired,
previousPath: PropTypes.string.isRequired previousPath: PropTypes.string.isRequired,
forceAuthenticationVisible: PropTypes.bool.isRequired
}).isRequired, }).isRequired,
startSketch: PropTypes.func.isRequired, startSketch: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired, stopSketch: PropTypes.func.isRequired,
@ -606,7 +620,9 @@ IDEView.propTypes = {
startRefreshSketch: PropTypes.func.isRequired, startRefreshSketch: PropTypes.func.isRequired,
setBlobUrl: PropTypes.func.isRequired, setBlobUrl: PropTypes.func.isRequired,
setPreviousPath: PropTypes.func.isRequired, setPreviousPath: PropTypes.func.isRequired,
resetProject: PropTypes.func.isRequired resetProject: PropTypes.func.isRequired,
closeForceAuthentication: PropTypes.func.isRequired,
openForceAuthentication: PropTypes.func.isRequired,
}; };
function mapStateToProps(state) { function mapStateToProps(state) {

View file

@ -19,7 +19,8 @@ const initialState = {
infiniteLoopMessage: '', infiniteLoopMessage: '',
projectJustOpened: false, projectJustOpened: false,
projectSavedTime: '', projectSavedTime: '',
previousPath: '/' previousPath: '/',
forceAuthenticationVisible: false,
}; };
const ide = (state = initialState, action) => { const ide = (state = initialState, action) => {
@ -92,6 +93,10 @@ const ide = (state = initialState, action) => {
return Object.assign({}, state, { projectSavedTime: '' }); return Object.assign({}, state, { projectSavedTime: '' });
case ActionTypes.SET_PREVIOUS_PATH: case ActionTypes.SET_PREVIOUS_PATH:
return Object.assign({}, state, { previousPath: action.path }); return Object.assign({}, state, { previousPath: action.path });
case ActionTypes.OPEN_FORCE_AUTHENTICATION:
return Object.assign({}, state, { forceAuthenticationVisible: true });
case ActionTypes.CLOSE_FORCE_AUTHENTICATION:
return Object.assign({}, state, { forceAuthenticationVisible: false });
default: default:
return state; return state;
} }

View file

@ -0,0 +1,24 @@
.force-authentication {
@extend %modal;
display: flex;
flex-wrap: wrap;
flex-flow: column;
}
.force-authentication__header {
display: flex;
justify-content: flex-end;
padding: #{20 / $base-font-size}rem;
}
.force-authentication__exit-button {
@include themify() {
@extend %icon;
}
}
.force-authentication__copy {
padding: #{20 / $base-font-size}rem;
padding-top: 0;
padding-bottom: #{60 / $base-font-size}rem;
}

View file

@ -33,6 +33,7 @@
@import 'components/forms'; @import 'components/forms';
@import 'components/toast'; @import 'components/toast';
@import 'components/timer'; @import 'components/timer';
@import 'components/force-authentication';
@import 'layout/ide'; @import 'layout/ide';
@import 'layout/fullscreen'; @import 'layout/fullscreen';