https://wizardofodds.com/assets/js/editProfile-h_b4nnM.js

1import {verifyPassword, verifyUsername} from "./global.js";
2
3export function setupProfileActionEvents() {
4    $('.profile-image').on({
5        dragover: function(e) {
6            e.preventDefault();
7            e.stopPropagation();
8            $(this).find('label.overlay').addClass('dragging');
9        },
10        dragleave: function(e) {
11            e.preventDefault();
12            e.stopPropagation();
13            $(this).find('label.overlay').removeClass('dragging');
14        },
15        dragenter: function(e) {
16            e.preventDefault();
17            e.stopPropagation();
18            $(this).find('label.overlay').addClass('dragging');
19        }
20    });
21
22    $('.custom-file input').on("change", function() {
23	    const files = this.files;
24	    const $this = $(this).closest('.profile-image');
25	    if ($this.hasClass('cover')) {
26	        $('#cover_image_url').val('');
27	    } else {
28	        $('#avatar_url').val('');
29	    }
30	    handleFiles(files, $this);
31	});
32
33
34    const avatarInput = document.getElementById('user_profile_image_file'),
35        avatarTarget = document.getElementById('profile_image_holder'),
36
37        coverInput = document.getElementById('user_profile_coverImage_file'),
38        coverTarget = document.getElementById('cover_image_holder');
39
40    avatarTarget.addEventListener('drop', (e) => {
41        handleDropEvent(e, avatarInput, avatarTarget);
42    });
43
44    coverTarget.addEventListener('drop', (e) => {
45        handleDropEvent(e, coverInput, coverTarget);
46    });
47
48
49    const firstPassword = $('#userPassword');
50    const secondPassword = $('#confirmPassword');
51    verifyPassword(firstPassword, secondPassword);
52    verifyPassword(secondPassword, firstPassword);
53
54    verifyUsername($("#userUsername"));
55
56    $('#profileSubmit').on('click', function(event) {
57        $("#editProfileForm").addClass('was-validated');
58        event.preventDefault();
59        let password = firstPassword.val();
60        let password2 = secondPassword.val();
61
62        if ($('#editProfileForm')[0].checkValidity() !== false && password == password2) {
63            let email = $("#userEmail").val();
64            let username = $("#userUsername").val();
65            let personalText = $("#personalText").val();
66            let gender = $('input[name="user_profile_gender"]:checked').val();
67            let birthDay = $("#userBirthDay").find(':selected').val();
68            let birthMonth = $("#userBirthMonth").find(':selected').val();
69            let birthYear = $("#userBirthYear").find(':selected').val();
70            let birthdate = (birthDay && birthMonth && birthYear) ? `${birthYear}-${birthMonth}-${birthDay}` : '';
71            let country = $("#userCountry").find(':selected').val();
72            let avatarContent = $("#userProfileImage").data('image') ?? '';
73            let avatarName = $("#userProfileImage").data('image-name') ?? '';
74            let coverImageContent = $("#userCoverImage").data('image') ?? '';
75            let coverImageName = $("#userCoverImage").data('image-name') ?? '';
76            let newsletter = $("#userNewsletter").is(":checked");
77
78            userEdit(email, username, password, password2, personalText, gender, birthdate, country, avatarName, avatarContent, coverImageName, coverImageContent, newsletter);
79        }
80    });
81}
82
83function handleFiles(files, target) {
84    if (files && files[0]) {
85        if (validateImage(files[0]))
86            previewAnduploadImage(files[0], target);
87    }
88}
89
90function handleDropEvent(e, input, target) {
91    e.preventDefault();
92    target = $(e.target).closest('div.profile-image');
93    $(target).find('label.overlay').removeClass('dragging');
94
95    input.files = e.dataTransfer.files;
96    handleFiles(input.files, target);
97}
98
99function validateImage(image) {
100    var validTypes = ['image/jpeg', 'image/png', 'image/gif'];
101    if (validTypes.indexOf(image.type) === -1) {
102        $('.error-message.image-type').show();
103
104        return false;
105    } else {
106        $('.error-message.image-type').hide();        
107    }
108
109    var maxSizeInBytes = 2e6; // 2MB
110    if (image.size > maxSizeInBytes) {
111        $('.error-message.image-size').show();
112
113        return false;

114    } else {
115        $('.error-message.image-size').hide();        
116    }
117
118    return true;
119}
120
121function previewAnduploadImage(image, target) {
122    var reader = new FileReader();
123    reader.onload = function(e) {
124        const targetImage = $(target).find('img.image-preview').eq(0);
125        const imageName = image.name.replace(/\s+/g, "_");
126
127        targetImage.attr({
128            "src": e.target.result,
129            "data-image": e.target.result,
130            "data-image-name": imageName
131        });
132
133    }
134    reader.readAsDataURL(image);
135}
136
137function userEdit(email, username, password, password2, personalText, gender, birthdate, country,  avatarName, avatarContent, coverImageName, coverImageContent, newsletter) {
138
139    let body = JSON.stringify({
140        plainPassword: { first: password, second: password2 },
141        email: email,
142        username: username,
143        personalText: personalText,
144        gender: gender,
145        birthdate: birthdate,
146        country: country,
147        avatar: { avatarName: avatarName, avatarContent: avatarContent },
148        coverImage: { coverImageName: coverImageName, coverImageContent: coverImageContent },
149        newsletter: newsletter
150    });
151
152    $.ajax({
153        url: '/user/profile/update',
154        headers: { 'Content-Type': 'application/json' },
155        method: 'POST',
156        dataType: 'json',
157        data: body,
158        success: function(result) {
159            window.location.reload();
160        },
161        error: function(xhr) {
162            let err;
163            try {
164                err = JSON.parse(xhr.responseText);
165                err.error ? $(".error-message.default").html(err.error).show() : null;
166                err.email ? $(".error-message.email").html(err.email).show() : null;
167                err.username ? $(".error-message.username").html(err.username).show() : null;
168                err.password ? $(".error-message.password").html(err.password).show() : null;
169            } catch (e) {
170                $(".error-message.default").html('We apologize, there is a problem. Please try again later.').show();
171            }
172        }
173    });
174}