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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2880001: HTML sync setup UI. (Closed) Base URL: http://src.chromium.org/git/chromium.git
Patch Set: Created 10 years, 6 months 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
« no previous file with comments | « chrome/browser/sync/resources/choose_datatypes.html ('k') | chrome/browser/sync/resources/setup_flow.html » ('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 <head> 2 <head>
3 <style type="text/css"><!-- 3 <style type="text/css">
4 body,td,div,p,a,font,span {font-family: arial,sans-serif;} 4 body,td,div,p,a,font,span {font-family: arial,sans-serif;}
5 body { background-color:#ffffff } 5 body { background-color:#ffffff }
6 A:link {color:#0000cc; } 6 A:link {color:#0000cc; }
7 A:visited { color:#551a8b; } 7 A:visited { color:#551a8b; }
8 A:active { color:#ff0000; } 8 A:active { color:#ff0000; }
9 .form-noindent {background-color: #ffffff; border: #C3D9FF 1px solid} 9 .form-noindent {background-color: #ffffff; border: #C3D9FF 1px solid}
10 --></style> 10 .body { margin-left: 3em;
11 <style type="text/css"><!-- 11 margin-right: 5em;
12 .body { margin-left: 3em; 12 font-family: arial,sans-serif; }
13 margin-right: 5em; 13 .endaligned {
14 font-family: arial,sans-serif; } 14 text-align: right;
15 .endaligned { 15 }
16 text-align: right; 16 html[dir='rtl'] .endaligned {
17 } 17 text-align: left;
18 html[dir='rtl'] .endaligned { 18 }
19 text-align: left; 19 #gaia_account_text { font-weight: bold; }
20 } 20 div.errorbox-good {}
21 #gaia_account_text { font-weight: bold; } 21 div.errorbox-bad {}
22 div.errorbox-good {} 22 div.errormsg { color: red; font-size: smaller;
23 div.errorbox-bad {} 23 font-family: arial,sans-serif;
24 div.errormsg { color: red; font-size: smaller; 24 display: none;}
25 font-family: arial,sans-serif; 25 font.errormsg { color: red; font-size: smaller;
26 display: none;} 26 font-family: arial,sans-serif;}
27 font.errormsg { color: red; font-size: smaller; 27 div.errormsgspacer { min-height: 1em;}
28 font-family: arial,sans-serif;} 28 font.errormsgspacer { font-size: smaller;
29 div.errormsgspacer { min-height: 1em;} 29 font-family: arial,sans-serif;}
30 font.errormsgspacer { font-size: smaller;
31 font-family: arial,sans-serif;}
32 30
33 hr { 31 hr {
34 border: 0; 32 border: 0;
35 background-color:#DDDDDD; 33 background-color:#DDDDDD;
36 height: 1px; 34 height: 1px;
37 width: 100%; 35 width: 100%;
38 text-align: left; 36 text-align: left;
39 margin: 5px; 37 margin: 5px;
40 } 38 }
41 #gaia_loginform { 39 #gaia_loginform {
42 margin-bottom: 0; 40 margin-bottom: 0;
43 } 41 }
44 42
45 #captcha_wrapper { 43 #captcha_wrapper {
46 background-size: 200px 70px; 44 background-size: 200px 70px;
47 background: no-repeat; 45 background: no-repeat;
48 background-position: center; 46 background-position: center;
49 background-color: #e8eefa; 47 background-color: #e8eefa;
50 display: block; 48 display: block;
51 } 49 }
52 .captcha_image { 50 .captcha_image {
53 display: block; 51 display: block;
54 width: 200px; 52 width: 200px;
55 height: 70px; 53 height: 70px;
56 } 54 }
57 .toppageverticalspace { 55 .toppageverticalspace {
58 height: 15px; 56 height: 15px;
59 } 57 }
60 .bottompaddedcell { 58 .bottompaddedcell {
61 padding-bottom: 3px; 59 padding-bottom: 3px;
62 } 60 }
63 .noverticalpadding { 61 .noverticalpadding {
64 padding-top: 0; 62 padding-top: 0;
65 padding-bottom: 0; 63 padding-bottom: 0;
66 } 64 }
67 .cancelspacenocaptcha { 65 .cancelspacenocaptcha {
68 height: 22px; 66 height: 22px;
69 } 67 }
70 .cancelspaceforcaptcha { 68 .cancelspaceforcaptcha {
71 height: 5px; 69 height: 5px;
72 } 70 }
73 #top_blurb { 71 #top_blurb {
74 text-align: justify; 72 text-align: justify;
75 } 73 }
76 --> 74 input[type='button'] {
77 </style> 75 min-width: 87px;
78 </head> 76 min-height: 26px;
79 <body bgcolor="#ffffff" vlink="#666666" 77 }
80 i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize" 78 input[type='submit'] {
81 style="margin-bottom: 6px; margin-top: 6px;" onload="initForm();"> 79 min-width: 87px;
80 min-height: 26px;
81 }
82 </style>
83 </head>
84 <body bgcolor="#ffffff" vlink="#666666"
85 i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"
86 style="margin-bottom: 6px; margin-top: 6px;" onload="initGaiaLoginForm();" >
82 <table width="100%" height="100%" align="center" cellpadding="1" cellspacing=" 1"> 87 <table width="100%" height="100%" align="center" cellpadding="1" cellspacing=" 1">
83 <tr> 88 <tr>
84 <td valign="top"> <!-- LOGIN BOX --> 89 <td valign="top"> <!-- LOGIN BOX -->
85 <script> 90 <script>
86 // Variable to track if a captcha challenge was issued. If this gets set to 91 // Variable to track if a captcha challenge was issued. If this gets set to
87 // true, it stays that way until we are told about successful login from 92 // true, it stays that way until we are told about successful login from
88 // the browser. This means subsequent errors (like invalid password) are 93 // the browser. This means subsequent errors (like invalid password) are
89 // rendered in the captcha state, which is basically identical except we 94 // rendered in the captcha state, which is basically identical except we
90 // don't show the top error blurb "Error Signing in" or the "Create 95 // don't show the top error blurb "Error Signing in" or the "Create
91 // account" link. 96 // account" link.
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after
142 } 147 }
143 if (3 == args.error) { 148 if (3 == args.error) {
144 setElementDisplay("errormsg_0_Connection", 'table-row'); 149 setElementDisplay("errormsg_0_Connection", 'table-row');
145 setBlurbError(); 150 setBlurbError();
146 } 151 }
147 if (4 == args.error) { 152 if (4 == args.error) {
148 showCaptcha(args); 153 showCaptcha(args);
149 } 154 }
150 document.getElementById("signIn").disabled = false; 155 document.getElementById("signIn").disabled = false;
151 document.getElementById("signIn").value = templateData['signin']; 156 document.getElementById("signIn").value = templateData['signin'];
152 if (args.showCustomize) {
153 document.getElementById("customize").disabled = false;
154 document.getElementById("customize").style.visibility = "visible";
155 }
156 gaia_setFocus(); 157 gaia_setFocus();
157 } 158 }
158 159
159 function showCaptcha(args) { 160 function showCaptcha(args) {
160 g_is_captcha_challenge_active = true; 161 g_is_captcha_challenge_active = true;
161 162
162 // The captcha takes up lots of space, so make room. 163 // The captcha takes up lots of space, so make room.
163 setElementDisplay("top_blurb", "none"); 164 setElementDisplay("top_blurb", "none");
164 setElementDisplay("top_blurb_error", "none"); 165 setElementDisplay("top_blurb_error", "none");
165 setElementDisplay("createaccountdiv", "none"); 166 setElementDisplay("createaccountdiv", "none");
166 setElementDisplay("topspacer", "none"); 167 setElementDisplay("topspacer", "none");
167 var gaiaTable = document.getElementById('gaia_table'); 168 var gaiaTable = document.getElementById('gaia_table');
168 gaiaTable.cellPadding = 0; 169 gaiaTable.cellPadding = 0;
169 gaiaTable.cellSpacing = 1; 170 gaiaTable.cellSpacing = 1;
170 document.getElementById('cancelspacer').className = 171 document.getElementById('cancelspacer').className =
171 "cancelspaceforcaptcha"; 172 "cancelspaceforcaptcha";
172 document.getElementById('createaccountcell').height = 0; 173 document.getElementById('createaccountcell').height = 0;
173 174
174 // It's showtime for the captcha now. 175 // It's showtime for the captcha now.
175 setElementDisplay("captchadiv", "block"); 176 setElementDisplay("captchadiv", "block");
176 document.getElementById('Email').disabled = true; 177 document.getElementById('Email').disabled = true;
177 document.getElementById('Passwd').disabled = false; 178 document.getElementById('Passwd').disabled = false;
178 document.getElementById('CaptchaValue').disabled = false; 179 document.getElementById('CaptchaValue').disabled = false;
179 document.getElementById('captcha_wrapper').style.backgroundImage = 180 document.getElementById('captcha_wrapper').style.backgroundImage =
180 url(args.captchaUrl); 181 url(args.captchaUrl);
181 } 182 }
182 183
183 function CloseDialog() { 184 function CloseDialog() {
184 chrome.send("ClickCustomizeCancel", [""]);
185 chrome.send("DialogClose", [""]); 185 chrome.send("DialogClose", [""]);
186 } 186 }
187 187
188 function showCustomize() {
189 chrome.send("ShowCustomize", [""]);
190 }
191
192 function showGaiaSuccessAndClose() { 188 function showGaiaSuccessAndClose() {
193 document.getElementById("signIn").value = templateData['success']; 189 document.getElementById("signIn").value = templateData['success'];
194 setTimeout(CloseDialog, 1600); 190 setTimeout(CloseDialog, 1600);
195 } 191 }
196 192
197 function showGaiaSuccessAndSettingUp() { 193 function showGaiaSuccessAndSettingUp() {
198 document.getElementById("signIn").value = templateData['settingup']; 194 document.getElementById("signIn").value = templateData['settingup'];
199 } 195 }
200 196
201 function initForm() { 197 // Called once, when this html/js is loaded.
198 function initGaiaLoginForm() {
202 var acct_text = document.getElementById("gaia_account_text"); 199 var acct_text = document.getElementById("gaia_account_text");
203 var translated_text = acct_text.textContent; 200 var translated_text = acct_text.textContent;
204 var posGoogle = translated_text.indexOf('Google'); 201 var posGoogle = translated_text.indexOf('Google');
205 if (posGoogle != -1) { 202 if (posGoogle != -1) {
206 var ltr = templateData['textdirection'] == 'ltr'; 203 var ltr = templateData['textdirection'] == 'ltr';
207 var googleIsAtEndOfSentence = posGoogle != 0; 204 var googleIsAtEndOfSentence = posGoogle != 0;
208 if (googleIsAtEndOfSentence == ltr) { 205 if (googleIsAtEndOfSentence == ltr) {
209 // We're in ltr and in the translation the word 'Google' is AFTER the 206 // We're in ltr and in the translation the word 'Google' is AFTER the
210 // word 'Account' OR we're in rtl and 'Google' is BEFORE 'Account'. 207 // word 'Account' OR we're in rtl and 'Google' is BEFORE 'Account'.
211 var logo_td = document.getElementById('gaia_logo'); 208 var logo_td = document.getElementById('gaia_logo');
212 logo_td.parentNode.appendChild(logo_td); 209 logo_td.parentNode.appendChild(logo_td);
213 } 210 }
214 acct_text.textContent = translated_text.replace('Google',''); 211 acct_text.textContent = translated_text.replace('Google','');
215 } 212 }
216 setInterval(advanceThrobber, 30); 213 setInterval(advanceThrobber, 30);
217 var args = JSON.parse(chrome.dialogArguments); 214 var args = JSON.parse(chrome.dialogArguments);
218 showGaiaLogin(args); 215 showGaiaLogin(args);
219 } 216 }
220 217
221 function sendCredentialsAndClose() { 218 function sendCredentialsAndClose() {
222 219
223 chrome.send("ClickCustomizeOk", [""]);
224 if (!setErrorVisibility()) 220 if (!setErrorVisibility())
225 return false; 221 return false;
226 222
227 document.getElementById('Email').disabled = true; 223 document.getElementById('Email').disabled = true;
228 document.getElementById('Passwd').disabled = true; 224 document.getElementById('Passwd').disabled = true;
229 document.getElementById('CaptchaValue').disabled = true; 225 document.getElementById('CaptchaValue').disabled = true;
230 if (document.getElementById('customize')) { 226
231 document.getElementById('customize').disabled = true;
232 }
233 var throbber = document.getElementById('throbber_container'); 227 var throbber = document.getElementById('throbber_container');
234 throbber.style.display = "inline"; 228 throbber.style.display = "inline";
235 var f = document.getElementById("gaia_loginform"); 229 var f = document.getElementById("gaia_loginform");
236 var result = JSON.stringify({"user" : f.Email.value, 230 var result = JSON.stringify({"user" : f.Email.value,
237 "pass" : f.Passwd.value, 231 "pass" : f.Passwd.value,
238 "captcha" : f.CaptchaValue.value}); 232 "captcha" : f.CaptchaValue.value});
239 document.getElementById("signIn").disabled = true; 233 document.getElementById("signIn").disabled = true;
240 chrome.send("SubmitAuth", [result]); 234 chrome.send("SubmitAuth", [result]);
241 } 235 }
242 236
(...skipping 28 matching lines...) Expand all
271 return false; 265 return false;
272 } 266 }
273 if (null == f.Passwd.value || "" == f.Passwd.value) { 267 if (null == f.Passwd.value || "" == f.Passwd.value) {
274 setElementDisplay("errormsg_0_Password", 'table-row'); 268 setElementDisplay("errormsg_0_Password", 'table-row');
275 setBlurbError(); 269 setBlurbError();
276 return false; 270 return false;
277 } 271 }
278 return true; 272 return true;
279 } 273 }
280 </script> 274 </script>
281 <style type="text/css"><!-- 275 <style type="text/css">
282 div.errormsg { color: red; font-size: smaller; font-family:arial,sans-serif; } 276 div.errormsg { color: red; font-size: smaller; font-family:arial,sans-serif; }
283 font.errormsg { color: red; font-size: smaller; font-family:arial,sans-serif;} 277 font.errormsg { color: red; font-size: smaller; font-family:arial,sans-serif ;}
284 --></style> 278 </style>
285 <style type="text/css"><!-- 279 <style type="text/css">
286 .gaia.le.lbl { font-family: Arial, Helvetica, sans-serif; font-size: smaller; } 280 .gaia.le.lbl { font-family: Arial, Helvetica, sans-serif; font-size: smaller ; }
287 .gaia.le.fpwd { font-family: Arial, Helvetica, sans-serif; font-size: 70%; } 281 .gaia.le.fpwd { font-family: Arial, Helvetica, sans-serif; font-size: 70%; }
288 .gaia.le.chusr { font-family: Arial, Helvetica, sans-serif; font-size: 70%; } 282 .gaia.le.chusr { font-family: Arial, Helvetica, sans-serif; font-size: 70%; }
289 .gaia.le.val { font-family: Arial, Helvetica, sans-serif; font-size: smaller; } 283 .gaia.le.val { font-family: Arial, Helvetica, sans-serif; font-size: smaller ; }
290 .gaia.le.button { font-family: Arial, Helvetica, sans-serif; } 284 .gaia.le.button { font-family: Arial, Helvetica, sans-serif; }
291 .gaia.le.rem { font-family: Arial, Helvetica, sans-serif; font-size: smaller; } 285 .gaia.le.rem { font-family: Arial, Helvetica, sans-serif; font-size: smaller ; }
292 .gaia.captchahtml.desc { font-family: arial, sans-serif; font-size: smaller; } 286 .gaia.captchahtml.desc { font-family: arial, sans-serif; font-size: smaller; }
293 .gaia.captchahtml.cmt { font-family: arial, sans-serif; font-size: smaller; 287 .gaia.captchahtml.cmt { font-family: arial, sans-serif; font-size: smaller;
294 font-style: italic; } 288 font-style: italic; }
295 --></style> 289 </style>
296 <div id="top_blurb"> 290 <div id="top_blurb">
297 <p><font size="-1"><span i18n-content="introduction"></span></font></p> 291 <p><font size="-1"><span i18n-content="introduction"></span></font></p>
298 </div> 292 </div>
299 <div id="top_blurb_error" style="display:none"> 293 <div id="top_blurb_error" style="display:none">
300 <p><font size="-1"> 294 <p><font size="-1">
301 <span i18n-content="settingupsync"></span><br/><br/> 295 <span i18n-content="settingupsync"></span><br/><br/>
302 <b><span i18n-content="errorsigningin"></span></b> 296 <b><span i18n-content="errorsigningin"></span></b>
303 </font></p> 297 </font></p>
304 </div> 298 </div>
305 <form id="gaia_loginform" onsubmit="sendCredentialsAndClose(); return false;"> 299 <form id="gaia_loginform" onsubmit="sendCredentialsAndClose(); return false;">
306 <div id="gaia_loginbox"> 300 <div id="gaia_loginbox">
307 <table id="content_table" class="form-noindent" cellspacing="0" cellpadding="5" 301 <table id="content_table" class="form-noindent" cellspacing="0" cellpadding="5"
308 width="75%" border="0" align="center"> 302 width="75%" border="0" align="center">
309 <tr> 303 <tr>
310 <td valign="top" style="text-align:center" nowrap="nowrap" 304 <td valign="top" style="text-align:center" nowrap="nowrap"
311 bgcolor="#e8eefa"> 305 bgcolor="#e8eefa">
312 <div> 306 <div>
313 <table id="gaia_table" align="center" border="0" cellpadding="1" 307 <table id="gaia_table" align="center" border="0" cellpadding="1"
314 cellspacing="0"> 308 cellspacing="0">
315 <tr> 309 <tr>
316 <td id="topspacer" class="toppageverticalspace" colspan="2"></td> 310 <td id="topspacer" class="toppageverticalspace" colspan="2"></td>
317 </tr> 311 </tr>
318 <tr> 312 <tr>
319 <td colspan="2" align="center"> 313 <td colspan="2" align="center">
320 <table> 314 <table>
321 <tr> 315 <tr>
322 <td valign="top" id="gaia_logo"> 316 <td valign="top" id="gaia_logo">
323 <img src="google_transparent.png" alt="Google"> 317 <img src="google_transparent.png" alt="Google">
324 </td> 318 </td>
325 <td valign="middle"> 319 <td valign="middle">
326 <font size="+0"> 320 <font size="+0">
327 <span id="gaia_account_text" i18n-content="signinsuffix">< /span> 321 <span id="gaia_account_text" i18n-content="signinsuffix">< /span>
328 </font> 322 </font>
329 </td> 323 </td>
330 </tr> 324 </tr>
331 </table> 325 </table>
332 </td> 326 </td>
333 </tr> 327 </tr>
334 <script type="text/javascript"><!-- 328 <script type="text/javascript">
335 function onPreCreateAccount() { 329 function onPreCreateAccount() {
336 return true; 330 return true;
337 } 331 }
338 function onPreLogin() { 332 function onPreLogin() {
339 if (window["onlogin"] != null) { 333 if (window["onlogin"] != null) {
340 return onlogin(); 334 return onlogin();
341 } else { 335 } else {
342 return true; 336 return true;
343 } 337 }
344 } 338 }
345 --></script> 339 </script>
346 <tr> 340 <tr>
347 <td colspan="2" align="center"> </td> 341 <td colspan="2" align="center"> </td>
348 </tr> 342 </tr>
349 <tr> 343 <tr>
350 <td nowrap="nowrap"> 344 <td nowrap="nowrap">
351 <div class="endaligned"> 345 <div class="endaligned">
352 <span class="gaia le lbl" i18n-content="emaillabel"> 346 <span class="gaia le lbl" i18n-content="emaillabel">
353 </span> 347 </span>
354 </div> 348 </div>
355 </td> 349 </td>
(...skipping 128 matching lines...) Expand 10 before | Expand all | Expand 10 after
484 </div> 478 </div>
485 </form> 479 </form>
486 </td> 480 </td>
487 </tr> 481 </tr>
488 <tr> 482 <tr>
489 <td class="cancelspacenocaptcha" id="cancelspacer" colspan="2"> 483 <td class="cancelspacenocaptcha" id="cancelspacer" colspan="2">
490 </td> 484 </td>
491 </tr> 485 </tr>
492 <tr> 486 <tr>
493 <td class="endaligned noverticalpadding" colspan="2" style="vertical-align: bo ttom"> 487 <td class="endaligned noverticalpadding" colspan="2" style="vertical-align: bo ttom">
494 <input id="customize" type="button" name="customize"
495 i18n-values="value:customize" onclick="showCustomize();"
496 style="visibility:hidden" disabled="disabled">
497 <input type="button" name="cancel" i18n-values="value:cancel" 488 <input type="button" name="cancel" i18n-values="value:cancel"
498 onclick="CloseDialog();" style="width:85"> 489 onclick="CloseDialog();" style="width:85">
499 </td> 490 </td>
500 </tr> 491 </tr>
501 </table> 492 </table>
502 </body> 493 </body>
503 </html> 494 </html>
OLDNEW
« no previous file with comments | « chrome/browser/sync/resources/choose_datatypes.html ('k') | chrome/browser/sync/resources/setup_flow.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698