diff --git a/public/favicon.ico b/public/favicon.ico index a11777c..c4b0198 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index 2ed77f6..58e4df9 100644 --- a/public/index.html +++ b/public/index.html @@ -10,9 +10,12 @@ Ninja + +
+ diff --git a/src/App.js b/src/App.js index d0f6f89..672130e 100644 --- a/src/App.js +++ b/src/App.js @@ -42,7 +42,7 @@ const App = inject("rootStore") ( observer( const body = document.getElementsByTagName('body')[0]; body.style.margin = '0'; body.style.padding = '0'; - body.style.overflow = 'hidden'; + body.style.overflow = 'auto'; //Load app this.stores.rootStore.loadApp(); diff --git a/src/components/Headline.js b/src/components/Headline.js new file mode 100644 index 0000000..2921b5a --- /dev/null +++ b/src/components/Headline.js @@ -0,0 +1,17 @@ +import React from 'react'; + +export default function(props) { + /* + * Expected props + * - black: String + * the text in black + * - red: String + * the text in red + */ + + return( +

+ {props.black}{props.red} +

+ ) +} \ No newline at end of file diff --git a/src/components/Menu/Menu.js b/src/components/Menu/Menu.js index 30228d8..7f64059 100644 --- a/src/components/Menu/Menu.js +++ b/src/components/Menu/Menu.js @@ -113,9 +113,7 @@ const Main = inject("rootStore") ( observer( -
- {this.props.children} -
+ {this.props.children} ); } else { @@ -123,35 +121,33 @@ const Main = inject("rootStore") ( observer( //Mobile sidebar return( -
- - - - - + + + + + - - Home - + + Home + - - Password manager - - + + Password manager + + - - - {this.props.children} - - -
+ + + {this.props.children} + + ) } diff --git a/src/files/images/ninja.svg b/src/files/images/ninja.svg new file mode 100644 index 0000000..09b6cc6 --- /dev/null +++ b/src/files/images/ninja.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/Main.js b/src/pages/Main.js index 36d4058..76a4efb 100644 --- a/src/pages/Main.js +++ b/src/pages/Main.js @@ -78,6 +78,7 @@ class Main extends Component { + diff --git a/src/pages/home/Home.js b/src/pages/home/Home.js index 51ca168..1bab6e3 100644 --- a/src/pages/home/Home.js +++ b/src/pages/home/Home.js @@ -1,6 +1,7 @@ import React, {Component} from 'react'; import jss from 'jss'; import preset from 'jss-preset-default'; +import { Container } from 'semantic-ui-react'; /* * Functions import @@ -9,6 +10,7 @@ import preset from 'jss-preset-default'; /* * Component imports */ +import Headline from '../../components/Headline'; jss.setup(preset()); @@ -53,9 +55,16 @@ class Home extends Component { render() { return( -
- Home -
+ + + +

+ You are signed in on alexbell.ninja. What can you do here?
+ Well, I like developing software in my freetime, mainly applications + for my personal use. They might also be of advantage for you, so feel free + to browse around a little and try some of what you can find here :) +

+ ); } diff --git a/src/pages/passwordManager/New.js b/src/pages/passwordManager/New.js index 39e49f2..2dd6896 100644 --- a/src/pages/passwordManager/New.js +++ b/src/pages/passwordManager/New.js @@ -1,11 +1,14 @@ import React, {Component} from 'react'; +import { observer, inject } from 'mobx-react'; import jss from 'jss'; import preset from 'jss-preset-default'; import { Segment, Container, Header, Form, Input, Button, Icon } from 'semantic-ui-react'; +import alertify from 'alertify.js'; /* * Functions import */ +import { encrypt } from '../../stores/functions/encryption'; /* * Component imports @@ -13,6 +16,11 @@ import { Segment, Container, Header, Form, Input, Button, Icon } from 'semantic- jss.setup(preset()); +//Firebase +var firebase = require('../../stores/fb').fb; +// Initialize Cloud Firestore through Firebase +var db = firebase.firestore(); + /* ############################### @@ -28,54 +36,61 @@ Components -- END -class New extends Component { - constructor(props){ - super(props); - //Add a new password window +const New = inject("rootStore") ( observer( + 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 - */ + /* + * 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 - } + //Stored information + this.stores = this.props.rootStore.stores; - //Styles - this.styles = this.getStyles(); - this.sheet = jss.createStyleSheet(this.styles); - const {classes} = this.sheet.attach(); - this.classes = classes; - //Styles - } + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); - - componentWillReceiveProps(nextProps) { - if(nextProps.open !== this.props.open) { - this.setState({ + this.state = { url: '', login: '', - password: this.generatePassword() - }); + 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() - } + componentWillUnmount() { + this.sheet.detach() + } - generatePassword() { + generatePassword() { //Creates a unique id for each chat bubble so that the animation can be triggered var random = ""; @@ -89,78 +104,111 @@ class New extends Component { return random; } } - } - - - handleChange(e, {name}) { - this.setState({ - [name]: e.target.value - }); - } - - - render() { - if(this.props.open) { - return( -
- - -
-
- Add a password -
- - - - - - - - - - - - - - - - - - - - - - -

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

- - - - -
- - -
- ); - } 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%' + handleChange(e) { + this.setState({ + [e.target.name]: e.target.value + }); + } + + + handleSubmit() { + const url = this.state.url; + const login = encrypt(this.state.login, this.props.encryptionkey); + const password = encrypt(this.state.password, this.props.encryptionkey); + const uid = this.stores.authStore.userData.uid; + + db.collection("passwords").add({ + uid: uid, + url: url, + login: login, + password: password, + time: new Date() + }) + .then((docRef) => { + console.log("Document written with ID: ", docRef.id); + alertify.success("Document successfully added!"); + this.props.toggleNewWindow(); + }) + .catch(function(error) { + console.error("Error adding document: ", error); + alertify.error("Something went wrong! Please check your internet connection"); + this.setState({ + loading: false + }); + }); + + this.setState({ + loading: true + }); + } + + + render() { + if(this.props.open) { + return( +
+ + +
+
+ Add a password +
+ + + + + + + + + + + + + + + + + + + + + + +

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

+ + + + +
+ + +
+ ); + } 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 c233adc..64623c7 100644 --- a/src/pages/passwordManager/PasswordManager.js +++ b/src/pages/passwordManager/PasswordManager.js @@ -1,20 +1,28 @@ import React, {Component} from 'react'; +import { observer, inject } from 'mobx-react'; import jss from 'jss'; import preset from 'jss-preset-default'; -import { Menu, Segment, Dropdown, Table, Button, Icon, Header } from 'semantic-ui-react'; +import { Menu, Segment, Dropdown, Table, Button, Loader, Icon, Header, Input } from 'semantic-ui-react'; import alertify from 'alertify.js'; /* * Functions import */ +import { decrypt } from '../../stores/functions/encryption'; /* * Component imports */ import New from './New'; +import Headline from '../../components/Headline'; jss.setup(preset()); +//Firebase +var firebase = require('../../stores/fb').fb; +// Initialize Cloud Firestore through Firebase +var db = firebase.firestore(); + /* ############################### @@ -30,151 +38,201 @@ Components -- END -class PasswordManager extends Component { - constructor(props){ - super(props); - //Password Manager page +const PasswordManager = inject("rootStore") ( observer( + class PasswordManager extends Component { + constructor(props){ + super(props); + //Password Manager page - /* - * Expected props - * - / - */ + /* + * Expected props + * - / + */ - this.toggleNewWindow = this.toggleNewWindow.bind(this); - this.onChangeInput = this.onChangeInput.bind(this); + //Stored information + this.stores = this.props.rootStore.stores; - this.state = { - newWindowOpen: false, - key: '', - search: '' + this.toggleNewWindow = this.toggleNewWindow.bind(this); + this.onChangeInput = this.onChangeInput.bind(this); + + this.state = { + newWindowOpen: false, + key: '', + search: '', + data: [], + loading: true + } + + //Styles + this.styles = this.getStyles(); + this.sheet = jss.createStyleSheet(this.styles); + const {classes} = this.sheet.attach(); + this.classes = classes; + //Styles } - //Styles - this.styles = this.getStyles(); - this.sheet = jss.createStyleSheet(this.styles); - const {classes} = this.sheet.attach(); - this.classes = classes; - //Styles - } + + componentDidMount() { + this.fetchData(); + } - componentWillUnmount() { - this.sheet.detach() - } + componentWillUnmount() { + this.sheet.detach() + } - onChangeInput(e) { - //Encryption key and search input + 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 + [e.target.name]: e.target.value }); - } else { - alertify.error("Please set an encryption key!"); + } + + + toggleNewWindow() { + //Open window to add a new password doc + + if(this.state.key !== '') + { + this.setState({ + newWindowOpen: !this.state.newWindowOpen + }); + } else { + alertify.error("Please set an encryption key!"); + } + } + + + fetchData() { + //Gets password list from firestore and + //Writes in this.state + + const uid = this.stores.authStore.userData.uid; + + db.collection("passwords").where("uid", "==", uid).orderBy("time", "desc").get().then((querySnapshot) => { + var arr = []; + querySnapshot.forEach((doc) => { + const data = doc.data(); + arr.push(data); + }); + this.setState({ + data: arr, + loading: false + }); + }); + } + + + displayData(dataList) { + //Returns array with all table row components + var components = []; + + dataList.forEach((element, index) => { + components.push( + + {element.url} + {decrypt(element.login, this.state.key)} + + + + {decrypt(element.password, this.state.key)} + + + + + ); + }); + + return components; + } + + + render() { + const tableRows = this.displayData(this.state.data) + + return( +
+ + + + + + + + + + + + + + New + + + + + +
+
+ + +
+
+ + + + + + + + + Application / URL + Username / Email adress + Copy + Password + Copy + + + + + {tableRows} + +
+ + + +
+ How does it work? Is it safe? +
+

+ 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. +

+

+ 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: The password is completely safe and solely accessible by you and only you! +

+

+ 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. +

+
+

+ 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 all entries are being decrypted correctly at the same time by using one single key. +

+
+ ); + } + + + getStyles() { + return { + + } } } - - - render() { - return( -
- - - - - - New - - - - - -
-
- - -
-
- -
-
- - -
-
- - - - - - - - Application / URL - Username / Email adress - Copy - Password - Copy - - - - - - cell - cell - - - - cell - - - - - -
- - -
- How does it work? -
-

- 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. -

-

- 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: The password is completely safe and solely accessible by you and only you! -

-

- 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. -

-
-

- 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 all entries are being decrypted correctly at the same time by using one single key. -

-
- ); - } - - - getStyles() { - return { - - } - } -} +)); export default PasswordManager; diff --git a/src/stores/functions/encryption.js b/src/stores/functions/encryption.js new file mode 100644 index 0000000..bc605eb --- /dev/null +++ b/src/stores/functions/encryption.js @@ -0,0 +1,13 @@ +function norm_to_ascii(string){return unescape(encodeURIComponent(string))}; +function norm_to_unicode(string){return decodeURIComponent(escape(string))}; +function crypt_sym(string,k){return String.fromCharCode.apply(undefined,string.split("").map(function(c){return c.charCodeAt(0)^(k||13)}))}; + +export function encrypt(string, key) { + //Encrypt a string + return btoa(crypt_sym(norm_to_ascii(string), key)); +} + +export function decrypt(string, key) { + //Decrypt a string + return crypt_sym(norm_to_unicode(atob(string)), key); +} \ No newline at end of file