Committer: mchervonniy
LJINT-425: new header for external authorisationU trunk/templates/Identity/ExternalLogin.tmpl
Modified: trunk/templates/Identity/ExternalLogin.tmpl =================================================================== --- trunk/templates/Identity/ExternalLogin.tmpl 2011-05-18 07:42:57 UTC (rev 10517) +++ trunk/templates/Identity/ExternalLogin.tmpl 2011-05-18 10:13:48 UTC (rev 10518) @@ -8,38 +8,47 @@ <body> <TMPL_VAR js_check_domain> <div class="b-identity"> -<ul class="m-auth"> - <TMPL_LOOP type_user> - <li class="m-auth-item m-auth-<TMPL_VAR type> current"><a href="?type=<TMPL_VAR type>"><span><TMPL_VAR ml_tab_heading></span></a><i class="m-auth-bl"></i><i class="m-auth-br"></i></li> - </TMPL_LOOP> - - <TMPL_LOOP type_openid> - <li class="m-auth-item m-auth-<TMPL_VAR type>"><a href="?type=<TMPL_VAR type>"><span><TMPL_VAR ml_tab_heading></span></a><i class="m-auth-bl"></i><i class="m-auth-br"></i></li> - </TMPL_LOOP> - - <TMPL_LOOP type_facebook> - <li class="m-auth-item m-auth-<TMPL_VAR type>"><a href="?type=<TMPL_VAR type>"><span><TMPL_VAR ml_tab_heading></span></a><i class="m-auth-bl"></i><i class="m-auth-br"></i></li> - </TMPL_LOOP> - - <TMPL_LOOP type_twitter> - <li class="m-auth-item m-auth-<TMPL_VAR type>"><a href="?type=<TMPL_VAR type>"><span><TMPL_VAR ml_tab_heading></span></a><i class="m-auth-bl"></i><i class="m-auth-br"></i></li> - </TMPL_LOOP> - - <TMPL_LOOP type_mailru> - <li class="m-auth-item m-auth-<TMPL_VAR type>"><a href="?type=<TMPL_VAR type>"><span><TMPL_VAR ml_tab_heading></span></a><i class="m-auth-bl"></i><i class="m-auth-br"></i></li> - </TMPL_LOOP> - - <TMPL_LOOP type_vkontakte> - <li class="m-auth-item m-auth-<TMPL_VAR type>"><a href="?type=<TMPL_VAR type>"><span><TMPL_VAR ml_tab_heading></span></a><i class="m-auth-bl"></i><i class="m-auth-br"></i></li> - </TMPL_LOOP> - -</ul> + <div class="b-identity-header"> + <div class="logo"><i></i>LiveJournal</div> + <span class="b-auth-wrapper"> + <TMPL_LOOP type_user> + <a class="i-auth" title="Login with <TMPL_VAR ml_tab_heading>" href="?type=<TMPL_VAR type>"><img width="16" height="16" alt="Login with <TMPL_VAR ml_tab_heading>" src="/img/icons/livejournal-16.png?v=1"></a> + </TMPL_LOOP> + <TMPL_LOOP type_facebook> + <a class="i-auth" title="Login with <TMPL_VAR ml_tab_heading>" href="?type=<TMPL_VAR type>"><img width="16" height="16" alt="Login with <TMPL_VAR ml_tab_heading>" src="/img/icons/<TMPL_VAR type>-16.gif?v=1"></a> + </TMPL_LOOP> + <TMPL_LOOP type_twitter> + <a class="i-auth" title="Login with <TMPL_VAR ml_tab_heading>" href="?type=<TMPL_VAR type>"><img width="16" height="16" alt="Login with <TMPL_VAR ml_tab_heading>" src="/img/icons/<TMPL_VAR type>-16.gif?v=2"></a> + </TMPL_LOOP> + <a class="i-loginpopup-show" href="#login-more"><img width="16" height="16" alt="More login options" src="/img/icons/showmore.gif?v=1"></a> + </span> + <div id="login-more" class="b-loginpopup" style="display: none;"> + <ul class="b-loginpopup-items"> + <TMPL_LOOP type_openid> + <li class="b-loginpopup-item"><a title="Login with <TMPL_VAR ml_tab_heading>" class="i-auth" href="?type=<TMPL_VAR type>"><img width="16" height="16" alt="Login with <TMPL_VAR ml_tab_heading>" src="/img/icons/<TMPL_VAR type>-16.gif?v=1"><TMPL_VAR ml_tab_heading></a></li> + </TMPL_LOOP> + <TMPL_LOOP type_mailru> + <li class="b-loginpopup-item"><a title="Login with <TMPL_VAR ml_tab_heading>" class="i-auth" href="?type=<TMPL_VAR type>"><img width="16" height="16" alt="Login with <TMPL_VAR ml_tab_heading>" src="/img/icons/<TMPL_VAR type>-16.gif?v=3"><TMPL_VAR ml_tab_heading></a></li> + </TMPL_LOOP> + <TMPL_LOOP type_vkontakte> + <li class="b-loginpopup-item"><a title="Log in with <TMPL_VAR ml_tab_heading>" class="i-auth" href="?type=<TMPL_VAR type>"><img width="16" height="16" alt="Log in with <TMPL_VAR ml_tab_heading>" src="/img/icons/<TMPL_VAR type>-16.gif?v=1"><TMPL_VAR ml_tab_heading></a></li> + </TMPL_LOOP> + </ul> + </div> + <script type="text/javascript"> + jQuery('#login-more').bubble({ + target: 'a.i-loginpopup-show img', + closeControl: false, + showOn: 'click', + closeOnContentClick: true + }); + </script> + </div> <ul class="b-auth"> <TMPL_LOOP type_user> - <li id="tab-<TMPL_VAR type>" class="b-auth-item"> - <form action="<tmpl_var action>" method="post" target=""> + <li id="tab-<TMPL_VAR type>" class="b-auth-item current"> + <form action="<tmpl_var action>" method="post" target=""> <input type="hidden" name="remember_me" value="1"> - <p class="b-auth-desc"><TMPL_VAR expr="ml('/identity/login.bml.user.desc')"></p> <p class="b-auth-user-form"> <span class="b-auth-input-wrapper"> <label style="display:none;" for="ljusername"><TMPL_VAR expr="ml('/identity/login.bml.user.label.name')"></label> @@ -53,6 +62,7 @@ </span> <button disabled="disabled" type="submit"><TMPL_VAR expr="ml('/identity/login.bml.user.btn.login')"></button> </p> + <p class="b-auth-desc"><TMPL_VAR expr="ml('/identity/login.bml.user.desc')"></p> <TMPL_IF errors><TMPL_LOOP errors><p class="b-auth-error"><span class="i-message i-message-error"><TMPL_VAR error></span><i class="i-close"></i></p></TMPL_LOOP></TMPL_IF> <input type="hidden" name="type" value="<TMPL_VAR type>" /> @@ -63,8 +73,7 @@ <TMPL_LOOP type_openid> <li id="tab-<TMPL_VAR type>" class="b-auth-item" style="display:none"> - <form action="<tmpl_var action>" method="post" target="ljidentityauth"> - <p class="b-auth-desc"><TMPL_VAR expr="ml('/identity/login.bml.openid.desc')"></p> + <form action="<tmpl_var action>" method="post" target="ljidentityauth"> <p class="b-auth-openid-form"> <span class="b-auth-input-wrapper"> <label style="display:none;" for="openid_url"><TMPL_VAR expr="ml('/identity/login.bml.openid.label.url')"></label> @@ -73,6 +82,7 @@ </span> <button disabled="disabled" type="submit"><TMPL_VAR expr="ml('/identity/login.bml.openid.btn.login')"></button> </p> + <p class="b-auth-desc"><TMPL_VAR expr="ml('/identity/login.bml.openid.desc')"></p> <TMPL_IF errors><TMPL_LOOP errors><p class="b-auth-error"><span class="i-message i-message-error"><TMPL_VAR error></span><i class="i-close"></i></p></TMPL_LOOP></TMPL_IF> <input type="hidden" name="type" value="<TMPL_VAR type>" /> @@ -82,7 +92,7 @@ <TMPL_LOOP type_facebook> <li id="tab-<TMPL_VAR type>" class="b-auth-item" style="display:none"> - <form action="<tmpl_var action>" method="post" target="ljidentityauth"> + <form action="<tmpl_var action>" method="post" target="ljidentityauth"> <button type="submit" class="b-facebookbtn" title="<TMPL_VAR expr="ml('/identity/login.bml.facebook.btn.connect')">"><span><i></i><TMPL_VAR expr="ml('/identity/login.bml.facebook.btn.connect')"></span></button> <p class="b-auth-desc"><TMPL_VAR expr="ml('/identity/login.bml.facebook.desc')"></p> <TMPL_IF errors><TMPL_LOOP errors><p class="b-auth-error"><span class="i-message i-message-error"><TMPL_VAR error></span><i class="i-close"></i></p></TMPL_LOOP></TMPL_IF> @@ -94,7 +104,7 @@ <TMPL_LOOP type_twitter> <li id="tab-<TMPL_VAR type>" class="b-auth-item" style="display:none"> - <form action="<tmpl_var action>" method="post" target="ljidentityauth"> + <form action="<tmpl_var action>" method="post" target="ljidentityauth"> <button type="submit" class="b-twitterbtn"><span><i></i><TMPL_VAR expr="ml('/identity/login.bml.twitter.btn.connect')"></span></button> <p class="b-auth-desc"><TMPL_VAR expr="ml('/identity/login.bml.twitter.desc')"></p> <TMPL_IF errors><TMPL_LOOP errors><p class="b-auth-error"><span class="i-message i-message-error"><TMPL_VAR error></span><i class="i-close"></i></p></TMPL_LOOP></TMPL_IF> @@ -106,7 +116,7 @@ <TMPL_LOOP type_mailru> <li id="tab-<TMPL_VAR type>" class="b-auth-item" style="display:none"> - <form action="<tmpl_var action>" method="post" target="ljidentityauth"> + <form action="<tmpl_var action>" method="post" target="ljidentityauth"> <button type="submit" class="b-mailrubtn"><span><i></i><TMPL_VAR expr="ml('/identity/login.bml.mailru.btn.connect')"></span></button> <p class="b-auth-desc"><TMPL_VAR expr="ml('/identity/login.bml.mailru.desc')"></p> <TMPL_IF errors><TMPL_LOOP errors><p class="b-auth-error"><span class="i-message i-message-error"><TMPL_VAR error></span><i class="i-close"></i></p></TMPL_LOOP></TMPL_IF> @@ -118,7 +128,7 @@ <TMPL_LOOP type_vkontakte> <li id="tab-<TMPL_VAR type>" class="b-auth-item" style="display:none"> - <form action="<tmpl_var action>" method="post" target="ljidentityauth"> + <form action="<tmpl_var action>" method="post" target="ljidentityauth"> <button type="submit" class="b-vkontaktebtn"><span><i></i><TMPL_VAR expr="ml('/identity/login.bml.vkontakte.btn.connect')"></span></button> <p class="b-auth-desc"><TMPL_VAR expr="ml('/identity/login.bml.vkontakte.desc')"></p> <TMPL_IF errors><TMPL_LOOP errors><p class="b-auth-error"><span class="i-message i-message-error"><TMPL_VAR error></span><i class="i-close"></i></p></TMPL_LOOP></TMPL_IF> @@ -129,14 +139,14 @@ </TMPL_LOOP> </ul> -<p class="lj3-close"> +<!--<p class="lj3-close"> <a href="javascript:void(0);" id="close-button"></a> -</p> +</p>--> </div> <script type="text/javascript"> jQuery(function($) { - $(".m-auth a").click(function(e) { + $("a.i-auth").click(function(e) { e.preventDefault(); var type = $(this).attr("href").replace(/.*type=/, ""); @@ -146,32 +156,32 @@ $(this).parent('li').addClass("current"); $("#tab-" + type).show(); }); - - $('.b-auth-item').each(function() { - var tabItem = $(this), - submitButton = tabItem.find(':submit'), - inputFields = tabItem.find('input:text, input:password, input[type=url]'); - - inputFields - .bind('change keyup', function () { - var someInputIsEmpty = false; - - inputFields.each(function () { - var currentInput = $(this); - - if ($.trim(currentInput.val()) === '') { - someInputIsEmpty = true; - } - }); - - if (someInputIsEmpty) { - submitButton.attr('disabled', 'disabled'); - } else { - submitButton.removeAttr('disabled'); - } - }) - .trigger('keyup'); - }); + + $('.b-auth-item').each(function() { + var tabItem = $(this), + submitButton = tabItem.find(':submit'), + inputFields = tabItem.find('input:text, input:password, input[type=url]'); + + inputFields + .bind('change keyup', function () { + var someInputIsEmpty = false; + + inputFields.each(function () { + var currentInput = $(this); + + if ($.trim(currentInput.val()) === '') { + someInputIsEmpty = true; + } + }); + + if (someInputIsEmpty) { + submitButton.attr('disabled', 'disabled'); + } else { + submitButton.removeAttr('disabled'); + } + }) + .trigger('keyup'); + }); $("form").submit(function(e) { var form = $(this); @@ -180,6 +190,8 @@ window.open("", "ljidentityauth", "width=800,height=600"); } }); + + }); </script> </body>