Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(273)

Side by Side Diff: chrome/browser/sync/resources/gaia_login.html

Issue 389017: Implement the gaia captcha state and unlock capability in the sync setup wiza... (Closed) Base URL: svn://chrome-svn/chrome/trunk/src/
Patch Set: '' Created 11 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « chrome/browser/sync/profile_sync_service.cc ('k') | chrome/browser/sync/sync_setup_flow.h » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <html i18n-values="dir:textdirection;"> 1 <html i18n-values="dir:textdirection;">
2 <style type="text/css"><!-- 2 <style type="text/css"><!--
3 body,td,div,p,a,font,span {font-family: arial,sans-serif;} 3 body,td,div,p,a,font,span {font-family: arial,sans-serif;}
4 body { bgcolor:"#ffffff" } 4 body { bgcolor:"#ffffff" }
5 A:link {color:#0000cc; } 5 A:link {color:#0000cc; }
6 A:visited { color:#551a8b; } 6 A:visited { color:#551a8b; }
7 A:active { color:#ff0000; } 7 A:active { color:#ff0000; }
8 .form-noindent {background-color: #ffffff; border: #C3D9FF 1px solid} 8 .form-noindent {background-color: #ffffff; border: #C3D9FF 1px solid}
9 --></style> 9 --></style>
10 <head> 10 <head>
(...skipping 17 matching lines...) Expand all
28 font-family: arial,sans-serif;} 28 font-family: arial,sans-serif;}
29 hr { 29 hr {
30 border: 0; 30 border: 0;
31 background-color:#DDDDDD; 31 background-color:#DDDDDD;
32 height: 1px; 32 height: 1px;
33 width: 100%; 33 width: 100%;
34 text-align: left; 34 text-align: left;
35 margin: 5px; 35 margin: 5px;
36 } 36 }
37 #gaia_loginform { 37 #gaia_loginform {
38 margin-bottom: 0.5em; 38 margin-bottom: 0;
39 } 39 }
40 --></style> 40
41 #captcha_wrapper {
42 -webkit-background-size: 200px 70px;
43 background: no-repeat;
44 background-position: center;
45 background-color: #e8eefa;
46 display: block;
47 }
48 .captcha_image {
49 display: block;
50 width: 200px;
51 height: 70px;
52 }
53 .toppageverticalspace {
54 height: 15px;
55 }
56 .bottompaddedcell {
57 padding-bottom: 3px;
58 }
59 .noverticalpadding {
60 padding-top: 0;
61 padding-bottom: 0;
62 }
63 .cancelspacenocaptcha {
64 height: 22px;
65 }
66 .cancelspaceforcaptcha {
67 height: 5px;
68 }
69 -->
70 </style>
41 </head> 71 </head>
42 <body bgcolor="#ffffff" vlink="#666666" 72 <body bgcolor="#ffffff" vlink="#666666"
43 i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize" 73 i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"
44 style="margin-bottom: 0" onload="initForm();"> 74 style="margin-bottom: 0; margin-top: 6px;" onload="initForm();">
45 <table width="100%" align="center" cellpadding="1" cellspacing="1"> 75 <table width="100%" align="center" cellpadding="1" cellspacing="1">
46 <tr> 76 <tr>
47 <td valign="top"> <!-- LOGIN BOX --> 77 <td valign="top"> <!-- LOGIN BOX -->
48 <script> 78 <script>
79 // Variable to track if a captcha challenge was issued. If this gets set to
80 // true, it stays that way until we are told about successful login from
81 // the browser. This means subsequent errors (like invalid password) are
82 // rendered in the captcha state, which is basically identical except we
83 // don't show the top error blurb "Error Signing in" or the "Create
84 // account" link.
85 var g_is_captcha_challenge_active = false;
86
87 // Taken from new_new_tab.js.
88 // TODO(tim): Can this be unified?
89 function url(s) {
90 // http://www.w3.org/TR/css3-values/#uris
91 // Parentheses, commas, whitespace characters, single quotes (') and
92 // double quotes (") appearing in a URI must be escaped with a backslash
93 var s2 = s.replace(/(\(|\)|\,|\s|\'|\"|\\)/g, '\\$1');
94 // WebKit has a bug when it comes to URLs that end with \
95 // https://bugs.webkit.org/show_bug.cgi?id=28885
96 if (/\\\\$/.test(s2)) {
97 // Add a space to work around the WebKit bug.
98 s2 += ' ';
99 }
100 return 'url("' + s2 + '")';
101 }
102
49 function gaia_setFocus() { 103 function gaia_setFocus() {
50 var f = null; 104 var f = null;
51 if (document.getElementById) { 105 if (document.getElementById) {
52 f = document.getElementById("gaia_loginform"); 106 f = document.getElementById("gaia_loginform");
53 } else if (window.gaia_loginform) { 107 } else if (window.gaia_loginform) {
54 f = window.gaia_loginform; 108 f = window.gaia_loginform;
55 } 109 }
56 if (f) { 110 if (f) {
57 if (f.Email && (f.Email.value == null || f.Email.value == "")) { 111 if (f.Email && (f.Email.value == null || f.Email.value == "")) {
58 f.Email.focus(); 112 f.Email.focus();
59 } else if (f.Passwd) { 113 } else if (f.Passwd) {
60 f.Passwd.focus(); 114 f.Passwd.focus();
61 } 115 }
62 } 116 }
63 } 117 }
64 118
65 function advanceThrobber() { 119 function advanceThrobber() {
66 var throbber = document.getElementById('throb'); 120 var throbber = document.getElementById('throb');
67 throbber.style.backgroundPositionX = 121 throbber.style.backgroundPositionX =
68 ((parseInt(throbber.style.backgroundPositionX) - 16) % 576) + 'px'; 122 ((parseInt(throbber.style.backgroundPositionX) - 16) % 576) + 'px';
69 } 123 }
70 124
71 function showGaiaLogin(args) { 125 function showGaiaLogin(args) {
72 var throbber = document.getElementById('throbber_container'); 126 var throbber = document.getElementById('throbber_container');
73 throbber.style.display = "none"; 127 throbber.style.display = "none";
74 var f = document.getElementById("gaia_loginform"); 128 var f = document.getElementById("gaia_loginform");
75 if (f) { 129 if (f) {
76 f.Email.value = args.user; 130 f.Email.value = args.user;
77 } 131 }
78 if (1 == args.error) { 132 if (1 == args.error) {
79 setElementDisplay("errormsg_1_Password", 'table-row'); 133 setElementDisplay("errormsg_1_Password", 'table-row');
80 setBlurbError(); 134 setBlurbError();
81 } 135 }
82 if (3 == args.error) { 136 if (3 == args.error) {
83 setElementDisplay("errormsg_0_Connection", 'table-row'); 137 setElementDisplay("errormsg_0_Connection", 'table-row');
84 setBlurbError(); 138 setBlurbError();
85 } 139 }
140 if (4 == args.error) {
141 showCaptcha(args);
142 }
86 document.getElementById("signIn").disabled = false; 143 document.getElementById("signIn").disabled = false;
87 gaia_setFocus(); 144 gaia_setFocus();
88 } 145 }
89 146
147 function showCaptcha(args) {
148 g_is_captcha_challenge_active = true;
149
150 // The captcha takes up lots of space, so make room.
151 setElementDisplay("top_blurb", "none");
152 setElementDisplay("top_blurb_error", "none");
153 setElementDisplay("createaccountdiv", "none");
154 setElementDisplay("topspacer", "none");
155 var gaiaTable = document.getElementById('gaia_table');
156 gaiaTable.cellPadding = 0;
157 gaiaTable.cellSpacing = 1;
158 document.getElementById('cancelspacer').className =
159 "cancelspaceforcaptcha";
160 document.getElementById('createaccountcell').height = 0;
161
162 // It's showtime for the captcha now.
163 setElementDisplay("captchadiv", "block");
164 document.getElementById('Email').disabled = true;
165 document.getElementById('Passwd').disabled = false;
166 document.getElementById('CaptchaValue').disabled = false;
167 document.getElementById('captcha_wrapper').style.backgroundImage =
168 url(args.captchaUrl);
169 }
170
90 function CloseDialog() { 171 function CloseDialog() {
91 chrome.send("DialogClose", [""]); 172 chrome.send("DialogClose", [""]);
92 } 173 }
93 174
94 function showGaiaSuccessAndClose() { 175 function showGaiaSuccessAndClose() {
95 document.getElementById("signIn").value = templateData['success']; 176 document.getElementById("signIn").value = templateData['success'];
96 setTimeout(CloseDialog, 1600); 177 setTimeout(CloseDialog, 1600);
97 } 178 }
98 179
99 function showGaiaSuccessAndSettingUp() { 180 function showGaiaSuccessAndSettingUp() {
(...skipping 19 matching lines...) Expand all
119 var args = JSON.parse(chrome.dialogArguments); 200 var args = JSON.parse(chrome.dialogArguments);
120 showGaiaLogin(args); 201 showGaiaLogin(args);
121 } 202 }
122 203
123 function sendCredentialsAndClose() { 204 function sendCredentialsAndClose() {
124 if (!setErrorVisibility()) 205 if (!setErrorVisibility())
125 return false; 206 return false;
126 207
127 document.getElementById('Email').disabled = true; 208 document.getElementById('Email').disabled = true;
128 document.getElementById('Passwd').disabled = true; 209 document.getElementById('Passwd').disabled = true;
129 210 document.getElementById('CaptchaValue').disabled = true;
130 var throbber = document.getElementById('throbber_container'); 211 var throbber = document.getElementById('throbber_container');
131 throbber.style.display = "inline"; 212 throbber.style.display = "inline";
132 var f = document.getElementById("gaia_loginform"); 213 var f = document.getElementById("gaia_loginform");
133 var result = JSON.stringify({"user" : f.Email.value, 214 var result = JSON.stringify({"user" : f.Email.value,
134 "pass" : f.Passwd.value}); 215 "pass" : f.Passwd.value,
216 "captcha" : f.CaptchaValue.value});
135 document.getElementById("signIn").disabled = true; 217 document.getElementById("signIn").disabled = true;
136 chrome.send("SubmitAuth", [result]); 218 chrome.send("SubmitAuth", [result]);
137 } 219 }
138 220
139 function setElementDisplay(id, display) { 221 function setElementDisplay(id, display) {
140 var d = document.getElementById(id); 222 var d = document.getElementById(id);
141 if (d) 223 if (d)
142 d.style.display = display; 224 d.style.display = display;
143 } 225 }
144 226
145 function setBlurbError() { 227 function setBlurbError() {
228 if (g_is_captcha_challenge_active)
229 return; // No blurb in captcha challenge mode.
146 document.getElementById("top_blurb").style.display = "none"; 230 document.getElementById("top_blurb").style.display = "none";
147 document.getElementById("top_blurb_error").style.display = "block"; 231 document.getElementById("top_blurb_error").style.display = "block";
148 document.getElementById('Email').disabled = false; 232 document.getElementById('Email').disabled = false;
149 document.getElementById('Passwd').disabled = false; 233 document.getElementById('Passwd').disabled = false;
150 } 234 }
151 235
152 function resetErrorVisibility() { 236 function resetErrorVisibility() {
153 setElementDisplay("errormsg_0_Email", 'none'); 237 setElementDisplay("errormsg_0_Email", 'none');
154 setElementDisplay("errormsg_0_Password", 'none'); 238 setElementDisplay("errormsg_0_Password", 'none');
155 setElementDisplay("errormsg_1_Password", 'none'); 239 setElementDisplay("errormsg_1_Password", 'none');
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after
191 <p><font size="-1"><span i18n-content="introduction"></span></font></p> 275 <p><font size="-1"><span i18n-content="introduction"></span></font></p>
192 </div> 276 </div>
193 <div id="top_blurb_error" style="display:none"> 277 <div id="top_blurb_error" style="display:none">
194 <p><font size="-1"> 278 <p><font size="-1">
195 <span i18n-content="settingupsync"></span><br/><br/> 279 <span i18n-content="settingupsync"></span><br/><br/>
196 <b><span i18n-content="errorsigningin"></span></b> 280 <b><span i18n-content="errorsigningin"></span></b>
197 </font></p> 281 </font></p>
198 </div> 282 </div>
199 <form id="gaia_loginform" onsubmit="sendCredentialsAndClose(); return false;"> 283 <form id="gaia_loginform" onsubmit="sendCredentialsAndClose(); return false;">
200 <div id="gaia_loginbox"> 284 <div id="gaia_loginbox">
201 <table class="form-noindent" cellspacing="3" cellpadding="5" width="75%" 285 <table id="content_table" class="form-noindent" cellspacing="0" cellpadding="5"
202 border="0" align="center"> 286 width="75%" border="0" align="center">
203 <tr> 287 <tr>
204 <td valign="top" style="text-align:center" nowrap="nowrap" 288 <td valign="top" style="text-align:center" nowrap="nowrap"
205 bgcolor="#e8eefa"> 289 bgcolor="#e8eefa">
206 <div class="loginBox"> 290 <div>
207 <table id="gaia_table" align="center" border="0" cellpadding="1" 291 <table id="gaia_table" align="center" border="0" cellpadding="1"
208 cellspacing="0"> 292 cellspacing="0">
293 <tr>
294 <td id="topspacer" class="toppageverticalspace" colspan="2"></td>
295 </tr>
209 <tr> 296 <tr>
210 <td colspan="2" align="center"> 297 <td colspan="2" align="center">
211 <font size="-1"><span i18n-content="signinprefix"></span></font>
212 <table> 298 <table>
213 <tr> 299 <tr>
214 <td valign="top" id="gaia_logo"> 300 <td valign="top" id="gaia_logo">
215 <img src="google_transparent.png" alt="Google"> 301 <img src="google_transparent.png" alt="Google">
216 </img> 302 </img>
217 </td> 303 </td>
218 <td valign="middle"> 304 <td valign="middle">
219 <font size="+0"> 305 <font size="+0">
220 <span id="gaia_account_text" i18n-content="signinsuffix">< /span> 306 <span id="gaia_account_text" i18n-content="signinsuffix">< /span>
221 </font> 307 </font>
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after
282 </td> 368 </td>
283 </tr> 369 </tr>
284 <tr> 370 <tr>
285 <td> 371 <td>
286 </td> 372 </td>
287 <td> 373 <td>
288 <div class="errormsg" id="errormsg_1_Password"> 374 <div class="errormsg" id="errormsg_1_Password">
289 <span i18n-content="invalidcredentials"></span>[<a href="http://ww w.google.com/support/accounts/bin/answer.py?ctx=ch&answer=27444" target="_blank" >?</a>] 375 <span i18n-content="invalidcredentials"></span>[<a href="http://ww w.google.com/support/accounts/bin/answer.py?ctx=ch&answer=27444" target="_blank" >?</a>]
290 </div> 376 </div>
291 </td> 377 </td>
292 </tr> 378 </tr>
293 <tr> 379 <tr>
294 <td> 380 <td colspan="2">
381 <div id="captchadiv" style="display:none">
382 <table cellpadding="1" cellspacing="0" border="0">
383 <tbody>
384 <tr>
385 <td colspan="2" align="center" class="bottompaddedcell">
386 <font size="-1">
387 <span i18n-content="captchainstructions"></span>
388 </font>
389 </td>
390 </tr>
391 <tr>
392 <td colspan="2" align="center" class="bottompaddedcell">
393 <span id="captcha_wrapper">
394 <span class="captcha_image"></span>
395 </span>
396 </td>
397 </tr>
398 <tr>
399 <td colspan="2" align="center">
400 <input type="text" name="CaptchaValue"
401 id="CaptchaValue" size="18"
402 value="" class="gaia le val" />
403 </td>
404 </tr>
405 </tbody>
406 </table>
407 </div>
295 </td> 408 </td>
296 <td> 409 </tr>
410 <tr>
411 <td colspan="2" align="center">
297 <div class="errormsg" id="errormsg_0_Connection" 412 <div class="errormsg" id="errormsg_0_Connection"
298 i18n-content="couldnotconnect"> 413 i18n-content="couldnotconnect">
299 </div> 414 </div>
300 </td> 415 </td>
301 </tr> 416 </tr>
302 <tr> 417 <tr>
303 <td> 418 <td>
304 </td> 419 </td>
305 <td> 420 <td>
306 </td> 421 </td>
307 </tr> 422 </tr>
308 <tr> 423 <tr>
309 <td> 424 <td colspan="2">
310 </td> 425 <table align="center" cellpadding="0" cellspacing="0">
311 <td>
312 <table>
313 <tr> 426 <tr>
314 <td> 427 <td>
315 <div id="throbber_container" style="display:none"> 428 <div id="throbber_container" style="display:none">
316 <div id="throb" style="background-image:url(throbber.png); 429 <div id="throb" style="background-image:url(throbber.png);
317 width:16px; height:16px; background-position:0px;"> 430 width:16px; height:16px; background-position:0px;">
318 </div> 431 </div>
319 </div> 432 </div>
320 </td> 433 </td>
321 <td> 434 <td class="noverticalpadding">
322 <input id="signIn" type="button" class="gaia le button" 435 <input id="signIn" type="button" class="gaia le button"
323 name="signIn" i18n-values="value:signin" 436 name="signIn" i18n-values="value:signin"
324 onclick="sendCredentialsAndClose();" 437 onclick="sendCredentialsAndClose();"
325 style="width:85" /> 438 style="width:85" />
326 </td> 439 </td>
327 </tr> 440 </tr>
328 </table> 441 </table>
329 </td> 442 </td>
330 </tr> 443 </tr>
331 <tr id="ga-fprow"> 444 <tr id="ga-fprow">
332 <td colspan="2" height="16.0" class="gaia le fpwd" 445 <td colspan="2" height="16.0" class="gaia le fpwd"
333 align="center" valign="bottom"> 446 align="center" valign="bottom">
334 <a href="http://www.google.com/support/accounts/bin/answer.py?answ er=48598&hl=en&fpUrl=https%3A%2F%2Fwww.google.com%2Faccounts%2FForgotPasswd%3Ffp Only%3D1%26service%3Dchromiumsync" 447 <a href="http://www.google.com/support/accounts/bin/answer.py?answ er=48598&hl=en&fpUrl=https%3A%2F%2Fwww.google.com%2Faccounts%2FForgotPasswd%3Ffp Only%3D1%26service%3Dchromiumsync"
335 target="_blank" i18n-content="cannotaccessaccount"> 448 target="_blank" i18n-content="cannotaccessaccount">
336 </a> 449 </a>
337 </td> 450 </td>
338 </tr> 451 </tr>
339 <tr> 452 <tr>
340 <td colspan="2" height="16.0" class="gaia le fpwd" 453 <td id="createaccountcell" colspan="2" height="16.0"
341 align="center" valign="bottom"> 454 class="gaia le fpwd" align="center" valign="bottom">
342 <a href="https://www.google.com/accounts/NewAccount?service=chromi umsync" 455 <div id="createaccountdiv">
343 i18n-content="createaccount" target="_blank"> 456 <a href="https://www.google.com/accounts/NewAccount?service=chro miumsync"
344 </a> 457 i18n-content="createaccount" target="_blank">
458 </a>
459 </div>
345 </td> 460 </td>
346 </tr> 461 </tr>
347 </table> 462 </table>
348 </div> 463 </div>
349 </td> 464 </td>
350 </tr> 465 </tr>
351 </table> 466 </table>
352 </div> 467 </div>
353 </form> 468 </form>
354 </td> 469 </td>
355 </tr> 470 </tr>
471 <tr>
472 <td class="cancelspacenocaptcha" id="cancelspacer" colspan="2">
473 </td>
474 </tr>
356 </table> 475 </table>
357 <div class="endaligned"> 476 <div class="endaligned">
358 <input type="button" name="cancel" i18n-values="value:cancel" 477 <input type="button" name="cancel" i18n-values="value:cancel"
359 onclick="CloseDialog();" style="width:85" /> 478 onclick="CloseDialog();" style="width:85" />
360 </div> 479 </div>
361 </body> 480 </body>
362 </html> 481 </html>
OLDNEW
« no previous file with comments | « chrome/browser/sync/profile_sync_service.cc ('k') | chrome/browser/sync/sync_setup_flow.h » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698