Bug 1123275 - Changes to form.reps.mentorship (DRAFT)

8 files changed, 342 insertions, 228 deletions

diff --git a/extensions/REMO/Extension.pm b/extensions/REMO/Extension.pm
index b436d09d3..ab39a45dc 100644
--- a/extensions/REMO/Extension.pm
+++ b/extensions/REMO/Extension.pm
@@ -28,6 +28,7 @@ use Bugzilla::Constants;
 use Bugzilla::Util qw(trick_taint trim detaint_natural);
 use Bugzilla::Token;
 use Bugzilla::Error;
+use List::Util qw(first);
 
 our $VERSION = '0.01';
 
@@ -243,9 +244,11 @@ sub post_bug_after_creation {
     my $bug = $vars->{bug};
     my $template = Bugzilla->template;
 
-    if (Bugzilla->input_params->{format}
-        && Bugzilla->input_params->{format} eq 'remo-swag')
-    {
+    my $format = Bugzilla->input_params->{format};
+
+    return unless defined $format;
+
+    if ($format eq 'remo-swag') {
         # If the attachment cannot be successfully added to the bug,
         # we notify the user, but we don't interrupt the bug creation process.
         my $error_mode_cache = Bugzilla->error_mode;
@@ -304,6 +307,27 @@ sub post_bug_after_creation {
 
         Bugzilla->error_mode($error_mode_cache);
     }
+
+    elsif ($format eq 'mozreps') {
+        my $needinfo_type = first { $_->name eq 'needinfo' } @{$bug->flag_types};
+        return unless $needinfo_type;
+        my %original_cc = map { $_ => 1 } Bugzilla->cgi->param('cc');
+        my @cc_users    = grep { $_->is_enabled && $original_cc{$_->login}} @{$bug->cc_users};
+        my @new_flags   = map {
+            { type_id   => $needinfo_type->id,
+              status    => '?',
+              requestee => $_->login }
+        } @cc_users;
+
+        $bug->set_flags(\@new_flags, []) if @new_flags;
+        $bug->add_comment(
+            join(", ", map { $_->realname || $_->login_name } @cc_users) .
+            ": You have been added as supporter to this Reps application, please comment why do you endorse their application. Thanks!"
+        );
+
+        $bug->update($bug->creation_ts);
+        Bugzilla::BugMail::Send($bug->id, { changer => Bugzilla->user });
+    }
 }
 
 __PACKAGE__->NAME;
diff --git a/extensions/REMO/template/en/default/bug/create/comment-mozreps.txt.tmpl b/extensions/REMO/template/en/default/bug/create/comment-mozreps.txt.tmpl
index 95ab1c3e4..c33202c81 100644
--- a/extensions/REMO/template/en/default/bug/create/comment-mozreps.txt.tmpl
+++ b/extensions/REMO/template/en/default/bug/create/comment-mozreps.txt.tmpl
@@ -27,8 +27,8 @@ Last Name:
 Under 18 years old:
 [%+ IF cgi.param('underage') %]Yes[% ELSE %]No[% END %]
 
-Sex:
-[%+ cgi.param('sex') %]
+Gender:
+[%+ cgi.param('gender') %]
 
 City:
 [%+ cgi.param('city') %]
@@ -50,7 +50,7 @@ IM:
 -
 [% END %]
 
-Mozillians.org Account:
+Mozillians.org Account URL:
 [% IF cgi.param('mozillian') %]
 [%+ cgi.param('mozillian') %]
 [% ELSE %]
@@ -58,17 +58,13 @@ Mozillians.org Account:
 [% END %]
 
 References:
-[% IF cgi.param('references') %]
-[%+ cgi.param('references') %]
-[% ELSE %]
--
+[% IF cgi.param('cc') %]
+[%+ cgi.param('cc').join(", ") %]
 [% END %]
 
-Currently Involved with Mozilla:
+What are you currently doing at Mozilla?
 [% IF cgi.param('involved') %]
 [%+ cgi.param('involved') %]
-[% ELSE %]
--
 [% END %]
 
 When First Contributed:
diff --git a/extensions/REMO/template/en/default/bug/create/create-mozreps.html.tmpl b/extensions/REMO/template/en/default/bug/create/create-mozreps.html.tmpl
index be461c795..420c6a8cd 100644
--- a/extensions/REMO/template/en/default/bug/create/create-mozreps.html.tmpl
+++ b/extensions/REMO/template/en/default/bug/create/create-mozreps.html.tmpl
@@ -20,228 +20,216 @@
 [% PROCESS global/variables.none.tmpl %]
 
 [% PROCESS global/header.html.tmpl
-   title = "Mozilla Reps - Application Form"
-   style_urls = [ "extensions/REMO/web/styles/moz_reps.css" ]
+   title           = "Mozilla Reps - Application Form"
+   style_urls      = [ "extensions/REMO/web/styles/moz_reps.css" ]
+   yui             = [ "autocomplete" ]
+   jquery          = []
+   javascript_urls = [ "extensions/REMO/web/js/moz_reps.js", "js/field.js", "js/util.js"]
 %]
 
-[% USE Bugzilla %]
-[% mandatory = '<span class="mandatory" title="Required">*</span>' %]
-
-<script type="text/javascript">
-var Dom = YAHOO.util.Dom;
-
-function mandatory(ids) {
-  result = true;
-  for (i in ids) {
-    id = ids[i];
-    el = Dom.get(id);
-
-    if (el.type.toString() == "checkbox") {
-      value = el.checked;
-    } else {
-      value = el.value.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
-      el.value = value;
-    }
-
-    if (value == '') {
-      Dom.addClass(id, 'missing');
-      result = false;
-    } else {
-      Dom.removeClass(id, 'missing');
-    }
-  }
-  return result;
-}
-
-function underageWarning (el) {
-  if (el.checked) {
-    Dom.removeClass('underage_warning', 'bz_default_hidden');
-    Dom.get('submit').disabled = true;
-  }
-  else {
-    Dom.addClass('underage_warning', 'bz_default_hidden');
-    Dom.get('submit').disabled = false;
-  }
-}
-
-function submitForm() {
-  if (!mandatory([ 'first_name', 'last_name', 'sex', 'city', 'country',
-                   'mozillian', 'languages', 'learn', 'motivation', 'privacy' ])
-  ) {
-    alert('Please enter all the required fields.');
-    return false;
-  }
-
-  Dom.get('short_desc').value =
-    "Application Form: " + Dom.get('first_name').value + ' ' + Dom.get('last_name').value;
-
-  return true;
-}
-
-</script>
-
 <noscript>
-<h1>Javascript is required to use this form.</h1>
+  <h1>Javascript is required to use this form.</h1>
 </noscript>
 
 <h1>Mozilla Reps - Application Form</h1>
 
 <p>
   If you have questions while completing this form, please contact the
-  <a href="mailto:reps-council@lists.mozilla.org">Reps Council</a> for
-  assistance.
+  <a href="mailto:reps-council@mozilla.org">Reps Council</a> for assistance.
 </p>
 
 <form method="post" action="post_bug.cgi" id="tmRequestForm">
-<input type="hidden" name="product" value="Mozilla Reps">
-<input type="hidden" name="component" value="Mentorship">
-<input type="hidden" name="bug_severity" value="normal">
-<input type="hidden" name="rep_platform" value="All">
-<input type="hidden" name="priority" value="--">
-<input type="hidden" name="op_sys" value="Other">
-<input type="hidden" name="version" value="unspecified">
-<input type="hidden" name="groups" value="mozilla-reps">
-<input type="hidden" name="format" value="[% format FILTER html %]">
-<input type="hidden" name="created-format" value="[% format FILTER html %]">
-<input type="hidden" name="comment" id="comment" value="">
-<input type="hidden" name="short_desc" id="short_desc" value="">
-<input type="hidden" name="token" value="[% token FILTER html %]">
-
-<table id="reps-form">
-
-<tr class="odd">
-  <th>First Name:[% mandatory FILTER none %]</th>
-  <td><input id="first_name" name="first_name" size="40" placeholder="John"></td>
-</tr>
-
-<tr class="even">
-  <th>Last Name:[% mandatory FILTER none %]</th>
-  <td><input id="last_name" name="last_name" size="40" placeholder="Doe"></td>
-</tr>
-
-<tr class="odd">
-  <th>Are you under 18 years old?:</th>
-  <td>
-    <input type="checkbox" id="underage" name="underage" 
-           value="1" onclick="underageWarning(this);"><br>
-  </td>
-</tr>
-
-<tr id="underage_warning" class="odd bz_default_hidden">
-  <td colspan="2">
-    Mozilla Reps program is not currently accepting people under 18 years old.
-    Sorry for the inconvenience. In the meantime please check with your local Mozilla
-    group for other contribution opportunities
-  </td>
-</tr>
-
-<tr class="even">
-  <th>Sex:[% mandatory FILTER none %]</th>
-  <td>
-    <select id="sex" name="sex">
-      <option value="Male">Male</option>
-      <option value="Female">Female</option>
-      <option value="Other">Other</option>
-    </select>
-  </td>
-</tr>
-
-<tr class="odd">
-  <th>City:[% mandatory FILTER none %]</th>
-  <td><input id="city" name="city" size="40" placeholder="Your city"></td>
-</tr>
-
-<tr class="even">
-  <th>Country:[% mandatory FILTER none %]</th>
-  <td><input id="country" name="country" size="40" placeholder="Your country"></td>
-</tr>
-
-<tr class="odd">
-  <th>Local Community you participate in:</th>
-  <td><input id="community" name="community" size="40" placeholder="Name of your community"></td>
-</tr>
-
-<tr class="even">
-  <th>IM (specify service):</th>
-  <td><input id="im" name="im" size="40"></td>
-</tr>
-
-<tr class="odd">
-  <th>Mozillians.org Account:[% mandatory FILTER none %]</th>
-  <td><input id="mozillian" name="mozillian" size="40"></td>
-</tr>
-
-<tr class="even">
-  <th colspan="2">
-    References:
-  </th>
-</tr>
-<tr class="even">
-  <td colspan="2">
-    <textarea id="references" name="references" rows="4"
-              placeholder="Add contact info of people referencing you."></textarea>
-  </td>
-</tr>
-
-<tr class="odd">
-  <th colspan="2">
-    How are you involved with Mozilla?
-  </th>
-</tr>
-<tr class="odd">
-  <td colspan="2">
-    <textarea id="involved" name="involved" rows="4" placeholder="Add-ons,  l10n,  SUMO,  QA,  ..."></textarea>
-  </td>
-</tr>
-
-<tr class="even">
-  <th>
-    When did you first start contributing to Mozilla?
-  </th>
-  <td><input id="firstcontribute" name="firstcontribute" size="40"></td>
-</tr>
-
-<tr class="odd">
-  <th>Languages Spoken:[% mandatory FILTER none %]</th>
-  <td><input id="languages" name="languages" size="40"></td>
-</tr>
-
-<tr class="even">
-  <th>How did you learn about Mozilla Reps?[% mandatory FILTER none %]</th>
-  <td><input id="learn" name="learn" size="40"></td>
-</tr>
-
-<tr class="odd">
-  <th colspan="2">What motivates you most about joining Mozilla Reps?[% mandatory FILTER none %]</th>
-</tr>
-<tr class="odd">
-  <td colspan="2"><textarea id="motivation" name="motivation" rows="4"></textarea></td>
-</tr>
-
-<tr class="even">
-  <th colspan="2">Comments:</th>
-</tr>
-<tr class="even">
-  <td colspan="2"><textarea id="comments" name="comments" rows="4"></textarea></td>
-</tr>
-
-<tr class="odd">
-  <th>
-    I have read the
-    <a href="http://www.mozilla.com/en-US/privacy-policy" target="_blank">Mozilla Privacy Policy</a>:[% mandatory FILTER none %]
-  </th>
-  <td><input id="privacy" type="checkbox"></td>
-</tr>
-
-<tr class="even">
-  <td>&nbsp;</td>
-  <td align="right">
-    <input id="submit" type="submit" value="Submit" onclick="return submitForm()">
-  </td>
-</tr>
-
-</table>
-
+  <input type="hidden" name="product" value="Mozilla Reps">
+  <input type="hidden" name="component" value="Mentorship">
+  <input type="hidden" name="bug_severity" value="normal">
+  <input type="hidden" name="rep_platform" value="All">
+  <input type="hidden" name="priority" value="--">
+  <input type="hidden" name="op_sys" value="Other">
+  <input type="hidden" name="version" value="unspecified">
+  <input type="hidden" name="groups" value="mozilla-reps">
+  <input type="hidden" name="format" value="[% format FILTER html %]">
+  <input type="hidden" name="created-format" value="[% format FILTER html %]">
+  <input type="hidden" name="comment" id="comment" value="">
+  <input type="hidden" name="short_desc" id="short_desc" value="">
+  <input type="hidden" name="token" value="[% token FILTER html %]">
+
+  <table id="reps-form">
+    <tr class="odd">
+      <th><label class="required" for="first_name">First Name:</label></th>
+      <td><input requuired id="first_name" name="first_name" size="40" placeholder="John"></td>
+    </tr>
+
+    <tr class="even">
+      <th><label class="required" for="last_name">Last Name:</label></th>
+      <td><input id="last_name" name="last_name" size="40" placeholder="Doe"></td>
+    </tr>
+
+    <tr class="odd">
+      <th><label for="underage">Are you under 18 years old?:</label></th>
+      <td>
+        <input type="checkbox" id="underage" name="underage" value="1"><br>
+      </td>
+    </tr>
+
+    <tr id="underage_warning" class="odd" style="display: none">
+      <td colspan="2">
+        Mozilla Reps program is not currently accepting people under 18 years old.
+        Sorry for the inconvenience. In the meantime please check with your local Mozilla
+        group for other contribution opportunities
+      </td>
+    </tr>
+
+    <tr class="even">
+      <th><label class="required" for="gender">Gender:</label></th>
+      <td>
+        <select id="gender" name="gender">
+          <option value=""></option>
+          <option value="Male">Male</option>
+          <option value="Female">Female</option>
+          <option value="Other">Other</option>
+        </select>
+      </td>
+    </tr>
+
+    <tr class="odd">
+      <th><label class="required" for="city">City:</label></th>
+      <td><input id="city" name="city" size="40" placeholder="Your city"></td>
+    </tr>
+
+    <tr class="even">
+      <th><label class="required" for="country">Country:</label></th>
+      <td><input id="country" name="country" size="40" placeholder="Your country"></td>
+    </tr>
+
+    <tr class="odd">
+      <th><label for="community">Local Community you participate in:</label></th>
+      <td><input id="community" name="community" size="40" placeholder="Name of your community"></td>
+    </tr>
+
+    <tr class="even">
+      <th><label for="im">IM (specify service):</label></th>
+      <td><input id="im" name="im" size="40"></td>
+    </tr>
+
+    <tr class="odd">
+      <th><label class="required" for="mozillian">Mozillians.org Account URL:</label></th>
+      <td>
+        <input type="url" id="mozillian" name="mozillian" size="40" placeholder="https://mozillians.org/u/name">
+      </td>
+    </tr>
+
+    <tr class="even">
+      <th colspan="2">
+        <label class="required" for="cc">
+          Mozilla contributors who vouch your application:
+        </label>
+      </th>
+    </tr>
+
+    <tr class="even">
+      <td colspan="2">
+        [% INCLUDE global/userselect.html.tmpl
+           id       => "cc"
+           name     => "cc"
+           value    => cc
+           size     => 60
+           classes  => ["bz_userfield"]
+           multiple => 5
+        %]
+      </td>
+    </tr>
+
+    <tr class="odd">
+      <th colspan="2">
+        <label class="required" for="involved">
+          What are you currently doing at Mozilla?
+        </label>
+      </th>
+    </tr>
+
+    <tr class="odd">
+      <td colspan="2">
+        <textarea id="involved" name="involved" rows="4" placeholder="Add-ons,  l10n,  SUMO,  QA,  ..."></textarea>
+      </td>
+    </tr>
+
+    <tr class="even">
+      <th>
+        <label class="required" for="firstcontribute">
+          When did you first start contributing to Mozilla?
+        </label>
+      </th>
+      <td><input id="firstcontribute" name="firstcontribute" size="40"></td>
+    </tr>
+
+    <tr class="odd">
+      <th><label class="required" for="languages">Languages Spoken:</label></th>
+      <td><input id="languages" name="languages" size="40"></td>
+    </tr>
+
+    <tr class="even">
+      <th><label class="required" for="learn">How did you learn about Mozilla Reps?</label></th>
+      <td><input id="learn" name="learn" size="40"></td>
+    </tr>
+
+    <tr class="odd">
+      <th><label for="first_time">Is this the first time you have applied for Reps?</label></th>
+      <td><input type="checkbox" id="first_time" name="first_time" value="1" checked></td>
+    </tr>
+
+    <tr id="prior_bug" class="odd" style="display: none">
+      <th><label for="dependson">If you have already applied to the program in the past, please reference the [% terms.bug %] number: </label></th>
+      <td><input id="dependson" name="dependson" type="text" value=""></td>
+    </tr>
+
+    <tr class="even">
+      <th colspan="2">
+        <label class="required" for="motivation">
+          What motivates you most about joining Mozilla Reps?
+        </label>
+      </th>
+    </tr>
+
+    <tr class="even">
+      <td colspan="2">
+        <textarea id="motivation" name="motivation" rows="4"
+                  placeholder="[% INCLUDE motivation_placeholder FILTER html %]"></textarea>
+      </td>
+    </tr>
+
+    [% BLOCK motivation_placeholder -%]
+      Tell us your goals and what you would be able to do as a Rep that you can't do right now
+    [%- END %]
+
+    <tr class="odd">
+      <th colspan="2">
+        <label for="comments">
+          Comments:
+        </label>
+      </th>
+    </tr>
+
+    <tr class="odd">
+      <td colspan="2"><textarea id="comments" name="comments" rows="4"></textarea></td>
+    </tr>
+
+    <tr class="even">
+      <th>
+        <label class="required" for="privacy">
+          I have read the
+          <a href="http://www.mozilla.com/en-US/privacy-policy" target="_blank">Mozilla Privacy Policy</a>:
+        </label>
+      </th>
+      <td><input id="privacy" name="privacy" type="checkbox" value="1"></td>
+    </tr>
+
+    <tr class="odd">
+      <td>&nbsp;</td>
+      <td align="right">
+        <button id="submit">Submit</button>
+      </td>
+    </tr>
+  </table>
 </form>
 
 [% PROCESS global/footer.html.tmpl %]
diff --git a/extensions/REMO/template/en/default/bug/create/created-mozreps.html.tmpl b/extensions/REMO/template/en/default/bug/create/created-mozreps.html.tmpl
index a8a3ca112..0ded8744f 100644
--- a/extensions/REMO/template/en/default/bug/create/created-mozreps.html.tmpl
+++ b/extensions/REMO/template/en/default/bug/create/created-mozreps.html.tmpl
@@ -27,12 +27,25 @@
 <h1>Thank you!</h1>
 
 <p>
-Thank you for submitting your Mozilla Reps Application Form. A Mozilla Rep
-mentor will contact you shortly at your bugzilla email address.
+  Thanks for submitting your application to the Reps Program.
+</p>
+
+<p>
+  What happens next:
+</p>
+
+<ul>
+  <li>The mozillians who vouched you should comment on the application [% terms.bug %] endorsing your application. Please contact them to make sure they endorse you, this is needed for your application to be complete.</li>
+  <li>The application will be reviewed after you are endorsed and if it fits all requirements it will be placed in the mentorship queue.</li>
+  <li>Once a Rep mentor has a free slot, he will be assigned to do the final review.</li>
+</ul>
+
+<p>
+  This might take some time, so we apologize for any delays and thank you for your patience.
 </p>
 
 <p style="font-size: x-small">
-Reference: <a href="show_bug.cgi?id=[% id FILTER uri %]">#[% id FILTER html %]</a>
+  Reference: <a href="show_bug.cgi?id=[% id FILTER uri %]">#[% id FILTER html %]</a>
 </p>
 
 [% PROCESS global/footer.html.tmpl %]
diff --git a/extensions/REMO/web/js/moz_reps.js b/extensions/REMO/web/js/moz_reps.js
new file mode 100644
index 000000000..88c60df51
--- /dev/null
+++ b/extensions/REMO/web/js/moz_reps.js
@@ -0,0 +1,87 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * This Source Code Form is "Incompatible With Secondary Licenses", as
+ * defined by the Mozilla Public License, v. 2.0. */
+
+$(document).ready(function() {
+    'use strict';
+
+    var first_time = $("#first_time");
+    first_time.prop("checked", true);
+    first_time.change(function(evt) {
+        if (!this.checked) {
+            $("#prior_bug").show();
+            $("#prior_bug label").addClass("required");
+        }
+        else {
+            $("#prior_bug").hide();
+            $("#prior_bug label").removeClass("required");
+        }
+    }).change();
+
+    $("#underage").change(function(evt) {
+        if (this.checked) {
+            $('#underage_warning').show();
+            $('#submit').prop("disabled", true);
+        }
+        else {
+            $('#underage_warning').hide();
+            $('#submit').prop("disabled", false);
+        }
+    }).change();
+
+    $("#privacy").change(function(evt) {
+        if (this.checked) {
+            $('#submit').prop("disabled", false);
+        }
+        else {
+            $('#submit').prop("disabled", true);
+        }
+    }).change();
+
+    $('#tmRequestForm').submit(function (event) {
+        var mozillian_re = /^https?:\/\/(www\.)?mozillians.org\/([^\/]+\/)?u\/[^\/]+$/i;
+        var errors = [];
+        var missing = false;
+
+        $('label.required').each(function (index) {
+            var id = $(this).attr("for");
+            var input = $("#" + id);
+
+            if (id == 'mozillian') {
+                if (!input.val().match(mozillian_re)) {
+                    input.addClass("missing");
+                    errors.push("The Mozillian Account URL is invalid");
+                    event.preventDefault();
+                }
+                else {
+                    input.removeClass("missing");
+                }
+            }
+            else {
+                if (input.val() == "") {
+                    input.addClass("missing");
+                    missing = true;
+                    event.preventDefault();
+                }
+                else {
+                    input.removeClass("missing");
+                }
+            }
+        });
+
+        if (missing) {
+            errors.push("There are missing required fields");
+        }
+
+        if (errors.length) {
+            alert(errors.join("\n"));
+        }
+
+        $('#short_desc').val(
+            "Application Form: " + $('#first_name').val() + ' ' + $('#last_name').val()
+        );
+    });
+});
diff --git a/extensions/REMO/web/styles/moz_reps.css b/extensions/REMO/web/styles/moz_reps.css
index 216bdd234..884dc5896 100644
--- a/extensions/REMO/web/styles/moz_reps.css
+++ b/extensions/REMO/web/styles/moz_reps.css
@@ -32,6 +32,11 @@
   font-size: 80%;
 }
 
+label.required:before {
+  content: "* ";
+  color: red;
+}
+
 #reps-form .missing {
   box-shadow: #FF0000 0 0 1.5px 1px;
 }
diff --git a/skins/contrib/Mozilla-OpenSans/global.css b/skins/contrib/Mozilla-OpenSans/global.css
index 63c326ed7..d498ef82f 100644
--- a/skins/contrib/Mozilla-OpenSans/global.css
+++ b/skins/contrib/Mozilla-OpenSans/global.css
@@ -80,7 +80,8 @@ a:hover, #header a:hover, #footer a:hover {
     color: #00539f;
 }
 
-select[multiple], textarea, input[type=text], input[type=password], input:not([type]), .text_input, .yui-ac-input {
+select[multiple], textarea, input[type=text], input[type=password],
+input[type=email], input[type=url], input:not([type]), .text_input, .yui-ac-input {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
diff --git a/skins/contrib/Mozilla/global.css b/skins/contrib/Mozilla/global.css
index 48d75868d..cd88d4dd8 100644
--- a/skins/contrib/Mozilla/global.css
+++ b/skins/contrib/Mozilla/global.css
@@ -124,7 +124,7 @@ a:hover, #header a:hover, #footer a:hover {
 }
 
 select[multiple], textarea, input[type=text], input[type=password],
-input[type=email], input:not([type]), .text_input, .yui-ac-input {
+input[type=email], input[type=url], input:not([type]), .text_input, .yui-ac-input {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;