Changeset 265 for ether_megapoli/trunk/web/resources/js/classesForJQuery/LoginButton.js

Timestamp:

11/24/11 17:32:33 (13 years ago)

Author:

vmipsl

Message:

loginModule

File:

• ether_megapoli/trunk/web/resources/js/classesForJQuery/LoginButton.js (copied) (copied from ether_megapoli/trunk/web/resources/js/classesForJQuery/ComplexButton.js) (1 diff)

ether_megapoli/trunk/web/resources/js/classesForJQuery/LoginButton.js

@@ -1 +1 @@
 //********************************************************
-// Class Button
-// Display a button
+// Class LoginButton
+// Display a button to login or logout
 //
-// use jQuery
-// str value: Value to display in the button
-// dom parent: in which dom element to draw the button
-// int id: id of the dom element
-// func onclick: callback function when button clicked
-// str specificClass
-// classNameToAdd : use to avoid button's style for button_left, button_right and button_middle when button.css is used with pagination.css
-// useLonelyMidleImage : if true, we use image for parts left and right, otherwise, we only use an image for the middle
+// use jQuery && librairies from TwitterLogin
 //********************************************************
 
-var ComplexButton = Class.create( {
+var LoginButton = Class.create( {
 
     initialize: function( param )
     {
         // Init
-        this.id = param.id ? param.id : "";
-        this.parent = param.parent ? param.parent : false;
-        this.value = param.value ? param.value : "";
-        this.specificClass = param.specificClass ? param.specificClass : false;
-        this.callbackOnClick = param.onClick ? param.onClick : false;
-        this.classNameToAdd = param.classNameToAdd ? param.classNameToAdd : false;
-        this.useLonelyMidleImage = param.useLonelyMidleImage ? param.useLonelyMidleImage : false;
-        this.boolDisabled = false;
-        this.boolSelected = false;
-        this.boolDisplayed = false;
-
-        // Create button elements
-        this.divContainer = $( document.createElement( "div" ) );
-        this.divContainer.attr( {id:this.id, class:"complexButton"} );
-        if( this.specificClass )
-            this.divContainer.addClass( this.specificClass );
-        if( this.parent )
-            this.parent.append( this.divContainer );
-
-        this.divLeft = $( document.createElement( "div" ) );
-        if( this.classNameToAdd )
-            this.divLeft.addClass( "complexButton_left_" + this.classNameToAdd );
-        else if( !this.useLonelyMidleImage )
-            this.divLeft.addClass( "complexButton_left" );
-        this.divContainer.append( this.divLeft );
-
-        this.divMiddle = $( document.createElement( "div" ) );
-        this.divMiddle.attr( {id:"button_middle"} );
-        if( this.classNameToAdd )
-            this.divMiddle.addClass( "complexButton_middle_" + this.classNameToAdd );
-        else if( this.useLonelyMidleImage )
-            this.divMiddle.addClass( "complexButton_lonely_middle" );
-        else
-            this.divMiddle.addClass( "complexButton_middle" );
-        this.divContainer.append( this.divMiddle );
-
-        this.divText = $( document.createElement( "div" ) );
-        this.divText.attr( {id:"button_text"} );
-        this.divText.addClass( "complexButton_text" );
-        this.divText.html( this.value );
-        this.divMiddle.append( this.divText );
-
-        this.divRight = $( document.createElement( "div" ) );
-        if( this.classNameToAdd )
-            this.divRight.addClass( "complexButton_right_" + this.classNameToAdd );
-        else if( !this.useLonelyMidleImage )
-            this.divRight.addClass( "complexButton_right" );
-        this.divContainer.append( this.divRight );
-
-        // Define button events
-        this.divContainer.bind( 'click', this, this.onClick );
-    },
-
-    // Actions ********************************************************
-
-    appendChild :function( parent )
-    {
-        this.parent = parent;
-        this.parent.append( this.divContainer );
-    },
-
-    setDisabled:function( value )
-    {
-        if( value )
-            this.disable();
-        else
-            this.enable();
-    },
-
-    disable : function()
-    {
-        this.boolDisabled = true;
-        this.divContainer.addClassName( "disable" );
-    },
-
-    enable : function()
-    {
-        this.boolDisabled = false;
-        this.divContainer.removeClassName( "disable" );
-    },
-
-    setSelected : function( value )
-    {
-        this.boolSelected = value;
-        if( this.boolSelected )
-            this.divContainer.addClassName( "selected" );
-        else
-            this.divContainer.removeClassName( "selected" );
-    },
-
-    show : function()
-    {
-        this.boolDisplayed = true;
-        this.divContainer.style.display = "";
-    },
-
-    hide : function()
-    {
-        this.boolDisplayed = false;
-        this.divContainer.style.display = "none";
-    },
-
-    // Getter / Setter ********************************************************
-
-    getContainer: function()
-    {
-        return this.divContainer;
-    },
-
-    getDisable : function()
-    {
-        return this.boolDisabled;
-    },
-
-    getSelect: function()
-    {
-        return this.boolSelected;
-    },
-
-    setValue : function( value )
-    {
-        this.value = value;
-        this.divText.html( this.value );
-    },
-
-    setCallbackOnClick : function( value )
-    {
-        this.callbackOnClick = value;
-    },
-
-    // Events ********************************************************
-
-    onClick : function( event )
-    {
-        var contextEvent = event.data;
-        if( !contextEvent.getDisable() && (undefined == event.detail || 1 == event.detail) && contextEvent.callbackOnClick )
-            contextEvent.callbackOnClick();
+        this.parent = param.parent ? param.parent : document.body;
+        this.onClickLogin = param.anotherOnClickLogin ? param.anotherOnClickLogin : this.onClickLogin;
+        this.onClickLogout = param.anotherOnClickLogout ? param.anotherOnClickLogout : this.onClickLogout;
+        this.jSONUser = param.jSONUser ? param.jSONUser : false;
+        this.urlLogin = param.urlLogin ? param.urlLogin : false;
+        this.urlLogout = param.urlLogout ? param.urlLogout : false;
+
+        // Texts
+        this.connexionText = param.connexionText ? param.connexionText : loginTexts["app.connexion"];
+        this.loginText = param.loginText ? param.loginText : loginTexts["data.authentification.login"];
+        this.pwdText = param.pwdText ? param.pwdText : loginTexts["data.authentification.pwd"];
+        this.submitText = param.submitText ? param.submitText : loginTexts["data.authentification.sign"];
+        this.forgotPText = param.forgotPText ? param.forgotPText : loginTexts["data.authentification.pwdForget"];
+        this.forgotUNPHelpText = param.forgotUNPHelpText ? param.forgotUNPHelpText : loginTexts["data.authentification.loginForget.help"];
+        this.forgotUNPText = param.forgotUNPText ? param.forgotUNPText : loginTexts["data.authentification.loginForget"];
+        this.text1 = param.text1 ? param.text1 : loginTexts["app.admin"];
+        this.errorText = param.errorText ? param.errorText : loginTexts[this.errors];
+    },
+
+    // GETTER / SETTER ********************************************************
+    setJSONUser: function( jSONUser )
+    {
+        this.jSONUser = jSONUser;
+    },
+
+    getJSONUser: function()
+    {
+        return this.jSONUser;
+    },
+
+    // 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.append( 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.append( 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 inputForgotP = $( document.createElement( "p" ) );
+        inputForgotP.addClass( "forgot" );
+        var aForgotP = $( document.createElement( "a" ) );
+        aForgotP.attr( {id:"resend_password_link", href:"mailto:${webmaster}?subject=[MEGAPOLI] login"} );
+        aForgotP.append( this.forgotPText );
+        inputForgotP.append( aForgotP );
+        containerLoginForm.append( inputForgotP );
+
+        var inputForgotUNP = $( document.createElement( "p" ) );
+        inputForgotUNP.addClass( "username" );
+        var aForgotUNP = $( document.createElement( "a" ) );
+        aForgotUNP.attr( {id:"forgot_username_link", href:"mailto:${webmaster}?subject=[MEGAPOLI] password", title:this.forgotUNPHelpText} );
+        aForgotUNP.append( this.forgotUNPText );
+        inputForgotUNP.append( aForgotUNP );
+        containerLoginForm.append( inputForgotUNP );
+
+        var divErrors = $( document.createElement( "div" ) );
+        divErrors.attr( {id:"errors", class:"containerErrors"} );
+        containerLoginForm.append( divErrors );
+        this.containerErrors = $( "#errors" );
+    },
+
+    display: function()
+    {
+        if( this.jSONUser )
+        {
+            var textLogin = this.jSONUser.name + " " + this.jSONUser.firstName;
+            if( this.jSONUser.role && "coordinateur" == this.jSONUser.role )
+                textLogin += " (" + this.text1 + ")";
+
+            var loginButton = new ComplexButton( {value:textLogin, parent:this.parent, id:"button_login"} );
+
+            $( "#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"} );
+
+            var loginMiddle = $( "#button_login #button_middle" );
+            loginMiddle.empty();
+            loginMiddle.attr( {id:"topnav", class:"topnav complexButton_middle"} );
+            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();
+                }
+            } );
+        }
+    },
+
+    updateLogin: function()
+    {
+        this.parent.empty();
+        this.display();
+    },
+
+    displayLoginErrors: function ( text )
+    {
+        $( "#errors" ).show();
+        $( "#errors" ).html( text );
+    },
+
+    // TODO : vérifier cette méthode
+    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;
+
+        // TODO : passer en crypter ces infos !!!!!
+        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.updateLogin();
+        else
+            this.displayLoginErrors( loginTexts[this.errors] );
+    },
+
+    onHandleLogout: function( result )
+    {
+        this.errors = jQuery.parseJSON( result ).errors;
+        if( null == this.errors )
+        {
+            this.setJSONUser( false );
+            this.updateLogin();
+        }
+        else
+            this.displayLoginErrors( loginTexts[this.errors] );
+    },
+
+    // EVENTS ********************************************************
+    onClickLogin: function()
+    {
+        this.containerErrors.hide();
+        this.requestLogin();
+    },
+
+    onClickLogout: function()
+    {
+        this.requestLogout();
     }
+
 } );
+