Feat/news security info (#1292)

* feat(news): add warning and conditional rendering

* feat(news): add checkbox and save choice

Author: hulkoba

app/addons/news/assets/less/news.less

@@ -10,7 +10,14 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-#news-page {
+.news-page {
   width: 100%;
   height: 100%;
+
+  .news-checkbox {
+    margin-top: 8px;
+    input {
+      margin: 0 4px 0 0;
+    }
+  }
 }

app/addons/news/components.js

@@ -9,17 +9,73 @@
 // WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 // License for the specific language governing permissions and limitations under
 // the License.
+import app from "../../app";
 
 import React from "react";
 
-const NewsPage = () => {
+const LoadNewsButton = ({ showNews, isChecked, toggleChange }) => {
   return (
-    <div id="news-page" className="">
-      <iframe src="https://blog.couchdb.org" width="100%" height="100%"></iframe>
+    <div>
+      <p>
+        When you click this button, you are requesting content and sharing your IP address with <a href="https://blog.couchdb.org/">blog.couchdb.org</a> which is edited by the Apache CouchDB PMC and maintained by <a href="https://wordpress.com/">wordpress.com</a>.
+      </p>
+      <p>
+        If you don’t want to share your IP address, do not click the button.
+      </p>
+      <button className="btn btn-primary" onClick={showNews}>Load News</button>
+      <label className="news-checkbox">
+        <input type="checkbox"
+          checked={isChecked}
+          onChange={toggleChange}
+        />
+        Remember my choice
+      </label>
     </div>
   );
 };
 
+class NewsPage extends React.Component {
+  constructor (props) {
+    super(props);
+    this.showNews = this.showNews.bind(this);
+    this.toggleChange = this.toggleChange.bind(this);
+
+    const allowsIpSharing = !!app.utils.localStorageGet('allow-IP-sharing');
+
+    this.state = {
+      showNews: allowsIpSharing ? true : false,
+      allowsIpSharing
+    };
+  }
+
+  showNews() {
+    this.setState({ showNews: true });
+  }
+
+  toggleChange() {
+    const allowsIpSharing = this.state.allowsIpSharing;
+    this.setState({ allowsIpSharing: !allowsIpSharing });
+    app.utils.localStorageSet('allow-IP-sharing', !allowsIpSharing);
+  }
+
+  render() {
+    let newsContent = <LoadNewsButton
+      showNews={this.showNews}
+      toggleChange={this.toggleChange}
+      isChecked={this.state.allowsIpSharing}></LoadNewsButton>;
+
+    if (this.state.showNews) {
+      newsContent = <iframe src="https://blog.couchdb.org" width="100%" height="100%"></iframe>;
+    }
+
+    return (
+      <div className="news-page">
+        {newsContent}
+      </div>
+    );
+  }
+}
+
 export default {
   NewsPage: NewsPage
 };