From: Antoine Musso <hashar@users.mediawiki.org>
Date: Fri, 29 Oct 2010 20:44:26 +0000 (+0000)
Subject: Follow up r75627 (code review comments):
X-Git-Tag: 1.31.0-rc.0~34215
X-Git-Url: http://git.cyclocoop.org/%28?a=commitdiff_plain;h=b04f25ae6b03dd15a6c9abbf17ff40589b324fd4;p=lhc%2Fweb%2Fwiklou.git

Follow up r75627 (code review comments):
* Replace background coloring with a label insertion on the right or left of input depending on language direction.
* User side validation of email according to an HTML5 specifications provided by Simetrical :
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state
 Code comments should be self explaining.

Possible follows up:
- use JQuery Validation plugin
- make the validation part a mediawiki validation module
- server side validation
---

diff --git a/resources/mediawiki.specials/mediawiki.specials.preferences.css b/resources/mediawiki.specials/mediawiki.specials.preferences.css
index 5c39a0275b..5f5b3c2451 100644
--- a/resources/mediawiki.specials/mediawiki.specials.preferences.css
+++ b/resources/mediawiki.specials/mediawiki.specials.preferences.css
@@ -1,8 +1,21 @@
-input.valid {
+#mw-emailaddress-validity {
+	padding: 2px 1em;	
+}
+body.ltr #mw-emailaddress-validity {
+	border-bottom-right-radius:0.8em;
+	border-top-right-radius:0.8em;
+}
+body.rtl #mw-emailaddress-validity {
+	border-bottom-left-radius:0.8em;
+	border-top-left-radius:0.8em;
+}
+#mw-emailaddress-validity.valid {
+	border: 1px solid #80FF80;
 	background-color: #C0FFC0;
 	color: black;
 }
-input.invalid {
+#mw-emailaddress-validity.invalid {
+	border: 1px solid #FF8080;
 	background-color: #FFC0C0;
 	color: black;
 }
diff --git a/resources/mediawiki.specials/mediawiki.specials.preferences.js b/resources/mediawiki.specials/mediawiki.specials.preferences.js
index 36e1c218dd..e536bd3d7a 100644
--- a/resources/mediawiki.specials/mediawiki.specials.preferences.js
+++ b/resources/mediawiki.specials/mediawiki.specials.preferences.js
@@ -41,19 +41,87 @@ $( '#preferences' )
 
 // Lame tip to let user know if its email is valid. See bug 22449
 $( '#mw-input-emailaddress' )
-	.keyup( function() {
-		var mailtxt = $(this).val();
-		if( mailtxt == '' ) {
-			// mail is optional !
-			$(this).removeClass( "invalid" );
-			$(this).removeClass( "valid" );
-			return;
-		}
-		if( mailtxt.match( /.+@.+\..+/ ) ) {
-			$(this).addClass( "valid" );
-			$(this).removeClass( "invalid" );
-		} else {
-			$(this).addClass( "invalid" );
-			$(this).removeClass( "valid" );
+	.keyup( function () {
+		if( $( "#mw-emailaddress-validity" ).length == 0 ) {
+			$(this).after( '<label for="mw-input-emailaddress" id="mw-emailaddress-validity"></label>' );
 		}
+		var isValid = wfValidateEmail( $(this).val() );
+		var class_to_add    = isValid ? 'valid' : 'invalid';
+		var class_to_remove = isValid ? 'invalid' : 'valid';
+		$( '#mw-emailaddress-validity' )
+			.text( isValid ? 'Looks valid' : 'Valid address required!' )
+			.addClass( class_to_add )
+			.removeClass( class_to_remove );
 	} );
+
+/**
+ *  Validate a string as representing a valid e-mail address
+ * according to HTML5 specification. Please note the specification
+ * does not validate a domain with one character.
+ *
+ * FIXME: should be moved to a JavaScript validation module.
+ */
+wfValidateEmail = function( mailtxt ) {
+	if( mailtxt == '' ) { return null; }
+
+	/**
+	 * HTML 5 define a string as valid e-mail address if it matches
+	 * the ABNF :
+	 *   1 * ( atext / "." ) "@" ldh-str 1*( "." ldh-str )
+	 * With:
+	 * - atext   : defined in RFC 5322 section 3.2.3
+	 * - ldh-str : defined in RFC 1034 section 3.5
+	 *
+	 * (see STD 68 / RFC 5234 http://tools.ietf.org/html/std68):
+	 */
+
+	/**
+	 * First, define the RFC 5322 'atext' which is pretty easy :
+	 * atext = ALPHA / DIGIT /    ; Printable US-ASCII
+                       "!" / "#" /        ;  characters not including
+                       "$" / "%" /        ;  specials.  Used for atoms.
+                       "&" / "'" /
+                       "*" / "+" /
+                       "-" / "/" /
+                       "=" / "?" /
+                       "^" / "_" /
+                       "`" / "{" /
+                       "|" / "}" /
+                       "~"
+	*/	
+	var rfc5322_atext   = "a-z0-9!#$%&'*+-/=?^_`{|}—~" ;
+	
+	/**
+	 * Next define the RFC 1034 'ldh-str'
+	 *   <domain> ::= <subdomain> | " "
+	 *   <subdomain> ::= <label> | <subdomain> "." <label>
+	 *   <label> ::= <letter> [ [ <ldh-str> ] <let-dig> ]
+	 *   <ldh-str> ::= <let-dig-hyp> | <let-dig-hyp> <ldh-str>
+	 *   <let-dig-hyp> ::= <let-dig> | "-"
+	 *   <let-dig> ::= <letter> | <digit>
+	 */
+	var rfc1034_ldh_str = "a-z0-9-" ;
+
+	var HTML5_email_regexp = new RegExp(
+		// start of string
+		'^'
+		+
+		// User part which is liberal :p
+		'[' + rfc5322_atext + '\\.' + ']' + '+'
+		+
+		// "apostrophe"
+		'@'
+		+
+		// Domain first character
+		'[' + rfc1034_ldh_str + ']'
+		+
+		// second char and following can include dot
+		'[' + rfc1034_ldh_str + '\\.' + ']' + '+'
+		+
+		// End of string
+		'$',
+		// RegExp is case insensitive
+		'i'
+		);
+	return mailtxt.match( HTML5_email_regexp );
+};