minor changes

src/pages/Login.js

@@ -12,6 +12,7 @@ import { Container, Button, Form, Header, Segment, Input, Icon } from 'semantic-
 * Component imports
 */
 import LoadingPage from '../components/loadingPage';
+import Headline from '../components/Headline';
 
 jss.setup(preset());
 
@@ -126,6 +127,29 @@ const Login = inject("rootStore") ( observer(
                 <Button loading={this.state.loading} type='submit'>Go!</Button>
               </Form>
             </Segment>
+
+            <Segment padded="very">
+              <Headline black="Password " red="manager" />
+              <ul>
+                <li>
+                  Keep your passwords <b>organized</b> and access them
+                  from <b>every device</b>
+                </li>
+                <li>
+                  Sophisticated database access permissions and <b>client side encryption and decryption</b> make your password list readable only to you, even in the unlikely event that the software gets hacked!
+                </li>
+                <li>
+                  <b>Search</b> in your password list
+                </li>
+                <li>
+                  Automatic <b>password generator</b>
+                </li>
+                <li>
+                  <b>Copy</b> the password by just one button click
+                </li>
+              </ul>
+              <img alt="" className={this.classes.ninja} src={require('../files/images/ninja.svg')} />
+            </Segment>
           </Container>
         </div>
       );
@@ -141,6 +165,13 @@ const Login = inject("rootStore") ( observer(
             padding: '20%',
             paddingTop: '10%',
           }
+        },
+
+        ninja: {
+          width: '100px',
+          marginBottom: '-47px',
+          marginTop: '30px',
+          marginLeft: '20px'
         }
       }
     }

src/pages/Main.js

@@ -73,12 +73,12 @@ class Main extends Component {
       <Router history={history}>
         <Menu handleItemClick={this.handleItemClick}>
           <Container className={this.classes.mainContainer}>
-            <Segment className={this.classes.mainSegment}>
+            <Segment className={this.classes.mainSegment} padded="very">
               <Switch>
                 <Route exact path="/" component={Home} />
                 <Route path="/passwords" component={PasswordManager} />
               </Switch>
-              <img alt="" style={{width: '100px', marginBottom: '-20px', marginTop: '30px', marginLeft: '20px'}} src={require('../files/images/ninja.svg')} />
+              <img alt="" className={this.classes.ninja} src={require('../files/images/ninja.svg')} />
             </Segment>
           </Container>
         </Menu>
@@ -95,6 +95,13 @@ class Main extends Component {
 
       mainSegment: {
         position: 'static !important'
+      },
+
+      ninja: {
+        width: '100px',
+        marginBottom: '-47px',
+        marginTop: '30px',
+        marginLeft: '20px'
       }
     }
   }

src/pages/passwordManager/New.js

@@ -187,7 +187,7 @@ const New = inject("rootStore") ( observer(
                     </Input>
                   </Form.Field>
 
-                  <p>The encryption key for this entry is '<b>{this.props.encryptionkey}</b>'</p>
+                  <p>Login and password are going to be encrypted with the key you have set.</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>

src/pages/passwordManager/PasswordManager.js

@@ -4,6 +4,7 @@ import jss from 'jss';
 import preset from 'jss-preset-default';
 import { Menu, Segment, Dropdown, Table, Button, Loader, Icon, Header, Input } from 'semantic-ui-react';
 import alertify from 'alertify.js';
+import ReactHtmlParser from 'react-html-parser';
 
 /*
 * Functions import
@@ -143,6 +144,8 @@ const PasswordManager = inject("rootStore") ( observer(
       var components = [];
 
       function copyToClipboard(string) {
+        //Copy string to clipboard
+
         var textArea = document.createElement("textarea");
         textArea.style.position = 'fixed';
         textArea.style.top = 0;
@@ -170,6 +173,15 @@ const PasswordManager = inject("rootStore") ( observer(
         }
         document.body.removeChild(textArea);
       }
+
+      function transformUrl(text) {
+        //Transforms url into clickable link
+
+        var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;
+        var text1 = text.replace(exp, '<a target="_blank" href="$1">$1</a>');
+        var exp2 = /(^|[^/])(www\.[\S]+(\b|$))/gim;
+        return ReactHtmlParser(text1.replace(exp2, '$1<a target="_blank" href="http://$2">$2</a>'));
+      }
       
       dataList.forEach((element, index) => {
         if(element.url.includes(this.state.search)) {
@@ -179,16 +191,21 @@ const PasswordManager = inject("rootStore") ( observer(
           const copyPassword = () => {
             copyToClipboard(decrypt(element.password, this.state.key));
           }
+        
+          const url = transformUrl(element.url);
+          const password = decrypt(element.password, this.state.key);
+          const login = decrypt(element.login, this.state.key);
+
           components.push(
             <Table.Row key={index}>
-              <Table.Cell>{element.url}</Table.Cell>
-              <Table.Cell>{decrypt(element.login, this.state.key)}</Table.Cell>
+              <Table.Cell>{url}</Table.Cell>
+              <Table.Cell>{login}</Table.Cell>
               <Table.Cell>
                 <Button icon>
                   <Icon onClick={copyLogin} name='copy' />
                 </Button>
               </Table.Cell>
-              <Table.Cell>{decrypt(element.password, this.state.key)}</Table.Cell>
+              <Table.Cell>{password}</Table.Cell>
               <Table.Cell>
                 <Button icon>
                   <Icon onClick={copyPassword} name='copy' />