Замена стандартного окна авторизации в скине New (+ Open ID)

Пошаманив часик переделал стандартное окно авторизации:
20110118215127498.jpg
на такое:
20110118215230074.jpg

Окно переделано под скин New с поддержкой плагина Open ID

Открываем файл templates\skin\new\header_top.tpl
Заменяем в нем код:
<form action="{router page='login'}" method="POST">
				<h3>{$aLang.user_authorization}</h3>
				{hook run='form_login_popup_begin'}
				<div class="lite-note"><a href="{router page='registration'}">{$aLang.registration_submit}</a><label for="">{$aLang.user_login}</label></div>
				<p><input type="text" class="input-text" name="login" tabindex="1" id="login-input"/></p>
				<div class="lite-note"><a href="{router page='login'}reminder/" tabindex="-1">{$aLang.user_password_reminder}</a><label for="">{$aLang.user_password}</label></div>
				<p><input type="password" name="password" class="input-text" tabindex="2" /></p>
				{hook run='form_login_popup_end'}
				<div class="lite-note"><button type="submit" onfocus="blur()"><span><em>{$aLang.user_login_submit}</em></span></button><label for="" class="input-checkbox"><input type="checkbox" name="remember" checked tabindex="3" >{$aLang.user_login_remember}</label></div>
				<input type="hidden" name="submit_login">
			</form>

на код:
<table>
		<tr>
		<td class="content1">
		<form action="{router page='login'}" method="POST">
				<h3>{$aLang.user_authorization}</h3> 
				<br />
				<div class="lite-note"><label for="">Логин или электропочта</label></div>
				<p><input type="text" class="input-text" name="login" tabindex="1" id="login-input"/><span class="lite-note"><a href="{router page='registration'}">{$aLang.registration_submit}</a></span></p>
				<div class="lite-note"><label for="">{$aLang.user_password}</label></div>
				<p><input type="password" name="password" class="input-text" tabindex="2" /><span class="lite-note"><a href="{router page='login'}reminder/" tabindex="-1">{$aLang.user_password_reminder}</a></span></p>
				<br />
				<div class="lite-note"><button type="submit" onfocus="blur()"><span><em>{$aLang.user_login_submit}</em></span></button><label for="" class="input-checkbox"><input type="checkbox" name="remember" checked tabindex="3" >{$aLang.user_login_remember}</label></div>
				<input type="hidden" name="submit_login">
			</form>
		</td>
		<td class="content2">  </td>
		
		<td class="content3" > 
		<center><h3><span class="lite-note2">Единый аккаунт</span></h3>
		{hook run='form_login_popup_begin'}
		<img src="{$sTemplateWebPathPlugin}img/76c08a.png" alt="{$aLang.openid}" style="margin-bottom: 10px;"/>
		{hook run='form_login_popup_end'}</center>
		</td>
		</tr>
		</table>


Затем открываем стилевой файл templates\skin\new\css\style.css
и заменяем код:
.lite-note a { float: right; font-size: 11px; }

.login-popup { z-index: 100; width: 492px;  }
.login-popup .input-text { width: 402px; padding: 4px 5px; }
.login-popup .content { background: #dcdedd url(../images/login-popup-bg.gif) repeat-x; padding: 15px 40px; }
.login-popup .login-popup-top { height: 14px; background: url(../images/login-popup-top.gif) no-repeat; width: 492px; position: relative; }
.login-popup .login-popup-bottom { height: 14px; background: url(../images/login-popup-bottom.gif) no-repeat; width: 492px; }
.login-popup .close-block { position: absolute; top: 10px; right: 10px; width: 14px; height: 14px; background: url(../images/close-block.gif) no-repeat; }

на код:
.lite-note a { float: right; font-size: 11px; text-decoration: none;}

.login-popup { z-index: 100; width: 492px;  }
.login-popup .input-text { width: 222px; padding: 4px 5px; }
.login-popup .content { background: #dcdedd url(../images/login-popup-bg.gif) repeat-x; padding: 15px 30px; }
.login-popup .content1 {width: 222px; padding-right: 10px;}
.login-popup .content2 {width: 1px; background: #dedede}
.login-popup .content3 {width: 230px;  padding-left: 10px;}
.login-popup .login-popup-top { height: 14px; background: url(../images/login-popup-top.gif) no-repeat; width: 492px; position: relative; }
.login-popup .login-popup-bottom { height: 14px; background: url(../images/login-popup-bottom.gif) no-repeat; width: 492px; }
.login-popup .close-block { position: absolute; top: 10px; right: 10px; width: 14px; height: 14px; background: url(../images/close-block.gif) no-repeat; }


И наконец закидываем картинку 76c08a.png в папку plugins\openid\templates\skin\new\img\

Чистим кэш и радуемся новому окону авторизации =)
P.S.
Картинка 76c08a.png (после сохранения переименуйте её на 76c08a.png):
20110119182321477.png

40 комментариев

avatar
А перезалей картинки подалста!
avatar
не видны? минутку…
avatar
кликните на превьюшку, и вас перекинет на фотку хорошего качества =)
avatar
Видим. Вери гуд. Интересно.
avatar
перезалил?
avatar
не видно?
avatar
Если выявите ошибки — сильно не серчайте. Как-никак 3-ю неделю с LS работаю =)
avatar
Хорошее решение. Поможет людям, которые не знают что такое Open ID.
avatar
Как раз думал как такое сделать и ВНЕЗАПНО. =) Спасибо. Вы избавили меня от ненужных дум.
avatar
+ вам
avatar
Рад помочь)
avatar
Логотип Gmail выглядит вот так:

avatar
картинка не отображается.
avatar
avatar
все равно не видно) нашел в гугле. Заменил, и добавил в топик
avatar
Все сделал как написали. Спасибо, давно хотел именно такое решение сделать!
avatar
Рад, что вам понравилось)
avatar
А я как раз бился над тем, чтобы в первом окне были не просто иконки, а сразу же кнопки для авторизации без перехода на login/openid ибо так логично пользователю, один раз нажал кнопку войти вторым кликом выбрал сервис авторизации… а тут пускаем рядового пользователя гулять по однозадачным страницам… нехорошо. К сожалению я больше дизайнер, чем программист магу и не разобраться, если кому то захочется доработать задумку то все, я уверен, будут рады.
avatar
поработаю над этим. Не обещаю, ибо тоже не сильный программист, но попробую)
avatar
У меня, к сожалению, выдавало ошибку:
Warning: Smarty error: unable to read resource: "/Applications/MAMP/htdocs/sitename.ru/plugins/openid/templates/skin/new/inject_login.tpl" in /Applications/MAMP/htdocs/sitename.ru/engine/lib/external/Smarty-2.6.19/libs/Smarty.class.php on line 1092
Нормально заработало после того как создал пустой inject_login.tpl.

Спасибо вам.
avatar
странно. У меня такой проблемы не возникало…
avatar
у меня тоже
avatar
не видно фотографии
avatar
Такая же ситуация, создал пустой inject_login.tpl ошибка исчезла, но картинка 76c08a.png не отображается
avatar
получилось такое www.easyfoto.ru/20110121135514201.jpg
avatar
Вот и у меня так же некрасиво вышло… Вроде все перепроверил, не могу найти подвох.
avatar
Как всегда… Все оказалось просто: через админку кэш js и css почистите, и ура!
avatar
очистел кеэш везде( браузер, админка) теперь всё нормально)!
avatar
Вот и отлично!
avatar
Блин, молорик! Мы как раз с автором самого компонента это обсуждали. Вообще, давай немного пообщаемся? Не против?
avatar
подскажите, пожалуйста, у меня проблема в том, что эта картинка не работает, а именно нажимаю на нее, и ничего не происходит. не работает как ссылка… скажите, нужно дополнительно что-то для этого делать?
avatar
<a href="http://сайт.ру/login/openid/"><img src="{$sTemplateWebPathPlugin}img/76c08a.png" alt="{$aLang.openid}" style="margin-bottom: 10px;"/></a>
avatar
Спасибо!
avatar
идет разработка по авторизации в один клик — когда сделаем, будет нажиматься и эта картинка, а пока она для красоты)
avatar
То есть чтоб каждая иконка отвечала за авторизация с конкретного сайта?
avatar
именно
avatar
Думаю будет более удобно! Спасибо, за участие в подобных разработках!

Коль ты способствуешь улучшенной интеграции с соц. сетями, то посмотри другой пост, и что об этом думаешь?
livestreet.ru/blog/wishlist/6356.html
avatar
Спасибо за работу! С нетерпением жду новую версию с активными кнопками на главной форме авторизации.
  • emb
  • 0
avatar
кто хотел авторизацию в один клик сразу по иконке — вот набросал за 5 мин:

в header.top заменяем
<table>
                <tr>
                <td class="content1">
                <form action="{router page='login'}" method="POST">
                                <h3>{$aLang.user_authorization}</h3> 
                                <br />
                                <div class="lite-note"><label for="">Логин или электропочта</label></div>
                                <p><input type="text" class="input-text" name="login" tabindex="1" id="login-input"/><span class="lite-note"><a href="{router page='registration'}">{$aLang.registration_submit}</a></span></p>
                                <div class="lite-note"><label for="">{$aLang.user_password}</label></div>
                                <p><input type="password" name="password" class="input-text" tabindex="2" /><span class="lite-note"><a href="{router page='login'}reminder/" tabindex="-1">{$aLang.user_password_reminder}</a></span></p>
                                <br />
                                <div class="lite-note"><button type="submit" onfocus="blur()"><span><em>{$aLang.user_login_submit}</em></span></button><label for="" class="input-checkbox"><input type="checkbox" name="remember" checked tabindex="3" >{$aLang.user_login_remember}</label></div>
                                <input type="hidden" name="submit_login">
                        </form>
                </td>
                <td class="content2">  </td>
                
                <td class="content3" > 
                <center><h3><span class="lite-note2">Единый аккаунт</span></h3>
                {hook run='form_login_popup_begin'}
                <img src="{$sTemplateWebPathPlugin}img/76c08a.png" alt="{$aLang.openid}" style="margin-bottom: 10px;"/>
                {hook run='form_login_popup_end'}</center>
                </td>
                </tr>
                </table>

на
<table>
                <tr>
                <td class="content1">
                <form action="{router page='login'}" method="POST">
                                <h3>{$aLang.user_authorization}</h3> 
                                <br />
                                <div class="lite-note"><label for="">Логин или электропочта</label></div>
                                <p><input type="text" class="input-text" name="login" tabindex="1" id="login-input"/><span class="lite-note"><a href="{router page='registration'}">{$aLang.registration_submit}</a></span></p>
                                <div class="lite-note"><label for="">{$aLang.user_password}</label></div>
                                <p><input type="password" name="password" class="input-text" tabindex="2" /><span class="lite-note"><a href="{router page='login'}reminder/" tabindex="-1">{$aLang.user_password_reminder}</a></span></p>
                                <br />
                                <div class="lite-note"><button type="submit" onfocus="blur()"><span><em>{$aLang.user_login_submit}</em></span></button><label for="" class="input-checkbox"><input type="checkbox" name="remember" checked tabindex="3" >{$aLang.user_login_remember}</label></div>
                                <input type="hidden" name="submit_login">
                        </form>
                </td>
                <td class="content2">  </td>
                
                <td class="content3" > 
                <center><h3><span class="lite-note2">Единый аккаунт</span></h3>
                {hook run='form_login_popup_begin'}
                 <div class="openid-block">
	
	
	<form method="post" action="{router page='login'}openid/enter/" name="fopenid" id="openid_form">
		<div style="overflow: hidden; zoom: 1;">
			<input type="text" style="float: left" class="openid-text" maxlength="255" name="open_login" id="open_login" hidden />
			<input type="hidden" name="submit_open_login" id="submit_open_login_hidden" value="go"/>
			<input type="hidden" value="{$_aRequest.return}" name="return" />
			<a href="#" class="openid-login" onclick="getEl('openid_form').submit(); return false;"></a>
		</div>
		
		<div class="openid-services">
		    <a href="{router page='login'}/openid" style="display:inline-block;width:50px;height:50px;background:url(/plugins/openid/templates/skin/default/img/76c08a.png) -5px -5px"/></a>
			<a href="javascript: openid_fb()" style="display:inline-block;width:50px;height:50px;background:url(/plugins/openid/templates/skin/default/img/76c08a.png) -60px -5px"/></a>
			<a href="javascript: openid_twitter()" style="display:inline-block;width:50px;height:50px;background:url(/plugins/openid/templates/skin/default/img/76c08a.png) -115px -5px"/></a>
			
			<a href="javascript: openid_google()" style="display:inline-block;width:50px;height:50px;background:url(/plugins/openid/templates/skin/default/img/76c08a.png) -5px -65px"/></a>
			<a href="{router page='login'}/openid" style="display:inline-block;width:50px;height:50px;background:url(/plugins/openid/templates/skin/default/img/76c08a.png) -60px -65px"/></a>
			<a href="javascript: openid_vk()" style="display:inline-block;width:50px;height:50px;background:url(/plugins/openid/templates/skin/default/img/76c08a.png) -115px -65px"/></a>	
			<a href="javascript: openid_yandex()" style="display:inline-block;width:50px;height:50px;background:url(/plugins/openid/templates/skin/default/img/76c08a.png) -8px -115px"/></a>
							
		</div>					
	</form>
</div>
			
<script language="JavaScript" type="text/javascript">
var sVkTransportPath='{cfg name='plugin.openid.vk.transport_path'}';
var iVkAppId='{cfg name='plugin.openid.vk.id'}';
var iFbAppId='{cfg name='plugin.openid.fb.id'}';
var sVkLoginPath='{$aRouter.login}'+'openid/vk/';
var sFbLoginPath='{$aRouter.login}'+'openid/fb/';
var sTwitterLoginPath='{$aRouter.login}'+'openid/twitter/?authorize=1';
{literal}
	function getEl(id) {
		return document.getElementById(id);
	}

	function openid_yandex() {
		getEl('open_login').value='openid.yandex.ru';		
		getEl('openid_form').submit();
	}
	
	function openid_rambler() {
		getEl('open_login').value='rambler.ru';		
		getEl('openid_form').submit();
	}
	
	function openid_google() {
		getEl('open_login').value='https://www.google.com/accounts/o8/id';		
		getEl('openid_form').submit();
	}
	
	function openid_vk() {		
		VK.Auth.getLoginStatus(function(response) {
			if (response.session) {
				window.location = sVkLoginPath;
			} else {
				VK.Auth.login(function(response) {
					if (response.session) {
						window.location = sVkLoginPath;
					}
				},VK.access.FRIENDS);				
			}
		});
	}
	
	function openid_fb() {		
		FB.getLoginStatus(function(response) {
			if (response.session) {
				window.location = sFbLoginPath;
			} else {
				FB.login(null,{perms:'read_stream,publish_stream,offline_access,email'});				
				FB.login(function(response) {
					if (response.session) {
						window.location = sFbLoginPath;
					}
				});				
			}
		});
	}
	
	function openid_twitter() {
		window.location = sTwitterLoginPath;
	}
	
	VK.init({apiId: iVkAppId, nameTransportPath: sVkTransportPath});
	FB.init({appId: iFbAppId, status: true, cookie: true, xfbml: true});
		
</script>
{/literal}
{hook run='form_login_popup_end'}</center>
                </td>
                </tr>
                </table>
avatar
точнее так:
<table>
                <tr>
                <td class="content1">
                <form action="{router page='login'}" method="POST">
                                <h3>{$aLang.user_authorization}</h3> 
                                <br />
                                <div class="lite-note"><label for="">Логин или электропочта</label></div>
                                <p><input type="text" class="input-text" name="login" tabindex="1" id="login-input"/><span class="lite-note"><a href="{router page='registration'}">{$aLang.registration_submit}</a></span></p>
                                <div class="lite-note"><label for="">{$aLang.user_password}</label></div>
                                <p><input type="password" name="password" class="input-text" tabindex="2" /><span class="lite-note"><a href="{router page='login'}reminder/" tabindex="-1">{$aLang.user_password_reminder}</a></span></p>
                                <br />
                                <div class="lite-note"><button type="submit" onfocus="blur()"><span><em>{$aLang.user_login_submit}</em></span></button><label for="" class="input-checkbox"><input type="checkbox" name="remember" checked tabindex="3" >{$aLang.user_login_remember}</label></div>
                                <input type="hidden" name="submit_login">
                        </form>
                </td>
                <td class="content2">  </td>
                
                <td class="content3" > 
                <center><h3><span class="lite-note2">Единый аккаунт</span></h3>
                {hook run='form_login_popup_begin'}
                
                 <div class="openid-block">

<div id="vk_api_transport"></div>
<script src="http://vkontakte.ru/js/api/openapi.js" type="text/javascript" charset="windows-1251"></script>

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
	
	<form method="post" action="{router page='login'}openid/enter/" name="fopenid" id="openid_form">
		<div style="overflow: hidden; zoom: 1;">
			<input type="text" style="float: left" class="openid-text" maxlength="255" name="open_login" id="open_login" hidden />
			<input type="hidden" name="submit_open_login" id="submit_open_login_hidden" value="go"/>
			<input type="hidden" value="{$_aRequest.return}" name="return" />
			<a href="#" class="openid-login" onclick="getEl('openid_form').submit(); return false;"></a>
		</div>
		
		<div class="openid-services">
		    <a href="{router page='login'}/openid" style="display:inline-block;width:50px;height:50px;background:url(/plugins/openid/templates/skin/default/img/76c08a.png) -5px -5px"/></a>
			<a href="javascript: openid_fb()" style="display:inline-block;width:50px;height:50px;background:url(/plugins/openid/templates/skin/default/img/76c08a.png) -60px -5px"/></a>
			<a href="javascript: openid_twitter()" style="display:inline-block;width:50px;height:50px;background:url(/plugins/openid/templates/skin/default/img/76c08a.png) -115px -5px"/></a>
			
			<a href="javascript: openid_google()" style="display:inline-block;width:50px;height:50px;background:url(/plugins/openid/templates/skin/default/img/76c08a.png) -5px -65px"/></a>
			<a href="{router page='login'}/openid" style="display:inline-block;width:50px;height:50px;background:url(/plugins/openid/templates/skin/default/img/76c08a.png) -60px -65px"/></a>
			<a href="javascript: openid_vk()" style="display:inline-block;width:50px;height:50px;background:url(/plugins/openid/templates/skin/default/img/76c08a.png) -115px -65px"/></a>	
			<a href="javascript: openid_yandex()" style="display:inline-block;width:50px;height:50px;background:url(/plugins/openid/templates/skin/default/img/76c08a.png) -8px -115px"/></a>
			
		
				
		</div>					
	</form>
</div>
		
		
<script language="JavaScript" type="text/javascript">
var sVkTransportPath='{cfg name='plugin.openid.vk.transport_path'}';
var iVkAppId='{cfg name='plugin.openid.vk.id'}';
var iFbAppId='{cfg name='plugin.openid.fb.id'}';
var sVkLoginPath='{$aRouter.login}'+'openid/vk/';
var sFbLoginPath='{$aRouter.login}'+'openid/fb/';
var sTwitterLoginPath='{$aRouter.login}'+'openid/twitter/?authorize=1';
{literal}
	function getEl(id) {
		return document.getElementById(id);
	}

	function openid_yandex() {
		getEl('open_login').value='openid.yandex.ru';		
		getEl('openid_form').submit();
	}
	
	function openid_rambler() {
		getEl('open_login').value='rambler.ru';		
		getEl('openid_form').submit();
	}
	
	function openid_google() {
		getEl('open_login').value='https://www.google.com/accounts/o8/id';		
		getEl('openid_form').submit();
	}
	
	function openid_vk() {		
		VK.Auth.getLoginStatus(function(response) {
			if (response.session) {
				window.location = sVkLoginPath;
			} else {
				VK.Auth.login(function(response) {
					if (response.session) {
						window.location = sVkLoginPath;
					}
				},VK.access.FRIENDS);				
			}
		});
	}
	
	function openid_fb() {		
		FB.getLoginStatus(function(response) {
			if (response.session) {
				window.location = sFbLoginPath;
			} else {
				FB.login(null,{perms:'read_stream,publish_stream,offline_access,email'});				
				FB.login(function(response) {
					if (response.session) {
						window.location = sFbLoginPath;
					}
				});				
			}
		});
	}
	
	function openid_twitter() {
		window.location = sTwitterLoginPath;
	}
	
	VK.init({apiId: iVkAppId, nameTransportPath: sVkTransportPath});
	FB.init({appId: iFbAppId, status: true, cookie: true, xfbml: true});
		
</script>
{/literal}

                
                {hook run='form_login_popup_end'}</center>
                </td>
                </tr>
                </table>
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.