From d9aa8deb163fc8f5f3d9fb205859c4d875f33462 Mon Sep 17 00:00:00 2001
From: Alexander Bell <mail@alexbell.de>
Date: Sun, 16 Sep 2018 10:23:43 +0200
Subject: [PATCH] new password window

---
 src/components/Menu/Menu.js                  |   2 +-
 src/pages/Main.js                            |   8 +-
 src/pages/passwordManager/New.js             | 166 +++++++++++++++++++
 src/pages/passwordManager/PasswordManager.js |  70 +++++++-
 4 files changed, 238 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/passwordManager/New.js

diff --git a/src/components/Menu/Menu.js b/src/components/Menu/Menu.js
index 72cef36..30228d8 100644
--- a/src/components/Menu/Menu.js
+++ b/src/components/Menu/Menu.js
@@ -37,7 +37,7 @@ const Main = inject("rootStore") ( observer(
 
       /*
       * Expected props
-      *   - /
+      *   - handleItemClick(): function, void
       */
 
       //Stored information
diff --git a/src/pages/Main.js b/src/pages/Main.js
index 585c7a1..36d4058 100644
--- a/src/pages/Main.js
+++ b/src/pages/Main.js
@@ -36,7 +36,7 @@ Components -- END
 class Main extends Component {
   constructor(props){
     super(props);
-    //Initial loading screen
+    //Main page
 
     /*
     * Expected props
@@ -73,7 +73,7 @@ class Main extends Component {
       <Router history={history}>
         <Menu handleItemClick={this.handleItemClick}>
           <Container className={this.classes.mainContainer}>
-            <Segment>
+            <Segment className={this.classes.mainSegment}>
               <Switch>
                 <Route exact path="/" component={Home} />
                 <Route path="/passwords" component={PasswordManager} />
@@ -90,6 +90,10 @@ class Main extends Component {
     return {
       mainContainer: {
         paddingTop: '80px'
+      },
+
+      mainSegment: {
+        position: 'static !important'
       }
     }
   }
diff --git a/src/pages/passwordManager/New.js b/src/pages/passwordManager/New.js
new file mode 100644
index 0000000..39e49f2
--- /dev/null
+++ b/src/pages/passwordManager/New.js
@@ -0,0 +1,166 @@
+import React, {Component} from 'react';
+import jss from 'jss';
+import preset from 'jss-preset-default';
+import { Segment, Container, Header, Form, Input, Button, Icon } from 'semantic-ui-react';
+
+/*
+* Functions import
+*/
+
+/*
+* Component imports
+*/
+
+jss.setup(preset());
+
+
+/*
+###############################
+Components -- START
+###############################
+*/
+
+/*
+###############################
+Components -- END
+###############################
+*/
+
+
+
+class New extends Component {
+  constructor(props){
+    super(props);
+    //Add a new password window
+
+    /*
+    * Expected props
+    *   - open: bool
+    *       display component or not
+    *   - toggleNewWindow: function
+    *       toggles window: open and close
+    *   - encryptionkey: String
+    *       encryption key of the password
+    */
+
+    this.state = {
+      url: '',
+      login: '',
+      password: this.generatePassword(),
+      loading: false
+    }
+
+    //Styles
+    this.styles = this.getStyles();
+    this.sheet = jss.createStyleSheet(this.styles);
+    const {classes} = this.sheet.attach();
+    this.classes = classes;
+    //Styles
+  }
+
+
+  componentWillReceiveProps(nextProps) {
+    if(nextProps.open !== this.props.open) {
+      this.setState({
+        url: '',
+        login: '',
+        password: this.generatePassword()
+      });
+    }
+  }
+
+
+  componentWillUnmount() {
+    this.sheet.detach()
+  }
+
+
+  generatePassword() {
+      //Creates a unique id for each chat bubble so that the animation can be triggered
+    
+      var random = "";
+      var possible = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOP0123456";
+    
+      for (var i = 0; i < 16; i++)
+        random += possible.charAt(Math.floor(Math.random() * possible.length));
+    
+      while(true) {
+        if(!document.getElementById(random)) {
+          return random;
+        }
+      }
+  }
+
+
+  handleChange(e, {name}) {
+    this.setState({
+      [name]: e.target.value
+    });
+  }
+
+
+  render() {
+    if(this.props.open) {
+      return(
+        <div className={this.classes.box}>
+          <Container text>
+            <Segment padded="very">
+              <Form onSubmit={this.handleSubmit}>
+                <Header as="h2">
+                  Add a password
+                </Header>
+
+                <Form.Field>
+                  <label>Application / URL:</label>
+                  <Input iconPosition='left' placeholder='http://exmple.com'>
+                    <input value={this.state.url} type="text" name="url" onChange={this.handleChange} autoComplete="off" required />
+                  </Input>
+                </Form.Field>
+
+                <Form.Field>
+                  <label>Username / email adress:</label>
+                  <Input iconPosition='left' placeholder='example@example.com'>
+                    <input value={this.state.login} type="text" name="login" onChange={this.handleChange} autoComplete="off" required />
+                  </Input>
+                </Form.Field>
+
+                <Form.Field>
+                  <label>Password:</label>
+                  <Input iconPosition='left' placeholder='********'>
+                    <input value={this.state.password} type="text" name="password" onChange={this.handleChange} autoComplete="off" required />
+                  </Input>
+                </Form.Field>
+
+                <p>The encryption key for this entry is '<b>{this.props.encryptionkey}</b>'</p>
+
+                <Button loading={this.state.loading} type='submit' primary>Add</Button>
+                <Button loading={this.state.loading} onClick={this.props.toggleNewWindow}><Icon name="x" />Cancel</Button>
+                
+              </Form>
+            </Segment>
+          </Container>
+        </div>
+      );
+    } else {
+      return null;
+    }
+  }
+
+
+  getStyles() {
+    return {
+      box: {
+        width: '100vw',
+        height: '100vh',
+        position: 'fixed',
+        zIndex: 1000,
+        top: 0,
+        left: 0,
+        backgroundColor: 'rgba(255,255,255,0.9)',
+        paddingTop: '5%'
+      }
+    }
+  }
+}
+
+export default New;
diff --git a/src/pages/passwordManager/PasswordManager.js b/src/pages/passwordManager/PasswordManager.js
index a8f2f60..c233adc 100644
--- a/src/pages/passwordManager/PasswordManager.js
+++ b/src/pages/passwordManager/PasswordManager.js
@@ -1,7 +1,8 @@
 import React, {Component} from 'react';
 import jss from 'jss';
 import preset from 'jss-preset-default';
-import { Menu, Segment, Dropdown, Table, Button, Icon } from 'semantic-ui-react';
+import { Menu, Segment, Dropdown, Table, Button, Icon, Header } from 'semantic-ui-react';
+import alertify from 'alertify.js';
 
 /*
 * Functions import
@@ -10,6 +11,7 @@ import { Menu, Segment, Dropdown, Table, Button, Icon } from 'semantic-ui-react'
 /*
 * Component imports
 */
+import New from './New';
 
 jss.setup(preset());
 
@@ -31,13 +33,22 @@ Components -- END
 class PasswordManager extends Component {
   constructor(props){
     super(props);
-    //Initial loading screen
+    //Password Manager page
 
     /*
     * Expected props
     *   - /
     */
 
+    this.toggleNewWindow = this.toggleNewWindow.bind(this);
+    this.onChangeInput = this.onChangeInput.bind(this);
+
+    this.state = {
+      newWindowOpen: false,
+      key: '',
+      search: ''
+    }
+
     //Styles
     this.styles = this.getStyles();
     this.sheet = jss.createStyleSheet(this.styles);
@@ -52,13 +63,38 @@ class PasswordManager extends Component {
   }
 
 
+  onChangeInput(e) {
+    //Encryption key and search input
+
+    this.setState({
+      [e.target.name]: e.target.value
+    });
+  }
+
+
+  toggleNewWindow() {
+    //Add new password window
+
+    if(this.state.key !== '')
+    {
+      alertify.log("Encryption key: '" + this.state.key + "'");
+      this.setState({
+        newWindowOpen: !this.state.newWindowOpen
+      });
+    } else {
+      alertify.error("Please set an encryption key!");
+    }
+  }
+
+
   render() {
     return(
       <div>
+        <New encryptionkey={this.state.key} open={this.state.newWindowOpen} toggleNewWindow={this.toggleNewWindow} />
         <Menu attached='top'>
           <Dropdown item icon='wrench' simple>
             <Dropdown.Menu>
-              <Dropdown.Item>
+              <Dropdown.Item onClick={this.toggleNewWindow}>
                 New
               </Dropdown.Item>
             </Dropdown.Menu>
@@ -67,8 +103,15 @@ class PasswordManager extends Component {
           <Menu.Menu position='right'>
             <div className='ui right aligned category search item'>
               <div className='ui transparent icon input'>
-                <input className='prompt' type='text' placeholder='Search...' />
-                <i className='search link icon' />
+                <input className='prompt' type='text' placeholder='Encryption key...' name="key" onChange={this.onChangeInput} autoComplete="off" />
+                <i className='key icon' />
+              </div>
+            </div>
+
+            <div className='ui right aligned category search item'>
+              <div className='ui transparent icon input'>
+                <input className='prompt' type='text' placeholder='Search...' name="search" onChange={this.onChangeInput} autoComplete="off" />
+                <i className='search icon' />
               </div>
             </div>
           </Menu.Menu>
@@ -105,6 +148,23 @@ class PasswordManager extends Component {
             </Table.Body>
           </Table>
         </Segment>
+
+        <Header as="h3">
+          How does it work?
+        </Header>
+        <p>
+          I ask you to give an encryption key. Once you set that key you can create a new password which is then encrypted with that key.
+        </p>
+        <p>
+          The password is then saved in the encrypted form on the database in the internet, which means that nobody (not even me) can read your password unless that person knows the key. In other words: <b>The password is completely safe and solely accessible by you and only you!</b>
+        </p>
+        <p>
+          To decrypt your passwords simply type in the encryption key and all your passwords in your list are displayed correctly and readable in the form you had set them.
+        </p>
+        <hr />
+        <p>
+          I advise you to choose one encryption key and use it for all your passwords in your list. Why? Using the same key makes decrypting easier for you because <b>all</b> entries are being decrypted correctly at the same time by using one single key.
+        </p>
       </div>
     );
   }