improve signin usability/copy

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

@@ -0,0 +1,23 @@
+<template lang="pug">
+field.ni-field-seed(
+  type="textarea"
+  v-model="value")
+</template>
+
+<script>
+import Field from '@nylira/vue-field'
+export default {
+  name: 'ni-field-seed',
+  components: {
+    Field
+  },
+  props: ['value']
+}
+</script>
+
+<style lang="stylus">
+@require '~variables'
+
+.ni-field.ni-field-seed
+  height 5rem
+</style>

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

@@ -70,11 +70,17 @@ export default {
     align-items center
     justify-content center
     background app-fg
+    input
+      width auto
+      display block
+      padding 0
+      margin 0
 
   .ni-field-checkbox-label
     flex 1
-    line-height 1.5
-    padding-left 1rem
+    line-height 1.375
+    padding 0.5rem 1rem
+    font-size 0.875rem
 
 .ni-session
   position fixed
@@ -132,6 +138,7 @@ export default {
   display flex
   flex-flow column
   justify-content center
+  min-height 0
 
   overflow-y auto
 
@@ -184,8 +191,7 @@ export default {
     margin-top 0
 
   .ni-session-main
-    padding 2rem 3rem
-    overflow-y auto
+    padding 2rem
 
     .ni-form-group
       display block !important

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

@@ -2,7 +2,7 @@
 .ni-session: .ni-session-container
   .ni-session-header
     a(@click="setState('welcome')"): i.material-icons arrow_back
-    .ni-session-title Plug In Hardware
+    .ni-session-title Sign In
     a(@click="help"): i.material-icons help_outline
   .ni-session-main
     hardware-state(v-if="status == 'connect'" @click.native="setStatus('detect')"

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

@@ -2,36 +2,35 @@
 .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
+    .ni-session-title Restore Account
     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"
+      field-id='restore-seed' field-label='Seed')
+      field-seed#restore-seed(
         v-model="fields.restoreSeed"
-        @input="$v.fields.restoreSeed.$touch()")
-      form-msg(name='Account Seed' type='required' v-if='!$v.fields.restoreSeed.required')
+        placeholder="must be exactly 12 words")
+      form-msg(name='Seed' type='required' v-if='!$v.fields.restoreSeed.required')
 
     form-group(:error='$v.fields.signInPassword.$error'
       field-id='sign-in-password' field-label='Password')
       field#sign-in-password(
         type="password"
-        placeholder="Password to protect your keys locally"
-        v-model="fields.signInPassword"
-        @input="$v.fields.signInPassword.$touch()")
+        placeholder="at least 10 characters"
+        v-model="fields.signInPassword")
+      form-msg(body="Create a password to secure your restored account")
       form-msg(name='Password' type='required' v-if='!$v.fields.signInPassword.required')
       form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.signInPassword.minLength')
   .ni-session-footer
-    btn(icon="settings_backup_restore" value="Restore Account" size="lg")
+    btn(icon="arrow_forward" icon-pos="right" value="Next" size="lg")
 </template>
 
 <script>
 import {required, minLength} from 'vuelidate/lib/validators'
 import Btn from '@nylira/vue-button'
 import Field from '@nylira/vue-field'
 import FieldGroup from 'common/NiFieldGroup'
+import FieldSeed from 'common/NiFieldSeed'
 import FormGroup from 'common/NiFormGroup'
 import FormMsg from '@nylira/vue-form-msg'
 import FormStruct from 'common/NiFormStruct'
@@ -41,6 +40,7 @@ export default {
     Btn,
     Field,
     FieldGroup,
+    FieldSeed,
     FormGroup,
     FormMsg,
     FormStruct

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

@@ -2,19 +2,18 @@
 .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 Password
+    .ni-session-title Sign In
     a(@click="help"): i.material-icons help_outline
   .ni-session-main
     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")
       form-msg(name='Password' type='required' v-if='!$v.fields.signInPassword.required')
       form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.signInPassword.minLength')
   .ni-session-footer
-    btn(icon="exit_to_app" value="Sign In" size="lg")
+    btn(icon="arrow_forward" icon-pos="right" value="Next" size="lg")
 </template>
 
 <script>

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

@@ -2,23 +2,19 @@
 .ni-session: form-struct(:submit='onSubmit').ni-session-container
   .ni-session-header
     a(@click="setState('welcome')"): i.material-icons arrow_back
-    .ni-session-title New Account
+    .ni-session-title Create Account
     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()")
-      form-msg(body='Please back up the seed phrase for this account. These words cannot be recovered!')
+    form-group(field-id='sign-up-seed' field-label='Seed (write it down)')
+      field-seed#sign-up-seed(v-model="fields.signUpSeed" disabled)
 
     form-group(:error='$v.fields.signInPassword.$error'
       field-id='sign-in-password' field-label='Password')
       field#sign-in-password(
         type="password"
-        placeholder="Password to protect your keys locally"
+        placeholder="at least 10 characters"
         v-model="fields.signInPassword")
+      form-msg(body="Create a password to secure your new account")
       form-msg(name='Password' type='required' v-if='!$v.fields.signInPassword.required')
       form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.signInPassword.minLength')
 
@@ -28,7 +24,7 @@
         .ni-field-checkbox-input
           input#sign-up-warning(type="checkbox" v-model="fields.signUpWarning")
         label.ni-field-checkbox-label(for="sign-up-warning")
-          | I understand that Cosmos cannot recover lost seed phrases.
+          | I understand that lost seeds cannot be recovered.
       form-msg(name='Recovery confirmation' type='required' v-if='!$v.fields.signUpWarning.required')
 
     form-group(field-id="sign-up-backup" field-label=' '
@@ -37,16 +33,17 @@
         .ni-field-checkbox-input
           input#sign-up-backup(type="checkbox" v-model="fields.signUpBackup")
         label.ni-field-checkbox-label(for="sign-up-backup")
-          | I have securely backed up my generated seed phrase.
+          | I have securely written down my seed.
       form-msg(name='Backup confirmation' type='required' v-if='!$v.fields.signUpBackup.required')
   .ni-session-footer
-    btn(icon="create" value="Create Account" size="lg" :disabled="creating")
+    btn(icon="arrow_forward" icon-pos="right" value="Next" size="lg" :disabled="creating")
 </template>
 
 <script>
 import {required, minLength} from 'vuelidate/lib/validators'
 import Btn from '@nylira/vue-button'
 import Field from '@nylira/vue-field'
+import FieldSeed from 'common/NiFieldSeed'
 import FieldGroup from 'common/NiFieldGroup'
 import FormGroup from 'common/NiFormGroup'
 import FormMsg from '@nylira/vue-form-msg'
@@ -56,6 +53,7 @@ export default {
   components: {
     Btn,
     Field,
+    FieldSeed,
     FieldGroup,
     FormGroup,
     FormMsg,

test/unit/specs/__snapshots__/NISessionHardware.spec.js.snap

@@ -6,7 +6,7 @@ exports[`NISessionHardware has the expected html structure 1`] = `
       <div class=\\"ni-session-header\\">
          <a><i class=\\"material-icons\\">arrow_back</i></a>
          <div class=\\"ni-session-title\\">
-            Plug In Hardware
+            Sign In
          </div>
 <a><i class=\\"material-icons\\">help_outline</i></a>
 </div>
@@ -25,8 +25,8 @@ exports[`NISessionHardware has the expected html structure 1`] = `
 </div>"
 `;
 
-exports[`NISessionHardware should show a state indicator for different states of the hardware connection 1`] = `"<div class=\\"ni-session\\"><div class=\\"ni-session-container\\"><div class=\\"ni-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"ni-session-title\\">Plug In Hardware</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"ni-session-main\\"><div class=\\"ni-hardware-state\\"><i class=\\"material-icons\\">usb</i><p>Please plug in your Ledger Wallet</p></div><!----><!----></div><div class=\\"ni-session-footer\\"></div></div></div>"`;
+exports[`NISessionHardware should show a state indicator for different states of the hardware connection 1`] = `"<div class=\\"ni-session\\"><div class=\\"ni-session-container\\"><div class=\\"ni-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"ni-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"ni-session-main\\"><div class=\\"ni-hardware-state\\"><i class=\\"material-icons\\">usb</i><p>Please plug in your Ledger Wallet</p></div><!----><!----></div><div class=\\"ni-session-footer\\"></div></div></div>"`;
 
-exports[`NISessionHardware should show a state indicator for different states of the hardware connection 2`] = `"<div class=\\"ni-session\\"><div class=\\"ni-session-container\\"><div class=\\"ni-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"ni-session-title\\">Plug In Hardware</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"ni-session-main\\"><!----><div class=\\"ni-hardware-state\\"><i class=\\"material-icons fa-spin\\">rotate_right</i><p>Detecting your Ledger Wallet</p></div><!----></div><div class=\\"ni-session-footer\\"></div></div></div>"`;
+exports[`NISessionHardware should show a state indicator for different states of the hardware connection 2`] = `"<div class=\\"ni-session\\"><div class=\\"ni-session-container\\"><div class=\\"ni-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"ni-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"ni-session-main\\"><!----><div class=\\"ni-hardware-state\\"><i class=\\"material-icons fa-spin\\">rotate_right</i><p>Detecting your Ledger Wallet</p></div><!----></div><div class=\\"ni-session-footer\\"></div></div></div>"`;
 
-exports[`NISessionHardware should show a state indicator for different states of the hardware connection 3`] = `"<div class=\\"ni-session\\"><div class=\\"ni-session-container\\"><div class=\\"ni-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"ni-session-title\\">Plug In Hardware</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"ni-session-main\\"><!----><!----><div class=\\"ni-hardware-state\\"><i class=\\"material-icons\\">check_circle</i><p>Ledger Wallet successfully loaded</p></div></div><div class=\\"ni-session-footer\\"></div></div></div>"`;
+exports[`NISessionHardware should show a state indicator for different states of the hardware connection 3`] = `"<div class=\\"ni-session\\"><div class=\\"ni-session-container\\"><div class=\\"ni-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"ni-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"ni-session-main\\"><!----><!----><div class=\\"ni-hardware-state\\"><i class=\\"material-icons\\">check_circle</i><p>Ledger Wallet successfully loaded</p></div></div><div class=\\"ni-session-footer\\"></div></div></div>"`;

test/unit/specs/__snapshots__/NISessionSignIn.spec.js.snap

@@ -9,15 +9,15 @@ exports[`NiSessionSignIn has the expected html structure 1`] = `
             <div class=\\"ni-session-header\\">
                <a><i class=\\"material-icons\\">arrow_back</i></a>
                <div class=\\"ni-session-title\\">
-                  Enter Password
+                  Sign In
                </div>
       <a><i class=\\"material-icons\\">help_outline</i></a>
    </div>
       <div class=\\"ni-session-main\\">
          <div class=\\"ni-form-group\\">
             <label for=\\"sign-in-password\\">Password</label>
             <div class=\\"ni-form-group-field\\">
-               <input type=\\"password\\" placeholder=\\"Enter your password\\" class=\\"ni-field\\" id=\\"sign-in-password\\">
+               <input type=\\"password\\" class=\\"ni-field\\" id=\\"sign-in-password\\">
                <div class=\\"ni-form-msg ni-form-msg-error\\">
                   Password is required
                </div>
@@ -26,7 +26,7 @@ exports[`NiSessionSignIn has the expected html structure 1`] = `
 </div>
 </div>
       <div class=\\"ni-session-footer\\">
-         <button class=\\"ni-btn\\"><span class=\\"ni-btn-container ni-btn-size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">exit_to_app</i><span class=\\"ni-btn-value\\">Sign In</span></span></button>
+         <button class=\\"ni-btn\\"><span class=\\"ni-btn-container ni-btn-icon-right ni-btn-size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">arrow_forward</i><span class=\\"ni-btn-value\\">Next</span></span></button>
       </div>
 </main>
       <!---->

test/unit/specs/__snapshots__/NISessionSignUp.spec.js.snap

@@ -9,28 +9,28 @@ exports[`NISessionSignUp has the expected html structure 1`] = `
             <div class=\\"ni-session-header\\">
                <a><i class=\\"material-icons\\">arrow_back</i></a>
                <div class=\\"ni-session-title\\">
-                  New Account
+                  Create Account
                </div>
       <a><i class=\\"material-icons\\">help_outline</i></a>
    </div>
       <div class=\\"ni-session-main\\">
          <div class=\\"ni-form-group\\">
-            <label for=\\"sign-up-seed\\">Account Seed</label>
+            <label for=\\"sign-up-seed\\">Seed (write it down)</label>
             <div class=\\"ni-form-group-field\\">
-               <textarea class=\\"ni-field\\" id=\\"sign-up-seed\\" disabled=\\"disabled\\"></textarea>
-               <div class=\\"ni-form-msg ni-form-msg-desc\\">
-                  Please back up the seed phrase for this account. These words cannot be recovered!
-               </div>
-</div>
+               <textarea class=\\"ni-field-seed ni-field\\" id=\\"sign-up-seed\\" disabled=\\"disabled\\"></textarea>
+            </div>
 </div>
       <div class=\\"ni-form-group\\">
          <label for=\\"sign-in-password\\">Password</label>
          <div class=\\"ni-form-group-field\\">
-            <input type=\\"password\\" placeholder=\\"Password to protect your keys locally\\" class=\\"ni-field\\" id=\\"sign-in-password\\">
-            <div class=\\"ni-form-msg ni-form-msg-error\\">
-               Password is required
+            <input type=\\"password\\" placeholder=\\"at least 10 characters\\" class=\\"ni-field\\" id=\\"sign-in-password\\">
+            <div class=\\"ni-form-msg ni-form-msg-desc\\">
+               Create a password to secure your new account
             </div>
-               <!---->
+      <div class=\\"ni-form-msg ni-form-msg-error\\">
+         Password is required
+      </div>
+         <!---->
    </div>
 </div>
       <div class=\\"ni-form-group\\">
@@ -40,7 +40,7 @@ exports[`NISessionSignUp has the expected html structure 1`] = `
                <div class=\\"ni-field-checkbox-input\\">
                   <input id=\\"sign-up-warning\\" type=\\"checkbox\\">
                </div>
-      <label for=\\"sign-up-warning\\" class=\\"ni-field-checkbox-label\\">I understand that Cosmos cannot recover lost seed phrases.</label>
+      <label for=\\"sign-up-warning\\" class=\\"ni-field-checkbox-label\\">I understand that lost seeds cannot be recovered.</label>
    </div>
       <div class=\\"ni-form-msg ni-form-msg-error\\">
          Recovery confirmation is required
@@ -54,7 +54,7 @@ exports[`NISessionSignUp has the expected html structure 1`] = `
                <div class=\\"ni-field-checkbox-input\\">
                   <input id=\\"sign-up-backup\\" type=\\"checkbox\\">
                </div>
-      <label for=\\"sign-up-backup\\" class=\\"ni-field-checkbox-label\\">I have securely backed up my generated seed phrase.</label>
+      <label for=\\"sign-up-backup\\" class=\\"ni-field-checkbox-label\\">I have securely written down my seed.</label>
    </div>
       <div class=\\"ni-form-msg ni-form-msg-error\\">
          Backup confirmation is required
@@ -63,7 +63,7 @@ exports[`NISessionSignUp has the expected html structure 1`] = `
 </div>
 </div>
       <div class=\\"ni-session-footer\\">
-         <button class=\\"ni-btn\\"><span class=\\"ni-btn-container ni-btn-size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">create</i><span class=\\"ni-btn-value\\">Create Account</span></span></button>
+         <button class=\\"ni-btn\\"><span class=\\"ni-btn-container ni-btn-icon-right ni-btn-size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">arrow_forward</i><span class=\\"ni-btn-value\\">Next</span></span></button>
       </div>
 </main>
       <!---->

test/unit/specs/__snapshots__/NiSessionRestore.spec.js.snap

@@ -9,33 +9,36 @@ exports[`NiSessionRestore has the expected html structure 1`] = `
             <div class=\\"ni-session-header\\">
                <a><i class=\\"material-icons\\">arrow_back</i></a>
                <div class=\\"ni-session-title\\">
-                  Enter Seed
+                  Restore Account
                </div>
       <a><i class=\\"material-icons\\">help_outline</i></a>
    </div>
       <div class=\\"ni-session-main\\">
          <div class=\\"ni-form-group\\">
-            <label for=\\"restore-seed\\">Account Seed</label>
+            <label for=\\"restore-seed\\">Seed</label>
             <div class=\\"ni-form-group-field\\">
-               <textarea placeholder=\\"Enter your 12-word seed here\\" class=\\"ni-field\\" id=\\"restore-seed\\"></textarea>
+               <textarea class=\\"ni-field-seed ni-field\\" id=\\"restore-seed\\" placeholder=\\"must be exactly 12 words\\"></textarea>
                <div class=\\"ni-form-msg ni-form-msg-error\\">
-                  Account Seed is required
+                  Seed is required
                </div>
 </div>
 </div>
       <div class=\\"ni-form-group\\">
          <label for=\\"sign-in-password\\">Password</label>
          <div class=\\"ni-form-group-field\\">
-            <input type=\\"password\\" placeholder=\\"Password to protect your keys locally\\" class=\\"ni-field\\" id=\\"sign-in-password\\">
-            <div class=\\"ni-form-msg ni-form-msg-error\\">
-               Password is required
+            <input type=\\"password\\" placeholder=\\"at least 10 characters\\" class=\\"ni-field\\" id=\\"sign-in-password\\">
+            <div class=\\"ni-form-msg ni-form-msg-desc\\">
+               Create a password to secure your restored account
             </div>
-               <!---->
+      <div class=\\"ni-form-msg ni-form-msg-error\\">
+         Password is required
+      </div>
+         <!---->
    </div>
 </div>
 </div>
       <div class=\\"ni-session-footer\\">
-         <button class=\\"ni-btn\\"><span class=\\"ni-btn-container ni-btn-size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">settings_backup_restore</i><span class=\\"ni-btn-value\\">Restore Account</span></span></button>
+         <button class=\\"ni-btn\\"><span class=\\"ni-btn-container ni-btn-icon-right ni-btn-size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">arrow_forward</i><span class=\\"ni-btn-value\\">Next</span></span></button>
       </div>
 </main>
       <!---->