From 7bba881b3a5eb3d2bb17d16e7e6605b1ad35aa20 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 11 Mar 2022 20:11:15 +0100
Subject: [PATCH] frontendstyle for send per link fixed, add components
 ClipboardCopy.vue

---
 frontend/src/assets/scss/gradido.scss         | 10 +++--
 frontend/src/components/ClipboardCopy.vue     | 37 ++++++++++++++++++
 .../GddSend/TransactionConfirmation.vue       | 38 ++++---------------
 .../components/GddSend/TransactionForm.vue    | 10 ++---
 .../components/GddSend/TransactionResult.vue  | 15 ++++----
 frontend/src/locales/de.json                  |  4 ++
 frontend/src/locales/en.json                  |  4 ++
 7 files changed, 71 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/components/ClipboardCopy.vue

diff --git a/frontend/src/assets/scss/gradido.scss b/frontend/src/assets/scss/gradido.scss
index abb491206..e72fbb1c4 100644
--- a/frontend/src/assets/scss/gradido.scss
+++ b/frontend/src/assets/scss/gradido.scss
@@ -52,6 +52,7 @@
 // Bootstrap-vue (2.21.1) scss
 @import "~bootstrap-vue/src/index";
 
+
 .alert-success {
   color: #155724;
   background-color: #d4edda;
@@ -94,6 +95,11 @@
   border-color: #5e72e4;
 }
 
+.gradido-font-large {
+  font-size: large;
+  height: auto !important;
+}
+
 a,
 .copyright {
   color: #5a7b02;
@@ -201,10 +207,6 @@ a,
   background-color: #fff;
 }
 
-.gradido-font-large {
-  font-size: large;
-}
-
 .gradido-font-15rem {
   font-size: 1.5rem;
 }
diff --git a/frontend/src/components/ClipboardCopy.vue b/frontend/src/components/ClipboardCopy.vue
new file mode 100644
index 000000000..8e4caa706
--- /dev/null
+++ b/frontend/src/components/ClipboardCopy.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="clipboard-copy">
+    <b-input-group size="lg" class="mb-3" prepend="Link">
+      <b-form-input v-model="url" type="text" readonly></b-form-input>
+      <b-input-group-append>
+        <b-button size="sm" text="Button" variant="success" @click="CopyLink">
+          {{ $t('gdd_per_link.copy') }}
+        </b-button>
+      </b-input-group-append>
+    </b-input-group>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ClipboardCopy',
+  props: {
+    code: { type: String, required: true },
+  },
+  data() {
+    return {
+      url: `http://localhost/redeem/${this.code}`,
+    }
+  },
+  methods: {
+    CopyLink() {
+      navigator.clipboard
+        .writeText(this.url)
+        .then(() => {
+          this.toastSuccess(this.$t('gdd_per_link.link-copied'))
+        })
+        .catch((err) => {
+          this.toastError(`${this.$t('gdd_per_link.link-copied')}: ${err}`)
+        })
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/GddSend/TransactionConfirmation.vue b/frontend/src/components/GddSend/TransactionConfirmation.vue
index b3e873748..da454518d 100644
--- a/frontend/src/components/GddSend/TransactionConfirmation.vue
+++ b/frontend/src/components/GddSend/TransactionConfirmation.vue
@@ -1,14 +1,12 @@
 <template>
   <div class="transaction-confirm">
     <b-row v-if="selected === 'link'" class="confirm-box-link">
-      <b-alert class="mb-3 mt-3" show variant="muted">
-        <h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
+      <b-col class="text-right mt-4 mb-3">
+        <div class="alert-heading text-left h3">{{ $t('gdd_per_link.header') }}</div>
 
-        <div>
-          Du versendest per Link:
-          <h1>{{ $n(amount, 'decimal') }} GDD</h1>
-        </div>
-      </b-alert>
+        <h1>{{ amount | GDD }}</h1>
+        <b class="mt-2">{{ memo }}</b>
+      </b-col>
     </b-row>
     <b-row v-else class="confirm-box-send">
       <b-col>
@@ -43,8 +41,8 @@
       </b-col>
     </b-row>
 
-    <b-container class="bv-example-row mt-3 gray-background p-2">
-      <p>{{ $t('advanced-calculation') }}</p>
+    <b-container class="bv-example-row mt-3 mb-3 gray-background p-2">
+      <div class="alert-heading text-left h3">{{ $t('advanced-calculation') }}</div>
       <b-row class="pr-3">
         <b-col class="text-right">{{ $t('form.current_balance') }}</b-col>
         <b-col class="text-right">{{ $n(balance, 'decimal') }}</b-col>
@@ -84,28 +82,6 @@
         </b-button>
       </b-col>
     </b-row>
-
-    <b-alert class="mt-3 confirm-box-link" show v-if="selected === 'link'" variant="muted">
-      <h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
-
-      <p>
-        -
-        <b>{{ $t('gdd_per_link.sentence_2') }}</b>
-      </p>
-      <p>
-        -
-        <b>{{ $t('gdd_per_link.sentence_3') }}</b>
-      </p>
-      <p>
-        -
-        <b>{{ $t('gdd_per_link.sentence_4') }}</b>
-      </p>
-
-      <hr />
-      <p class="mb-0">
-        {{ $t('gdd_per_link.sentence_5') }}
-      </p>
-    </b-alert>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/GddSend/TransactionForm.vue b/frontend/src/components/GddSend/TransactionForm.vue
index f2ab489cb..1a1dd7198 100644
--- a/frontend/src/components/GddSend/TransactionForm.vue
+++ b/frontend/src/components/GddSend/TransactionForm.vue
@@ -16,12 +16,12 @@
                 </b-form-radio>
               </b-col>
             </b-row>
-            <b-alert class="mt-3" v-show="selected === 'link'" show variant="muted">
+            <div class="mt-4" v-show="selected === 'link'">
               <h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
-              <p>
+              <div>
                 {{ $t('gdd_per_link.sentence_1') }}
-              </p>
-            </b-alert>
+              </div>
+            </div>
 
             <div>
               <validation-provider
@@ -34,7 +34,7 @@
                 }"
                 v-slot="{ errors }"
               >
-                <label class="input-1 mt-5" for="input-1">{{ $t('form.recipient') }}</label>
+                <label class="input-1 mt-4" for="input-1">{{ $t('form.recipient') }}</label>
                 <b-input-group
                   id="input-group-1"
                   class="border border-default"
diff --git a/frontend/src/components/GddSend/TransactionResult.vue b/frontend/src/components/GddSend/TransactionResult.vue
index efca688e1..479ad7ae8 100644
--- a/frontend/src/components/GddSend/TransactionResult.vue
+++ b/frontend/src/components/GddSend/TransactionResult.vue
@@ -31,13 +31,8 @@
       <b-col>
         <b-card class="p-0 gradido-custom-background">
           <div class="p-4">
-            {{ $t('form.thx') }}
-            <hr />
-            Der Link wurde erstellt!
-            <br />
-            linkResult: {{ linkResult }}
-            <br />
-            <h2>http://localhost/redeem/{{ linkResult.code }}</h2>
+            <div class="h3 mb-5">{{ $t('gdd_per_link.created') }}</div>
+            <clipboard-copy :code="linkResult.code" />
           </div>
           <p class="text-center mt-3">
             <b-button variant="success" @click="$emit('on-reset')">{{ $t('form.close') }}</b-button>
@@ -62,9 +57,15 @@
   </b-container>
 </template>
 <script>
+import ClipboardCopy from '../ClipboardCopy.vue'
+
 export default {
   name: 'TransactionResult',
+  components: {
+    ClipboardCopy,
+  },
   props: {
+    selected: { type: String },
     linkResult: {
       type: Object,
       required: false,
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 8a49c3016..b784d6172 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -101,6 +101,10 @@
     "your_amount": "Dein Betrag"
   },
   "gdd_per_link": {
+    "created":"Der Link wurde erstellt!",
+    "copy":"kopieren",
+    "link-copied":"Link wurde in die Zwischenablage kopiert",
+    "dont-copied":"Could not copy text",
     "header": "Gradidos versenden per Link",
     "sentence_1": "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.",
     "sentence_2": "Der Link ist 14 Tage gültig!",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index ca66bfe35..ed510f0e3 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -101,6 +101,10 @@
     "your_amount": "Your amount"
   },
   "gdd_per_link": {
+    "created":"Link Is Created!",
+    "copy":"copy",
+    "link-copied":"Link copied to clipboard",
+    "dont-copied":"Link kann nicht kopiert werden",
     "header": "Send Gradidos by link",
     "sentence_1": "Select an amount that you would like to send via a link. You can also enter a message. Click 'Generate now' to create a link that you can send.",
     "sentence_2": "The link is valid for 14 days!",