Lock.IT Demo 0.1-alpha.1

kun-zhou · Nov 27, 2017 · 3bfa038 · 3bfa038
1 parent f1768c5
commit 3bfa038
Show file tree

Hide file tree

Showing 17 changed files with 164 additions and 139 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 **Lockit is an open source formatted content manager built with [Electron](https://github.com/atom/electron), [React](https://facebook.github.io/react/), and [Redux](https://github.com/reactjs/redux)**
 
 <p align="center">
-  <a href="https://youtu.be/TZxJ-n1rRZs"><img src="http://misc.kunzhou.me/lockit.png" style="width: 62%"/></a>
+  <a href="https://youtu.be/UAtPC051eoo"><img src="http://misc.kunzhou.me/lockit.png" style="width: 62%"/></a>
 </p>
 
 *Click the image for a video demo!*
@@ -20,6 +20,14 @@ Each vault is encrypted with AES-GCM-256, including cache, and only decrypted in
 
 ## Getting Started
 
+### Users
+
+The pre-realease of Lock.IT is already available. Head over to the <a href="https://github.com/kun-zhou/lockit/releases"/>releases</a> tab to download the latest version. Just know that some functionalities are still lacking (like deleteing the vault), but will be coming very soon. When the first public release comes out, existing secrets will still be intact, so there is nothing to worry about in this regard.
+
+Cheers and enjoy!
+
+### Developers
+
 To build and run, run
 
 ```shell

diff --git a/browser/actions/index.js b/browser/actions/index.js
@@ -42,18 +42,34 @@ export const ATTEMPT_UNLOCK = (location, password) => (dispatch) => { //idx sign
 /** 2. CREATE_DB
  * vault name and password
  */
-export const CREATE_DB = (name, passwd) => {
-    var action = { type: 'CREATE_DB' }
+export const CREATE_DB = (name, passwd) => (dispatch) => {
     var { success, message, location } = dataAPI.createVault(name, passwd)
-    action.success = success
-    if (!success) {
-        action.status = message
-        return action
-    } else {
+    if (success) {
         config.addDB(name, location)
-        action.status = 'SELECT_DB'
-        return action
     }
+    return { success, message }
+    /* 
+     dispatch({ type: 'CREATE_DB_PENDING' })
+     var action = { type: 'CREATE_DB_DONE' }
+     const dbCreation = new Promise((resolve, reject) => {
+         var { success, message, location } = dataAPI.createVault(name, passwd)
+         console.log('promise run')
+         success ? resolve(message, location) : reject(message)
+     })
+ 
+     dbCreation
+         .then((message, location) => {
+             action.success = true
+             config.addDB(name, location)
+             action.status = 'CREATED'
+             dispatch(action)
+         })
+         .catch((message) => {
+             action.success = false
+             action.status = message
+             dispatch(action)
+         })
+         */
 }
 
 // Responding to UI Changes
@@ -214,7 +230,7 @@ export const SAVE_SECRET = () => (dispatch, getState) => {
 }
 
 export const CLOSE_DB = () => (dispatch, getState) => {
-    dataAPI.closeVault(getState.get('cache').toJS())
+    dataAPI.closeVault(getState().get('cache').toJS())
     dispatch({ type: 'DB_CLOSED' })
 }
 

diff --git a/browser/app.jsx b/browser/app.jsx
@@ -13,7 +13,7 @@ class App extends React.PureComponent {
 
     // Save Cache on Exit
     cleanupBeforeUnload = () => {
-        if (this.props.status === 'UNLOCKED') {
+        if (this.props.unlockStatus === 'UNLOCKED') {
             this.props.closeDB()
         }
     }
@@ -23,7 +23,7 @@ class App extends React.PureComponent {
     }
 
     render() {
-        if (this.props.status === 'UNLOCKED') return (
+        if (this.props.unlockStatus === 'UNLOCKED') return (
             <div id="app">
                 <NavWrapper />
                 <EntriesWrapper />
@@ -40,7 +40,7 @@ class App extends React.PureComponent {
 
 
 const mapStateToProps = state => ({
-    status: state.getIn(['status', 'status'])
+    unlockStatus: state.getIn(['status', 'unlock'])
 })
 
 const mapDispatchToProps = dispatch => ({

diff --git a/browser/components/info/key_value/fields/subfields_components/ContentField.jsx b/browser/components/info/key_value/fields/subfields_components/ContentField.jsx
@@ -12,7 +12,7 @@ import Textarea from "react-textarea-autosize";
 class ContentField extends React.PureComponent {
     constructor() {
         super()
-        this.state = { toolbar_shown: false, toolbar_stick: false }
+        this.state = { toolbar_shown: false, toolbar_stick: false, typeswitcher_shown: false }
         this.showToolbar = this.showToolbar.bind(this)
         this.hideToolbar = this.hideToolbar.bind(this)
     }
@@ -36,8 +36,8 @@ class ContentField extends React.PureComponent {
         this.setState({ toolbar_shown: false })
     }
 
-    handleTypeSwitcherClick = () => {
-        this.setState({ toolbar_stick: !this.state.toolbar_stick })
+    toggleTypeSwitcher = () => {
+        this.setState({ typeswitcher_shown: !this.state.typeswitcher_shown })
     }
 
     render() {
@@ -67,9 +67,9 @@ class ContentField extends React.PureComponent {
                             <span className={'placeholder'}>field content</span>
                     }
                     {/* Toolbar */}
-                    <div className={this.state.toolbar_stick || this.state.toolbar_shown ? sty['field-content-display-btns'] : 'is-hidden ' + sty['field-content-display-btns']} >
+                    <div className={this.state.typeswitcher_shown || this.state.toolbar_shown ? sty['field-content-display-btns'] : 'is-hidden ' + sty['field-content-display-btns']} >
                         <i className='fal fa-fw fa-clipboard' onClick={this.handlePaste} />
-                        <TypeSwitcher {...this.props} onClick={this.handleTypeSwitcherClick} />
+                        <TypeSwitcher {...this.props} toggleTypeSwitcher={this.toggleTypeSwitcher} open={this.state.typeswitcher_shown} />
                     </div>
                 </div>
             )

diff --git a/browser/components/info/key_value/fields/subfields_components/TypeSwitcher.jsx b/browser/components/info/key_value/fields/subfields_components/TypeSwitcher.jsx
@@ -8,21 +8,20 @@ class TypeSwitcher extends React.PureComponent {
     constructor(props) {
         super(props)
         this.state = {
-            open: false,
             anchorEl: null,
         }
         this.types = ['text', 'code', 'link', 'note']
     }
 
     toggleDropdown = (e) => {
-        this.setState({ open: !this.state.open, anchorEl: e.currentTarget })
-        this.props.onClick()
+        this.props.toggleTypeSwitcher()
+        this.setState({ anchorEl: e.currentTarget })
         e.stopPropagation()
     }
 
     handleTypeClick = (type) => () => {
         this.props.toggleFieldType(type)
-        this.setState({ open: !this.state.open, anchorEl: event.currentTarget })
+        this.props.toggleTypeSwitcher()
     }
 
     render() {
@@ -33,7 +32,7 @@ class TypeSwitcher extends React.PureComponent {
                     anchorEl={this.state.anchorEl}
                     anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
                     transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-                    open={this.state.open}
+                    open={this.props.open}
                     onRequestClose={this.toggleDropdown}
                     className={sty['dropdown']}
                 >
@@ -50,7 +49,7 @@ class TypeSwitcher extends React.PureComponent {
                     className={sty['btn-add']}
                     onClick={this.toggleDropdown}
                 >
-                    <i className={(this.state.open ? 'fas' : 'fal') + ' fa-fw fa-cog'} />
+                    <i className={(this.props.open ? 'fas' : 'fal') + ' fa-fw fa-cog'} />
                 </button>
             </div>
         )

diff --git a/browser/components/info/meta/meta.jsx b/browser/components/info/meta/meta.jsx
@@ -61,7 +61,7 @@ class Tags extends React.PureComponent {
                 {ListTags}
                 <input
                     className={sty['tag-input']}
-                    placeholder='add tag'
+                    placeholder='add tag (press return after entering tag name)'
                     onFocus={this.bindHotKey}
                     onBlur={this.unbindHotkey}
                 />

diff --git a/browser/components/info/meta/sty.cssm b/browser/components/info/meta/sty.cssm
@@ -20,7 +20,7 @@
 .tags-wrapper {
     display: flex;
     align-items: center;
-    min-height: 20px
+    min-height: 20px;
 }
 
 .tag {
@@ -31,19 +31,20 @@
     margin-left: 3px;
 }
 
-.tag-label{
+.tag-label {
     padding-left: 8px;
     padding-right: 8px;
 }
+
 .tag-del {
     height: 17px;
     margin-right: 3px;
-
 }
 
 .tag-input {
     margin-left: 4px;
     height: 100%;
     border: none;
     font-size: 14px;
+    width: 100%;
 }
diff --git a/browser/components/nav/nav.jsx b/browser/components/nav/nav.jsx
@@ -92,7 +92,6 @@ class CategoryList extends React.PureComponent {
 class TagList extends React.PureComponent {
     render() {
         var tags = this.props.tags
-        console.log(tags)
         return (
             <NavList title={'Tags'}>
                 {tags.keySeq().map((name) => <NavItem

diff --git a/browser/components/setup/selectDB.jsx b/browser/components/setup/selectDB.jsx
@@ -14,20 +14,28 @@ import Dialog, {
 class NewDBDialog extends React.PureComponent {
     constructor() {
         super()
-        this.state = { name: '', password: '' }
-        this.handleFormChange = this.handleFormChange.bind(this)
-        this.createVault = this.createVault.bind(this)
+        this.state = { name: '', password: '', message: '' }
     }
 
-    handleFormChange(field) {
-        return (event) => {
-            this.setState({ [field]: event.target.value })
-        }
+    handleFormChange = (field) => (event) => {
+        this.setState({ [field]: event.target.value })
+    }
+
+    closeDialog = () => {
+        this.setState({ name: '', password: '', message: '' })
+        this.props.toggleDialog()
     }
 
-    createVault() {
-        if ((this.state.name + this.state.password)) {
-            this.props.setupDB(this.state.name, this.state.password)
+    createVault = () => {
+        var { success, message } = this.props.createVault(this.state.name, this.state.password)
+        if (success) {
+            this.props.toggleDialog()
+        } else {
+            message = message === 'PASSWORD_INVALID' ?
+                'Password needs to be at least 8 characters long' :
+                message
+            this.setState({ message })
+            console.log(message)
         }
     }
 
@@ -54,10 +62,10 @@ class NewDBDialog extends React.PureComponent {
                         fullWidth
                         onChange={this.handleFormChange('password')}
                     />
-                    <p style={{ height: '20px', color: 'red' }}>{this.props.message === 'PASSWORD_INVALID' ? 'Password needs to be at least 8 characters long' : this.props.message}</p>
+                    <p style={{ height: '20px', color: 'red' }}>{this.state.message}</p>
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={this.props.handleRequestClose} color="accent">
+                    <Button onClick={this.closeDialog} color="accent">
                         Cancel
                     </Button>
                     <Button onClick={this.createVault} color="primary">
@@ -85,14 +93,20 @@ function DB({ db, highlighted_db, handleDBClick }) {
 }
 
 class SelectDB extends React.PureComponent {
-    constructor() {
+    constructor(props) {
         super()
         var defaultDB = config.getDefaultDBLocation()
-        this.state = { highlighted_db: defaultDB ? defaultDB : null, passwd: '', toggle_new_db: false }
+        this.state = {
+            highlighted_db: defaultDB ? defaultDB : null,
+            passwd: '',
+            dialog_open: false,
+            dialog_message: '',
+            message: ''
+        }
     }
 
     toggleNewDB = () => {
-        this.setState({ toggle_new_db: !this.state.toggle_new_db })
+        this.setState({ dialog_open: !this.state.dialog_open })
     }
 
     handleDBClick = (location) => {
@@ -111,28 +125,18 @@ class SelectDB extends React.PureComponent {
         this.setState({ passwd: e.target.value })
     }
 
-    setupDB = (name, passwd) => {
-        this.props.setupDB(name, passwd)
-        this.toggleNewDB()
-        //this.forceUpdate()
-    }
-
-    componentWillUpdate(nextProps) {
-        if (this.state.toggle_new_db && nextProps.status === 'SELECT_DB')
-            this.setState({ toggle_new_db: false })
+    componentWillReceiveProps(nextProps) {
+        var unlock = nextProps.status.get('unlock')
+        if (unlock !== null) {
+            this.setState({ message: unlock })
+        }
     }
 
     render() {
         var listOfDB = config.getDBList().map(
             (db) => <DB db={db} highlighted_db={this.state.highlighted_db} handleDBClick={this.handleDBClick} />
         )
-        var helperText
 
-        if (this.state.toggle_new_db || this.props.status === 'SELECT_DB') {
-            helperText = ''
-        } else {
-            helperText = this.props.status
-        }
         return (
             <div className={sty['wrapper-select-db']}>
                 <Button
@@ -142,10 +146,10 @@ class SelectDB extends React.PureComponent {
                     Add New Vault
                 </Button>
                 <NewDBDialog
-                    open={this.state.toggle_new_db}
-                    handleRequestClose={this.toggleNewDB}
-                    setupDB={this.props.setupDB}
-                    message={this.props.status !== 'SELECT_DB' ? this.props.status : ''}
+                    open={this.state.dialog_open}
+                    toggleDialog={this.toggleNewDB}
+                    createVault={this.props.setupDB}
+                    message={this.state.dialog_message}
                 />
                 <div className={sty['database-list']}>
                     <h2 className={sty['database-list-header']}>Vaults</h2>
@@ -161,7 +165,7 @@ class SelectDB extends React.PureComponent {
                             FormHelperTextProps={{
                                 error: true
                             }}
-                            helperText={helperText}
+                            helperText={this.state.message}
                             fullWidth
                         />
                         <Button classes={{ root: sty['btn-confirm-password'] }} raised color="primary" onClick={this.unlockDB}>UNLOCK</Button>

diff --git a/browser/components/setup/setup.jsx b/browser/components/setup/setup.jsx
@@ -5,10 +5,19 @@ import SelectDB from './selectDB.jsx'
 import WelcomePage from './welcomePage.jsx'
 
 class Setup extends React.PureComponent {
+    constructor(props) {
+        super()
+        this.state = { context: props.status.get('welcome') ? 'WELCOME' : 'WELCOME_BACK' }
+    }
+
+    triggerWelcomeBack = () => {
+        this.setState({ context: 'WELCOME_BACK' })
+    }
+
     render() {
-        switch (this.props.context) { // i.e., LOCKED
+        switch (this.state.context) { // i.e., LOCKED
             case 'WELCOME':
-                return <WelcomePage {...this.props} />
+                return <WelcomePage {...this.props} triggerWelcomeBack={this.triggerWelcomeBack} />
             case 'WELCOME_BACK':
                 return <SelectDB {...this.props} />
             default: