[#7887] ticket:790 Better messaging for phone validation
- phone number examples
- different message for PIN step
- site-specific message with template override
Project: http://git-wip-us.apache.org/repos/asf/allura/repo
Commit: http://git-wip-us.apache.org/repos/asf/allura/commit/49c94bae
Tree: http://git-wip-us.apache.org/repos/asf/allura/tree/49c94bae
Diff: http://git-wip-us.apache.org/repos/asf/allura/diff/49c94bae
Branch: refs/heads/master
Commit: 49c94bae01f7abd1d78d49100a2284434d069aa0
Parents: bc064d8
Author: Igor Bondarenko <jetmind2@gmail.com>
Authored: Thu Jun 4 09:04:41 2015 +0000
Committer: Igor Bondarenko <jetmind2@gmail.com>
Committed: Thu Jun 4 09:04:41 2015 +0000
----------------------------------------------------------------------
.../allura/public/nf/js/phone-verification.js | 14 +++++++-
.../templates/phone_verification_fragment.html | 34 +++++++++++++++-----
2 files changed, 39 insertions(+), 9 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/allura/blob/49c94bae/Allura/allura/public/nf/js/phone-verification.js
----------------------------------------------------------------------
diff --git a/Allura/allura/public/nf/js/phone-verification.js b/Allura/allura/public/nf/js/phone-verification.js
index 1a22c83..239cfac 100644
--- a/Allura/allura/public/nf/js/phone-verification.js
+++ b/Allura/allura/public/nf/js/phone-verification.js
@@ -71,6 +71,10 @@ var FormStepMixin = {
disabled: this.isButtonDisabled()
};
return dom('div', null,
+ dom('div', {className: grid,
+ dangerouslySetInnerHTML: this.getMessage()}),
+ dom('div', {className: grid,
+ dangerouslySetInnerHTML: this.getExtraMessage()}),
dom('label', {className: grid}, this.getLabel()),
dom('input', input_props),
dom('div', {className: grid + ' error-text',
@@ -82,6 +86,14 @@ var FormStepMixin = {
getErrorHtml: function() {
return {__html: this.props.state.error || ' '};
},
+
+ getHtml: function(elem_id) {
+ var html = document.getElementById(elem_id).innerHTML
+ return {__html: html};
+ },
+
+ getMessage: function() { return this.getHtml('message-' + this.getKey()); },
+ getExtraMessage: function() { return this.getHtml('message-extra'); },
handleClick: function() {
if (!this.isButtonDisabled()) {
@@ -147,7 +159,7 @@ var StepCheck = React.createClass({
getAPIUrl: function() { return 'check_phone_verification'; },
getAPIData: function() { return {'pin': this.props.state[this.getKey()]}; },
- getLabel: function() { return 'Enter PIN'; },
+ getLabel: function() { return 'Enter your PIN'; },
getKey: function() { return 'pin'; },
onSuccess: function() {
var form = window.top.jQuery('form[action="/p/register"]');
http://git-wip-us.apache.org/repos/asf/allura/blob/49c94bae/Allura/allura/templates/phone_verification_fragment.html
----------------------------------------------------------------------
diff --git a/Allura/allura/templates/phone_verification_fragment.html b/Allura/allura/templates/phone_verification_fragment.html
index faa0009..561b0df 100644
--- a/Allura/allura/templates/phone_verification_fragment.html
+++ b/Allura/allura/templates/phone_verification_fragment.html
@@ -49,18 +49,36 @@
margin-top: .5em;
margin-bottom: .5em;
}
+ .step-message { display: none; }
</style>
</head>
<body>
<div class="grid-9">
- {% block phone_validation_message %}
- <p>
- In order to register a project you need to perform phone validation
- (just this once). Please, enter your phone number below. You'll
- receive an SMS message with a PIN you need to provide on the next
- step. Your phone number will not be stored.
- </p>
- {% endblock phone_validation_message %}
+ {# The following blocks are hidden, they're used to provide messages to React component
#}
+ <div id='message-number' class='step-message'>
+ {% block phone_validation_message_number %}
+ <p>
+ In order to register a project you need to perform phone
+ validation (just this once). Please, enter your phone number
+ below (e.g. 1-311-555-2368 or +61 8 5550 1757). You'll receive
+ an SMS message with a PIN you need to provide on the next step.
+ Your phone number will not be stored.
+ </p>
+ {% endblock phone_validation_message_number %}
+ </div>
+ <div id='message-pin' class='step-message'>
+ {% block phone_validation_message_pin %}
+ <p>
+ A PIN is being sent to your phone. If you are unable to receive
+ SMS, you will get a voice call with the number.
+ </p>
+ {% endblock phone_validation_message_pin %}
+ </div>
+ <div id='message-extra' class='step-message'>
+ {% block phone_validation_message_extra %}
+ {% endblock phone_validation_message_extra %}
+ </div>
+
<div id="phone-verification-form">
{# Phone verification form will be mounted here (see phone-verification.js) #}
</div>
|