Asignar avatar

avatar.js

function getAvatar(){
    var avatars = ["01","02","03","04","05","06","07","08"];
    var rand = Math.floor(Math.random() * avatars.length);
    
    return '//assets.diariolibre.com/img/midl/miDLavatar-'+avatars[rand]+'.png';
}

var tmp_avatar = getAvatar();

function loadUserData(token){
        var settings = {
            "url": BASE_URI+"/accounts?",
            "method": "GET",
            "timeout": 0,
            "headers": {
            "Authorization": token
            },
        };

        $.ajax(settings).done(function (response) {
        
            if(typeof response.data !== 'undefined'){

                $("#auth-email").val(firebase.auth().currentUser.email).prop("disabled", true);
                typeof response.data.name !== null ? $("#auth-name").val(response.data.name) : $("#auth-surname").val(firebase.auth().currentUser.displayName);
                typeof response.data.last_name !== null ? $("#auth-surname").val(response.data.last_name) : $("#auth-surname").val('');

                firebase.auth().currentUser.photoURL !== null ? 
                    $('.data-user-welcome img').attr("src",firebase.auth().currentUser.photoURL).show() : 
                    $('.data-user-welcome img').attr("src",tmp_avatar).show();
                
                typeof firebase.auth().currentUser.email !== null ?
                    $("#auth-email").val(firebase.auth().currentUser.email).prop("disabled", true) :
                    $("#auth-email").val("").prop("disabled", false);

            }else{
                $("#auth-email").val(firebase.auth().currentUser.email);
                $("#auth-name").val(firebase.auth().currentUser.displayName);
            }
            
        });
    }


function sendRegisterWithToken(token) {
        
        var authEmail = $("#auth-email").val();
        var authName = $("#auth-name").val();
        var authSurname = $("#auth-surname").val();
        authPhoto = tmp_avatar;
    
        var validate = ValidateForm();
        if(validate == true) {
            var settings = {
                    "url": BASE_URI+"/accounts",
                    "method": "POST",
                    "timeout": 0,
                    "headers": {
                    "Content-Type": "application/x-www-form-urlencoded",
                    "Authorization": token
                },
                    "data": {
                    "name": authName,
                    "last_name": authSurname,
                    "email": authEmail,
                    "avatar": authPhoto
                }
            };

            $.ajax(settings).done(function (response) {
                console.log("Respuesta POST");
                
                console.log(response);
                //loadUserData(token);

                var user = firebase.auth().currentUser;

                user.updateProfile({
                    photoURL: authPhoto,
                    displayName: authName+ ' '+authSurname
                }).then(function() {
                    user.updateEmail(authEmail).then(function() {
                    // Update successful.
                    }).catch(function(error) {
                    // An error happened.
                    });
                    console.log(user);
                    window.location.replace("perfil-informacion.html");
                }).catch(function(error) {
                    console.log(error);
                });

            }) .fail(function(error) {
                console.log(error);
                var errorMsg = error.responseJSON.message;
                showError(errorMsg);
                $(".alert-box").show(100);
            });
        } else {
            return false;
        }
    }

function overlayForm(){
        $(".signupBox .sb_right").addClass("overlayFormFlex");
        $(".sbr_title.fwp").html("Usted ya se encuentra logueado");
        var html = '<div class="overlayForm">';
                html += '<a href="#" class="sbr_btn email logout">Entrar con otras credenciales</a>';
                html += '<a href="mi-dl.html" class="sbr_btn email">Ir a MiDL</a>';
            html += '</div>';

        return html;
    }

var loginNow = false;
firebase.auth().onAuthStateChanged(function(user) {
        $(".fwp.sbrSignupCont").show();
        $(".sbr_title").show();
        if (user) {
            $(".sbr_input").removeClass("error-field");
            $(".alert-box").hide(100);

            var emailVerified =  firebase.auth().currentUser.emailVerified;
          
            if(!emailVerified){
                user.sendEmailVerification();
            }
        
            if(loginNow){
                user.getIdToken().then(function(data) {
                    loadUserData(data);
                });
            }else{
                $(".fwp.sbrSignupCont").html(overlayForm());
            }

        }
    });

Procesos para asignar avatares

Detalles de funciones donde se asigna de forma aleatoria el avatar del usuario al momento de registrarse y luego de actualizar su información.

Retornar avatar aleatorio

Para retornar un avatar aleatorio al momento del registro utilizamos la siguiente función:

function getAvatar(){
    var avatars = ["01","02","03","04","05","06","07","08"];
    var rand = Math.floor(Math.random() * avatars.length);
    
    return '//assets.diariolibre.com/img/midl/miDLavatar-'+avatars[rand]+'.png';
}

Actualizar elementos IMG con avatar y/o avatar asignado anteriormente o al momento del registro

Al momento de registro se hace un llamado a la siguiente función para rellenar elementos IMG y elementos para nostrar el nombre del usuario y otros datos

function loadUserData(token){
        var settings = {
            "url": BASE_URI+"/accounts?",
            "method": "GET",
            "timeout": 0,
            "headers": {
            "Authorization": token
            },
        };

        $.ajax(settings).done(function (response) {
        
            if(typeof response.data !== 'undefined'){

                $("#auth-email").val(firebase.auth().currentUser.email).prop("disabled", true);
                typeof response.data.name !== null ? $("#auth-name").val(response.data.name) : $("#auth-surname").val(firebase.auth().currentUser.displayName);
                typeof response.data.last_name !== null ? $("#auth-surname").val(response.data.last_name) : $("#auth-surname").val('');

                firebase.auth().currentUser.photoURL !== null ? 
                    $('.data-user-welcome img').attr("src",firebase.auth().currentUser.photoURL).show() : 
                    $('.data-user-welcome img').attr("src",tmp_avatar).show();
                
                typeof firebase.auth().currentUser.email !== null ?
                    $("#auth-email").val(firebase.auth().currentUser.email).prop("disabled", true) :
                    $("#auth-email").val("").prop("disabled", false);

            }else{
                $("#auth-email").val(firebase.auth().currentUser.email);
                $("#auth-name").val(firebase.auth().currentUser.displayName);
            }
            
        });
    }

Listener que monitorear el estado del usuario y asi tener sus datos

Este proceso es necesario en donde se necesite tener los datos del usuario, en caso de login o signup se hace un llamado a la funcion loadUserData

firebase.auth().onAuthStateChanged(function(user) {
        $(".fwp.sbrSignupCont").show();
        $(".sbr_title").show();
        if (user) {
            $(".sbr_input").removeClass("error-field");
            $(".alert-box").hide(100);

            var emailVerified =  firebase.auth().currentUser.emailVerified;
          
            if(!emailVerified){
                user.sendEmailVerification();
            }
        
            if(loginNow){ // loginNow es una variable que se instancia al inicio (var loginNow = false;) simplemente para tener un control sobre sustituir el formulario si el usuario esta loguado o no en ciertos momentos
                user.getIdToken().then(function(data) {
                    loadUserData(data);
                });
            }else{
                $(".fwp.sbrSignupCont").html(overlayForm());
            }

        }
    });

Asignar avatar al momento del registro

Cuando se ejecuta el proceso de registro, se asigna el avatar con la siguiente función

function sendRegisterWithToken(token) {
        
        var authEmail = $("#auth-email").val();
        var authName = $("#auth-name").val();
        var authSurname = $("#auth-surname").val();
       authPhoto = tmp_avatar;
        
        var validate = ValidateForm();
        if(validate == true) {
            var settings = {
                    "url": BASE_URI+"/accounts",
                    "method": "POST",
                    "timeout": 0,
                    "headers": {
                    "Content-Type": "application/x-www-form-urlencoded",
                    "Authorization": token
                },
                    "data": {
                    "name": authName,
                    "last_name": authSurname,
                    "email": authEmail,
                    "avatar": authPhoto
                }
            };

            $.ajax(settings).done(function (response) {
                console.log("Respuesta POST");
                
                console.log(response);
                //loadUserData(token);

                var user = firebase.auth().currentUser;

                user.updateProfile({
                    photoURL: authPhoto,
                    displayName: authName+ ' '+authSurname
                }).then(function() {
                    user.updateEmail(authEmail).then(function() {
                    // Update successful.
                    }).catch(function(error) {
                    // An error happened.
                    });
                    console.log(user);
                    window.location.replace("perfil-informacion.html");
                }).catch(function(error) {
                    console.log(error);
                });

            }) .fail(function(error) {
                console.log(error);
                var errorMsg = error.responseJSON.message;
                showError(errorMsg);
                $(".alert-box").show(100);
            });
        } else {
            return false;
        }
    }