Review Changes: Modal Close Behavior | Removal of Password Storage | …

…Debounce Name Check

frontend/simple/js/database.js

@@ -81,16 +81,4 @@ export function saveSettings (state: Object): Promise<*> {
 export function loadSettings (): Promise<Object> {
   return appSettings.getItem('testUser')
 }
-// =======================
-// Store login information
-// =======================
-const loginInfo = localforage.createInstance({
-  name: 'Group Income',
-  storeName: 'Login Information'
-})
-export function storeLogin (identity: string, hash: string): Promise<Object> {
-  return loginInfo.setItem(identity, hash)
-}
-export function retrieveLogin (identity: string): Promise<Object> {
-  return loginInfo.getItem(identity)
-}
+

frontend/simple/views/NavBar.vue

@@ -51,7 +51,7 @@
       </div>
     </nav>
     <div class="modal" ref="modal" id="LoginModal">
-      <div class="modal-background"></div>
+      <div class="modal-background" v-on:click="toggleModal"></div>
       <div class="modal-content" style="width: 300px">
         <div class="card is-rounded">
           <div class="card-content">
@@ -93,8 +93,6 @@
 
 <script>
 import Vue from 'vue'
-import * as db from '../js/database'
-import multihash from 'multihashes'
 import {HapiNamespace} from '../js/backend/hapi'
 var namespace = new HapiNamespace()
 export default {
@@ -105,18 +103,12 @@ export default {
   methods: {
     login: async function () {
       try {
+        // TODO Insert cryptography here
         let response = await namespace.lookup(this.name)
-        let identity = JSON.parse(response.text)
-        let login = await db.retrieveLogin(identity.data.value)
-        let passHash = multihash.toB58String(multihash.encode(new Buffer(this.password), 'blake2b'))
-        if (passHash === login) {
-          this.$store.commit('login', this.name)
-          this.toggleModal()
-          console.log('login succeeded')
-        } else {
-          this.response = 'Invalid username or password'
-          console.log('login failed')
-        }
+        let identity = response.body
+        console.log(`Retrieved identity ${identity}`)
+        this.$store.commit('login', this.name)
+        this.toggleModal()
       } catch (ex) {
         this.response = 'Invalid username or password'
         console.log('login failed')
@@ -128,7 +120,9 @@ export default {
     toggleModal () {
       if (!this.$refs.modal.classList.contains('is-active') && this.$store.state.loggedIn) {
         this.logout()
+        this.$router.push({path: '/'})
       } else {
+        document.getElementById('LoginName').focus()
         this.response = null
         this.name = null
         this.password = null

frontend/simple/views/SignUp.vue

@@ -16,11 +16,11 @@
           <div class="box centered" style="max-width:400px">
             <h2 class="subtitle">Sign Up</h2>
 
-            <a v-on:click="forwardToLogin" style="margin-left: 65%">Already a member?</a>
+            <a v-on:click="forwardToLogin" style="margin-left: 65%">Have an account?</a>
 
 
             <p class="control has-icon">
-              <input id="name" class="input" name="name" v-model="name" v-on:blur="checkName" v-validate data-vv-rules="required|regex:^\S+$" placeholder="username" required>
+              <input id="name" class="input" name="name" v-model="name" v-on:keypress="checkName" v-validate data-vv-rules="required|regex:^\S+$" placeholder="username" required>
               <span class="icon is-small">
                 <i class="fa fa-user"></i>
               </span>
@@ -70,9 +70,8 @@
 
 <script>
 import Vue from 'vue'
+import _ from 'lodash'
 import * as Events from '../../../shared/events'
-import * as db from '../js/database'
-import multihash from 'multihashes'
 import {HapiNamespace} from '../js/backend/hapi'
 var namespace = new HapiNamespace()
 
@@ -89,7 +88,7 @@ export default {
           ]
         })
         await namespace.register(this.name, user.toHash())
-        await db.storeLogin(user.toHash(), multihash.toB58String(multihash.encode(new Buffer(this.password), 'blake2b')))
+        // TODO Just add cryptographic magic
         this.response = 'success'
         if (this.$route.query.next) {
           setTimeout(() => {
@@ -107,7 +106,7 @@ export default {
     forwardToLogin: function () {
       Vue.events.$emit('login')
     },
-    checkName: async function () {
+    checkName: _.debounce(async function () {
       if (this.name && !this.errors.has('name')) {
         try {
           await namespace.lookup(this.name)
@@ -117,7 +116,7 @@ export default {
         }
         return this.nameAvailable
       }
-    }
+    }, 700, {maxWait: 2000})
   },
   data () {
     return {

test/frontend.js

@@ -68,7 +68,7 @@ describe('Frontend', function () {
     })
 
     it('Should Traverse Log', async function () {
-      this.timeout(10000)
+      this.timeout(4000)
       await n.goto(page('event-log'))
       let prior = await n.evaluate(() => document.getElementById('LogPosition').innerText)
       let initial = await n.wait('textarea[name="payload"]')
@@ -92,7 +92,7 @@ describe('Frontend', function () {
     let randInt = (min, max) => Math.floor(Math.random() * (max - min)) + min
     let username = `testuser${randInt(0, 10000000)}${randInt(10000000, 20000000)}`
     it('Should register User', async function () {
-      this.timeout(10000)
+      this.timeout(4000)
       await n.goto(page('signup'))
       let signedup = await n.insert('#name', username)
         .insert('#email', `[email protected]`)
@@ -111,7 +111,7 @@ describe('Frontend', function () {
         */
     })
     it('Test Logout and Login', async function () {
-      this.timeout(10000)
+      this.timeout(4000)
       let response = await n.click('#LoginBtn')
         .wait(() => document.getElementById('LoginBtn').classList.contains('is-primary'))
         .click('#LoginBtn')
@@ -128,14 +128,14 @@ describe('Frontend', function () {
      This occurs regardless of whether you clear the field or not. Until its fixed skip this validation test
      */
     it.skip('Test Validation', async function () {
-      this.timeout(40000)
+      this.timeout(4000)
       await n.goto(page('signup'))
       let badUsername = 't e s t'
       let badEmail = `@fail`
-      // let badPassword = `789`// six is so afraid
+      let badPassword = `789`// six is so afraid
       let denied = await n.insert('#name', badUsername)
         .insert('#email', badEmail)
-        .insert('#password', ' ')
+        .insert('#password', badPassword)
         .evaluate(() => document.querySelector('button[type="submit"]').disabled)
       should(denied).equal(true)
       let usernameMsg = await n.evaluate(() => !!document.getElementById('badUsername'))
@@ -149,7 +149,7 @@ describe('Frontend', function () {
 
   describe('Group Creation Test', function () {
     it('Should create a group', async function () {
-      this.timeout(10000)
+      this.timeout(4000)
       await n.click('#CreateGroup')
       let created = await n.insert('input[name="groupName"]', 'Test Group')
         .insert('textarea[name="sharedValues"]', 'Testing this software')