SmartShopper/express-server/public/javascripts/user.js

// Initialize Firebase
var config = {
    apiKey: "AIzaSyCuvwf78cmSDoZ2yS4XxHZhnjUn7yIHYfw",
    authDomain: "test-667ca.firebaseapp.com",
    databaseURL: "https://test-667ca.firebaseio.com",
    projectId: "test-667ca",
    storageBucket: "test-667ca.appspot.com",
    messagingSenderId: "221332577314"
};
firebase.initializeApp(config);

var storage = firebase.storage();

var msg = firebase.messaging();
// import postgres from "./../db-connect/db-connect";


var vue = new Vue({
    el: '#vue-app',
    prop: {
        
        getpic: ''
    },
    data: {
        name: '',
        dataPic: '',
        image: '',
        idToken: '',
        mid: '',
        showUploadButtons: ''

    },
    methods: {
        backToDash(){
            window.location.href = "/";
        },
        fertig() {
            if(!this.image){
                this.image = this.dataPic
                var currentUser = firebase.auth().currentUser;
                var vm = this;
                currentUser.getIdToken( /* forceRefresh */ true).then(function (idToken) {
                    
                    msg.requestPermission()
                        .then(function () {
                            return msg.getToken();
                        })
                        .then(token => {
                            vm.idToken = idToken;
                            vm.mid = token;
                            vm.dbUserUpdate(vm.idToken, vm.name, vm.image, vm.mid);
                            window.location.href = "/";
                        })
                        .catch(err => {
                            console.error("Msg Error: ", err);
                            vm.idToken = idToken;
                            vm.mid = "";
                            vm.dbUserUpdate(vm.idToken, vm.name, vm.image, vm.mid);

                            window.location.href = "/";
                        })
                    
                }).catch(function (error) {
                    console.error("Get id token client error: ", error)
                });
            }else{
                this.dbUserUpdate(this.idToken, this.name, this.image, this.mid);
                window.location.href = "/"; 
            }
            
        },
        updateUser() {
            var currentUser = firebase.auth().currentUser;
            var vm = this;
            currentUser.getIdToken( /* forceRefresh */ true).then(function (idToken) {
                msg.requestPermission()
                    .then(function () {

                        return msg.getToken();
                    })
                    .then(token => {
                        vm.idToken = idToken;
                        vm.mid = token;
                    })
                    .catch(err => {
                        console.error("Msg Error: ", err);
                        vm.idToken = idToken;
                        vm.mid = "";
                    })


            }).catch(function (error) {
                console.error("Get id token client error: ", error)
            });
            this.showUploadButtons = '';
        },
        dbUserUpdate(token, name, pic, mid) {
            var vm = this;
            var user = firebase.auth().currentUser;
            user.updateProfile({
                displayName: name,
                photoURL: pic
            }).then(async function () {

            }).catch(function (error) {
                console.error(error)
            });


            $.ajax({
                type: "POST",
                url: '/userbearbeiten',
                data: {
                    token: vm.idToken,
                    mid: vm.mid,
                    pic: vm.image,
                    name: name
                },
                success(result) {
                    //vm.startGetUser();
                },
                error(err) {
                    console.error("Error: " + err);
                }
            });
        },
        fotoChoose() {
            var vm = this;
            var currentUser = firebase.auth().currentUser;
            var uid = currentUser.uid;
            this.dataPic = this.image;
            var uploadTask = storage.ref('/').child(uid).putString(this.image, 'data_url', {
                contentType: 'image/jpeg'
            });
            uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
                function (snapshot) {
                    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
                    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                    console.log('Upload is ' + progress + '% done');
                    switch (snapshot.state) {
                        case firebase.storage.TaskState.PAUSED: // or 'paused'
                            console.log('Upload is paused');
                            break;
                        case firebase.storage.TaskState.RUNNING: // or 'running'
                            console.log('Upload is running');
                            break;
                    }
                },
                function (error) {
                    console.error(error);
                },
                function () {
                    // Upload completed successfully, now we can get the download URL
                    var downloadURL = uploadTask.snapshot.downloadURL;
                    if (!downloadURL) {
                        downloadURL = 'https://firebasestorage.googleapis.com/v0/b/test-667ca.appspot.com/o/' + uid + '?alt=media&token=7e5f49c8-0e1f-4073-be30-5feaa691a770';
                    }
                    vm.image = downloadURL;
                    vm.updateUser();
                });
        },
        getPicUrl() {
            return this.picUrl;
        },
        getUser(uid) {
            axios.get('/getUser/' + uid).then(result => {
                this.name = result.data[0].name;
                this.dataPic = result.data[0].picture + "";
            }).catch(err => console.error(err));
        },
        onFileChange(e) {
            var files = e.target.files || e.dataTransfer.files;
            if (!files.length)
                return;
            this.createImage(files[0]);
        },
        createImage(file) {
            var image = new Image();
            var reader = new FileReader();
            var vm = this;

            reader.onload = (e) => {

                var tempImg = new Image();
                tempImg.src = reader.result;
                tempImg.onload = function () {

                    var MAX_WIDTH = 350;
                    var MAX_HEIGHT = 350;
                    var tempW = tempImg.width;
                    var tempH = tempImg.height;
                    if (tempW > tempH) {
                        if (tempW > MAX_WIDTH) {
                            tempH *= MAX_WIDTH / tempW;
                            tempW = MAX_WIDTH;
                        }
                    } else {
                        if (tempH > MAX_HEIGHT) {
                            tempW *= MAX_HEIGHT / tempH;
                            tempH = MAX_HEIGHT;
                        }
                    }

                    var canvas = document.createElement('canvas');
                    canvas.width = tempW;
                    canvas.height = tempH;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(this, 0, 0, tempW, tempH);
                    var dataURL = canvas.toDataURL("image/jpeg");

                    vm.dataPic = dataURL;
                    vm.image = dataURL;
                    vm.showUploadButtons = 'true';
                }
            };
            reader.readAsDataURL(file);
        },
        startGetUser() {
            firebase.auth().onAuthStateChanged(user => {
                if (user) {
                    //GetUser
                    this.getUser(user.uid);
                } else {
                    window.location.href = "/";
                }
            });
        },
        removeImage: function (e) {
            this.image = '';
            this.startGetUser();
        }
    },
    created() {
        this.startGetUser();
    }
});