[couchdb-fauxton] branch master updated: Feat/news security info (#1292)

[ga...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

garren pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/couchdb-fauxton.git


The following commit(s) were added to refs/heads/master by this push:
     new 5a20741  Feat/news security info (#1292)
5a20741 is described below

commit 5a20741dbf7a46e7de883535c72333d847965aa4
Author: hulkoba <ja...@neighbourhood.ie>
AuthorDate: Tue Sep 8 19:30:01 2020 +0200

    Feat/news security info (#1292)
    
    * feat(news): add warning and conditional rendering
    
    * feat(news): add checkbox and save choice
---
 app/addons/news/assets/less/news.less |  9 ++++-
 app/addons/news/components.js         | 62 +++++++++++++++++++++++++++++++++--
 2 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/app/addons/news/assets/less/news.less b/app/addons/news/assets/less/news.less
index f5674a4..d3cd9cf 100644
--- a/app/addons/news/assets/less/news.less
+++ b/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;
+    }
+  }
 }
diff --git a/app/addons/news/components.js b/app/addons/news/components.js
index c780ef5..b4581b8 100644
--- a/app/addons/news/components.js
+++ b/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
 };