Checkbox to toggle project's serveSecure flag

This doesn't yet persist or reload the page.

Author: andrewn

client/constants.js

@@ -26,6 +26,7 @@ export const AUTH_ERROR = 'AUTH_ERROR';
 export const SETTINGS_UPDATED = 'SETTINGS_UPDATED';
 
 export const SET_PROJECT_NAME = 'SET_PROJECT_NAME';
+export const SET_SERVE_SECURE = 'SET_SERVE_SECURE';
 
 export const PROJECT_SAVE_SUCCESS = 'PROJECT_SAVE_SUCCESS';
 export const PROJECT_SAVE_FAIL = 'PROJECT_SAVE_FAIL';

client/modules/IDE/actions/project.js

@@ -28,6 +28,13 @@ export function setProjectName(name) {
   };
 }
 
+export function setServeSecure(serveSecure) {
+  return {
+    type: ActionTypes.SET_SERVE_SECURE,
+    serveSecure
+  };
+}
+
 export function getProject(id) {
   return (dispatch, getState) => {
     dispatch(justOpenedProject());

client/modules/IDE/components/Toolbar.jsx

@@ -102,6 +102,19 @@ class Toolbar extends React.Component {
             Auto-refresh
           </label>
         </div>
+        <div className="toolbar__serve-secure">
+          <input
+            id="serve-secure"
+            type="checkbox"
+            checked={this.props.project.serveSecure}
+            onChange={(event) => {
+              this.props.setServeSecure(event.target.checked);
+            }}
+          />
+          <label htmlFor="serve-secure" className="toolbar__serve-secure-label">
+            HTTPS
+          </label>
+        </div>
         <div className={nameContainerClass}>
           <a
             className="toolbar__project-name"
@@ -169,13 +182,15 @@ Toolbar.propTypes = {
   project: PropTypes.shape({
     name: PropTypes.string.isRequired,
     isEditingName: PropTypes.bool,
-    id: PropTypes.string
+    id: PropTypes.string,
+    serveSecure: PropTypes.bool,
   }).isRequired,
   showEditProjectName: PropTypes.func.isRequired,
   hideEditProjectName: PropTypes.func.isRequired,
   infiniteLoop: PropTypes.bool.isRequired,
   autorefresh: PropTypes.bool.isRequired,
   setAutorefresh: PropTypes.func.isRequired,
+  setServeSecure: PropTypes.func.isRequired,
   startSketchAndRefresh: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
   currentUser: PropTypes.string,

client/modules/IDE/pages/IDEView.jsx

@@ -219,6 +219,8 @@ class IDEView extends React.Component {
           hideEditProjectName={this.props.hideEditProjectName}
           openPreferences={this.props.openPreferences}
           preferencesIsVisible={this.props.ide.preferencesIsVisible}
+          serveSecure={this.props.project.serveSecure}
+          setServeSecure={this.props.setServeSecure}
           setTextOutput={this.props.setTextOutput}
           owner={this.props.project.owner}
           project={this.props.project}
@@ -499,13 +501,15 @@ IDEView.propTypes = {
   project: PropTypes.shape({
     id: PropTypes.string,
     name: PropTypes.string.isRequired,
+    serveSecure: PropTypes.bool,
     owner: PropTypes.shape({
       username: PropTypes.string,
       id: PropTypes.string
     }),
     updatedAt: PropTypes.string
   }).isRequired,
   setProjectName: PropTypes.func.isRequired,
+  setServeSecure: PropTypes.func.isRequired,
   openPreferences: PropTypes.func.isRequired,
   editorAccessibility: PropTypes.shape({
     lintMessages: PropTypes.array.isRequired,

client/modules/IDE/reducers/project.js

@@ -16,6 +16,8 @@ const project = (state, action) => {
     state = initialState(); // eslint-disable-line
   }
   switch (action.type) {
+    case ActionTypes.SET_SERVE_SECURE:
+      return Object.assign({}, { ...state }, { serveSecure: action.serveSecure });
     case ActionTypes.SET_PROJECT_NAME:
       return Object.assign({}, { ...state }, { name: action.name });
     case ActionTypes.NEW_PROJECT: