mirror of
https://github.com/HeyPuter/puter
synced 2024-11-14 22:06:00 +00:00
Settings: Move 'Account' tab into its own file
This commit is contained in:
Sam Atkins
parent
f5175941d9
commit
0ed5b20627
134
src/UI/Settings/UITabAccount.js
Normal file
134
src/UI/Settings/UITabAccount.js
Normal file
@ -0,0 +1,134 @@
|
||||
/**
|
||||
* Copyright (C) 2024 Puter Technologies Inc.
|
||||
*
|
||||
* This file is part of Puter.
|
||||
*
|
||||
* Puter is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as published
|
||||
* by the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
import UIWindowChangePassword from '../UIWindowChangePassword.js';
|
||||
import UIWindowChangeEmail from './UIWindowChangeEmail.js';
|
||||
import UIWindowChangeUsername from '../UIWindowChangeUsername.js';
|
||||
import UIWindowConfirmUserDeletion from './UIWindowConfirmUserDeletion.js';
|
||||
import UIWindowManageSessions from '../UIWindowManageSessions.js';
|
||||
|
||||
// About
|
||||
export default {
|
||||
id: 'account',
|
||||
title_i18n_key: 'account',
|
||||
icon: 'user.svg',
|
||||
html: () => {
|
||||
let h = `<h1>${i18n('account')}</h1>`;
|
||||
// change password button
|
||||
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 += `</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;">${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(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;">${user.email}</span>`;
|
||||
h += `</div>`;
|
||||
h += `<div style="flex-grow:1;">`;
|
||||
h += `<button class="button change-email" style="margin-bottom: 10px; float:right;">${i18n('change_email')}</button>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
}
|
||||
|
||||
// session manager
|
||||
h += `<div class="settings-card">`;
|
||||
h += `<strong>${i18n('sessions')}</strong>`;
|
||||
h += `<div style="flex-grow:1;">`;
|
||||
h += `<button class="button manage-sessions" style="float:right;">${i18n('manage_sessions')}</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 += `</div>`;
|
||||
|
||||
return h;
|
||||
},
|
||||
init: ($el_window) => {
|
||||
$el_window.find('.change-password').on('click', function (e) {
|
||||
UIWindowChangePassword({
|
||||
window_options:{
|
||||
parent_uuid: $el_window.attr('data-element_uuid'),
|
||||
disable_parent_window: true,
|
||||
parent_center: true,
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$el_window.find('.change-username').on('click', function (e) {
|
||||
UIWindowChangeUsername({
|
||||
window_options:{
|
||||
parent_uuid: $el_window.attr('data-element_uuid'),
|
||||
disable_parent_window: true,
|
||||
parent_center: true,
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$el_window.find('.change-email').on('click', function (e) {
|
||||
console.log('change email', $el_window.attr('data-element_uuid'));
|
||||
UIWindowChangeEmail({
|
||||
window_options:{
|
||||
parent_uuid: $el_window.attr('data-element_uuid'),
|
||||
disable_parent_window: true,
|
||||
parent_center: true,
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$el_window.find('.manage-sessions').on('click', function (e) {
|
||||
UIWindowManageSessions({
|
||||
window_options:{
|
||||
parent_uuid: $el_window.attr('data-element_uuid'),
|
||||
disable_parent_window: true,
|
||||
parent_center: true,
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$el_window.find('.delete-account').on('click', function (e) {
|
||||
UIWindowConfirmUserDeletion({
|
||||
window_options:{
|
||||
parent_uuid: $el_window.attr('data-element_uuid'),
|
||||
disable_parent_window: true,
|
||||
parent_center: true,
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
@ -25,6 +25,7 @@ import changeLanguage from "../../i18n/i18nChangeLanguage.js"
|
||||
import UIWindowConfirmUserDeletion from './UIWindowConfirmUserDeletion.js';
|
||||
import AboutTab from './UITabAbout.js';
|
||||
import UsageTab from './UITabUsage.js';
|
||||
import AccountTab from './UITabAccount.js';
|
||||
import UIWindowThemeDialog from '../UIWindowThemeDialog.js';
|
||||
import UIWindowManageSessions from '../UIWindowManageSessions.js';
|
||||
|
||||
@ -35,7 +36,7 @@ async function UIWindowSettings(options){
|
||||
const tabs = [
|
||||
AboutTab,
|
||||
UsageTab,
|
||||
// AccountTab,
|
||||
AccountTab,
|
||||
// PersonalizationTab,
|
||||
// LanguageTab,
|
||||
// ClockTab,
|
||||
@ -50,7 +51,6 @@ async function UIWindowSettings(options){
|
||||
tabs.forEach((tab, i) => {
|
||||
h += `<div class="settings-sidebar-item disable-user-select ${i === 0 ? 'active' : ''}" data-settings="${tab.id}" style="background-image: url(${icons[tab.icon]});">${i18n(tab.title_i18n_key)}</div>`;
|
||||
});
|
||||
h += `<div class="settings-sidebar-item disable-user-select" data-settings="account" style="background-image: url(${icons['user.svg']});">${i18n('account')}</div>`;
|
||||
h += `<div class="settings-sidebar-item disable-user-select" data-settings="personalization" style="background-image: url(${icons['palette-outline.svg']});">${i18n('personalization')}</div>`;
|
||||
h += `<div class="settings-sidebar-item disable-user-select" data-settings="language" style="background-image: url(${icons['language.svg']});">${i18n('language')}</div>`;
|
||||
h += `<div class="settings-sidebar-item disable-user-select" data-settings="clock" style="background-image: url(${icons['clock.svg']});">${i18n('clock')}</div>`;
|
||||
@ -65,59 +65,6 @@ async function UIWindowSettings(options){
|
||||
</div>`;
|
||||
});
|
||||
|
||||
// Account
|
||||
h += `<div class="settings-content" data-settings="account">`;
|
||||
h += `<h1>${i18n('account')}</h1>`;
|
||||
// change password button
|
||||
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 += `</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;">${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(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;">${user.email}</span>`;
|
||||
h += `</div>`;
|
||||
h += `<div style="flex-grow:1;">`;
|
||||
h += `<button class="button change-email" style="margin-bottom: 10px; float:right;">${i18n('change_email')}</button>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
}
|
||||
|
||||
// session manager
|
||||
h += `<div class="settings-card">`;
|
||||
h += `<strong>${i18n('sessions')}</strong>`;
|
||||
h += `<div style="flex-grow:1;">`;
|
||||
h += `<button class="button manage-sessions" style="float:right;">${i18n('manage_sessions')}</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 += `</div>`;
|
||||
|
||||
h += `</div>`;
|
||||
|
||||
// Personalization
|
||||
h += `<div class="settings-content" data-settings="personalization">`;
|
||||
h += `<h1>${i18n('personalization')}</h1>`;
|
||||
@ -200,47 +147,6 @@ async function UIWindowSettings(options){
|
||||
const $el_window = $(el_window);
|
||||
tabs.forEach(tab => tab.init($el_window));
|
||||
|
||||
$(el_window).find('.change-password').on('click', function (e) {
|
||||
UIWindowChangePassword({
|
||||
window_options:{
|
||||
parent_uuid: $(el_window).attr('data-element_uuid'),
|
||||
disable_parent_window: true,
|
||||
parent_center: true,
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
$(el_window).find('.change-email').on('click', function (e) {
|
||||
console.log('change email', $(el_window).attr('data-element_uuid'));
|
||||
UIWindowChangeEmail({
|
||||
window_options:{
|
||||
parent_uuid: $(el_window).attr('data-element_uuid'),
|
||||
disable_parent_window: true,
|
||||
parent_center: true,
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
$(el_window).find('.delete-account').on('click', function (e) {
|
||||
UIWindowConfirmUserDeletion({
|
||||
window_options:{
|
||||
parent_uuid: $(el_window).attr('data-element_uuid'),
|
||||
disable_parent_window: true,
|
||||
parent_center: true,
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
$(el_window).find('.change-username').on('click', function (e) {
|
||||
UIWindowChangeUsername({
|
||||
window_options:{
|
||||
parent_uuid: $(el_window).attr('data-element_uuid'),
|
||||
disable_parent_window: true,
|
||||
parent_center: true,
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
$(el_window).find('.change-ui-colors').on('click', function (e) {
|
||||
UIWindowThemeDialog({
|
||||
window_options:{
|
||||
@ -251,16 +157,6 @@ async function UIWindowSettings(options){
|
||||
});
|
||||
})
|
||||
|
||||
$(el_window).find('.manage-sessions').on('click', function (e) {
|
||||
UIWindowManageSessions({
|
||||
window_options:{
|
||||
parent_uuid: $(el_window).attr('data-element_uuid'),
|
||||
disable_parent_window: true,
|
||||
parent_center: true,
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
$(el_window).on('click', '.settings-sidebar-item', function(){
|
||||
const $this = $(this);
|
||||
const settings = $this.attr('data-settings');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user