diff --git a/package.json b/package.json index 6ce72db..c46b2c2 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "mobx-react": "^5.2.8", "react": "^16.5.0", "react-dom": "^16.5.0", + "react-html-parser": "^2.0.2", "react-jss": "^8.6.1", "react-router": "^4.3.1", "react-router-dom": "^4.3.1", diff --git a/src/components/Menu/Menu.js b/src/components/Menu/Menu.js index 7f64059..143b96e 100644 --- a/src/components/Menu/Menu.js +++ b/src/components/Menu/Menu.js @@ -141,6 +141,12 @@ const Main = inject("rootStore") ( observer( Password manager + + + + + + diff --git a/src/pages/Login.js b/src/pages/Login.js index 9ce03e1..a1b7d50 100644 --- a/src/pages/Login.js +++ b/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( + + + +
    +
  • + Keep your passwords organized and access them + from every device +
    • +
  • + Sophisticated database access permissions and client side encryption and decryption make your password list readable only to you, even in the unlikely event that the software gets hacked! +
    • +
  • + Search in your password list +
    • +
  • + Automatic password generator +
    • +
  • + Copy the password by just one button click +
    • +
+ + ); @@ -141,6 +165,13 @@ const Login = inject("rootStore") ( observer( padding: '20%', paddingTop: '10%', } + }, + + ninja: { + width: '100px', + marginBottom: '-47px', + marginTop: '30px', + marginLeft: '20px' } } } diff --git a/src/pages/Main.js b/src/pages/Main.js index 76a4efb..69c30f6 100644 --- a/src/pages/Main.js +++ b/src/pages/Main.js @@ -73,12 +73,12 @@ class Main extends Component { - + - + @@ -95,6 +95,13 @@ class Main extends Component { mainSegment: { position: 'static !important' + }, + + ninja: { + width: '100px', + marginBottom: '-47px', + marginTop: '30px', + marginLeft: '20px' } } } diff --git a/src/pages/passwordManager/New.js b/src/pages/passwordManager/New.js index 68dd419..598a291 100644 --- a/src/pages/passwordManager/New.js +++ b/src/pages/passwordManager/New.js @@ -187,7 +187,7 @@ const New = inject("rootStore") ( observer( -

The encryption key for this entry is '{this.props.encryptionkey}'

+

Login and password are going to be encrypted with the key you have set.

diff --git a/src/pages/passwordManager/PasswordManager.js b/src/pages/passwordManager/PasswordManager.js index b7700e5..98739b7 100644 --- a/src/pages/passwordManager/PasswordManager.js +++ b/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, '$1'); + var exp2 = /(^|[^/])(www\.[\S]+(\b|$))/gim; + return ReactHtmlParser(text1.replace(exp2, '$1$2')); + } 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( - {element.url} - {decrypt(element.login, this.state.key)} + {url} + {login} - {decrypt(element.password, this.state.key)} + {password}