Skip to content

Issue #1 - Add ability to remove profile picture #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+3,544 −2,876
Open

Issue #1 - Add ability to remove profile picture #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
81f9354
dev:add Remove Profile Picture
chandanshyam Oct 8, 2025
f58f733
added localized string Remove Profile Picture
chandanshyam Oct 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 114 additions & 43 deletions src/gui/src/UI/Settings/UITabAccount.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,59 +34,69 @@ export default {
// h += `<h1>${i18n('account')}</h1>`;

// profile picture
h += `<div style="overflow: hidden; display: flex; margin-bottom: 20px; flex-direction: column; align-items: center;">`;
h += `<div class="profile-picture change-profile-picture" style="background-image: url('${html_encode(window.user?.profile?.picture ?? window.icons['profile.svg'])}');">`;
h += `</div>`;
h += `<div class="profile-picture-container" style="overflow: hidden; display: flex; margin-bottom: 20px; flex-direction: column; align-items: center;">`;
const hasProfilePicture = window.user?.profile?.picture;
const profileImageUrl = hasProfilePicture ? window.user.profile.picture : window.icons['profile.svg'];
const profilePictureClass = hasProfilePicture ? 'profile-picture change-profile-picture profile-image-has-picture' : 'profile-picture change-profile-picture';
h += `<div class="${profilePictureClass}" style="background-image: url('${html_encode(profileImageUrl)}');">`;
h += `</div>`;
// Add action buttons container
h += `<div class="profile-picture-actions" style="display: flex; gap: 10px; margin-top: 10px;">`;
// Only show remove button if user has a profile picture
if (window.user?.profile?.picture) {
h += `<button class="button button-danger remove-profile-picture">${i18n('remove_profile_picture')}</button>`;
}
h += `</div>`;
h += `</div>`;

// change password button
if(!window.user.is_temp){
if (!window.user.is_temp) {
h += `<div class="settings-card">`;
h += `<strong>${i18n('password')}</strong>`;
h += `<div style="flex-grow:1;">`;
h += `<button class="button change-password" style="float:right;">${i18n('change_password')}</button>`;
h += `</div>`;
h += `<strong>${i18n('password')}</strong>`;
h += `<div style="flex-grow:1;">`;
h += `<button class="button change-password" style="float:right;">${i18n('change_password')}</button>`;
h += `</div>`;
h += `</div>`;
}

// change username button
h += `<div class="settings-card">`;
h += `<div>`;
h += `<strong style="display:block;">${i18n('username')}</strong>`;
h += `<span class="username" style="display:block; margin-top:5px;">${html_encode(window.user.username)}</span>`;
h += `</div>`;
h += `<div style="flex-grow:1;">`;
h += `<button class="button change-username" style="float:right;">${i18n('change_username')}</button>`;
h += `</div>`
h += `<div>`;
h += `<strong style="display:block;">${i18n('username')}</strong>`;
h += `<span class="username" style="display:block; margin-top:5px;">${html_encode(window.user.username)}</span>`;
h += `</div>`;
h += `<div style="flex-grow:1;">`;
h += `<button class="button change-username" style="float:right;">${i18n('change_username')}</button>`;
h += `</div>`
h += `</div>`;

// change email button
if(window.user.email){
if (window.user.email) {
h += `<div class="settings-card">`;
h += `<div>`;
h += `<strong style="display:block;">${i18n('email')}</strong>`;
h += `<span class="user-email" style="display:block; margin-top:5px;">${html_encode(window.user.email)}</span>`;
h += `</div>`;
h += `<div style="flex-grow:1;">`;
h += `<button class="button change-email" style="float:right;">${i18n('change_email')}</button>`;
h += `</div>`;
h += `<div>`;
h += `<strong style="display:block;">${i18n('email')}</strong>`;
h += `<span class="user-email" style="display:block; margin-top:5px;">${html_encode(window.user.email)}</span>`;
h += `</div>`;
h += `<div style="flex-grow:1;">`;
h += `<button class="button change-email" style="float:right;">${i18n('change_email')}</button>`;
h += `</div>`;
h += `</div>`;
}

// 'Delete Account' button
h += `<div class="settings-card settings-card-danger">`;
h += `<strong style="display: inline-block;">${i18n("delete_account")}</strong>`;
h += `<div style="flex-grow:1;">`;
h += `<button class="button button-danger delete-account" style="float:right;">${i18n("delete_account")}</button>`;
h += `</div>`;
h += `<strong style="display: inline-block;">${i18n("delete_account")}</strong>`;
h += `<div style="flex-grow:1;">`;
h += `<button class="button button-danger delete-account" style="float:right;">${i18n("delete_account")}</button>`;
h += `</div>`;
h += `</div>`;

return h;
},
init: ($el_window) => {
$el_window.find('.change-password').on('click', function (e) {
UIWindowChangePassword({
window_options:{
window_options: {
parent_uuid: $el_window.attr('data-element_uuid'),
disable_parent_window: true,
parent_center: true,
Expand All @@ -96,7 +106,7 @@ export default {

$el_window.find('.change-username').on('click', function (e) {
UIWindowChangeUsername({
window_options:{
window_options: {
parent_uuid: $el_window.attr('data-element_uuid'),
disable_parent_window: true,
parent_center: true,
Expand All @@ -106,7 +116,7 @@ export default {

$el_window.find('.change-email').on('click', function (e) {
UIWindowChangeEmail({
window_options:{
window_options: {
parent_uuid: $el_window.attr('data-element_uuid'),
disable_parent_window: true,
parent_center: true,
Expand All @@ -116,7 +126,7 @@ export default {

$el_window.find('.manage-sessions').on('click', function (e) {
UIWindowManageSessions({
window_options:{
window_options: {
parent_uuid: $el_window.attr('data-element_uuid'),
disable_parent_window: true,
parent_center: true,
Expand All @@ -126,14 +136,15 @@ export default {

$el_window.find('.delete-account').on('click', function (e) {
UIWindowConfirmUserDeletion({
window_options:{
window_options: {
parent_uuid: $el_window.attr('data-element_uuid'),
disable_parent_window: true,
parent_center: true,
}
});
});

// Handle clicking on profile picture or change button
$el_window.find('.change-profile-picture').on('click', async function (e) {
// open dialog
UIWindow({
Expand All @@ -147,35 +158,95 @@ export default {
is_dir: true,
is_openFileDialog: true,
selectable_body: false,
});
})
});
});

// Handle remove profile picture button
$el_window.find('.remove-profile-picture').on('click', async function (e) {
e.preventDefault();
e.stopPropagation();

// Remove profile picture without confirmation dialog
try {
await window.removeProfilePicture(window.user.username);

// Update UI immediately after successful removal
updateProfilePictureUI($el_window);

// Show success message
window.show_save_account_notice_message(i18n('profile_picture_removed') || 'Profile picture removed successfully');
} catch (error) {
console.error('Error removing profile picture:', error);
// Show error message
window.show_save_account_notice_message(i18n('error_removing_profile_picture') || 'Failed to remove profile picture. Please try again.', 'error');
}
});

// Function to update profile picture UI after changes
function updateProfilePictureUI($el_window) {
// Use the global profile picture update function
window.updateAllProfilePictures();

// Update the action buttons - hide/show remove button based on picture presence
const hasProfilePicture = window.user?.profile?.picture;
if (hasProfilePicture) {
// Show remove button if it doesn't exist
if ($el_window.find('.remove-profile-picture').length === 0) {
$el_window.find('.profile-picture-actions').append(
`<button class="button button-danger remove-profile-picture">${i18n('remove')}</button>`
);
// Re-attach event handler for the new button
$el_window.find('.remove-profile-picture').on('click', async function (e) {
e.preventDefault();
e.stopPropagation();

// Remove profile picture without confirmation dialog
try {
await window.removeProfilePicture(window.user.username);
updateProfilePictureUI($el_window);
window.show_save_account_notice_message(i18n('profile_picture_removed') || 'Profile picture removed successfully');
} catch (error) {
console.error('Error removing profile picture:', error);
window.show_save_account_notice_message(i18n('error_removing_profile_picture') || 'Failed to remove profile picture. Please try again.', 'error');
}
});
}
} else {
// Hide remove button
$el_window.find('.remove-profile-picture').remove();
}
}

$el_window.on('file_opened', async function(e){
$el_window.on('file_opened', async function (e) {
let selected_file = Array.isArray(e.detail) ? e.detail[0] : e.detail;
// set profile picture
const profile_pic = await puter.fs.read(selected_file.path)
// blob to base64
const reader = new FileReader();
reader.readAsDataURL(profile_pic);
reader.onloadend = function() {
reader.onloadend = function () {
// resizes the image to 150x150
const img = new Image();
img.src = reader.result;
img.onload = function() {
img.onload = function () {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 150;
canvas.height = 150;
ctx.drawImage(img, 0, 0, 150, 150);
const base64data = canvas.toDataURL('image/png');
// update profile picture
$el_window.find('.profile-picture').css('background-image', 'url(' + html_encode(base64data) + ')');
$('.profile-image').css('background-image', 'url(' + html_encode(base64data) + ')');
$('.profile-image').addClass('profile-image-has-picture');
// update profile picture
update_profile(window.user.username, {picture: base64data})
// update profile picture in user object first
if (!window.user.profile) {
window.user.profile = {};
}
window.user.profile.picture = base64data;
// update UI using the centralized function
updateProfilePictureUI($el_window);
// update profile picture in storage
update_profile(window.user.username, { picture: base64data })
}
}
})

},
};
Loading