new password window

src/components/Menu/Menu.js

@@ -37,7 +37,7 @@ const Main = inject("rootStore") ( observer(
 
       /*
       * Expected props
-      *   - /
+      *   - handleItemClick(): function, void
       */
 
       //Stored information

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'
       }
     }
   }

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;

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...' />
+                <input className='prompt' type='text' placeholder='Encryption key...' name="key" onChange={this.onChangeInput} autoComplete="off" />
-                <i className='search link icon' />
+                <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>
     );
   }