fa2af5e0f5
Reduced the technical debt around our JS flash function by making it a module that is imported rather than relying on the global function. The global function still exists mainly for technical debt with how some requests are being completed, but new JS should import the module directly. Also reduces some tech debt in the file by removing the need for jQuery. Instead Flash is now 100% vanilla JS.
101 lines
3.2 KiB
JavaScript
101 lines
3.2 KiB
JavaScript
/* eslint-disable comma-dangle, no-unused-vars, class-methods-use-this, quotes, consistent-return, func-names, prefer-arrow-callback, space-before-function-paren, max-len */
|
|
import Flash from '../flash';
|
|
import { getPagePath } from '../lib/utils/common_utils';
|
|
|
|
((global) => {
|
|
class Profile {
|
|
constructor({ form } = {}) {
|
|
this.onSubmitForm = this.onSubmitForm.bind(this);
|
|
this.form = form || $('.edit-user');
|
|
this.bindEvents();
|
|
this.initAvatarGlCrop();
|
|
}
|
|
|
|
initAvatarGlCrop() {
|
|
const cropOpts = {
|
|
filename: '.js-avatar-filename',
|
|
previewImage: '.avatar-image .avatar',
|
|
modalCrop: '.modal-profile-crop',
|
|
pickImageEl: '.js-choose-user-avatar-button',
|
|
uploadImageBtn: '.js-upload-user-avatar',
|
|
modalCropImg: '.modal-profile-crop-image'
|
|
};
|
|
this.avatarGlCrop = $('.js-user-avatar-input').glCrop(cropOpts).data('glcrop');
|
|
}
|
|
|
|
bindEvents() {
|
|
$('.js-preferences-form').on('change.preference', 'input[type=radio]', this.submitForm);
|
|
$('#user_notification_email').on('change', this.submitForm);
|
|
$('#user_notified_of_own_activity').on('change', this.submitForm);
|
|
$('.update-username').on('ajax:before', this.beforeUpdateUsername);
|
|
$('.update-username').on('ajax:complete', this.afterUpdateUsername);
|
|
$('.update-notifications').on('ajax:success', this.onUpdateNotifs);
|
|
this.form.on('submit', this.onSubmitForm);
|
|
}
|
|
|
|
submitForm() {
|
|
return $(this).parents('form').submit();
|
|
}
|
|
|
|
onSubmitForm(e) {
|
|
e.preventDefault();
|
|
return this.saveForm();
|
|
}
|
|
|
|
beforeUpdateUsername() {
|
|
$('.loading-username', this).removeClass('hidden');
|
|
}
|
|
|
|
afterUpdateUsername() {
|
|
$('.loading-username', this).addClass('hidden');
|
|
$('button[type=submit]', this).enable();
|
|
}
|
|
|
|
onUpdateNotifs(e, data) {
|
|
return data.saved ?
|
|
new Flash("Notification settings saved", "notice") :
|
|
new Flash("Failed to save new settings", "alert");
|
|
}
|
|
|
|
saveForm() {
|
|
const self = this;
|
|
const formData = new FormData(this.form[0]);
|
|
const avatarBlob = this.avatarGlCrop.getBlob();
|
|
|
|
if (avatarBlob != null) {
|
|
formData.append('user[avatar]', avatarBlob, 'avatar.png');
|
|
}
|
|
|
|
return $.ajax({
|
|
url: this.form.attr('action'),
|
|
type: this.form.attr('method'),
|
|
data: formData,
|
|
dataType: "json",
|
|
processData: false,
|
|
contentType: false,
|
|
success: response => new Flash(response.message, 'notice'),
|
|
error: jqXHR => new Flash(jqXHR.responseJSON.message, 'alert'),
|
|
complete: () => {
|
|
window.scrollTo(0, 0);
|
|
// Enable submit button after requests ends
|
|
return self.form.find(':input[disabled]').enable();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
$(function() {
|
|
$(document).on('input.ssh_key', '#key_key', function() {
|
|
const $title = $('#key_title');
|
|
const comment = $(this).val().match(/^\S+ \S+ (.+)\n?$/);
|
|
|
|
// Extract the SSH Key title from its comment
|
|
if (comment && comment.length > 1) {
|
|
return $title.val(comment[1]).change();
|
|
}
|
|
});
|
|
if (getPagePath() === 'profiles') {
|
|
return new Profile();
|
|
}
|
|
});
|
|
})(window.gl || (window.gl = {}));
|