Skip to content
This repository has been archived by the owner on Mar 23, 2023. It is now read-only.

Commit

Permalink
feat/fix: validation on sign/verify modals & signed messages alignment (
Browse files Browse the repository at this point in the history 
#1014)

* feat: validation on sign/verify modals

* misc: add :focus color to input icons

* fix: signed message alignment

* refactor: remove nested if branch

* fix: json validation

* misc: update example json format
  • Loading branch information
@dated @alexbarnsley
dated authored and alexbarnsley committed Jan 24, 2019
1 parent ab72e23 commit 4016c74
Show file tree
Hide file tree
Showing 7 changed files with 92 additions and 15 deletions.
2 changes: 1 addition & 1 deletion src/renderer/components/Input/InputPassword.vue
View file
Expand Up @@ -26,7 +26,7 @@

<button
:title="$t(passwordIsVisible ? 'PASSWORD_INPUT.HIDE' : 'PASSWORD_INPUT.SHOW')"
class="InputPassword__visibility-button flex flex-no-shrink text-grey-dark hover:text-blue mr-2"
class="InputPassword__visibility-button flex flex-no-shrink text-grey-dark hover:text-blue focus:text-blue mr-2"
type="button"
@click="toggleVisible"
>
Expand Down
4 changes: 2 additions & 2 deletions src/renderer/components/Passphrase/PassphraseInput.vue
View file
Expand Up @@ -27,7 +27,7 @@

<button
:title="$t(passphraseIsVisible ? 'PASSPHRASE_INPUT.HIDE' : 'PASSPHRASE_INPUT.SHOW')"
class="PassphraseInput__visibility-button flex flex-no-shrink text-grey-dark hover:text-blue mr-2"
class="PassphraseInput__visibility-button flex flex-no-shrink text-grey-dark hover:text-blue focus:text-blue mr-2"
type="button"
@click="toggleVisible"
>
Expand All @@ -40,7 +40,7 @@
<ButtonModal
ref="button-qr"
:label="''"
class="PassphraseInput__qr-button flex flex-no-shrink text-grey-dark hover:text-blue"
class="PassphraseInput__qr-button flex flex-no-shrink text-grey-dark hover:text-blue focus:text-blue"
icon="qr"
view-box="0 0 20 20"
>
Expand Down
15 changes: 15 additions & 0 deletions src/renderer/components/Wallet/WalletSignModal.vue
View file
Expand Up @@ -16,6 +16,7 @@
v-if="!wallet.passphrase"
ref="passphrase"
v-model="$v.form.passphrase.$model"
:is-invalid="$v.form.passphrase.$error"
:address="wallet.address"
:pub-key-hash="session_network.version"
class="my-3"
Expand All @@ -30,8 +31,11 @@
/>

<InputText
ref="message"
v-model="$v.form.message.$model"
:label="$t('SIGN_VERIFY.MESSAGE')"
:helper-text="messageError"
:is-invalid="$v.form.message.$error"
name="message"
/>

Expand Down Expand Up @@ -87,6 +91,15 @@ export default {
bip38Worker: null
}),
computed: {
messageError () {
if (this.$v.form.message.$error && this.$v.form.message.minLength) {
return this.$t('VALIDATION.REQUIRED', [this.$refs['message'].label])
}
return null
}
},
mounted () {
if (this.bip38Worker) {
this.bip38Worker.send('quit')
Expand Down Expand Up @@ -131,6 +144,8 @@ export default {
message['address'] = this.wallet.address
this.$store.dispatch('wallet/addSignedMessage', message)
this.$success(this.$t('SIGN_VERIFY.SUCCESSFULL_SIGN'))
this.emitSigned()
} catch (error) {
this.$error(this.$t('SIGN_VERIFY.FAILED_SIGN'))
Expand Down
20 changes: 12 additions & 8 deletions src/renderer/components/Wallet/WalletSignVerify/WalletSignVerify.vue
View file
Expand Up @@ -50,16 +50,20 @@
@mouseover="showTimestamp = message.timestamp"
@mouseout="showTimestamp = null"
>
<div class="flex flex-row">
<div class="font-semibold text-theme-wallet-sign-verify-message-text mr-6 pl-2">
<div>{{ $t('SIGN_VERIFY.MESSAGE') }}:</div>
<div>{{ $t('SIGN_VERIFY.SIGNATURE') }}:</div>
</div>
<div>
<div class="font-semibold word-break-all">
<div class="flex flex-col">
<div class="flex items-start">
<div class="font-semibold w-30 flex-shrink-none pl-2 text-theme-wallet-sign-verify-message-text">
{{ $t('SIGN_VERIFY.MESSAGE') }}:
</div>
<div class="font-semibold w-full word-break-all">
{{ message.message }}
</div>
<div class="word-break-all">
</div>
<div class="flex items-start">
<div class="font-semibold w-30 flex-shrink-none pl-2 text-theme-wallet-sign-verify-message-text">
{{ $t('SIGN_VERIFY.SIGNATURE') }}:
</div>
<div class="w-full word-break-all">
{{ message.signature }}
</div>
</div>
Expand Down
54 changes: 53 additions & 1 deletion src/renderer/components/Wallet/WalletVerifyModal.vue
View file
Expand Up @@ -16,8 +16,11 @@

<div v-if="verifyChoice === 'Verify'">
<InputText
ref="message"
v-model="$v.form.message.$model"
:label="$t('SIGN_VERIFY.MESSAGE')"
:helper-text="messageError"
:is-invalid="$v.form.message.$error"
class="mt-5"
name="message"
/>
Expand All @@ -26,21 +29,29 @@
v-model="$v.form.publicKey.$model"
:label="$t('SIGN_VERIFY.PUBLIC_KEY')"
:value="wallet.publicKey"
:helper-text="publicKeyError"
:is-invalid="$v.form.publicKey.$error"
class="mt-5"
name="publicKey"
/>

<InputText
ref="signature"
v-model="$v.form.signature.$model"
:label="$t('SIGN_VERIFY.SIGNATURE')"
:helper-text="signatureError"
:is-invalid="$v.form.signature.$error"
class="mt-5"
name="signature"
/>
</div>
<div v-else>
<InputText
ref="json"
v-model="$v.form.json.$model"
:label="$t('SIGN_VERIFY.JSON_MESSAGE')"
:helper-text="jsonError"
:is-invalid="$v.form.json.$error"
class="mt-5"
name="json"
/>
Expand Down Expand Up @@ -125,6 +136,40 @@ export default {
isNotVerified: false
}),
computed: {
messageError () {
if (this.$v.form.message.$error && !this.$v.form.message.isValid) {
return this.$t('VALIDATION.REQUIRED', [this.$refs['message'].label])
}
return null
},
publicKeyError () {
if (this.$v.form.publicKey.$error && !this.$v.form.publicKey.isValid) {
return this.$t('VALIDATION.PUBLIC_KEY.INVALID_LENGTH')
}
return null
},
signatureError () {
if (this.$v.form.signature.$error && !this.$v.form.signature.isValid) {
return this.$t('VALIDATION.REQUIRED', [this.$refs['signature'].label])
}
return null
},
jsonError () {
if (this.$v.form.json.$error) {
if (!this.$v.form.json.isNotEmpty) {
return this.$t('VALIDATION.REQUIRED', [this.$refs['json'].label])
} else if (!this.$v.form.json.isValid) {
return this.$t('VALIDATION.INVALID_FORMAT')
}
}
return null
}
},
mounted () {
this.form.publicKey = this.wallet.publicKey
},
Expand Down Expand Up @@ -201,14 +246,21 @@ export default {
}
},
json: {
isNotEmpty (value) {
if (this.verifyChoice === 'Verify') {
return true
}
return value.length !== 0
},
isValid (value) {
if (this.verifyChoice === 'Verify') {
return true
}
// Check for valid json
try {
const json = JSON.parse(value)
return json['message'] && json['publicKey'] && json['signature']
return !!(json['message'] && (json['publicKey'] || json['publickey']) && json['signature'])
} catch (err) {
return false
}
Expand Down
10 changes: 8 additions & 2 deletions src/renderer/i18n/locales/en-US.js
View file
Expand Up @@ -120,6 +120,7 @@ export default {
VALIDATION: {
TOO_LONG: 'The \'{0}\' is too long',
INVALID_URI: 'Invalid URI',
INVALID_FORMAT: 'Invalid format',
MAX_LENGTH: 'Max {0}',
NOT_MATCH: 'The \'{0}\' does not match the \'{1}\'',
NOT_VALID: 'The \'{0}\' is not valid',
Expand All @@ -142,6 +143,9 @@ export default {
EXISTS_AS_CONTACT: 'The address \'{0}\' has already been added as a contact',
EXISTS_AS_WALLET: 'The address \'{0}\' has already been imported as a wallet'
},
PUBLIC_KEY: {
INVALID_LENGTH: 'The public key must be 66 characters long'
},
REQUIRED: 'The \'{0}\' is required',
SEND_NOT_ENABLED: 'Sending is not enabled for the selected wallet',
WALLET_NOT_ACTIVE: 'Select a wallet and open the URI again',
Expand Down Expand Up @@ -765,13 +769,15 @@ export default {
PUBLIC_KEY: 'Public key',
SIGNATURE: 'Signature',
JSON_MESSAGE: 'Signed message content',
FORMAT_FOOTER: 'Format (JSON): { "publickey": "...", "signature": "...", "message": "..." }',
FORMAT_FOOTER: 'Format (JSON): { "publicKey": "...", "signature": "...", "message": "..." }',
VERIFIED: 'The message is verified successfully',
NOT_VERIFIED: 'The message is NOT verified',
CONFIRMATION: 'Confirmation',
DELETE: 'Delete message',
FAILED_SIGN: 'Could not sign message',
FAILED_VERIFY: 'Could not verify message'
FAILED_VERIFY: 'Could not verify message',
SUCCESSFULL_SIGN: 'Your message was signed',
SUCCESSFULL_VERIFY: 'The message was verified'
},

SYNCHRONIZER: {
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/pages/Profile/ProfileEdition.vue
View file
Expand Up @@ -63,7 +63,7 @@

<button
:disabled="$v.modified.name.$dirty && $v.modified.name.$invalid"
class="ProfileEdition__name__toggle ml-2 cursor-pointer text-grey hover:text-blue inline-flex"
class="ProfileEdition__name__toggle ml-2 cursor-pointer text-grey hover:text-blue focus:text-blue inline-flex"
@click="toggleIsNameEditable"
>
<SvgIcon
Expand Down

0 comments on commit 4016c74

Please sign in to comment.