Merge branch 'master' into 1706-After-unsuccessful-sending-email-is-cleared

frontend/src/components/GddSend/TransactionConfirmationLink.vue

@@ -39,10 +39,10 @@
 
     <b-row class="mt-4">
       <b-col>
-        <b-button @click="$emit('on-reset')">{{ $t('form.cancel') }}</b-button>
+        <b-button @click="$emit('on-reset')">{{ $t('back') }}</b-button>
       </b-col>
       <b-col class="text-right">
-        <b-button variant="success" :disabled="disabled" @click="$emit('send-transaction')">
+        <b-button variant="primary" :disabled="disabled" @click="$emit('send-transaction')">
           {{ $t('form.generate_now') }}
         </b-button>
       </b-col>

frontend/src/components/GddSend/TransactionConfirmationSend.spec.js

@@ -53,7 +53,7 @@ describe('GddSend confirm', () => {
 
         describe('single click', () => {
           beforeEach(async () => {
-            await wrapper.find('button.btn-success').trigger('click')
+            await wrapper.find('button.btn-primary').trigger('click')
           })
 
           it('emits send transaction one time', () => {
@@ -63,8 +63,8 @@ describe('GddSend confirm', () => {
 
         describe('double click', () => {
           beforeEach(async () => {
-            await wrapper.find('button.btn-success').trigger('click')
-            await wrapper.find('button.btn-success').trigger('click')
+            await wrapper.find('button.btn-primary').trigger('click')
+            await wrapper.find('button.btn-primary').trigger('click')
           })
 
           it('emits send transaction one time', () => {

frontend/src/components/GddSend/TransactionConfirmationSend.vue

@@ -55,11 +55,11 @@
 
     <b-row class="mt-4">
       <b-col>
-        <b-button @click="$emit('on-reset')">{{ $t('form.cancel') }}</b-button>
+        <b-button @click="$emit('on-reset')">{{ $t('back') }}</b-button>
       </b-col>
       <b-col class="text-right">
         <b-button
-          variant="success"
+          variant="primary"
           :disabled="disabled"
           @click="$emit('send-transaction'), (disabled = true)"
         >

frontend/src/components/GddSend/TransactionForm.spec.js

@@ -68,7 +68,7 @@ describe('TransactionForm', () => {
       })
 
       it('has SEND_TYPES = send', () => {
-        expect(wrapper.vm.selected).toBe(SEND_TYPES.send)
+        expect(wrapper.vm.radioSelected).toBe(SEND_TYPES.send)
       })
 
       describe('transaction form', () => {
@@ -249,7 +249,7 @@ Die ganze Welt bezwingen.“`)
           })
 
           it('has the text "form.cancel"', () => {
-            expect(wrapper.find('button[type="reset"]').text()).toBe('form.reset')
+            expect(wrapper.find('button[type="reset"]').text()).toBe('form.cancel')
           })
 
           it('clears all fields on click', async () => {
@@ -300,7 +300,7 @@ Die ganze Welt bezwingen.“`)
       })
 
       it('has SEND_TYPES = link', () => {
-        expect(wrapper.vm.selected).toBe(SEND_TYPES.link)
+        expect(wrapper.vm.radioSelected).toBe(SEND_TYPES.link)
       })
 
       it('has no input field of id input-group-1', () => {

frontend/src/components/GddSend/TransactionForm.vue

@@ -6,28 +6,38 @@
           <b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
             <b-row>
               <b-col>
-                <b-form-radio v-model="selected" name="radios" :value="sendTypes.send" size="lg">
+                <b-form-radio
+                  v-model="radioSelected"
+                  name="radios"
+                  :value="sendTypes.send"
+                  size="lg"
+                >
                   {{ $t('send_gdd') }}
                 </b-form-radio>
               </b-col>
               <b-col>
-                <b-form-radio v-model="selected" name="radios" :value="sendTypes.link" size="lg">
+                <b-form-radio
+                  v-model="radioSelected"
+                  name="radios"
+                  :value="sendTypes.link"
+                  size="lg"
+                >
                   {{ $t('send_per_link') }}
                 </b-form-radio>
               </b-col>
             </b-row>
-            <div class="mt-4" v-if="selected === sendTypes.link">
+            <div class="mt-4" v-if="radioSelected === sendTypes.link">
               <h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
               <div>
                 {{ $t('gdd_per_link.choose-amount') }}
               </div>
             </div>
 
-            <div v-if="selected === sendTypes.send">
+            <div v-if="radioSelected === sendTypes.send">
               <validation-provider
                 name="Email"
                 :rules="{
-                  required: selected === sendTypes.send ? true : false,
+                  required: radioSelected === sendTypes.send ? true : false,
                   email: true,
                   is_not: $store.state.email,
                 }"
@@ -129,12 +139,12 @@
             <b-row v-else class="test-buttons">
               <b-col>
                 <b-button type="reset" variant="secondary" @click="onReset">
-                  {{ $t('form.reset') }}
+                  {{ $t('form.cancel') }}
                 </b-button>
               </b-col>
               <b-col class="text-right">
-                <b-button type="submit" variant="success">
-                  {{ selected === sendTypes.send ? $t('form.send_now') : $t('form.generate_now') }}
+                <b-button type="submit" variant="primary">
+                  {{ $t('form.check_now') }}
                 </b-button>
               </b-col>
             </b-row>
@@ -159,6 +169,7 @@ export default {
     email: { type: String, default: '' },
     amount: { type: Number, default: 0 },
     memo: { type: String, default: '' },
+    selected: { type: String, default: 'send' },
   },
   inject: ['getTunneledEmail'],
   data() {
@@ -171,14 +182,14 @@ export default {
         memo: this.memo,
         amountValue: 0.0,
       },
-      selected: SEND_TYPES.send,
+      radioSelected: this.selected,
     }
   },
   methods: {
     onSubmit() {
       this.normalizeAmount(true)
       this.$emit('set-transaction', {
-        selected: this.selected,
+        selected: this.radioSelected,
         email: this.form.email,
         amount: this.form.amountValue,
         memo: this.form.memo,

frontend/src/components/GddTransactionList.vue

@@ -70,7 +70,8 @@
       :total-rows="transactionCount"
     ></pagination-buttons>
     <div v-if="transactionCount <= 0" class="mt-4 text-center">
-      <span>{{ $t('transaction.nullTransactions') }}</span>
+      <b-icon v-if="pending" icon="three-dots" animation="cylon"></b-icon>
+      <div v-else>{{ $t('transaction.nullTransactions') }}</div>
     </div>
   </div>
 </template>
@@ -108,6 +109,7 @@ export default {
     transactionCount: { type: Number, default: 0 },
     transactionLinkCount: { type: Number, default: 0 },
     showPagination: { type: Boolean, default: false },
+    pending: { type: Boolean },
   },
   methods: {
     updateTransactions() {

frontend/src/components/Menu/Navbar.vue

@@ -10,7 +10,10 @@
       </div>
 
       <b-navbar-nav class="ml-auto" is-nav>
-        <b-nav-item>{{ pending ? $t('em-dash') : balance | amount }} {{ $t('GDD') }}</b-nav-item>
+        <b-nav-item>
+          <b-icon v-if="pending" icon="three-dots" animation="cylon"></b-icon>
+          <div v-else>{{ pending ? $t('em-dash') : balance | amount }} {{ $t('GDD') }}</div>
+        </b-nav-item>
         <b-nav-item to="/profile" right class="d-none d-sm-none d-md-none d-lg-flex shadow-lg">
           <small>
             {{ $store.state.firstName }} {{ $store.state.lastName }}

frontend/src/components/Status.spec.js

@@ -26,8 +26,8 @@ describe('Status', () => {
     })
 
     describe('balance is pending', () => {
-      it('it displays an en-dash', () => {
-        expect(wrapper.find('div.gdd-status-div').text()).toEqual('em-dash GDD')
+      it('displays an animation icon test-pending-icon', () => {
+        expect(wrapper.find('.test-pending-icon').exists()).toBe(true)
       })
     })
 
@@ -38,6 +38,10 @@ describe('Status', () => {
         })
       })
 
+      it('does not display an animation icon test-pending-icon', () => {
+        expect(wrapper.find('.test-pending-icon').exists()).toBe(false)
+      })
+
       it('it displays the ammount of GDD', () => {
         expect(wrapper.find('div.gdd-status-div').text()).toEqual('1234 GDD')
       })

frontend/src/components/Status.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="gdd-status">
     <div class="p-0 gdd-status-div">
-      {{ pending || balance === null ? $t('em-dash') : $n(balance, 'decimal') }} {{ statusText }}
+      <b-icon v-if="pending" icon="three-dots" animation="cylon" class="test-pending-icon"></b-icon>
+      <div v-else>
+        {{ pending || balance === null ? $t('em-dash') : $n(balance, 'decimal') }} {{ statusText }}
+      </div>
     </div>
   </div>
 </template>

frontend/src/locales/de.json

@@ -52,6 +52,7 @@
     "amount": "Betrag",
     "at": "am",
     "cancel": "Abbrechen",
+    "check_now": "Jetzt prüfen",
     "close": "Schließen",
     "current_balance": "Aktueller Kontostand",
     "date": "Datum",
@@ -60,7 +61,7 @@
     "email": "E-Mail",
     "firstname": "Vorname",
     "from": "Von",
-    "generate_now": "jetzt generieren",
+    "generate_now": "Jetzt generieren",
     "lastname": "Nachname",
     "memo": "Nachricht",
     "message": "Nachricht",
@@ -95,7 +96,7 @@
   },
   "GDD": "GDD",
   "gdd_per_link": {
-    "choose-amount": "Wähle einen Betrag aus, welchen du per Link versenden möchtest. Du kannst auch noch eine Nachricht eintragen. Beim Klick „jetzt generieren“ wird ein Link erstellt, den du versenden kannst.",
+    "choose-amount": "Wähle einen Betrag aus, welchen du per Link versenden möchtest. Du kannst auch noch eine Nachricht eintragen. Beim Klick „Jetzt generieren“ wird ein Link erstellt, den du versenden kannst.",
     "copy": "kopieren",
     "created": "Der Link wurde erstellt!",
     "decay-14-day": "Vergänglichkeit für 14 Tage",

frontend/src/locales/en.json

@@ -52,6 +52,7 @@
     "amount": "Amount",
     "at": "at",
     "cancel": "Cancel",
+    "check_now": "Check now",
     "close": "Close",
     "current_balance": "Current Balance",
     "date": "Date",

frontend/src/pages/Overview.vue

@@ -21,6 +21,7 @@
         :decayStartBlock="decayStartBlock"
         :transaction-count="transactionCount"
         :transactionLinkCount="transactionLinkCount"
+        :pending="pending"
         @update-transactions="updateTransactions"
         v-on="$listeners"
       />

frontend/src/pages/Send.spec.js

@@ -101,7 +101,7 @@ describe('Send', () => {
             jest.clearAllMocks()
             await wrapper
               .findComponent({ name: 'TransactionConfirmationSend' })
-              .find('button.btn-success')
+              .find('button.btn-primary')
               .trigger('click')
           })
 
@@ -135,7 +135,7 @@ describe('Send', () => {
             apolloMutationMock.mockRejectedValue({ message: 'recipient not known' })
             await wrapper
               .findComponent({ name: 'TransactionConfirmationSend' })
-              .find('button.btn-success')
+              .find('button.btn-primary')
               .trigger('click')
           })
 
@@ -182,7 +182,7 @@ describe('Send', () => {
           jest.clearAllMocks()
           await wrapper
             .findComponent({ name: 'TransactionConfirmationLink' })
-            .find('button.btn-success')
+            .find('button.btn-primary')
             .trigger('click')
         })
 
@@ -264,7 +264,7 @@ describe('Send', () => {
           apolloMutationMock.mockRejectedValue({ message: 'OUCH!' })
           await wrapper
             .findComponent({ name: 'TransactionConfirmationLink' })
-            .find('button.btn-success')
+            .find('button.btn-primary')
             .trigger('click')
         })