-
-
Notifications
You must be signed in to change notification settings - Fork 775
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Enable SMS Verification directly from Trust Bonus tab #7456
Merged
Merged
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
b645253
make sure it uses python3 (#7383)
molecula451 3762d37
Add SMS Verification directly on the Trust Bonus tab
apbendi fb665e5
Add link to refresh page after verification, so status can be seen on…
apbendi 4a0e4c0
Add TODO notes about refactoring SMS UI post grants round 7
apbendi 5d82a5f
Rename Vue app const on Trust Bonus page
apbendi File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -139,3 +139,234 @@ let show_brightid_verify_modal = function(brightid_uuid) { | |
| $(content).appendTo('body'); | ||
| $('#verify_brightid_modal').bootstrapModal('show'); | ||
| }; | ||
|
|
||
| // TODO: This component consists primarily of code taken from the SMS verification flow in the cart. | ||
| // This approach is not DRY, and after Grants Round 7 completes, the cart should be refactored to include | ||
| // this as a shared component, rather than duplicating the code. | ||
| Vue.component('sms-verify-modal', { | ||
| delimiters: [ '[[', ']]' ], | ||
| data: function() { | ||
| return { | ||
| csrf: $("input[name='csrfmiddlewaretoken']").val(), | ||
| validationStep: 'intro', | ||
| showValidation: false, | ||
| phone: '', | ||
| validNumber: false, | ||
| errorMessage: '', | ||
| verified: document.verified, | ||
| code: '', | ||
| timePassed: 0, | ||
| timeInterval: 0, | ||
| display_email_option: false, | ||
| countDownActive: false | ||
| }; | ||
| }, | ||
| mounted: function() { | ||
| $(document).on('click', '#verify-sms-link', function(event) { | ||
| event.preventDefault(); | ||
| this.showValidation = true; | ||
| }.bind(this)); | ||
| }, | ||
| template: `<b-modal id="sms-modal" @hide="dismissVerification()" :visible="showValidation" center hide-header hide-footer> | ||
| <template v-slot:default="{ hide }"> | ||
| <div class="mx-5 mt-5 mb-4 text-center" v-if="validationStep == 'intro'"> | ||
| <div class="mb-3"> | ||
| <h1 class="font-bigger-4 font-weight-bold">Verify your phone number</h1> | ||
| </div> | ||
| <br /> | ||
| <p class="mb-4 font-subheader text-left">We'd like to verify your phone number to get your contribution matched. Phone number verification is optional.</p> | ||
| <br /> | ||
| <p class="mb-4 font-subheader text-left">Verifying increases your trust level and impact of your contributions. You can still contribute to grants without | ||
| verifying your phone number, but your contribution impact will be reduced.</p> | ||
| <br /> | ||
| <p class="mb-4 font-subheader text-left">Gitcoin does NOT store your phone number.</p> | ||
| <br /> | ||
| <p class="mb-4 font-subheader text-left">read more about <a target="_blank" rel="noopener noreferrer" class="gc-text-blue font-smaller-1" | ||
| href="https://twitter.com/owocki/status/1271088915982675974">why we are asking for your phone number</a> or how Gitcoin <a target="_blank" rel="noopener noreferrer" class="gc-text-blue font-smaller-1" | ||
| href="https://twitter.com/owocki/status/1271088915982675974">preserves your privacy.</a></p> | ||
| <b-button @click="validationStep='requestVerification'" class="btn-gc-blue mb-2" size="lg">Verify | ||
| Phone Number</b-button> | ||
| <div class="mb-1 font-subheader text-center"> | ||
| <a id="verify_offline" href="#"> | ||
| <br /> | ||
| Verify Offline or</a> <a href="#" @click="dismissVerification()" variant="link">Skip</a> | ||
| <div id='verify_offline_target' style="display:none"> | ||
| <strong>Verify Offline</strong> | ||
| <br /> | ||
| <a href="mailto:[email protected]">Email Gitcoin</a> or <a href="https://keybase.io/gitcoin_verify">Message Gitcoin on Keybase</a>, and we will verify your information within 1-2 business days. | ||
| <br /> | ||
| IMPORTANT: Be sure to include (1) your gitcoin username (2) proof of ownership of a SMS number. | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="mx-5 my-5 text-center" v-if="validationStep == 'requestVerification'"> | ||
| <div class="mb-3"> | ||
| <h1 class="font-bigger-4 font-weight-bold">Verify your phone number</h1> | ||
| </div> | ||
| <p class="mb-5 font-subheader">We will send you a verification code.</p> | ||
| <vue-tel-input ref="tel-input" :validCharactersOnly="true" @validate="isValidNumber" v-model="phone" | ||
| :enabledCountryCode="true" :autofocus="true" :required="true" mode="international" | ||
| inputClasses="form-control" placeholder="+1 8827378273" | ||
| :inputOptions="{showDialCode: true}" | ||
| ></vue-tel-input> | ||
| <div v-if="timeInterval > timePassed"> | ||
| <span class="label-warning">Wait [[ timeInterval - timePassed ]] second before request another | ||
| code</span> | ||
| </div> | ||
| <div v-if="errorMessage"> | ||
| <span class="label-warning">[[ errorMessage ]]</span> | ||
| </div> | ||
| <b-button @click="requestVerification()" class="btn-gc-blue mt-5 mb-2" size="lg">Send verification | ||
| code</b-button> | ||
| <br /> | ||
| <b-button @click="hide()" variant="link">Cancel</b-button> | ||
| </div> | ||
| <div class="mx-5 my-5 text-center" v-if="validationStep == 'verifyNumber'"> | ||
| <div class="mb-3"> | ||
| <h1 class="font-bigger-4 font-weight-bold">Verify your phone number</h1> | ||
| </div> | ||
| <p class="mb-5 font-subheader">Enter the verification code sent to your number.</p> | ||
|
|
||
| <input class="form-control" type="number" required v-model="code"> | ||
| <div v-if="timeInterval > timePassed"> | ||
| <span class="label-warning">Wait [[ timeInterval - timePassed ]] second before request another | ||
| code</span> | ||
| </div> | ||
| <div v-if="errorMessage"> | ||
| <span class="label-warning">[[ errorMessage ]]</span> | ||
| </div> | ||
| <b-button @click="validateCode()" class="btn-gc-blue mt-5" size="lg">Submit</b-button> | ||
| <br /> | ||
| <b-button @click="startVerification()" variant="link">Change number</b-button> | ||
| <b-button @click="resendCode()" variant="link">Resend Code</b-button> | ||
| <b-button @click="resendCode('email')" variant="link" v-if="display_email_option">Send email</b-button> | ||
| </div> | ||
| </template> | ||
| </b-modal>`, | ||
| methods: { | ||
| dismissVerification() { | ||
| localStorage.setItem('dismiss-sms-validation', true); | ||
| this.showValidation = false; | ||
| }, | ||
| // VALIDATE | ||
| validateCode() { | ||
| const vm = this; | ||
|
|
||
| if (vm.code) { | ||
| const verificationRequest = fetchData('/sms/validate/', 'POST', { | ||
| code: vm.code, | ||
| phone: vm.phone | ||
| }, {'X-CSRFToken': vm.csrf}); | ||
|
|
||
| $.when(verificationRequest).then(response => { | ||
| vm.verificationEnabled = false; | ||
| vm.verified = true; | ||
| vm.validationStep = 'verifyNumber'; | ||
| vm.showValidation = false; | ||
| _alert('You have been verified. <a href="" style="color: white; text-decoration: underline;">Refresh Page</a>.', 'success'); | ||
| }).catch((e) => { | ||
| vm.errorMessage = e.responseJSON.msg; | ||
| }); | ||
| } | ||
| }, | ||
| startVerification() { | ||
| this.phone = ''; | ||
| this.validationStep = 'requestVerification'; | ||
| this.validNumber = false; | ||
| this.errorMessage = ''; | ||
| this.code = ''; | ||
| this.timePassed = 0; | ||
| this.timeInterval = 0; | ||
| this.display_email_option = false; | ||
| }, | ||
| countdown() { | ||
| const vm = this; | ||
|
|
||
| if (!vm.countDownActive) { | ||
| vm.countDownActive = true; | ||
|
|
||
| setInterval(() => { | ||
| vm.timePassed += 1; | ||
| }, 1000); | ||
| } | ||
| }, | ||
| resendCode(delivery_method) { | ||
| const e164 = this.phone.replace(/\s/g, ''); | ||
| const vm = this; | ||
|
|
||
| vm.errorMessage = ''; | ||
|
|
||
| if (vm.validNumber) { | ||
| const verificationRequest = fetchData('/sms/request', 'POST', { | ||
| phone: e164, | ||
| delivery_method: delivery_method || 'sms' | ||
| }, {'X-CSRFToken': vm.csrf}); | ||
|
|
||
| vm.errorMessage = ''; | ||
|
|
||
| $.when(verificationRequest).then(response => { | ||
| // set the cooldown time to one minute | ||
| this.timePassed = 0; | ||
| this.timeInterval = 60; | ||
| this.countdown(); | ||
| this.display_email_option = response.allow_email; | ||
| }).catch((e) => { | ||
| vm.errorMessage = e.responseJSON.msg; | ||
| }); | ||
| } | ||
| }, | ||
| // REQUEST VERIFICATION | ||
| requestVerification(event) { | ||
| const e164 = this.phone.replace(/\s/g, ''); | ||
| const vm = this; | ||
|
|
||
| if (vm.validNumber) { | ||
| const verificationRequest = fetchData('/sms/request', 'POST', { | ||
| phone: e164 | ||
| }, {'X-CSRFToken': vm.csrf}); | ||
|
|
||
| vm.errorMessage = ''; | ||
|
|
||
| $.when(verificationRequest).then(response => { | ||
| vm.validationStep = 'verifyNumber'; | ||
| this.timePassed = 0; | ||
| this.timeInterval = 60; | ||
| this.countdown(); | ||
| this.display_email_option = response.allow_email; | ||
| }).catch((e) => { | ||
| vm.errorMessage = e.responseJSON.msg; | ||
| }); | ||
| } | ||
| }, | ||
| isValidNumber(validation) { | ||
| console.log(validation); | ||
| this.validNumber = validation.isValid; | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| $(document).ready(function() { | ||
| $(document).on('keyup', 'input[name=telephone]', function(e) { | ||
| var number = $(this).val(); | ||
|
|
||
| if (number[0] != '+') { | ||
| number = '+' + number; | ||
| $(this).val(number); | ||
| } | ||
| }); | ||
|
|
||
|
|
||
| $(document).on('click', '#verify_offline', function(e) { | ||
| $(this).remove(); | ||
| $('#verify_offline_target').css('display', 'block'); | ||
| }); | ||
| }); | ||
|
|
||
| if (document.getElementById('gc-sms-modal')) { | ||
|
|
||
| const app = new Vue({ | ||
| delimiters: [ '[[', ']]' ], | ||
| el: '#gc-sms-modal', | ||
| data: { } | ||
| }); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can we do something like const appTrust here? I want to avoid coalitions with others apps loaded on the same page.