Skip to content

feat: Issue #1 - Add ability to remove profile picture #22

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

Closed
wants to merge 4 commits into from
Closed

feat: Issue #1 - Add ability to remove profile picture #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7f70ab3
feat: add remove profile picture functionality-#issue-1
PrayagCodes Oct 18, 2025
a88c917
feat: add i18n translation keys-#issue-1
PrayagCodes Oct 18, 2025
b9cf1b0
feat: Add confirmation dialog for profile picture removal-#issue-1
PrayagCodes Oct 19, 2025
fc9162c
fix: simplify falsy checks and disable button during profile removal
PrayagCodes Oct 25, 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
134 changes: 98 additions & 36 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 @@ -23,6 +23,7 @@ import UIWindowChangeUsername from '../UIWindowChangeUsername.js';
import UIWindowConfirmUserDeletion from './UIWindowConfirmUserDeletion.js';
import UIWindowManageSessions from '../UIWindowManageSessions.js';
import UIWindow from '../UIWindow.js';
import UIAlert from '../UIAlert.js';

// About
export default {
Expand All @@ -35,58 +36,64 @@ export default {

// 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 change-profile-picture" style="background-image: url('${html_encode(window.user?.profile?.picture ?? window.icons['profile.svg'])}');">`;
h += `</div>`;
h += `</div>`;
h += `<div style="text-align: center; margin-bottom: 20px;">`;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit:

Let's make sure we are being consistent with styles here. We should establish a boundary when to use inline-styles vs css.

inline-styles can be beneficial for referring to javascript code such as the profile picture online 39.

h += `<button class="button button-small button-danger remove-profile-picture" style="display: ${window.user?.profile?.picture ? 'inline-block' : 'none'};">${i18n('remove_profile_picture')}</button>`;
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) => {
// Flag to prevent multiple simultaneous removal operations
let is_removing_profile_picture = false;

$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 +103,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 +113,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 +123,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,7 +133,7 @@ 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,
Expand All @@ -147,21 +154,72 @@ export default {
is_dir: true,
is_openFileDialog: true,
selectable_body: false,
});
});
})

$el_window.find('.remove-profile-picture').on('click', async function (e) {
const $button = $(this);

// Disable the button to prevent multiple clicks
$button.prop('disabled', true);

try {
// Show confirmation dialog
const alert_resp = await UIAlert({
message: i18n('confirm_remove_profile_picture'),
buttons: [
{
label: i18n('remove_profile_picture'),
value: 'remove',
type: 'danger',
},
{
label: i18n('cancel')
},
],
window_options: {
backdrop: true,
close_on_backdrop_click: false,
}
});

// Only proceed if user confirmed
if (alert_resp !== 'remove') {
return;
}

// Update profile by setting picture to null or empty
update_profile(window.user.username, { picture: null });

// Reset profile picture to default in the settings window
$el_window.find('.profile-picture').css('background-image', 'url(' + window.icons['profile.svg'] + ')');

// Reset profile picture in the toolbar
$('.profile-image').css('background-image', 'url(' + window.icons['profile.svg'] + ')');
$('.profile-image').removeClass('profile-image-has-picture');

// Hide the remove button (no need to re-enable since it's hidden)
$button.hide();
} finally {
// Re-enable the button if it's still visible (in case of error or cancellation)
if ($button.is(':visible')) {
$button.prop('disabled', false);
}
}
})

$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;
Expand All @@ -173,7 +231,11 @@ export default {
$('.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(window.user.username, { picture: base64data })
// Show and enable the remove button
const $removeButton = $el_window.find('.remove-profile-picture');
$removeButton.show();
$removeButton.prop('disabled', false);
}
}
})
Expand Down
11 changes: 8 additions & 3 deletions src/gui/src/helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2633,9 +2633,14 @@ window.update_profile = function(username, key_vals){
const profile = JSON.parse(text);

for (const key in key_vals) {
profile[key] = key_vals[key];
// update window.user.profile
window.user.profile[key] = key_vals[key];
if (!key_vals[key]) {
delete profile[key];
delete window.user.profile[key];
} else {
profile[key] = key_vals[key];
// update window.user.profile
window.user.profile[key] = key_vals[key];
}
}

puter.fs.write('/'+username+'/Public/.profile', JSON.stringify(profile));
Expand Down
2 changes: 2 additions & 0 deletions src/gui/src/i18n/translations/ar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,8 @@ const ar = {
refresh: "تحديث",
release_address_confirmation: "هل أنت متأكد أنك تريد تحرير هذا العنوان؟",
remove_from_taskbar: "إزالة من شريط المهام",
remove_profile_picture: "يزيل",
confirm_remove_profile_picture: "هل أنت متأكد أنك تريد إزالة صورة ملفك الشخصي؟",
rename: "إعادة تسمية",
repeat: "تكرار",
replace: "استبدال",
Expand Down
2 changes: 2 additions & 0 deletions src/gui/src/i18n/translations/bn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,8 @@ const bn = {
refresh: "রিফ্রেশ",
release_address_confirmation: `আপনি কি নিশ্চিত যে আপনি এই ঠিকানা রিলিজ করতে চান?`,
remove_from_taskbar: "টাস্কবার থেকে সরান",
remove_profile_picture: "সরান",
confirm_remove_profile_picture: "আপনি কি নিশ্চিত যে আপনি আপনার প্রোফাইল ছবি সরাতে চান?",
rename: "পুনঃনামকরণ",
repeat: "পুনরাবৃত্তি",
replace: "বদলান",
Expand Down
2 changes: 2 additions & 0 deletions src/gui/src/i18n/translations/br.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,8 @@ const br = {
"refresh": "Atualizar",
"release_address_confirmation": "Tem certeza de que deseja liberar este endereço?",
"remove_from_taskbar": "Remover da Barra de Tarefas",
"remove_profile_picture": "Remover",
"confirm_remove_profile_picture": "Tem certeza de que deseja remover sua foto de perfil?",
"rename": "Renomear",
"repeat": "Repetir",
"replace": "Substituir",
Expand Down
2 changes: 2 additions & 0 deletions src/gui/src/i18n/translations/da.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,8 @@ const da = {
refresh: 'Opdater',
release_address_confirmation: `Er du sikker på, at du vil frigive denne adresse?`,
remove_from_taskbar: 'Fjern fra proceslinje',
remove_profile_picture: 'Fjerne',
confirm_remove_profile_picture: 'Er du sikker på, at du vil fjerne dit profilbillede?',
rename: 'Omdøb',
repeat: 'Gentag',
replace: 'Erstat',
Expand Down
2 changes: 2 additions & 0 deletions src/gui/src/i18n/translations/de.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,8 @@ const de = {
refresh: 'Aktualisieren',
release_address_confirmation: `Möchten Sie diese Adresse wirklich freigeben?`,
remove_from_taskbar:'Von Taskleiste entfernen',
remove_profile_picture: 'Entfernen',
confirm_remove_profile_picture: 'Sind Sie sicher, dass Sie Ihr Profilbild entfernen möchten?',
rename: 'Umbenennen',
repeat: 'Wiederholen',
replace: 'Ersetzen',
Expand Down
2 changes: 2 additions & 0 deletions src/gui/src/i18n/translations/emoji.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,8 @@ const emoji = {
refresh: '🔄🔄',
release_address_confirmation: `❓🆓`,
remove_from_taskbar:'📌❌📁',
remove_profile_picture: '❌',
confirm_remove_profile_picture: '❓🗑️👤🖼️',
rename: '🔄📛',
repeat: '🔂',
replace: '🔄🔄',
Expand Down
2 changes: 2 additions & 0 deletions src/gui/src/i18n/translations/en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,8 @@ const en = {
refresh: 'Refresh',
release_address_confirmation: `Are you sure you want to release this address?`,
remove_from_taskbar:'Remove from Taskbar',
remove_profile_picture: 'Remove',
confirm_remove_profile_picture: 'Are you sure you want to remove your profile picture?',
rename: 'Rename',
repeat: 'Repeat',
replace: 'Replace',
Expand Down
2 changes: 2 additions & 0 deletions src/gui/src/i18n/translations/es.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,8 @@ const es = {
refresh: 'Refrescar',
release_address_confirmation: `¿Estás seguro de que quieres liberar esta dirección?`,
remove_from_taskbar: 'Eliminar de la barra de tareas',
remove_profile_picture: 'Eliminar',
confirm_remove_profile_picture: '¿Estás seguro de que quieres eliminar tu foto de perfil?',
rename: 'Renombrar',
repeat: 'Repetir',
replace: 'Remplazar',
Expand Down
2 changes: 2 additions & 0 deletions src/gui/src/i18n/translations/fa.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,8 @@ const fa = {
refresh: "تازه کردن",
release_address_confirmation: `آیا مطمئن هستید که می خواهید این آدرس را آزاد کنید؟`,
remove_from_taskbar: "از نوار وظایف حذف کن",
remove_profile_picture: "حذف",
confirm_remove_profile_picture: "آیا مطمئن هستید که می خواهید تصویر نمایه خود را حذف کنید؟",
rename: "تغییر نام",
repeat: "تکرار",
resend_confirmation_code: "ارسال مجدد کد تأیید",
Expand Down
2 changes: 2 additions & 0 deletions src/gui/src/i18n/translations/fi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,8 @@ const fi = {
// "publish" => "Oletko varma, että haluat julkaista tämän osoitteen?"

remove_from_taskbar: "Poista tehtäväpalkista",
remove_profile_picture: "Poistaa",
confirm_remove_profile_picture: "Haluatko varmasti poistaa profiilikuvasi?",
rename: "Nimeä uudelleen",
repeat: "Toista",
replace: "Replace",
Expand Down
2 changes: 2 additions & 0 deletions src/gui/src/i18n/translations/fr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,8 @@ const fr = {
refresh: 'Actualiser',
release_address_confirmation: `Etes-vous sûr de vouloir libérer cette adresse ?`,
remove_from_taskbar: 'Retirer de la barre des tâches',
remove_profile_picture: 'Retirer',
confirm_remove_profile_picture: 'Êtes-vous sûr de vouloir supprimer votre photo de profil?',
rename: 'Renommer',
repeat: 'Répéter',
replace: 'Remplacer',
Expand Down
2 changes: 2 additions & 0 deletions src/gui/src/i18n/translations/he.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,8 @@ const en = {
refresh: "רענן",
release_address_confirmation: `האם אתה בטוח שברצונך לשחרר כתובת זו?`,
remove_from_taskbar: "הסרה משורת המשימות",
remove_profile_picture: "הסר",
confirm_remove_profile_picture: "האם אתה בטוח שברצונך להסיר את תמונת הפרופיל שלך?",
rename: "שנה שם",
repeat: "חזור",
replace: "החלף",
Expand Down
2 changes: 2 additions & 0 deletions src/gui/src/i18n/translations/hi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,8 @@ const hi = {
refresh: 'ताजा करना ',
release_address_confirmation: "क्या आप वाकई यह पता जारी करना चाहते हैं?",
remove_from_taskbar:'टास्कबार से हटाएँ',
remove_profile_picture: 'हटाएं',
confirm_remove_profile_picture: 'क्या आप वाकई अपनी प्रोफ़ाइल फ़ोटो हटाना चाहते हैं?',
rename: 'नाम बदलें',
repeat: 'दोहराना',
replace: 'प्रतिस्थापित करें',
Expand Down
2 changes: 2 additions & 0 deletions src/gui/src/i18n/translations/hu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,8 @@ const hu = {
refresh: "Frissítés",
release_address_confirmation: "Biztosan felszabadítod ezt a címet?",
remove_from_taskbar: "Eltávolítás a tálcáról",
remove_profile_picture: "Távolítsa el",
confirm_remove_profile_picture: "Biztosan eltávolítja profilképét?",
rename: "Átnevezés",
repeat: "Ismétlés",
replace: "Csere",
Expand Down
2 changes: 2 additions & 0 deletions src/gui/src/i18n/translations/hy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,8 @@ const hy = {
refresh: "Թարմացնել",
release_address_confirmation: "Իսկապե՞ս ուզում եք թողարկել այս հասցեն:",
remove_from_taskbar: "Հանել խնդրագոտուց",
remove_profile_picture: "Հեռացնել",
confirm_remove_profile_picture: "Վստա՞հ եք, որ ցանկանում եք հեռացնել ձեր պրոֆիլի նկարը:",
rename: "Վերանվանել",
repeat: "Կրկնել",
replace: "Փոխարինել",
Expand Down
2 changes: 2 additions & 0 deletions src/gui/src/i18n/translations/id.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,8 @@ const id = {
refresh: "Memuat Ulang",
release_address_confirmation: "Apakah Anda yakin ingin melepaskan alamat ini?",
remove_from_taskbar: "Hapus dari Bilah Tugas",
remove_profile_picture: "Menghapus",
confirm_remove_profile_picture: "Apakah Anda yakin ingin menghapus foto profil Anda?",
rename: "Ganti Nama",
repeat: "Ulangi",
replace: "Ganti",
Expand Down
2 changes: 2 additions & 0 deletions src/gui/src/i18n/translations/ig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,6 +255,8 @@ const ig = {
refresh: "Weghachite ume",
release_address_confirmation: `O doro gị anya na ịchọrọ wepụtara adreesị a?`,
remove_from_taskbar: "Wepu na Taskbar",
remove_profile_picture: "Wepu",
confirm_remove_profile_picture: "Ị ji n'aka na ị chọrọ iwepụ foto profaịlụ gị?",
rename: "Nyegharịa aha",
repeat: "megharịa",
replace: "Dochie",
Expand Down
Loading