Merge pull request #235 from kylezs/sign-and-verify

add data and address to signature popup

src/components/advanced/sign_and_verify.vue

@@ -4,28 +4,35 @@
       <div class="q-mb-lg description">
         {{ $t("strings.signAndVerifyDescription") }}
       </div>
-      <div class="text-h6">Sign</div>
-      <div class="row justify-between items-end">
-        <LokiField :label="$t('fieldLabels.data')">
-          <q-input
-            v-model.trim="toSign"
-            :dark="theme == 'dark'"
-            borderless
-            dense
-            :placeholder="$t('placeholders.dataToSign')"
-          />
-        </LokiField>
-        <div class="btn-wrapper q-ml-md q-py-sm">
-          <q-btn
-            color="primary"
-            :label="$t('buttons.sign')"
-            :loading="sign_status.sending"
-            :disable="!toSign"
-            @click="sign()"
-          />
+      <div v-if="is_view_only">
+        {{ $t("strings.cannotSign") }}
+      </div>
+      <div v-else>
+        <div class="text-h6">{{ $t("titles.advanced.sign") }}</div>
+        <div class="row justify-between items-end">
+          <LokiField :label="$t('fieldLabels.data')">
+            <q-input
+              v-model.trim="toSign"
+              :dark="theme == 'dark'"
+              borderless
+              dense
+              :placeholder="$t('placeholders.dataToSign')"
+            />
+          </LokiField>
+          <div class="btn-wrapper q-ml-md q-py-sm">
+            <q-btn
+              color="primary"
+              :label="$t('buttons.sign')"
+              :loading="sign_status.sending"
+              :disable="!toSign"
+              @click="sign()"
+            />
+          </div>
         </div>
       </div>
-      <div class="verify-heading text-h6">Verify</div>
+      <div class="verify-heading text-h6">
+        {{ $t("titles.advanced.verify") }}
+      </div>
       <div class="justify-between items-end">
         <LokiField class="q-mt-md" :label="$t('fieldLabels.signature')">
           <q-input
@@ -51,7 +58,7 @@
             :dark="theme == 'dark'"
             borderless
             dense
-            :placeholder="$t('placeholders.address')"
+            :placeholder="$t('placeholders.addressOfSigner')"
           />
         </LokiField>
         <div class="submit-button">
@@ -69,9 +76,13 @@
           />
         </div>
         <SignatureDialog
-          :on-copy="copySignature"
+          :on-copy-signature="copySignature"
+          :on-copy-unsigned-data="copyUnsignedData"
+          :on-copy-address="copyAddress"
           :on-close="closeDialog"
           :signature="signature"
+          :unsigned-data="toSign"
+          :address="primary_address"
           :show="!!signature"
         />
       </div>
@@ -104,6 +115,8 @@ export default {
     sign_status: state => state.gateway.sign_status,
     verify_status: state => state.gateway.verify_status,
     signature: state => state.gateway.sign_status.signature,
+    primary_address: state => state.gateway.wallet.info.address,
+    is_view_only: state => state.gateway.wallet.info.view_only,
     canClear() {
       const canClear =
         this.signatureToVerify !== "" ||
@@ -172,6 +185,23 @@ export default {
         message: this.$t("notification.positive.signatureCopied")
       });
     },
+    // copy from the dialog
+    copyUnsignedData() {
+      clipboard.writeText(this.toSign);
+      this.$q.notify({
+        type: "positive",
+        timeout: 2000,
+        message: this.$t("notification.positive.copied", { item: "Data" })
+      });
+    },
+    copyAddress() {
+      clipboard.writeText(this.primary_address);
+      this.$q.notify({
+        type: "positive",
+        timeout: 2000,
+        message: this.$t("notification.positive.addressCopied")
+      });
+    },
     closeDialog() {
       this.$store.commit("gateway/set_sign_status", {
         signature: ""

src/components/advanced/signature_dialog.vue

@@ -7,16 +7,89 @@
           {{ $t("dialog.signature.message") }}
         </div>
       </q-card-section>
-      <q-card-section>
-        <p class="signature">{{ signature }}</p>
+      <q-card-section class="info">
+        <q-item class="signature row">
+          <div class="col">
+            <q-item-label class="labels">{{
+              $t("fieldLabels.signature")
+            }}</q-item-label>
+            {{ signature }}
+          </div>
+          <div class="col-auto">
+            <q-btn
+              color="primary"
+              icon="file_copy"
+              size="sm"
+              padding="xs"
+              style="width: 100%; margin-top: 16px"
+              @click="onCopySignature"
+            >
+              <q-tooltip
+                anchor="center left"
+                self="center right"
+                :offset="[5, 10]"
+              >
+                {{ $t("buttons.copySignature") }}
+              </q-tooltip>
+            </q-btn>
+          </div>
+        </q-item>
+        <q-item class="row unsigned-data">
+          <div class="col">
+            <q-item-label class="labels">{{
+              $t("fieldLabels.data")
+            }}</q-item-label>
+            {{ unsignedData }}
+          </div>
+          <div class="col-auto">
+            <q-btn
+              color="primary"
+              icon="file_copy"
+              size="sm"
+              padding="xs"
+              style="width: 100%; margin-top: 16px"
+              @click="onCopyUnsignedData"
+            >
+              <q-tooltip
+                anchor="center left"
+                self="center right"
+                :offset="[5, 10]"
+              >
+                {{ $t("buttons.copyData") }}
+              </q-tooltip>
+            </q-btn>
+          </div>
+        </q-item>
+        <q-item class="row address">
+          <div class="col">
+            <q-item-label class="labels">{{
+              $t("fieldLabels.address")
+            }}</q-item-label>
+            {{ address }}
+          </div>
+          <div class="col-auto">
+            <q-btn
+              color="primary"
+              class="vertical-middle"
+              icon="file_copy"
+              size="sm"
+              style="width: 100%; margin-top: 16px"
+              padding="xs"
+              @click="onCopyAddress"
+            >
+              <q-tooltip
+                anchor="center left"
+                self="center right"
+                :offset="[5, 10]"
+              >
+                {{ $t("buttons.copyAddress") }}
+              </q-tooltip>
+            </q-btn>
+          </div>
+        </q-item>
       </q-card-section>
       <q-card-actions align="right">
         <q-btn flat :label="$t('buttons.close')" @click="onClose" />
-        <q-btn
-          :label="$t('buttons.copySignature')"
-          color="primary"
-          @click="onCopy"
-        />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -26,7 +99,15 @@
 export default {
   name: "SignatureDialog",
   props: {
-    onCopy: {
+    onCopySignature: {
+      type: Function,
+      required: true
+    },
+    onCopyAddress: {
+      type: Function,
+      required: true
+    },
+    onCopyUnsignedData: {
       type: Function,
       required: true
     },
@@ -42,17 +123,28 @@ export default {
       type: Boolean,
       required: false,
       default: true
+    },
+    address: {
+      type: String,
+      required: true
+    },
+    unsignedData: {
+      type: String,
+      required: true
     }
   }
 };
 </script>
 
 <style lang="scss">
-.signature {
+.info {
   flex: 1;
   word-break: break-all;
   word-wrap: break-word;
-  -webkit-user-select: all;
-  user-select: all;
+
+  .labels {
+    font-weight: bold;
+    margin-bottom: 4px;
+  }
 }
 </style>

src/i18n/en-us.js

@@ -12,6 +12,7 @@ export default {
     close: "CLOSE",
     contacts: "CONTACTS",
     copyAddress: "COPY ADDRESS",
+    copyData: "COPY DATA",
     copySignature: "COPY SIGNATURE",
     createWallet: "CREATE WALLET",
     decrypt: "DECRYPT",
@@ -407,7 +408,7 @@ export default {
   placeholders: {
     additionalNotes: "Additional notes",
     addressBookName: "Name that belongs to this address",
-    address: "Public address",
+    addressOfSigner: "Public wallet address of signer",
     dataToSign: "Data you want to sign with your primary address's private key",
     filterTx: "Enter an ID, name, address or amount",
     hexCharacters: "{count} hexadecimal characters",
@@ -449,6 +450,7 @@ export default {
       bannedUntil: "Banned until {time}"
     },
     blockHeight: "Height",
+    cannotSign: "You cannot sign with a view only wallet.",
     checkTransaction: {
       description:
         "Verify that funds were paid to an address by supplying the transaction ID, the recipient address, the message used for signing and the signature.\nFor a 'Spend Proof' you dont need to provide the recipient address.",
@@ -602,7 +604,9 @@ export default {
     advanced: {
       checkTransaction: "CHECK TRANSACTION",
       prove: "PROVE",
-      signAndVerify: "SIGN/VERIFY"
+      signAndVerify: "SIGN/VERIFY",
+      sign: "Sign",
+      verify: "Verify"
     },
     availableForContribution: "Service nodes available for contribution",
     changePassword: "Change password",