regenerate random password, some layout changes

src/components/PasswordManager/Edit.js

@@ -9,6 +9,7 @@ import alertify from 'alertify.js';
 * Functions import
 */
 import { encrypt, decrypt } from '../../stores/functions/encryption';
+import { generatePassword } from '../../stores/functions/generatePassword';
 
 /*
 * Component imports
@@ -57,6 +58,7 @@ const Edit = inject("rootStore") ( observer(
 
       this.handleChange = this.handleChange.bind(this);
       this.handleSubmit = this.handleSubmit.bind(this);
+      this.dice = this.dice.bind(this);
 
       this.state = {
         url: '',
@@ -116,6 +118,15 @@ const Edit = inject("rootStore") ( observer(
     }
 
 
+    dice() {
+      //Generate a new random password
+      
+      this.setState({
+        password: generatePassword()
+      });
+    }
+
+
     handleSubmit() {
       const url = this.state.url;
       const login = encrypt(this.state.login, this.props.encryptionkey);
@@ -172,25 +183,45 @@ const Edit = inject("rootStore") ( observer(
                 <Form onSubmit={this.handleSubmit}>
                   <Form.Field>
                     <label>Application / URL:</label>
-                    <Input iconPosition='left' placeholder='http://exmple.com'>
+                    <Input 
-                      <input value={url} type="text" name="url" id="url" onChange={this.handleChange} autoComplete="off" required />
+                      defaultValue={url} 
-                    </Input>
+                      name="url" 
+                      id="url" 
+                      onChange={this.handleChange} 
+                      type="text" 
+                      placeholder="http://alexbell.ninja"
+                      required
+                     />
                   </Form.Field>
 
                   <Form.Field>
                     <label>Username / email adress:</label>
-                    <Input iconPosition='left' placeholder='example@example.com'>
+                    <Input 
-                      <input value={login} type="text" name="login" onChange={this.handleChange} autoComplete="off" required />
+                      defaultValue={login} 
-                    </Input>
+                      name="login" 
+                      onChange={this.handleChange} 
+                      type="text" 
+                      placeholder="example@example.com"
+                      required
+                     />
                   </Form.Field>
 
                   <Form.Field>
                     <label>Password:</label>
-                    <Input iconPosition='left' placeholder='********'>
+                    <Input 
-                      <input value={password} type="text" name="password" onChange={this.handleChange} autoComplete="off" required />
+                      value={password} 
-                    </Input>
+                      name="password" 
+                      onChange={this.handleChange} 
+                      type="text" 
+                      placeholder='********' 
+                      label={<Button onClick={this.dice} type="button" icon><Icon name='random' /></Button>} 
+                      labelPosition="right" 
+                      required
+                     />
                   </Form.Field>
 
+                  
+
                   <p>Login and password are going to be encrypted with the key you have set.</p>
 
                   <Button loading={this.state.loading} type='submit' primary>Update</Button>

src/components/PasswordManager/New.js

@@ -9,6 +9,7 @@ import alertify from 'alertify.js';
 * Functions import
 */
 import { encrypt } from '../../stores/functions/encryption';
+import { generatePassword } from '../../stores/functions/generatePassword';
 
 /*
 * Component imports
@@ -57,11 +58,12 @@ const New = inject("rootStore") ( observer(
 
       this.handleChange = this.handleChange.bind(this);
       this.handleSubmit = this.handleSubmit.bind(this);
+      this.dice = this.dice.bind(this);
 
       this.state = {
         url: '',
         login: '',
-        password: this.generatePassword(),
+        password: generatePassword(),
         loading: false
       }
 
@@ -80,7 +82,7 @@ const New = inject("rootStore") ( observer(
         this.setState({
           url: '',
           login: '',
-          password: this.generatePassword()
+          password: generatePassword()
         });
       }
     }
@@ -98,23 +100,6 @@ const New = inject("rootStore") ( observer(
     }
 
 
-    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) {
       this.setState({
         [e.target.name]: e.target.value
@@ -122,6 +107,15 @@ const New = inject("rootStore") ( observer(
     }
 
 
+    dice() {
+      //Generate a new random password
+      
+      this.setState({
+        password: generatePassword()
+      });
+    }
+
+
     handleSubmit() {
       const url = this.state.url;
       const login = encrypt(this.state.login, this.props.encryptionkey);
@@ -177,23 +171,41 @@ const New = inject("rootStore") ( observer(
 
                   <Form.Field>
                     <label>Application / URL:</label>
-                    <Input iconPosition='left' placeholder='http://exmple.com'>
+                    <Input 
-                      <input value={this.state.url} type="text" name="url" id="url" onChange={this.handleChange} autoComplete="off" required />
+                      defaultValue={this.state.url} 
-                    </Input>
+                      name="url" 
+                      id="url" 
+                      onChange={this.handleChange} 
+                      type="text" 
+                      placeholder="http://alexbell.ninja"
+                      required
+                     />
                   </Form.Field>
 
                   <Form.Field>
                     <label>Username / email adress:</label>
-                    <Input iconPosition='left' placeholder='example@example.com'>
+                    <Input 
-                      <input value={this.state.login} type="text" name="login" onChange={this.handleChange} autoComplete="off" required />
+                      defaultValue={this.state.login} 
-                    </Input>
+                      name="login" 
+                      onChange={this.handleChange} 
+                      type="text" 
+                      placeholder="example@example.com"
+                      required
+                     />
                   </Form.Field>
 
                   <Form.Field>
                     <label>Password:</label>
-                    <Input iconPosition='left' placeholder='********'>
+                    <Input 
-                      <input value={this.state.password} type="text" name="password" onChange={this.handleChange} autoComplete="off" required />
+                      value={this.state.password} 
-                    </Input>
+                      name="password" 
+                      onChange={this.handleChange} 
+                      type="text" 
+                      placeholder='********' 
+                      label={<Button onClick={this.dice} type="button" icon><Icon name='random' /></Button>} 
+                      labelPosition="right" 
+                      required
+                     />
                   </Form.Field>
 
                   <p>Login and password are going to be encrypted with the key you have set.</p>

src/pages/passwordManager/PasswordManager.js

@@ -239,13 +239,13 @@ const PasswordManager = inject("rootStore") ( observer(
               <Table.Cell>{url}</Table.Cell>
               <Table.Cell>{login}</Table.Cell>
               <Table.Cell>
-                <Button icon onClick={copyLogin}>
+                <Button icon onClick={copyLogin} circular>
                   <Icon name='copy' />
                 </Button>
               </Table.Cell>
               <Table.Cell>{password}</Table.Cell>
               <Table.Cell>
-                <Button icon onClick={copyPassword}>
+                <Button icon onClick={copyPassword} circular>
                   <Icon  name='copy' />
                 </Button>
               </Table.Cell>
@@ -269,9 +269,18 @@ const PasswordManager = inject("rootStore") ( observer(
 
           <Headline black="Password " red="manager" />
 
-          <Input icon placeholder='Search...'>
+          <Input 
-            <input type='text' id="search" placeholder='Search...' name="search" onChange={this.onChangeInput} autoComplete="off" />
+            icon 
+            placeholder='Search...'
+            type='text' 
+            id="search" 
+            name="search" 
+            onChange={this.onChangeInput}
+            iconPosition='left'
+            transparent
+           >
             <Icon name='search' />
+            <input />
           </Input>
 
           <Menu attached='top'>

src/stores/functions/generatePassword.js

@@ -0,0 +1,15 @@
+export function 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;
+    }
+  }
+}