Changed autofill and logout/profile dropdown menu to be consistent wi… (

#91) * Changed autofill and logout/profile dropdown menu to be consistent with dark UI * Changed the UI of the graph and modal to match our dark theme. * Fixed travis CI
CalPolyDnD · May 30, 2019 · f9303b4 · f9303b4
1 parent cb6e9ae
commit f9303b4
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 73 deletions.
diff --git a/dmsite/frontend/src/Authentication/LoginTextField.jsx b/dmsite/frontend/src/Authentication/LoginTextField.jsx
@@ -53,7 +53,11 @@ class TextField extends React.Component {
     }
 
     return (
-      <Form onSubmit={this.handleSubmit} className="login-form">
+      <Form
+        onSubmit={this.handleSubmit}
+        className="login-form"
+        autoComplete="new-password"
+      >
         <Form.Item>
           {getFieldDecorator('email', {
             rules: [{ required: true, message: 'Please input your email!' }],
@@ -62,6 +66,7 @@ class TextField extends React.Component {
               type="email"
               placeholder="Email"
               style={{ backgroundColor: '#303030', borderWidth: 0, color: 'white' }}
+              autoComplete="off"
             />,
           )}
         </Form.Item>
@@ -73,6 +78,7 @@ class TextField extends React.Component {
               type="password"
               placeholder="Password"
               style={{ backgroundColor: '#303030', borderWidth: 0, color: 'white' }}
+              autoComplete="off"
             />,
           )}
         </Form.Item>

diff --git a/dmsite/frontend/src/Authentication/NewAccountTextField.jsx b/dmsite/frontend/src/Authentication/NewAccountTextField.jsx
@@ -85,14 +85,18 @@ class NewAccountTextField extends React.Component {
       }
 
       return (
-        <Form onSubmit={this.handleSubmit}>
+        <Form
+          onSubmit={this.handleSubmit}
+          autoComplete="new-password"
+        >
           <Form.Item>
             {getFieldDecorator('username', {
               rules: [{ required: true, message: 'Please input your username!' }],
             })(
               <Input
                 style={{ backgroundColor: '#303030', borderWidth: 0, color: 'white' }}
                 placeholder="*Username"
+                autoComplete="off"
               />,
             )}
           </Form.Item>
@@ -103,17 +107,18 @@ class NewAccountTextField extends React.Component {
               <Input
                 style={{ backgroundColor: '#303030', borderWidth: 0, color: 'white' }}
                 placeholder="*Email"
+                autoComplete="off"
               />,
             )}
           </Form.Item>
-          {/*<Form.Item>*/}
-            {/*{getFieldDecorator('organization')(*/}
-              {/*<Input*/}
-                {/*style={{ backgroundColor: '#303030', borderWidth: 0, color: 'white' }}*/}
-                {/*placeholder="Organization"*/}
-              {/*/>,*/}
-            {/*)}*/}
-          {/*</Form.Item>*/}
+          {/* <Form.Item> */}
+          {/* {getFieldDecorator('organization')( */}
+          {/* <Input */}
+          {/* style={{ backgroundColor: '#303030', borderWidth: 0, color: 'white' }} */}
+          {/* placeholder="Organization" */}
+          {/* />, */}
+          {/* )} */}
+          {/* </Form.Item> */}
           <Form.Item>
             {getFieldDecorator('password', {
               rules: [
@@ -125,6 +130,7 @@ class NewAccountTextField extends React.Component {
                 type="password"
                 placeholder="*Password"
                 style={{ backgroundColor: '#303030', borderWidth: 0, color: 'white' }}
+                autoComplete="off"
               />,
             )}
           </Form.Item>
@@ -140,6 +146,7 @@ class NewAccountTextField extends React.Component {
                 type="password"
                 placeholder="*Confirm Password"
                 onBlur={this.handleConfirmBlur}
+                autoComplete="off"
               />,
             )}
           </Form.Item>

diff --git a/dmsite/frontend/src/Header/StandardHeader.jsx b/dmsite/frontend/src/Header/StandardHeader.jsx
@@ -106,26 +106,32 @@ class StandardHeader extends React.Component {
 
     const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
     return (
-      <Menu>
+      <Menu style={{ backgroundColor: '#303030'}}>
         {
           isAuthenticated
             ? ([
               <MenuItem>
-                <a href="/profile" key="profile">Profile</a>
+                <a
+                  href="/profile"
+                  key="profile"
+                  style={{ backgroundColor: '#303030', color: 'white' }}
+                >
+                         Profile
+                </a>
               </MenuItem>,
 
               <MenuItem>
                 <a
                   onClick={e => this.handleLogout(e)}
                   href="/login"
                   key="logout"
-                  style={{ color: 'red' }}
+                  style={{ backgroundColor: '#303030', color: '#1890ff' }}
                 >
                   Logout
                 </a>
                 <Modal isOpen={modalIsVisible}>
                   <ModalBody style={{ textAlign: 'center' }}>
-                    <Spin style={{ backgroundColor: 'transparent' }} indicator={antIcon} tip='Logging out...' backdrop='static'/>
+                    <Spin style={{ backgroundColor: 'transparent' }} indicator={antIcon} tip="Logging out..." backdrop="static" />
                   </ModalBody>
                 </Modal>
               </MenuItem>,
@@ -161,7 +167,9 @@ class StandardHeader extends React.Component {
           className="mx-1"
           htmlType="button"
         />
-        <Dropdown overlay={this.renderProfileDropdown()}>
+        <Dropdown
+          overlay={this.renderProfileDropdown()}
+        >
           <Button
             icon="user"
             shape="circle-outline"

diff --git a/dmsite/frontend/src/Vis/Vis.jsx b/dmsite/frontend/src/Vis/Vis.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Graph from 'react-graph-vis';
 import { withRouter } from 'react-router-dom';
 import axios from 'axios';
+
 const FETCH_URL = 'http://localhost:8000/get_files';
 const FETCH_CURRENT_USER_URL = 'http://localhost:8000/rest-auth/user/';
 
@@ -13,64 +14,65 @@ class Vis extends React.Component {
     	};
   	}
 
-    componentWillMount() {
- 	    const {campaign}=this.props;
-        axios.get(FETCH_CURRENT_USER_URL)
-           .then((userRes) => {
-             fetch(FETCH_URL, {
-               method: 'POST',
-               body: JSON.stringify({
-                 campaign: campaign,
-               }),
-             }).then(data => data.json()).then((response) => {
-                 this.setState( { fileObject: response});
-           });
-         });
-    }
+  componentWillMount() {
+ 	    const { campaign } = this.props;
+    axios.get(FETCH_CURRENT_USER_URL)
+      .then((userRes) => {
+        fetch(FETCH_URL, {
+          method: 'POST',
+          body: JSON.stringify({
+            campaign,
+          }),
+        }).then(data => data.json()).then((response) => {
+          this.setState({ fileObject: response });
+        });
+      });
+  }
 
-    getId(c, nodes) {
-        for(let i = 0; i < nodes.length; i++) {
-            if(nodes[i]['label'] === c) {
-                return nodes[i]['id'];
-            }
-        }
+  getId(c, nodes) {
+    for (let i = 0; i < nodes.length; i++) {
+      if (nodes[i].label === c) {
+        return nodes[i].id;
+      }
     }
+  }
 
-    getGraph() {
-        let my_nodes = [];
-        let gd = [];
-        let classifications_seen = [];
-        let counter = 0;
+  getGraph() {
+    const my_nodes = [];
+    const gd = [];
+    const classifications_seen = [];
+    let counter = 0;
 
-        for(let i = 0; i < this.state.fileObject.length; i++) {
-            counter++;
-            let file_id = counter;
-            my_nodes.push({id: file_id, label: this.state.fileObject[i]['filename'], color: "#e04141"});
-            for(let j = 0; j < this.state.fileObject[i]['classifications'].length; j++) {
-                let c = this.state.fileObject[i]['classifications'][j]['name'];
-                if(classifications_seen.indexOf(c) === -1) {
-                    counter++;
-                    classifications_seen.push(c);
-                    my_nodes.push({id: counter, label: c, color: "#41e0c9"});
-                }
-                gd.push({from: file_id, to: this.getId(c, my_nodes)})
-            }
-         }
-
-        let graph = {
-            nodes: my_nodes,
-            edges: gd
+    for (let i = 0; i < this.state.fileObject.length; i++) {
+      counter++;
+      const file_id = counter;
+      my_nodes.push({ id: file_id, label: this.state.fileObject[i].filename, color: '#1890ff', font: { color: 'white' } });
+      for (let j = 0; j < this.state.fileObject[i].classifications.length; j++) {
+        const c = this.state.fileObject[i].classifications[j].name;
+        if (classifications_seen.indexOf(c) === -1) {
+          counter++;
+          classifications_seen.push(c);
+          my_nodes.push({
+            id: counter, label: c, color: '#818181', font: { color: 'white' } });
         }
-        return graph;
+        gd.push({ from: file_id, to: this.getId(c, my_nodes) });
+      }
     }
 
-    render() {
-      return (
-          <div>
-            <Graph graph={this.getGraph()} style={{ height: "800px" }} />
-          </div>
-      );
-    }
+    const graph = {
+      nodes: my_nodes,
+      edges: gd,
+    };
+    return graph;
+  }
+
+  render() {
+    return (
+      <div>
+        <Graph graph={this.getGraph()} style={{ height: '800px' }} />
+      </div>
+    );
+  }
 }
 
 export default withRouter(Vis);
diff --git a/dmsite/frontend/src/home/VisualColumn/VisualGraphModal.jsx b/dmsite/frontend/src/home/VisualColumn/VisualGraphModal.jsx
@@ -23,17 +23,23 @@ class VisualGraphModal extends React.Component {
   }
 
   render() {
-    const {campaign}=this.props;
+    const { campaign } = this.props;
     return (
-      <div style={{ paddingRight: '5px' }}>
+      <div style={{ paddingRight: '5px', fontColor: 'white', color: 'white' }}>
         <Button color="primary" size="md" className="mr-1 btn-block mt-0" onClick={this.toggle}>Show Graph</Button>
 
-        <Modal size="lg" isOpen={this.state.modal} toggle={this.toggle} className={this.props.className} >
-          <ModalHeader toggle={this.toggle}>Table Visualization</ModalHeader>
-          <ModalBody>
-            <Vis campaign={campaign}/>
+        <Modal
+          size="lg"
+          isOpen={this.state.modal}
+          toggle={this.toggle}
+          className={this.props.className}
+          style={{ backgroundColor: '#3d3d3d', color: 'white', borderWidth: '0'}}
+        >
+          <ModalHeader style={{backgroundColor: '#303030'}}/>
+          <ModalBody style={{ backgroundColor: '#3d3d3d', color: 'white'}}>
+            <Vis campaign={campaign} />
           </ModalBody>
-          <ModalFooter>
+          <ModalFooter style={{ backgroundColor: '#303030', color: 'white', borderWidth: '0' }}>
             <Button color="secondary" onClick={this.toggle}>Close</Button>
           </ModalFooter>
         </Modal>