Merge remote-tracking branch 'origin/development'

frontend/web/src/DISCLAIMER.md

@@ -0,0 +1 @@
+Disclaimer: The public server https://pamled.sift.net is currently intended to serve as an evaluation version of PAMLED, and users should assume that user data will NOT be preserved in perpetuity (yet, protocols can be downloaded).  PAMLED manages account credentials through Django (using PBKDF2 encryption) and stores protocol-related data in clear text within a publicly-inaccessible database.  The web application also uses cookies to record session ids.

frontend/web/src/editor/DisclaimerModal.jsx

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import { Modal, Button, Alert, Spinner, Row, Col } from 'react-bootstrap';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import marked from "marked";
+
+
+export default class DisclaimerModal extends Component {
+
+  state = {};
+
+  componentDidMount() {
+    const readmePath = require("../DISCLAIMER.md");
+
+    fetch(readmePath)
+      .then(response => {
+        return response.text()
+      })
+      .then(text => {
+        this.setState({
+          markdown: text
+        })
+      })
+  }
+
+
+  render() {
+
+    const { markdown } = this.state;
+    return (
+
+      <Modal
+        show={this.props.show}
+        size="lg"
+        aria-labelledby="contained-modal-title-vcenter"
+        centered
+      >
+        <Modal.Header>
+          {/* <Modal.Title id="contained-modal-title-vcenter">
+            PAMLED User Guide
+          </Modal.Title> */}
+        </Modal.Header>
+        <Modal.Body>
+          <ReactMarkdown children={markdown}  />
+
+        </Modal.Body>
+        <Modal.Footer>
+          <Button className="user-guide" variant="primary" onClick={() => this.props.handleDone()}>
+        Done
+      </Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+

frontend/web/src/routes/Login.jsx

@@ -1,6 +1,8 @@
 import React from "react";
+import { Row, Col } from "react-bootstrap"
 import { withRouter, queryLoginStatus } from "../utils";
 import LoginStatus from '../login/LoginStatus';
+import DisclaimerModal from "../editor/DisclaimerModal"
 
 class Login extends React.Component {
   constructor(props) {
@@ -10,6 +12,7 @@ class Login extends React.Component {
       password: "",
       error: "",
       isAuthenticated: null,
+      disclaimerVisible: true
     };
     this.whoami = this.whoami.bind(this);
 
@@ -18,10 +21,12 @@ class Login extends React.Component {
     this.handlePasswordChange = this.handlePasswordChange.bind(this);
     this.handleEmailChange = this.handleEmailChange.bind(this);
     this.onAuthenticationChanged = this.onAuthenticationChanged.bind(this);
+    this.onDisclaimer = this.onDisclaimer.bind(this);
+    this.onDisclaimerDone = this.onDisclaimerDone.bind(this);
 
     this.loginStatus = React.createRef();
   }
-  
+
   handlePasswordChange(event) {
     this.setState({password: event.target.value});
   }
@@ -33,10 +38,17 @@ class Login extends React.Component {
   onAuthenticationChanged(isAuthenticated) {
     this.setState({ isAuthenticated: isAuthenticated });
     if (isAuthenticated) {
-        this.props.navigate("/editor");   
+        this.props.navigate("/editor");
     }
   }
 
+  onDisclaimerDone(){
+    this.setState({ disclaimerVisible: null })
+  }
+  onDisclaimer(){
+    this.setState({ disclaimerVisible: true })
+  }
+
   whoami() {
     queryLoginStatus((data) => {
         console.log("You are logged in as: " + data.email);
@@ -76,7 +88,7 @@ class Login extends React.Component {
         </div>
       );
     }
-    
+
     return (
       <div className="container">
         <h1>PAML Editor</h1>
@@ -108,10 +120,21 @@ class Login extends React.Component {
 
   render() {
     return (
-      <div className="container mt-3">
-        <LoginStatus ref={this.loginStatus} onAuthenticationChanged={this.onAuthenticationChanged} />
-        {this.renderLogin()}
-      </div>
+      <Col>
+      <Row md={8}>
+        <div className="container mt-3">
+          <LoginStatus ref={this.loginStatus} onAuthenticationChanged={this.onAuthenticationChanged} />
+          {this.renderLogin()}
+        </div>
+        </Row>
+        <Row></Row>
+        <Row md={8}>
+        <DisclaimerModal
+            show={this.state.disclaimerVisible !== null}
+            handleDone={() => this.onDisclaimerDone()}
+        />
+        </Row>
+      </Col>
     );
   }
 }