Ir para conteúdo


Foto

Exemplo de Janela de Login + Alerta Caps Lock


  • Por favor, faça o login para responder
20 respostas neste tópico

#21 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 28 November 2008 - 23:40

Ola pessoal, desculpe a falta de atenção nesse topico, fiquei sem responder a algumas duvidas
eu tava sem tempo de acessar a net, porque estava com muito serviço, e tbm nao estava recebendo avisos que o topico tinha respostas novas

mas blz, só quero deixar outro exemplo de login, porque hj em dia uso outro esquema que acho o melhor ate o momento

to usando esse login:

http://extjs.com/for...ght=LoginDialog

exemplo online:

http://fbdevzone.com/logindlg/

acabei fazendo umas funcionalidades amais no codigo LoginDialog.js

acrescentei logo no inicil do metodo submit : function ()

funcionalidades que nao tem no original
quando aperta a tecla enter o focu vai pro campo senha, e depois aperta enter da o submit

se o campo estiver vazio ele nao da submit e o focu vai para o campo vazio

    submit : function ()
    {
		var login = Ext.getCmp(this.usernameId);
		var senha = Ext.getCmp(this.passwordId);
				
		if(Ext.isEmpty(login.getValue())) {
			login.focus();
			return false;
		} 		

		if(Ext.isEmpty(senha.getValue())) {
			senha.focus();
			return false;
		}
...

e para usar o login criei esse script separado:

ex-login.js:

Ext.ns("Ext.ux.Login");

Ext.ux.Login = function() {	
	Ext.BLANK_IMAGE_URL = '../images/default/s.gif';
	Ext.QuickTips.init();	
	Ext.form.Field.prototype.msgTarget = 'side';
	
	return {
		init: function() {		
			try {
				this.Logar();								
			} catch(e) {
				Ext.MessageBox.show({
					title    : String.format('{0}', e.name),
					msg      : String.format('<b>Arquivo</b> {0}<br /><b>Linha</b> {1}<br /><b>Mensagem</b>: <span style="color:red;">{2}</span>', e.fileName, e.lineNumber, e.message),
					buttons  : Ext.MessageBox.OK,
					closable : false,
					icon     : Ext.MessageBox.ERROR
				});						
			} finally {
				
			}
		},
		
		Logar: function() {
			var loginDlg;					
			if(!(loginDlg instanceof Ext.ux.albeva.LoginDialog)){
				loginDlg = new Ext.ux.albeva.LoginDialog({
					url           : 'logar',
					method        : 'POST',
					basePath      : "../public/images",
					title         : 'Empresa',
					message       : 'Area Restrita',
					waitTitle     : 'Por favor aguarde',
					waitMessage   : 'Carregando perfil do usuario',
					loginButton   : 'Entrar',
					usernameLabel : 'Nome',
					usernameField : 'nome',
					usernameId    : 'nome',
					usernameVtype : 'alphanum',
					passwordLabel : 'Senha',
					passwordField : 'senha',
					passwordId    : 'senha',
					passwordVtype : 'alphanum',							
					modal         : true				
				});
			}
			loginDlg.show();

		    loginDlg.on ('success', function () {		        
		        loginDlg.close();
				window.location = "../";
		    }, this);			
		}
	}
}();
Ext.onReady(Ext.ux.Login.init, Ext.ux.Login, true);

estou satisfeito com esse tipo de login =)

agora sobre o capslock nunca tive problema nenhum com ele e sempre ele aparece do lado direito da janela de login

vou postar de novo o script

capslock.jss

var CapsLock = {
	init: function() {
		var id = Ext.id();
		this.alertBox = Ext.DomHelper.append(document.body,{
			tag: 'div',
			style: 'width: 8em',
			children: [{
				tag: 'div',
				style: 'text-align: center; color: red;',
				html: 'Caps Lock está ligado!',
				id: id
			}]
		}, true);
		Ext.fly(id).boxWrap();
		this.alertBox.hide();
		var pwds = Ext.query("INPUT[type='password']");
		for(var i = 0; i < pwds.length; i++) {
			Ext.get(pwds[i].id).on(
				'keypress',
				this.keypress.createDelegate(this,pwds[i],true),
				this
			);
		}
	},
	keypress: function(e, el) {
		var charCode = e.getCharCode();
		if(
			(e.shiftKey && charCode >= 97 && charCode <= 122) ||
			(!e.shiftKey && charCode >= 65 && charCode <= 90)
		){
			this.showWarning(el);
		} else {
			this.hideWarning();
		}
	},
	showWarning: function(el) {
		var x = Ext.fly(el).getX();
		var width = Ext.fly(el).getWidth();
		var y = Ext.fly(el).getY();
		this.alertBox.setXY([x + width + 40,y]);
		this.alertBox.show();
	},
	hideWarning: function() {
		this.alertBox.hide();
	}
}
Ext.onReady(CapsLock.init, CapsLock, true);





0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos