allura-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jetm...@apache.org
Subject [3/8] allura git commit: [#7887] ticket:790 Better messaging for phone validation
Date Thu, 04 Jun 2015 13:52:04 GMT
[#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/ib/7887
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 || '&nbsp;'};
   },
+
+  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>


Mime
View raw message