From f8fd082ccbe8ffe9f9f9b2aa776c092f1270f159 Mon Sep 17 00:00:00 2001 From: Devin Alexander Torres Date: Mon, 26 Mar 2018 22:13:57 -0500 Subject: [PATCH] feat(settings): add ability to label accounts --- app/components/account-card/styles.scss | 29 ++++++++------ app/components/account-card/template.hbs | 12 ++++-- app/components/account-label/component.js | 9 +++++ app/components/account-label/styles.scss | 2 + app/components/account-label/template.hbs | 7 ++++ app/components/account-settings/component.js | 26 +++++++++++++ app/components/account-settings/template.hbs | 27 +++++++++++++ app/components/navigation-bar/template.hbs | 2 +- app/components/wallet-settings/template.hbs | 7 ---- app/router.js | 1 + app/utils/generate-seed.js | 2 +- app/validations/change-account-settings.js | 5 +++ .../overview/accounts/settings/route.js | 21 ++++++++++ .../overview/accounts/settings/template.hbs | 1 + .../components/account-card/component-test.js | 5 ++- .../account-carousel/component-test.js | 5 ++- .../account-label/component-test.js | 24 ++++++++++++ .../account-settings/component-test.js | 38 +++++++++++++++++++ .../wallet-overview/component-test.js | 5 ++- .../overview/accounts/settings/route-test.js | 18 +++++++++ translations/en-us.yaml | 6 ++- 21 files changed, 220 insertions(+), 32 deletions(-) create mode 100644 app/components/account-label/component.js create mode 100644 app/components/account-label/styles.scss create mode 100644 app/components/account-label/template.hbs create mode 100644 app/components/account-settings/component.js create mode 100644 app/components/account-settings/template.hbs create mode 100644 app/validations/change-account-settings.js create mode 100644 app/wallets/overview/accounts/settings/route.js create mode 100644 app/wallets/overview/accounts/settings/template.hbs create mode 100644 tests/integration/components/account-label/component-test.js create mode 100644 tests/integration/components/account-settings/component-test.js create mode 100644 tests/unit/wallets/overview/accounts/settings/route-test.js diff --git a/app/components/account-card/styles.scss b/app/components/account-card/styles.scss index f3500dc9..5ae40f56 100644 --- a/app/components/account-card/styles.scss +++ b/app/components/account-card/styles.scss @@ -1,4 +1,5 @@ button { + cursor: pointer; border: 0; outline: none; background-color: transparent; @@ -25,6 +26,13 @@ button { transform: scale(1.10) !important; } + .settings { + outline: none; + position: absolute; + top: 5px; + right: 10px; + } + img.qr-code { display: block; height: auto; @@ -56,26 +64,23 @@ button { font-size: 14px; } - .address { - cursor: pointer; + .label { width: 100%; - overflow-wrap: break-word; - background-color: $dark-purple; - color: white; - text-align: center; } .copy-btn { - border: 0; outline: none; - cursor: pointer; - background-color: $dark-purple; - font-size: 0.7rem; - color: white; + border: 0; margin: 0; padding: 10px; height: 60px; - width: 100%; + font-size: 0.7rem; + background-color: $dark-purple; + color: white; overflow-wrap: break-word; + + big { + font-size: 1.1rem; + } } } diff --git a/app/components/account-card/template.hbs b/app/components/account-card/template.hbs index 6727caf7..5058f8b0 100644 --- a/app/components/account-card/template.hbs +++ b/app/components/account-card/template.hbs @@ -2,6 +2,10 @@
{{#if account.id}} {{#if hideHistory}} + {{#link-to 'wallets.overview.accounts.settings' account bubbles=false class='settings' title=(t 'accountSettings')}} + {{bs-tooltip fade=true delayShow=500 placement='top' title=(t 'accountSettings')}} + {{fa-icon 'cog' ariaLabel=(t 'accountSettings')}} + {{/link-to}} {{qr-code text=account.id width=170 height=170}} {{/if}}

@@ -12,10 +16,10 @@
+{{format-amount account.pending}}

-
- {{bs-tooltip fade=true delayShow=1000 placement='bottom' title=(t 'copyValue' value=(concat (slice 0 9 account.id)))}} - {{#copy-button tagName='div' buttonType=null clipboardText=account.id success=(action 'copyAddress' (concat (slice 0 9 account.id) '...' (slice 59 64 account.id)))}} - {{account-address value=account.id}} +
+ {{bs-tooltip fade=true delayShow=1000 placement='bottom' title=(t 'copyAddress')}} + {{#copy-button tagName='div' class="d-flex flex-column justify-content-center" buttonType=null clipboardText=account.id success=(action 'copyAddress' (concat (slice 0 9 account.id) '...' (slice 59 64 account.id)))}} + {{account-label class="flex-row w-100 align-self-center" account=account}} {{/copy-button}}
{{else}} diff --git a/app/components/account-label/component.js b/app/components/account-label/component.js new file mode 100644 index 00000000..06448346 --- /dev/null +++ b/app/components/account-label/component.js @@ -0,0 +1,9 @@ +import Component from '@ember/component'; + +import { storageFor } from 'ember-local-storage'; + +export default Component.extend({ + settings: storageFor('settings', 'account'), + + account: null, +}); diff --git a/app/components/account-label/styles.scss b/app/components/account-label/styles.scss new file mode 100644 index 00000000..0b2fcf5c --- /dev/null +++ b/app/components/account-label/styles.scss @@ -0,0 +1,2 @@ +& { +} diff --git a/app/components/account-label/template.hbs b/app/components/account-label/template.hbs new file mode 100644 index 00000000..e4b3ea34 --- /dev/null +++ b/app/components/account-label/template.hbs @@ -0,0 +1,7 @@ +{{#if settings.label}} + {{settings.label}} +
+ {{account-address value=account.id truncate=true}} +{{else}} + {{account-address value=account.id}} +{{/if}} diff --git a/app/components/account-settings/component.js b/app/components/account-settings/component.js new file mode 100644 index 00000000..86754b6a --- /dev/null +++ b/app/components/account-settings/component.js @@ -0,0 +1,26 @@ +import Component from '@ember/component'; +import { get } from '@ember/object'; +import { tryInvoke } from '@ember/utils'; + +import { storageFor } from 'ember-local-storage'; + +import { action } from 'ember-decorators/object'; + +import ChangeAccountSettingsValidations from '../../validations/change-account-settings'; + +export default Component.extend({ + ChangeAccountSettingsValidations, + + settings: storageFor('settings', 'account'), + + account: null, + onSave: null, + onCancel: null, + + @action + save(changeset) { + const settings = this.get('settings'); + const label = get(changeset, 'label'); + tryInvoke(settings, 'setProperties', [{ label }]); + }, +}); diff --git a/app/components/account-settings/template.hbs b/app/components/account-settings/template.hbs new file mode 100644 index 00000000..98116c4c --- /dev/null +++ b/app/components/account-settings/template.hbs @@ -0,0 +1,27 @@ +{{#with (changeset (hash label=settings.label) ChangeAccountSettingsValidations) as |model|}} + {{#bs-modal onHide=(action (optional onCancel)) as |modal|}} + {{#modal.header}} +

+ {{t 'accountSettings'}} +

+ {{/modal.header}} + {{#modal.body}} + {{#bs-form model=model onSubmit=(action (queue (action 'save' model) (action (optional onSave)))) as |form|}} +
+ + {{account-address class="form-control-plaintext" value=account.id truncate=true}} +
+ {{form.element controlType="text" label=(t 'label') property="label"}} + {{/bs-form}} + {{/modal.body}} + {{#modal.footer}} + {{#bs-button onClick=(action modal.close) type="secondary"}} + {{t 'cancel'}} + {{/bs-button}} + {{#bs-button type="primary" buttonType='submit'}} + {{fa-icon 'check'}} + {{t 'save'}} + {{/bs-button}} + {{/modal.footer}} + {{/bs-modal}} +{{/with}} diff --git a/app/components/navigation-bar/template.hbs b/app/components/navigation-bar/template.hbs index 334a7a4a..6685c480 100644 --- a/app/components/navigation-bar/template.hbs +++ b/app/components/navigation-bar/template.hbs @@ -29,7 +29,7 @@
  • {{t 'settings'}} - {{#bs-popover placement="bottom" title=(t 'settings')}} + {{#bs-popover placement="bottom" triggerEvents='focus' title=(t 'settings')}} {{wallet-settings wallet=wallet representative=wallet.representative onChangeRepresentative=(action onChangeRepresentative) onChangePassword=(action onChangePassword)}} {{/bs-popover}} diff --git a/app/components/wallet-settings/template.hbs b/app/components/wallet-settings/template.hbs index 514e76e9..c4feb4b0 100644 --- a/app/components/wallet-settings/template.hbs +++ b/app/components/wallet-settings/template.hbs @@ -1,11 +1,4 @@ {{#bs-form model=(changeset (hash representative=representative) ChangeRepresentativeValidations) onSubmit=(action onChangeRepresentative wallet) as |form|}} -
    - -

    - {{wallet.id}} -

    -
    - {{#form.element controlType="text" label='Representative' property='representative' maxlength=64 required=true pattern="^xrb_[13](?![lv])[a-z1-9]{59}$" as |el|}} {{el.control class="text-truncate text-monospace"}} diff --git a/app/router.js b/app/router.js index 4ea37ec1..5d068272 100644 --- a/app/router.js +++ b/app/router.js @@ -23,6 +23,7 @@ Router.map(function routerMap() { this.route('accounts', { path: '/:account_id' }, function accountsRoute() { this.route('send'); this.route('history'); + this.route('settings'); }); }); this.route('send'); diff --git a/app/utils/generate-seed.js b/app/utils/generate-seed.js index 2771c487..9b67fa5e 100644 --- a/app/utils/generate-seed.js +++ b/app/utils/generate-seed.js @@ -2,5 +2,5 @@ import bip39 from 'npm:bip39'; export default function generateSeed() { const mnemonic = bip39.generateMnemonic(); - return bip39.mnemonicToSeedHex(mnemonic).substr(0, 64); + return bip39.mnemonicToSeedHex(mnemonic).slice(0, 64); } diff --git a/app/validations/change-account-settings.js b/app/validations/change-account-settings.js new file mode 100644 index 00000000..f8b8e411 --- /dev/null +++ b/app/validations/change-account-settings.js @@ -0,0 +1,5 @@ +import { validatePresence } from 'ember-changeset-validations/validators'; + +export default { + label: validatePresence(true), +}; diff --git a/app/wallets/overview/accounts/settings/route.js b/app/wallets/overview/accounts/settings/route.js new file mode 100644 index 00000000..6068b149 --- /dev/null +++ b/app/wallets/overview/accounts/settings/route.js @@ -0,0 +1,21 @@ +import Route from '@ember/routing/route'; + +import { service } from 'ember-decorators/service'; +import { action } from 'ember-decorators/object'; + +export default Route.extend({ + @service intl: null, + @service flashMessages: null, + + @action + save() { + const message = this.get('intl').t('accountSettingsSaved'); + this.get('flashMessages').success(message); + return this.transitionTo('wallets.overview'); + }, + + @action + cancel() { + return this.transitionTo('wallets.overview'); + }, +}); diff --git a/app/wallets/overview/accounts/settings/template.hbs b/app/wallets/overview/accounts/settings/template.hbs new file mode 100644 index 00000000..5a61009c --- /dev/null +++ b/app/wallets/overview/accounts/settings/template.hbs @@ -0,0 +1 @@ +{{account-settings account=model onSave=(action (route-action 'save')) onCancel=(action (route-action 'cancel'))}} diff --git a/tests/integration/components/account-card/component-test.js b/tests/integration/components/account-card/component-test.js index 7d87882e..ff600d9e 100644 --- a/tests/integration/components/account-card/component-test.js +++ b/tests/integration/components/account-card/component-test.js @@ -23,12 +23,13 @@ describe('Integration | Component | account-card', () => { // {{/account-card}} // `); - const account = { + const store = this.container.lookup('service:store'); + const account = store.createRecord('account', { id: '1', wallet: '1', balance: '1000000000000000000000000000000', pending: '0', - }; + }); this.set('account', account); this.render(hbs`{{account-card account=account}}`); diff --git a/tests/integration/components/account-carousel/component-test.js b/tests/integration/components/account-carousel/component-test.js index 329280d8..a7acdf88 100644 --- a/tests/integration/components/account-carousel/component-test.js +++ b/tests/integration/components/account-carousel/component-test.js @@ -23,13 +23,14 @@ describe('Integration | Component | account-carousel', () => { // {{/account-carousel}} // `); + const store = this.container.lookup('service:store'); const accounts = [ - { + store.createRecord('account', { id: '1', wallet: '1', balance: '1000000000000000000000000000000', pending: '0', - }, + }), ]; this.set('accounts', accounts); diff --git a/tests/integration/components/account-label/component-test.js b/tests/integration/components/account-label/component-test.js new file mode 100644 index 00000000..7162be31 --- /dev/null +++ b/tests/integration/components/account-label/component-test.js @@ -0,0 +1,24 @@ +import { expect } from 'chai'; +import { describe, it } from 'mocha'; +import { setupComponentTest } from 'ember-mocha'; +import hbs from 'htmlbars-inline-precompile'; + +describe('Integration | Component | account-label', () => { + setupComponentTest('account-label', { + integration: true, + }); + + it('renders', function () { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + // Template block usage: + // this.render(hbs` + // {{#account-label}} + // template content + // {{/account-label}} + // `); + + this.render(hbs`{{account-label}}`); + expect(this.$()).to.have.length(1); + }); +}); diff --git a/tests/integration/components/account-settings/component-test.js b/tests/integration/components/account-settings/component-test.js new file mode 100644 index 00000000..a7164665 --- /dev/null +++ b/tests/integration/components/account-settings/component-test.js @@ -0,0 +1,38 @@ +import { expect } from 'chai'; +import { beforeEach, describe, it } from 'mocha'; +import { setupComponentTest } from 'ember-mocha'; +import hbs from 'htmlbars-inline-precompile'; + +describe('Integration | Component | account-settings', () => { + setupComponentTest('account-settings', { + integration: true, + }); + + beforeEach(function () { + this.inject.service('intl'); + this.get('intl').setLocale('en-us'); + }); + + it('renders', function () { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + // Template block usage: + // this.render(hbs` + // {{#account-settings}} + // template content + // {{/account-settings}} + // `); + + const store = this.container.lookup('service:store'); + const account = store.createRecord('account', { + id: '1', + wallet: '1', + balance: '1000000000000000000000000000000', + pending: '0', + }); + + this.set('account', account); + this.render(hbs`{{account-settings account=account}}`); + expect(this.$()).to.have.length(1); + }); +}); diff --git a/tests/integration/components/wallet-overview/component-test.js b/tests/integration/components/wallet-overview/component-test.js index 4d8ddb2f..45422926 100644 --- a/tests/integration/components/wallet-overview/component-test.js +++ b/tests/integration/components/wallet-overview/component-test.js @@ -29,13 +29,14 @@ describe('Integration | Component | wallet overview', () => { accounts: ['1'], }; + const store = this.container.lookup('service:store'); const accounts = [ - { + store.createRecord('account', { id: '1', wallet: '1', balance: '1000000000000000000000000000000', pending: '0', - }, + }), ]; const page = 1; diff --git a/tests/unit/wallets/overview/accounts/settings/route-test.js b/tests/unit/wallets/overview/accounts/settings/route-test.js new file mode 100644 index 00000000..762f0e02 --- /dev/null +++ b/tests/unit/wallets/overview/accounts/settings/route-test.js @@ -0,0 +1,18 @@ +import { expect } from 'chai'; +import { describe, it } from 'mocha'; +import { setupTest } from 'ember-mocha'; + +describe('Unit | Route | wallets/overview/accounts/settings', () => { + setupTest('route:wallets/overview/accounts/settings', { + // Specify the other units that are required for this test. + needs: [ + 'service:intl', + 'service:flashMessages', + ], + }); + + it('exists', function () { + const route = this.subject(); + expect(route).to.be.ok; + }); +}); diff --git a/translations/en-us.yaml b/translations/en-us.yaml index 70362d80..c6021dc1 100644 --- a/translations/en-us.yaml +++ b/translations/en-us.yaml @@ -32,7 +32,7 @@ verifying: 'Verifying {asset}...' extracting: 'Extracting {asset}...' starting: 'Starting node' currency: '{amount}' -copyValue: 'Copy {value}...' +copyAddress: 'Copy address' addressCopied: 'Address copied: {address}' status: state: 'Status' @@ -45,6 +45,10 @@ balancePending: 'Balance Pending' NANO: 'NANO' BTC: 'BTC' USD: 'USD' +EUR: 'EUR' +accountSettings: 'Account Settings' +accountSettingsSaved: 'Account settings saved!' +label: 'Label' login: lead: 'Login to unlock your wallet.' instructions: 'You can login to continue using your current wallet by unlocking it. Alternatively, you may choose to create a new wallet.'