p5.js-web-editor/client/modules/IDE/components/HelpModal.jsx
Andrew Nicolaou ae668f681e HTTPS UI switch (#335)
* Checkbox to toggle project's serveSecure flag

This doesn't yet persist or reload the page.

* Help button that shows modal to explain feature

* Extracts protocol redirection to helper

* Returns promise from saveProject() action to allow chaining

* Setting serveSecure flag on project redirects after saving project

* Set serveSecure on Project model in API and client

* Redirect to correct protocol when project is loaded
2017-05-03 11:46:12 -04:00

61 lines
1.6 KiB
JavaScript

import React, { PropTypes } from 'react';
import InlineSVG from 'react-inlinesvg';
const exitUrl = require('../../../images/exit.svg');
const helpContent = {
serveSecure: {
title: 'Serve over HTTPS',
body: (
<div>
<p>Use the checkbox to choose whether this sketch should be loaded using HTTPS or HTTP.</p>
<p>You should choose HTTPS if you need to:</p>
<ul>
<li>access a webcam or microphone</li>
<li>access an API served over HTTPS</li>
</ul>
<p>Choose HTTP if you need to:</p>
<ul>
<li>access an API served over HTTP</li>
</ul>
</div>
)
}
};
const fallbackContent = {
title: 'No content for this topic',
body: null,
};
class HelpModal extends React.Component {
componentDidMount() {
this.shareModal.focus();
}
render() {
const content = helpContent[this.props.type] == null ?
fallbackContent :
helpContent[this.props.type];
return (
<section className="help-modal" ref={(element) => { this.shareModal = element; }} tabIndex="0">
<header className="help-modal__header">
<h2>{content.title}</h2>
<button className="about__exit-button" onClick={this.props.closeModal}>
<InlineSVG src={exitUrl} alt="Close Help Overlay" />
</button>
</header>
<div className="help-modal__section">
{content.body}
</div>
</section>
);
}
}
HelpModal.propTypes = {
type: PropTypes.string.isRequired,
closeModal: PropTypes.func.isRequired,
};
export default HelpModal;