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

.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

client/components/Nav.jsx

@@ -19,7 +19,13 @@ function Nav(props) {
               <li className="nav__item">
                 <a
                   className="nav__save"
-                  onClick={() => props.saveProject()}
+                  onClick={() => {
+                    if (props.user.authenticated) {
+                      props.saveProject();
+                    } else {
+                      props.openForceAuthentication();
+                    }
+                  }}
                 >
                   Save
                 </a>
@@ -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;

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';

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
+  };
+}

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 (
+      <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;

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}
         />
         <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>
 
     );
@@ -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) {

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;
   }

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;
+}

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';