NiSession modal improvements

app/src/renderer/components/common/NiLiSession.vue

@@ -0,0 +1,62 @@
+<template lang="pug">
+.ni-li-session
+  .icon: i.material-icons {{ icon }}
+  .text
+    .title {{ title }}
+    .subtitle {{ subtitle }}
+</template>
+
+<script>
+export default {
+  name: 'ni-li-session',
+  props: ['icon', 'title', 'subtitle']
+}
+</script>
+
+<style lang="stylus">
+@import '~variables'
+
+.ni-li-session
+  display flex
+  flex-flow row nowrap
+  user-select none
+  border-bottom 2*px solid bc-dim
+  &:last-of-type
+    border-bottom none
+
+  .icon
+    height 5rem
+    flex 0 0 5rem
+    display flex
+    align-items center
+    justify-content center
+    i
+      font-size 2rem
+
+  .text
+    flex 1
+    display flex
+    justify-content center
+    flex-flow column nowrap
+    padding 1rem 1rem
+
+  .title
+    color txt
+    font-size lg
+    line-height 1.25
+    margin-bottom 0.375rem
+
+  .subtitle
+    color dim
+    font-size sm
+
+  &:hover
+    cursor pointer
+    background app-fg
+    .icon
+      i
+        color bright
+    .title
+      color bright
+</style>
+

app/src/renderer/components/common/NiModalHelp.vue

@@ -39,6 +39,7 @@ export default {
 @import '~variables'
 
 .ni-modal.ni-modal-help
+  z-index 1001
 
   .ni-modal-main
     padding 2rem

app/src/renderer/components/common/NiSession.vue

@@ -1,35 +1,57 @@
 <template lang="pug">
 .ni-session-wrapper(v-if="active")
+  img.ni-session-backdrop(src="../../assets/images/cosmos-logo.png")
   session-welcome(v-if="config.modals.session.state == 'welcome'")
   session-sign-up(v-if="config.modals.session.state == 'sign-up'")
   session-sign-in(v-if="config.modals.session.state == 'sign-in'")
   session-hardware(v-if="config.modals.session.state == 'hardware'")
+  session-restore(v-if="config.modals.session.state == 'restore'")
 </template>
 
 <script>
 import {mapGetters} from 'vuex'
+import noScroll from 'no-scroll'
 import SessionWelcome from 'common/NiSessionWelcome'
 import SessionSignUp from 'common/NiSessionSignUp'
 import SessionSignIn from 'common/NiSessionSignIn'
 import SessionHardware from 'common/NiSessionHardware'
+import SessionRestore from 'common/NiSessionRestore'
 export default {
   name: 'ni-session',
   components: {
     SessionWelcome,
     SessionSignUp,
     SessionSignIn,
-    SessionHardware
+    SessionHardware,
+    SessionRestore
   },
   computed: {
     ...mapGetters(['config']),
     active () { return this.config.modals.session.active }
+  },
+  mounted () {
+    noScroll.on()
+  },
+  beforeDestroy () {
+    noScroll.off()
   }
 }
 </script>
 
 <style lang="stylus">
 @import '~variables'
 
+.ni-session-wrapper
+  position relative
+  z-index 1000
+
+  .ni-session-backdrop
+    position absolute
+    top -10vw
+    left -10vw
+    width 50vw
+    opacity 0.25
+
 .ni-field-checkbox
   display flex
   flex-flow row nowrap
@@ -75,6 +97,7 @@ export default {
   justify-content space-between
   align-items center
   flex 0 0 3rem
+  margin-top 1.5rem // for macos traffic signals
 
   a
     width 3rem
@@ -114,7 +137,7 @@ export default {
     border-bottom px solid bc
 
 .ni-session-footer
-  border-top px solid bc
+  border-top 2*px solid bc-dim
   flex 0 0 5rem + px
   display flex
   align-items center
@@ -152,6 +175,7 @@ export default {
 
   .ni-session-header
     background app-fg
+    margin-top 0
 
   .ni-session-main
     padding 2rem 3rem

app/src/renderer/components/common/NiSessionHardware.vue

@@ -3,10 +3,10 @@
   .ni-session-header
     a(@click="setState('welcome')"): i.material-icons arrow_back
     .ni-session-title Plug In Hardware
-    a: i.material-icons help_outline
+    a(@click="help"): i.material-icons help_outline
   .ni-session-main
     hardware-state(v-if="status == 'connect'" @click.native="setStatus('detect')"
-      icon="power" value="Please plug in your Ledger Wallet")
+      icon="usb" value="Please plug in your Ledger Wallet")
     hardware-state(v-if="status == 'detect'" @click.native="setStatus('success')"
       icon="rotate_right" spin="true" value="Detecting your Ledger Wallet")
     hardware-state(v-if="status == 'success'" @click.native="onSubmit"
@@ -25,6 +25,7 @@ export default {
     status: 'connect'
   }),
   methods: {
+    help () { this.$store.commit('setModalHelp', true) },
     setState (value) { this.$store.commit('setModalSessionState', value) },
     setStatus (value) { this.status = value },
     onSubmit () {

app/src/renderer/components/common/NiSessionRestore.vue

@@ -0,0 +1,63 @@
+<template lang="pug">
+.ni-session: form-struct(:submit='onSubmit').ni-session-container
+  .ni-session-header
+    a(@click="setState('welcome')"): i.material-icons arrow_back
+    .ni-session-title Enter Seed
+    a(@click="help"): i.material-icons help_outline
+  .ni-session-main
+    form-group(:error='$v.fields.restoreSeed.$error'
+      field-id='restore-seed' field-label='Account Seed')
+      field#restore-seed(
+        type="textarea"
+        placeholder="Enter your 12-word seed here"
+        v-model="fields.restoreSeed"
+        @input="$v.fields.restoreSeed.$touch()")
+      form-msg(name='Account Seed' type='required' v-if='!$v.fields.restoreSeed.required')
+  .ni-session-footer
+    btn(icon="settings_backup_restore" value="Restore Account" size="lg")
+</template>
+
+<script>
+import {required} from 'vuelidate/lib/validators'
+import Btn from '@nylira/vue-button'
+import Field from '@nylira/vue-field'
+import FieldGroup from 'common/NiFieldGroup'
+import FormGroup from 'common/NiFormGroup'
+import FormMsg from '@nylira/vue-form-msg'
+import FormStruct from 'common/NiFormStruct'
+export default {
+  name: 'ni-session-restore',
+  components: {
+    Btn,
+    Field,
+    FieldGroup,
+    FormGroup,
+    FormMsg,
+    FormStruct
+  },
+  data: () => ({
+    fields: {
+      restoreSeed: ''
+    }
+  }),
+  methods: {
+    help () { this.$store.commit('setModalHelp', true) },
+    setState (value) { this.$store.commit('setModalSessionState', value) },
+    onSubmit () {
+      this.$v.$touch()
+      if (this.$v.$error) return
+      this.$store.commit('setModalSession', false)
+      this.$store.commit('notify', { title: 'Welcome back!', body: 'Your account has been successfully restored.' })
+      this.$store.commit('setSignedIn', true)
+    }
+  },
+  mounted () {
+    document.querySelector('#restore-seed').focus()
+  },
+  validations: () => ({
+    fields: {
+      restoreSeed: { required }
+    }
+  })
+}
+</script>

app/src/renderer/components/common/NiSessionSignIn.vue

@@ -2,17 +2,17 @@
 .ni-session: form-struct(:submit='onSubmit').ni-session-container
   .ni-session-header
     a(@click="setState('welcome')"): i.material-icons arrow_back
-    .ni-session-title Enter Seed
-    a: i.material-icons help_outline
+    .ni-session-title Enter Password
+    a(@click="help"): i.material-icons help_outline
   .ni-session-main
-    form-group(:error='$v.fields.signInSeed.$error'
-      field-id='sign-in-seed' field-label='Account Seed')
-      field#sign-in-seed(
-        type="textarea"
-        placeholder="Enter your 12-word seed here"
-        v-model="fields.signInSeed"
-        @input="$v.fields.signInSeed.$touch()")
-      form-msg(name='Account Seed' type='required' v-if='!$v.fields.signInSeed.required')
+    form-group(:error='$v.fields.signInPassword.$error'
+      field-id='sign-in-password' field-label='Password')
+      field#sign-in-password(
+        type="password"
+        placeholder="Enter your password"
+        v-model="fields.signInPassword"
+        @input="$v.fields.signInPassword.$touch()")
+      form-msg(name='Password' type='required' v-if='!$v.fields.signInPassword.required')
   .ni-session-footer
     btn(icon="exit_to_app" value="Sign In" size="lg")
 </template>
@@ -37,10 +37,11 @@ export default {
   },
   data: () => ({
     fields: {
-      signInSeed: ''
+      signInPassword: ''
     }
   }),
   methods: {
+    help () { this.$store.commit('setModalHelp', true) },
     setState (value) { this.$store.commit('setModalSessionState', value) },
     onSubmit () {
       this.$v.$touch()
@@ -50,9 +51,12 @@ export default {
       this.$store.commit('setSignedIn', true)
     }
   },
+  mounted () {
+    this.$el.querySelector('#sign-in-password').focus()
+  },
   validations: () => ({
     fields: {
-      signInSeed: { required }
+      signInPassword: { required }
     }
   })
 }

app/src/renderer/components/common/NiSessionSignUp.vue

@@ -3,10 +3,11 @@
   .ni-session-header
     a(@click="setState('welcome')"): i.material-icons arrow_back
     .ni-session-title New Account
-    a: i.material-icons help_outline
+    a(@click="help"): i.material-icons help_outline
   .ni-session-main
     form-group(field-id='sign-up-seed' field-label='Account Seed')
       field#sign-up-seed(
+        disabled
         type="textarea"
         v-model="fields.signUpSeed"
         @input="$v.fields.signUpSeed.$touch()")
@@ -59,6 +60,7 @@ export default {
     }
   }),
   methods: {
+    help () { this.$store.commit('setModalHelp', true) },
     setState (value) { this.$store.commit('setModalSessionState', value) },
     onSubmit () {
       this.$v.$touch()
@@ -68,6 +70,9 @@ export default {
       this.$store.commit('setSignedIn', true)
     }
   },
+  mounted () {
+    this.$el.querySelector('#sign-up-warning').focus()
+  },
   validations: () => ({
     fields: {
       signUpWarning: { required },

app/src/renderer/components/common/NiSessionWelcome.vue

@@ -1,31 +1,42 @@
 <template lang="pug">
 .ni-session: .ni-session-container
   .ni-session-header
+    a &nbsp;
     .ni-session-title Welcome to Cosmos!
+    a(@click="help"): i.material-icons help_outline
   .ni-session-main
-    list-item(
-      @click.native="setState('sign-up')"
-      icon="create"
-      title="Create new account")
-    list-item(
+    li-session(
       @click.native="setState('sign-in')"
-      icon="short_text"
-      title="Sign in with seed")
-    list-item(
+      icon="lock"
+      title="Sign in with password"
+      subtitle="If you have an account, choose this option")
+    li-session(
       @click.native="setState('hardware')"
       icon="usb"
-      title="Sign in with hardware")
+      title="Sign in with hardware"
+      subtitle="If you have a Ledger Wallet, choose this option")
+    li-session(
+      @click.native="setState('sign-up')"
+      icon="create"
+      title="Create new account"
+      subtitle="Generate a brand new seed and account")
+    li-session(
+      @click.native="setState('restore')"
+      icon="settings_backup_restore"
+      title="Restore account from seed"
+      subtitle="If you have a seed, choose this option")
   .ni-session-footer
 </template>
 
 <script>
-import ListItem from 'common/NiListItem'
+import LiSession from 'common/NiLiSession'
 export default {
   name: 'ni-session-welcome',
   components: {
-    ListItem
+    LiSession
   },
   methods: {
+    help () { this.$store.commit('setModalHelp', true) },
     setState (value) { this.$store.commit('setModalSessionState', value) }
   }
 }

package.json

@@ -69,7 +69,9 @@
     "html-webpack-plugin": "^2.16.1",
     "inject-loader": "^2.0.1",
     "isparta-loader": "^2.0.0",
+    "html-beautify": "^1.0.4",
     "jest": "^21.2.1",
+    "jest-vue-preprocessor": "^1.3.1",
     "jquery": "^3.2.1",
     "json-loader": "^0.5.4",
     "level-packager": "^1.2.1",
@@ -109,7 +111,6 @@
     "electron": "^1.7.5",
     "flatpickr": "^4.1.2",
     "fs-extra": "^4.0.2",
-    "jest-vue-preprocessor": "^1.3.1",
     "moment": "^2.17.1",
     "mousetrap": "^1.6.1",
     "nib": "^1.1.2",