diff --git a/.gitignore b/.gitignore index 084b7316..017a17cc 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,6 @@ alpha_editor_p5js_org.key alpha_editor_p5js_org.ca-bundle alpha_editor_p5js_org.crt cert_chain.crt +localhost.crt +localhost.key +privkey.pem \ No newline at end of file diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx index da589547..be9542ed 100644 --- a/client/components/Nav.jsx +++ b/client/components/Nav.jsx @@ -19,7 +19,13 @@ function Nav(props) {
  • props.saveProject()} + onClick={() => { + if (props.user.authenticated) { + props.saveProject(); + } else { + props.openForceAuthentication(); + } + }} > Save @@ -153,7 +159,8 @@ Nav.propTypes = { }), logoutUser: PropTypes.func.isRequired, stopSketch: PropTypes.func.isRequired, - showShareModal: PropTypes.func.isRequired + showShareModal: PropTypes.func.isRequired, + openForceAuthentication: PropTypes.func.isRequired }; export default Nav; diff --git a/client/constants.js b/client/constants.js index 803d652e..078c617b 100644 --- a/client/constants.js +++ b/client/constants.js @@ -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 RESET_PROJECT_SAVED_TIME = 'RESET_PROJECT_SAVED_TIME'; export const SET_PREVIOUS_PATH = 'SET_PREVIOUS_PATH'; +export const OPEN_FORCE_AUTHENTICATION = 'OPEN_FORCE_AUTHENTICATION'; +export const CLOSE_FORCE_AUTHENTICATION = 'CLOSE_FORCE_AUTHENTICATION'; diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js index 3266aca6..f2cbe395 100644 --- a/client/modules/IDE/actions/ide.js +++ b/client/modules/IDE/actions/ide.js @@ -227,3 +227,15 @@ export function setPreviousPath(path) { path }; } + +export function openForceAuthentication() { + return { + type: ActionTypes.OPEN_FORCE_AUTHENTICATION + }; +} + +export function closeForceAuthentication() { + return { + type: ActionTypes.CLOSE_FORCE_AUTHENTICATION + }; +} diff --git a/client/modules/IDE/components/ForceAuthentication.jsx b/client/modules/IDE/components/ForceAuthentication.jsx new file mode 100644 index 00000000..531c0e70 --- /dev/null +++ b/client/modules/IDE/components/ForceAuthentication.jsx @@ -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 ( +
    +
    + +
    +
    +

    + In order to save sketches, you must be logged in. Please  + Login +  or  + Sign Up. +

    +
    +
    + ); + } +} + +ForceAuthentication.propTypes = { + closeModal: PropTypes.func.isRequired +}; + +export default ForceAuthentication; diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index 8b90681a..238460c7 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -9,6 +9,7 @@ import NewFileModal from '../components/NewFileModal'; import NewFolderModal from '../components/NewFolderModal'; import ShareModal from '../components/ShareModal'; import KeyboardShortcutModal from '../components/KeyboardShortcutModal'; +import ForceAuthentication from '../components/ForceAuthentication'; import Nav from '../../../components/Nav'; import Console from '../components/Console'; import Toast from '../components/Toast'; @@ -208,6 +209,7 @@ class IDEView extends React.Component { logoutUser={this.props.logoutUser} stopSketch={this.props.stopSketch} showShareModal={this.props.showShareModal} + openForceAuthentication={this.props.openForceAuthentication} /> { // eslint-disable-line + if (this.props.ide.forceAuthenticationVisible) { + return ( + + + + ); + } + })()} ); @@ -507,7 +520,8 @@ IDEView.propTypes = { previewIsRefreshing: PropTypes.bool.isRequired, infiniteLoopMessage: PropTypes.string.isRequired, projectSavedTime: PropTypes.string.isRequired, - previousPath: PropTypes.string.isRequired + previousPath: PropTypes.string.isRequired, + forceAuthenticationVisible: PropTypes.bool.isRequired }).isRequired, startSketch: PropTypes.func.isRequired, stopSketch: PropTypes.func.isRequired, @@ -606,7 +620,9 @@ IDEView.propTypes = { startRefreshSketch: PropTypes.func.isRequired, setBlobUrl: 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) { diff --git a/client/modules/IDE/reducers/ide.js b/client/modules/IDE/reducers/ide.js index 06653607..a16b11ea 100644 --- a/client/modules/IDE/reducers/ide.js +++ b/client/modules/IDE/reducers/ide.js @@ -19,7 +19,8 @@ const initialState = { infiniteLoopMessage: '', projectJustOpened: false, projectSavedTime: '', - previousPath: '/' + previousPath: '/', + forceAuthenticationVisible: false, }; const ide = (state = initialState, action) => { @@ -92,6 +93,10 @@ const ide = (state = initialState, action) => { return Object.assign({}, state, { projectSavedTime: '' }); case ActionTypes.SET_PREVIOUS_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: return state; } diff --git a/client/styles/components/_force-authentication.scss b/client/styles/components/_force-authentication.scss new file mode 100644 index 00000000..b75d87eb --- /dev/null +++ b/client/styles/components/_force-authentication.scss @@ -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; +} \ No newline at end of file diff --git a/client/styles/main.scss b/client/styles/main.scss index 7d644d18..3683125d 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -33,6 +33,7 @@ @import 'components/forms'; @import 'components/toast'; @import 'components/timer'; +@import 'components/force-authentication'; @import 'layout/ide'; @import 'layout/fullscreen';