add create account and destroy account

app/components/Home.js

@@ -10,19 +10,15 @@ import Login from './Login';
 import { User } from '../utils/actors';
 import { ChatContext } from '../context';
 import { isContactCode } from '../utils/parsers';
-import { getKeyData, createVault, restoreVault } from '../utils/keyManagement';
+import { getKeyData, createVault, restoreVault, wipeVault } from '../utils/keyManagement';
 import { FullScreenLoader } from './Loaders';
 
-const mnemonic = "example exile argue silk regular smile grass bomb merge arm assist farm";
-
 const typingNotificationsTimestamp = {};
 
 const DEFAULT_CHANNEL = "mytest";
 const URL = "ws://localhost:8546";
 const status = new StatusJS();
 
-// let userPubKey = await status.getPublicKey();
-
 type Props = {};
 
 export default class Home extends Component<Props> {
@@ -37,12 +33,11 @@ export default class Home extends Component<Props> {
     currentChannel: DEFAULT_CHANNEL,
     usersTyping: { [DEFAULT_CHANNEL]: [] },
     identity: {},
-    loading: false
+    loading: false,
+    keyStore: getKeyData()
   };
 
-  componentDidMount() {
-    //this.setupKeyringController();
-  }
+  componentDidMount() {}
 
   componentWillUnmount() {
     clearInterval(this.pingInterval);
@@ -71,9 +66,9 @@ export default class Home extends Component<Props> {
     }, 5 * 1000)
   }
 
-  setupKeyringController = async (password) => {
+  setupKeyringController = async (password, mnemonic) => {
     this.setState({ loading: true });
-    const keyStore = getKeyData();
+    const { keyStore } = this.state;
     if (!keyStore) {
       this.keyringController = await createVault(password, mnemonic);
     } else {
@@ -83,6 +78,11 @@ export default class Home extends Component<Props> {
     this.connect(accounts[0]);
   }
 
+  wipeKeyStore = () => {
+    wipeVault();
+    this.setState({ keyStore: null });
+  }
+
   setActiveChannel = channelName => {
     this.setState({ currentChannel: channelName,  });
   }
@@ -237,9 +237,9 @@ export default class Home extends Component<Props> {
   }
 
   render() {
-    const { messages, channels, currentChannel, users, usersTyping, identity, loading } = this.state;
+    const { messages, channels, currentChannel, users, usersTyping, identity, loading, keyStore } = this.state;
     const channelUsers = channels[currentChannel].users;
-    const { setActiveChannel, setupKeyringController } = this;
+    const { setActiveChannel, setupKeyringController, wipeKeyStore } = this;
     const chatContext = { setActiveChannel, currentChannel, users, channels };
     console.log(identity)
 
@@ -249,7 +249,10 @@ export default class Home extends Component<Props> {
          ? <FullScreenLoader />
          : <Fragment>
            {!identity.publicKey
-            ? <Login setupKeyringController={setupKeyringController} />
+            ? <Login
+                setupKeyringController={setupKeyringController}
+                keyStore={keyStore}
+                wipeKeyStore={wipeKeyStore} />
             : <Grid container spacing={0}>
               <Grid item xs={3}>
                 {!isNil(channels) && <ContextPanel

app/components/Login.js

@@ -4,6 +4,7 @@ import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 import { Formik } from 'formik';
 import { func } from 'prop-types';
+import { isNull } from 'lodash';
 
 const containerStyle = {
   display: 'flex',
@@ -12,7 +13,7 @@ const containerStyle = {
   height: '100vh',
   width: '50%'
 };
-const Login = ({ setupKeyringController }) => (
+const Login = ({ setupKeyringController, keyStore, wipeKeyStore }) => (
   <Grid
     container
     justify="center"
@@ -21,27 +22,40 @@ const Login = ({ setupKeyringController }) => (
     style={{ height: '100%' }}
   >
     <Formik
-      initialValues={{ password: '' }}
+      initialValues={{ password: '', seed: '' }}
       onSubmit={(values, { resetForm }) => {
-        const { password } = values;
-        setupKeyringController(password);
+        const { password, seed } = values;
+        setupKeyringController(password, seed);
         resetForm();
       }}
     >
       {({
-        values,
-        errors,
-        touched,
-        handleChange,
-        handleBlur,
-        handleSubmit
+         values,
+         errors,
+         touched,
+         handleChange,
+         handleBlur,
+         handleSubmit
       }) => (
         <form onSubmit={handleSubmit} style={containerStyle}>
+          {isNull(keyStore) && <TextField
+            id="seed"
+            type="text"
+            name="seed"
+            rows="4"
+            multiline
+            label="Enter your 12 word mnemonic"
+            variant="outlined"
+            fullWidth
+            value={values.seed}
+            onBlur={handleBlur}
+            onChange={handleChange}
+          />}
           <TextField
             id="password"
             type="password"
             name="password"
-            label="Enter your password to login"
+            label={isNull(keyStore) ? "Set your password" : "Enter your password to login"}
             variant="outlined"
             fullWidth
             value={values.password}
@@ -49,9 +63,9 @@ const Login = ({ setupKeyringController }) => (
             onChange={handleChange}
           />
           {errors.password && touched.password && errors.password}
-          <Button size="large" variant="outlined" color="secondary">
+          {!isNull(keyStore) && <Button size="large" variant="outlined" color="secondary" onClick={wipeKeyStore}>
             RESET ACCOUNT
-          </Button>
+          </Button>}
         </form>
       )}
     </Formik>
@@ -59,7 +73,8 @@ const Login = ({ setupKeyringController }) => (
 );
 
 Login.propTypes = {
-  setupKeyringController: func.isRequired
+  setupKeyringController: func.isRequired,
+  wipeKeyStore: func.isRequired
 };
 
 export default Login;

app/utils/keyManagement.js

@@ -23,3 +23,4 @@ export const getKeyData = () => store.get('vault');
 export const storeKeyData = vault => {
   store.set('vault', vault);
 }
+export const wipeVault = () => { store.set('vault', null); }