[ljcom] r10518: LJINT-425: new header for external autho...
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>