source: ether_megapoli/trunk/web/resources/js/classesForJQuery/LoginButton.js @ 424

//********************************************************
// Class LoginButton
// Display a button to login or logout
//
// use jQuery && librairies from TwitterLogin
// isNeededInscription : true if we need the part "inscription for a new user"
//********************************************************

var LoginButton = Class.create( {

    initialize: function( param )
    {
        // Init
        this.parent = param.parent ? param.parent : document.body;
        this.anotherOnClickLogin = param.anotherOnClickLogin ? param.anotherOnClickLogin : false;
        this.anotherOnClickLogout = param.anotherOnClickLogout ? param.anotherOnClickLogout : false;
        this.jSONUser = param.jSONUser ? param.jSONUser : false;
        this.urlLogin = param.urlLogin ? param.urlLogin : false;
        this.urlLogout = param.urlLogout ? param.urlLogout : false;
        this.classNameToAdd = param.classNameToAdd ? param.classNameToAdd : false;
        this.isNeededInscription = param.isNeededInscription ? param.isNeededInscription : false;
        this.callbackInscription = param.callbackInscription ? param.callbackInscription : false;
        this.webmaster = param.webmaster ? param.webmaster : false;

        // Texts
        this.connexionText = param.connexionText ? param.connexionText : loginTexts["app.connexion"];
        this.loginText = param.loginText ? param.loginText : loginTexts["login"];
        this.pwdText = param.pwdText ? param.pwdText : loginTexts["login.password"];
        this.submitText = param.submitText ? param.submitText : loginTexts["login.sign"];
        this.forgotPText = param.forgotPText ? param.forgotPText : loginTexts["login.pwdForget"];
        this.forgotUNPHelpText = param.forgotUNPHelpText ? param.forgotUNPHelpText : loginTexts["login.loginForget.help"];
        this.forgotUNPText = param.forgotUNPText ? param.forgotUNPText : loginTexts["login.loginForget"];
        this.inscriptionText = param.inscriptionText ? param.inscriptionText : loginTexts["login.inscription"];
        this.errorText = param.errorText ? param.errorText : loginTexts[this.errors];

        this.containerMainErrors = $( "#errors" );
    },

    // GETTER / SETTER ********************************************************
    setJSONUser: function( jSONUser )
    {
        this.jSONUser = jSONUser;
    },

    getJSONUser: function()
    {
        return this.jSONUser;
    },

    getJSONUserRole: function()
    {
        return this.jSONUser.role;
    },

    // ACTIONS ********************************************************
    createLoginForm: function()
    {
        var containerLoginForm = $( document.createElement( "fieldset" ) );
        containerLoginForm.attr( {id:"signin_menu"} );
        this.parent.append( containerLoginForm );

        var labelLogin = $( document.createElement( "label" ) );
        labelLogin.attr( {for:"login"} );
        labelLogin.html( this.loginText );
        var inputLogin = $( document.createElement( "input" ) );
        inputLogin.attr( {id:"login", name:"login", tabIndex:"4", type:"text"} );
        containerLoginForm.append( labelLogin );
        containerLoginForm.append( inputLogin );

        var labelPwd = $( document.createElement( "label" ) );
        labelPwd.attr( {for:"pwd"} );
        labelPwd.html( this.pwdText );
        var inputPwd = $( document.createElement( "input" ) );
        inputPwd.attr( {id:"pwd", name:"pwd", tabIndex:"5", type:"password"} );
        containerLoginForm.append( labelPwd );
        containerLoginForm.append( inputPwd );

        var inputSubmitP = $( document.createElement( "p" ) );
        inputSubmitP.addClass( "remember" );
        var inputSubmit = $( document.createElement( "input" ) );
        inputSubmit.attr( {id:"signin_submit", value:this.submitText, tabIndex:"6", type:"submit"} );
        inputSubmit.bind( "click", jQuery.proxy( this.onClickLogin, this ) );
        inputSubmitP.append( inputSubmit );
        containerLoginForm.append( inputSubmitP );

        var inputForgotUNP = $( document.createElement( "p" ) );
        inputForgotUNP.addClass( "username" );
        var aForgotUNP = $( document.createElement( "a" ) );
        aForgotUNP.attr( {id:"forgot_username_link", href:"mailto:" + this.webmaster + "?subject=login", title:this.forgotUNPHelpText} );
        aForgotUNP.html( this.forgotUNPText );
        inputForgotUNP.append( aForgotUNP );
        containerLoginForm.append( inputForgotUNP );

        var inputForgotP = $( document.createElement( "p" ) );
        inputForgotP.addClass( "forgot" );
        var aForgotP = $( document.createElement( "a" ) );
        aForgotP.attr( {id:"resend_password_link", href:"mailto:" + this.webmaster + "?subject=password"} );
        aForgotP.html( this.forgotPText );
        inputForgotP.append( aForgotP );
        containerLoginForm.append( inputForgotP );

        if( this.isNeededInscription )
        {
            var inputInscription = $( document.createElement( "p" ) );
            inputInscription.addClass( "inscription" );
            var aInscription = $( document.createElement( "a" ) );
            aInscription.attr( {id:"inscription_link", href:"#"} );
            aInscription.html( this.inscriptionText );
            aInscription.bind( "click", jQuery.proxy( this.onClickInscription, this ) );
            inputInscription.append( aInscription );
            containerLoginForm.append( inputInscription );
        }

        var divErrors = $( document.createElement( "div" ) );
        divErrors.attr( {id:"errorsLogin", class:"containerErrors"} );
        containerLoginForm.append( divErrors );
        this.containerErrors = $( "#errorsLogin" );
    },

    display: function()
    {
        if( this.jSONUser )
        {
            var textLogin = this.jSONUser.name + " " + this.jSONUser.firstName + " (" + loginTexts[this.jSONUser.role] + ")";

            var loginButton = new ComplexButton( {value:textLogin, parent:this.parent, id:"button_login", classNameToAdd: this.classNameToAdd} );

            $( "#button_login #button_middle #button_text" ).addClass( "containerUserLogout" );

            var loginMiddle = $( "#button_login #button_middle" );
            var divImgLogout = $( document.createElement( "div" ) );
            divImgLogout.addClass( "containerImgLogout" );
            divImgLogout.append( "<img src='resources/images/utils/logout.png' width='15px' height='15px'/>" );
            divImgLogout.bind( "click", jQuery.proxy( this.onClickLogout, this ) );
            loginMiddle.append( divImgLogout );
        }
        else
        {
            this.createLoginForm();

            var loginButton = new ComplexButton( {value:this.connexionText, parent:this.parent, id:"button_login", classNameToAdd: this.classNameToAdd} );

            var loginMiddle = $( "#button_login #button_middle" );
            loginMiddle.empty();
//            loginMiddle.attr( {id:"topnav", class:"topnav complexButton_middle"} );
            loginMiddle.attr( {id:"topnav"} );
            var aLogin = $( document.createElement( "a" ) );
            aLogin.attr( {id:"button_login_a", href:"login", class:"signin"} );
            aLogin.html( "<span>" + this.connexionText + "</span>" );
            loginMiddle.append( aLogin );

            $( ".signin" ).click( function( e )
            {
                e.preventDefault();
                $( "fieldset#signin_menu" ).toggle();
                $( ".signin" ).toggleClass( "menu-open" );
            } );

            $( "fieldset#signin_menu" ).mouseup( function()
            {
                return false
            } );

            $( document ).mouseup( function( e )
            {
                if( 0 == $( e.target ).parent( "a.signin" ).length )
                {
                    $( ".signin" ).removeClass( "menu-open" );
                    $( "fieldset#signin_menu" ).hide();
                }
            } );
        }
    },

    updateLoginOrLogout: function()
    {
        this.parent.empty();
        this.display();
        this.containerMainErrors.hide();
    },

    displayLoginErrors: function ( text )
    {
        this.containerErrors.show();
        this.containerErrors.html( text );
    },

    showLogin: function( text )
    {
        if( $( "fieldset#signin_menu" ) && $( ".signin" ) )
        {
            $( "fieldset#signin_menu" ).toggle();
            $( ".signin" ).toggleClass( "menu-open" );
            if( text )
                this.displayLoginErrors( text );
        }
        else
            alert( this.displayLoginErrors( text ) );
    },

    // REQUESTS ********************************************************
    requestLogin: function()
    {
        if( !this.urlLogin )
            return;

        var login = $( "#login" ).val();
        var pwd = $( "#pwd" ).val();
        $.ajax( {
            url: this.urlLogin + "&login=" + login + "&pwd=" + pwd,
            success:jQuery.proxy( this.onHandleLogin, this )
        } );
    },

    requestLogout: function()
    {
        if( !this.urlLogout )
            return;

        $.ajax( {
            url: this.urlLogout,
            success:jQuery.proxy( this.onHandleLogout, this )
        } );
    },

    // HANDLES ********************************************************
    onHandleLogin: function( result )
    {
        this.errors = jQuery.parseJSON( result ).errors;
        this.setJSONUser( null != jQuery.parseJSON( result ).jSONPeople ? jQuery.parseJSON( result ).jSONPeople : false );
        if( null == this.errors )
            this.updateLoginOrLogout();
        else
            this.displayLoginErrors( loginTexts[this.errors] );

        if( this.anotherOnClickLogin )
            this.anotherOnClickLogin();
    },

    onHandleLogout: function( result )
    {
        this.errors = jQuery.parseJSON( result ).errors;
        if( null == this.errors )
        {
            this.setJSONUser( false );
            this.updateLoginOrLogout();
        }
        else
            this.displayLoginErrors( loginTexts[this.errors] );

        if( this.anotherOnClickLogout )
            this.anotherOnClickLogout();
    },

    // EVENTS ********************************************************
    onClickLogin: function()
    {
        this.containerErrors.hide();
        this.requestLogin();
    },

    onClickLogout: function()
    {
        this.requestLogout();
    },

    onClickInscription: function()
    {
        this.containerErrors.hide();
        if( this.callbackInscription )
            this.callbackInscription();
    }

} );