Clean up and use i18n() instead of hard-coded strings

This commit is contained in:
Nariman Jelveh 2024-03-24 20:57:57 -07:00
parent d13ae6958c
commit d2d03dee35
7 changed files with 139 additions and 77 deletions

View File

@ -17,29 +17,27 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
// About
function UITabAbout(){
let h = ``;
h += `<div class="settings-content active" data-settings="about">`;
h += `<div class="about-container">`
h += `<div class="about" style="text-align: center;">
h += `<div class="about">
<a href="https://puter.com" target="_blank" class="logo"><img src="/images/logo.png"></a>
<p class="description">Puter is a privacy-first personal cloud to keep all your files, apps, and games in one
secure place, accessible from anywhere at any time.</p>
<p class="description">${i18n('puter_description')}</p>
<p class="links">
<a href="mailto:hey@puter.com" target="_blank">hey@puter.com</a>
<span style="color: #CCC;"></span>
<a href="https://docs.puter.com" target="_blank">Developers</a>
<a href="https://docs.puter.com" target="_blank">${i18n('developers')}</a>
<span style="color: #CCC;"></span>
<a href="https://status.puter.com" target="_blank">Status</a>
<a href="https://status.puter.com" target="_blank">${i18n('status')}</a>
<span style="color: #CCC;"></span>
<a href="https://puter.com/terms" target="_blank">Terms</a>
<a href="https://puter.com/terms" target="_blank">${i18n('terms')}</a>
<span style="color: #CCC;"></span>
<a href="https://puter.com/privacy" target="_blank">Privacy</a>
<a href="https://puter.com/privacy" target="_blank">${i18n('privacy')}</a>
<span style="color: #CCC;"></span>
<a href="#" class="show-credits">Credits</a>
<a href="#" class="show-credits">${i18n('credits')}</a>
</p>
<div class="social-links">
<a href="https://twitter.com/HeyPuter/" target="_blank">
@ -69,20 +67,20 @@ function UITabAbout(){
<dialog class="credits">
<div class="credit-content">
<p style="margin: 0; font-size: 18px; text-align: center;">Open Source Software and Content</p>
<p style="margin: 0; font-size: 18px; text-align: center;">${i18n('oss_code_and_content')}</p>
<div style="max-height: 300px; overflow-y: scroll;">
<ul style="padding-left: 25px; padding-top:15px;">
<li>FileSaver.js <a target="_blank" href="https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md">license</a></li>
<li>html-entities <a target="_blank" href="https://github.com/mdevils/html-entities/blob/master/LICENSE">license</a></li>
<li>iro.js <a target="_blank" href="https://github.com/jaames/iro.js/blob/master/LICENSE.txt">license</a></li>
<li>jQuery <a target="_blank" href="https://jquery.org/license/">license</a></li>
<li>jQuery-dragster <a target="_blank" href="https://github.com/catmanjan/jquery-dragster/blob/master/LICENSE">license</a></li>
<li>jQuery UI <a target="_blank" href="https://jquery.org/license/">license</a></li>
<li>lodash <a target="_blank" href="https://lodash.com/license">license</a></li>
<li>mime <a target="_blank" href="https://github.com/broofa/mime/blob/main/LICENSE">license</a></li>
<li>qrcodejs <a target="_blank" href="https://github.com/davidshimjs/qrcodejs/blob/master/LICENSE">license</a></li>
<li>Selection <a target="_blank" href="https://github.com/simonwep/selection/blob/master/LICENSE">license</a></li>
<li>socket.io <a target="_blank" href="https://github.com/socketio/socket.io/blob/main/LICENSE">license</a></li>
<li>FileSaver.js <a target="_blank" href="https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md">${i18n('license')}</a></li>
<li>html-entities <a target="_blank" href="https://github.com/mdevils/html-entities/blob/master/LICENSE">${i18n('license')}</a></li>
<li>iro.js <a target="_blank" href="https://github.com/jaames/iro.js/blob/master/LICENSE.txt">${i18n('license')}</a></li>
<li>jQuery <a target="_blank" href="https://jquery.org/license/">${i18n('license')}</a></li>
<li>jQuery-dragster <a target="_blank" href="https://github.com/catmanjan/jquery-dragster/blob/master/LICENSE">${i18n('license')}</a></li>
<li>jQuery UI <a target="_blank" href="https://jquery.org/license/">${i18n('license')}</a></li>
<li>lodash <a target="_blank" href="https://lodash.com/license">${i18n('license')}</a></li>
<li>mime <a target="_blank" href="https://github.com/broofa/mime/blob/main/LICENSE">${i18n('license')}</a></li>
<li>qrcodejs <a target="_blank" href="https://github.com/davidshimjs/qrcodejs/blob/master/LICENSE">${i18n('license')}</a></li>
<li>Selection <a target="_blank" href="https://github.com/simonwep/selection/blob/master/LICENSE">${i18n('license')}</a></li>
<li>socket.io <a target="_blank" href="https://github.com/socketio/socket.io/blob/main/LICENSE">${i18n('license')}</a></li>
<li>Wallpaper by <a target="_blank" href="https://unsplash.com/@fakurian?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Milad Fakurian</a> on <a target="_blank" href="https://unsplash.com/photos/blue-orange-and-yellow-wallpaper-E8Ufcyxz514?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></li>
</ul>
</div>

View File

@ -27,9 +27,9 @@ async function UIWindowConfirmUserDeletion(options){
let h = '';
h += `<div style="padding: 20px;">`;
h += `<div class="generic-close-window-button disable-user-select"> &times; </div>`;
h += `<img src="${window.icons['danger.svg']}" style="width: 70px; margin: 20px auto 20px; display: block; margin-bottom: 20px;">`;
h += `<p style="text-align: center; font-size: 16px; padding: 20px; font-weight: 400; margin: -10px 10px 20px 10px; -webkit-font-smoothing: antialiased; color: #5f626d;">${i18n('confirm_delete_user')}</p>`;
h += `<button class="button button-block button-danger proceed-with-user-deletion" style="margin-bottom: 20px;">${i18n('proceed_with_account_deletion')}</button>`;
h += `<img src="${window.icons['danger.svg']}" class="account-deletion-confirmation-icon">`;
h += `<p class="account-deletion-confirmation-prompt">${i18n('confirm_delete_user')}</p>`;
h += `<button class="button button-block button-danger proceed-with-user-deletion">${i18n('proceed_with_account_deletion')}</button>`;
h += `<button class="button button-block button-secondary cancel-user-deletion">${i18n('cancel')}</button>`;
h += `</div>`;

View File

@ -29,13 +29,13 @@ async function UIWindowFinalizeUserDeletion(options){
if(user.is_temp){
h += `<div style="padding: 20px;">`;
h += `<div class="generic-close-window-button disable-user-select"> &times; </div>`;
h += `<img src="${window.icons['danger.svg']}" style="width: 70px; margin: 20px auto 20px; display: block; margin-bottom: 20px;">`;
h += `<p style="text-align: center; font-size: 16px; padding: 20px; font-weight: 400; margin: -10px 10px 20px 10px; -webkit-font-smoothing: antialiased; color: #5f626d;">${i18n('type_confirm_to_delete_account')}</p>`;
h += `<img src="${window.icons['danger.svg']}" class="account-deletion-confirmation-icon">`;
h += `<p class="account-deletion-confirmation-prompt">${i18n('type_confirm_to_delete_account')}</p>`;
// error message
h += `<div class="error-message" style="display: none;"></div>`;
h += `<div class="error-message"></div>`;
// input field
h += `<input type="text" class="confirm-temporary-user-deletion" placeholder="${i18n('type_confirm_to_delete_account')}" style="width: 100%; margin-bottom: 20px;">`;
h += `<button class="button button-block button-danger proceed-with-user-deletion" style="margin-bottom: 20px;">${i18n('delete_account')}</button>`;
h += `<input type="text" class="confirm-temporary-user-deletion" placeholder="${i18n('type_confirm_to_delete_account')}">`;
h += `<button class="button button-block button-danger proceed-with-user-deletion">${i18n('delete_account')}</button>`;
h += `<button class="button button-block button-secondary cancel-user-deletion">${i18n('cancel')}</button>`;
h += `</div>`;
}
@ -43,13 +43,13 @@ async function UIWindowFinalizeUserDeletion(options){
else{
h += `<div style="padding: 20px;">`;
h += `<div class="generic-close-window-button disable-user-select"> &times; </div>`;
h += `<img src="${window.icons['danger.svg']}" style="width: 70px; margin: 20px auto 20px; display: block; margin-bottom: 20px;">`;
h += `<p style="text-align: center; font-size: 16px; padding: 20px; font-weight: 400; margin: -10px 10px 20px 10px; -webkit-font-smoothing: antialiased; color: #5f626d;">${i18n('enter_password_to_confirm_delete_user')}</p>`;
h += `<img src="${window.icons['danger.svg']}" class="account-deletion-confirmation-icon">`;
h += `<p class="account-deletion-confirmation-prompt">${i18n('enter_password_to_confirm_delete_user')}</p>`;
// error message
h += `<div class="error-message" style="display: none;"></div>`;
h += `<div class="error-message"></div>`;
// input field
h += `<input type="password" class="confirm-user-deletion-password" placeholder="${i18n('current_password')}" style="width: 100%; margin-bottom: 20px;">`;
h += `<button class="button button-block button-danger proceed-with-user-deletion" style="margin-bottom: 20px;">${i18n('delete_account')}</button>`;
h += `<input type="password" class="confirm-user-deletion-password" placeholder="${i18n('current_password')}">`;
h += `<button class="button button-block button-danger proceed-with-user-deletion">${i18n('delete_account')}</button>`;
h += `<button class="button button-block button-secondary cancel-user-deletion">${i18n('cancel')}</button>`;
h += `</div>`;
}

View File

@ -52,7 +52,7 @@ async function UIWindowSettings(options){
h += `<div class="settings-content" data-settings="usage">`;
h += `<h1>Usage</h1>`;
h += `<div class="driver-usage">
<h3 style="margin-bottom: 5px; font-size: 14px;">Storage Usage</h3>
<h3 style="margin-bottom: 5px; font-size: 14px;">${i18n('storage_usage')}</h3>
<div style="font-size: 13px; margin-bottom: 3px;">
<span id="storage-used"></span>
<span> used of </span>
@ -67,23 +67,23 @@ async function UIWindowSettings(options){
// Account
h += `<div class="settings-content" data-settings="account">`;
h += `<h1>Account</h1>`;
h += `<h1>${i18n('account')}</h1>`;
// change password button
h += `<div class="settings-card">`;
h += `<strong>Password</strong>`;
h += `<strong>${i18n('password')}</strong>`;
h += `<div style="flex-grow:1;">`;
h += `<button class="button change-password" style="float:right;">Change Password</button>`;
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;">Username</strong>`;
h += `<span style="display:block; margin-top:5px;">${user.username}</span>`;
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;">Change Username</button>`;
h += `<button class="button change-username" style="float:right;">${i18n('change_username')}</button>`;
h += `</div>`
h += `</div>`;
@ -91,11 +91,11 @@ async function UIWindowSettings(options){
if(user.email){
h += `<div class="settings-card">`;
h += `<div>`;
h += `<strong style="display:block;">Email</strong>`;
h += `<strong style="display:block;">${i18n('email')}</strong>`;
h += `<span 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;">Change Email</button>`;
h += `<button class="button change-email" style="margin-bottom: 10px; float:right;">${i18n('change_email')}</button>`;
h += `</div>`;
h += `</div>`;
}
@ -112,7 +112,7 @@ async function UIWindowSettings(options){
// Language
h += `<div class="settings-content" data-settings="language">`;
h += `<h1>Language</h1>`;
h += `<h1>${i18n('language')}</h1>`;
// search
h += `<div class="search-container" style="margin-bottom: 10px;">`;
h += `<input type="text" class="search" placeholder="Search">`;
@ -204,7 +204,7 @@ async function UIWindowSettings(options){
usageDisplay = `
<div class="driver-usage" style="margin-bottom: 10px;">
<h3 style="margin-bottom: 5px; font-size: 14px;">${service.service['driver.interface']} (${service.service['driver.method']}):</h3>
<span style="font-size: 13px; margin-bottom: 3px;">Usage: ${monthly_usage} (Unlimited)</span>
<span style="font-size: 13px; margin-bottom: 3px;">${i18n('usage')}: ${monthly_usage} (${i18n('unlimited')})</span>
</div>
`;
}

View File

@ -3262,19 +3262,20 @@ label {
* ==================================================
*/
.settings-container{
.settings-container {
display: flex;
flex-direction: column;
height: 100%;
}
.settings{
.settings {
display: flex;
flex-direction: row;
-webkit-font-smoothing: antialiased;
flex-grow: 1;
}
.settings-sidebar{
.settings-sidebar {
width: 200px;
background-color: #f9f9f9;
border-right: 1px solid #e0e0e0;
@ -3282,7 +3283,7 @@ label {
}
.settings-sidebar-item{
.settings-sidebar-item {
cursor: pointer;
border-radius: 4px;
padding: 10px;
@ -3293,29 +3294,31 @@ label {
padding-left: 45px;
font-size: 15px;
}
.settings-sidebar-item:hover{
.settings-sidebar-item:hover {
background-color: #e8e8e8;
}
.settings-sidebar-item.active{
.settings-sidebar-item.active {
background-color: #e0e0e0;
}
.settings-content-container{
.settings-content-container {
flex: 1;
padding: 20px 30px;
height: 500px;
overflow-y: scroll;
}
.settings-content{
.settings-content {
display: none;
}
.settings-content[data-settings="about"]{
.settings-content[data-settings="about"] {
height: 100%;
}
.settings-content h1{
.settings-content h1 {
font-size: 24px;
margin-bottom: 20px;
border-bottom: 1px solid #e0e0e0;
@ -3324,17 +3327,18 @@ label {
font-weight: 500;
}
.settings-content.active{
.settings-content.active {
display: block;
}
.settings-content .about-container{
.settings-content .about-container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.settings-content[data-settings="about"] a {
color: #1663d4;
text-decoration: none;
@ -3394,7 +3398,12 @@ label {
padding: 20px 40px;
max-width: 500px;
}
.settings-content .version{
.about-container .about{
text-align: center;
}
.settings-content .version {
font-size: 9px;
color: #343c4f;
text-align: center;
@ -3403,7 +3412,8 @@ label {
transition: opacity 0.1s ease-in-out;
height: 12px;
}
.settings-content .version:hover{
.settings-content .version:hover {
opacity: 1;
}
@ -3415,23 +3425,28 @@ label {
color: #3c4963;
height: 85px;
}
.credits{
.credits {
padding: 0;
border: 1px solid #bfbfbf;
border: 1px solid #bfbfbf;
box-shadow: 1px 1px 10px 0px #8a8a8a;
width: 400px;
}
.credit-content a{
font-size:15px;
.credit-content a {
font-size: 15px;
}
.credits .credit-content{
.credits .credit-content {
padding: 20px;
}
.credit-content{
.credit-content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.credit-content ul{
.credit-content ul {
max-height: 300px;
overflow-y: scroll;
background: #f4f4f4;
@ -3439,9 +3454,11 @@ label {
box-shadow: 2px 2px 5px 2px inset #CCC;
}
.credit-content li{
.credit-content li {
margin-bottom: 10px;
}
#storage-bar-wrapper {
width: 100%;
height: 15px;
@ -3495,7 +3512,7 @@ label {
}
.version{
.version {
font-size: 9px;
color: #343c4f;
text-align: center;
@ -3504,14 +3521,17 @@ label {
transition: opacity 0.1s ease-in-out;
height: 12px;
}
.version:hover{
.version:hover {
opacity: 1;
}
.language-list{
.language-list {
display: grid;
grid-template-columns: 33.333333333% 33.333333333% 33.333333333%;
}
.language-item{
.language-item {
cursor: pointer;
padding: 10px;
border-radius: 4px;
@ -3519,15 +3539,15 @@ label {
margin-right: 10px;
}
.language-item:hover{
.language-item:hover {
background-color: #f6f6f6;
}
.language-item.active{
.language-item.active {
background-color: #e0e0e0;
}
.settings-card{
.settings-card {
overflow: hidden;
padding: 10px 15px;
border: 1px solid;
@ -3541,16 +3561,18 @@ label {
height: 45px;
}
.settings-card strong{
.settings-card strong {
font-weight: 500;
}
.settings-card-danger{
.settings-card-danger {
border-color: #f0080866;
background: #ffecec;
color: rgb(215 2 2);
}
.error-message{
.error-message {
display: none;
border-color: #f0080866;
background: #ffecec;
color: rgb(215 2 2);
@ -3560,4 +3582,32 @@ label {
padding: 10px;
border-radius: 4px;
border: 1px solid #f0080866;
}
.account-deletion-confirmation-prompt {
text-align: center;
font-size: 16px;
padding: 20px;
font-weight: 400;
margin: -10px 10px 20px 10px;
-webkit-font-smoothing: antialiased;
color: #5f626d;
}
.account-deletion-confirmation-icon{
width: 70px;
margin: 20px auto 20px;
display: block;
margin-bottom: 20px;
}
.proceed-with-user-deletion{
margin-bottom: 20px;
}
.confirm-temporary-user-deletion{
width: 100%;
margin-bottom: 20px;
}
.confirm-user-deletion-password{
width: 100%;
margin-bottom: 20px;
}

View File

@ -67,6 +67,9 @@ const update_username_in_gui = function(new_username){
else if (attr_item_path.startsWith('/' + window.user.username + '/'))
$el.attr('data-item-path', attr_item_path.replace('/' + window.user.username + '/', '/' + new_username + '/'));
}
// any element with username class
$('.username').text(new_username);
})
// todo update all window paths

View File

@ -57,6 +57,7 @@ const en = {
create_account: "Create Account",
create_free_account: "Create Free Account",
create_shortcut: "Create Shortcut",
credits: "Credits",
current_password: "Current Password",
cut: 'Cut',
date_modified: 'Date modified',
@ -66,6 +67,7 @@ const en = {
deploy_as_app: 'Deploy as app',
descending: 'Descending',
desktop_background_fit: "Fit",
developers: "Developers",
dir_published_as_website: `%strong% has been published to:`,
disassociate_dir: "Disassociate Directory",
download: 'Download',
@ -94,6 +96,7 @@ const en = {
jpeg_image: 'JPEG image',
keep_in_taskbar: 'Keep in Taskbar',
language: "Language",
license: "License",
loading: 'Loading',
log_in: "Log In",
log_into_another_account_anyway: 'Log into another account anyway',
@ -120,6 +123,7 @@ const en = {
open_in_new_tab: "Open in New Tab",
open_in_new_window: "Open in New Window",
open_with: "Open With",
oss_code_and_content: "Open Source Software and Content",
password: "Password",
password_changed: "Password changed.",
passwords_do_not_match: '`New Password` and `Confirm New Password` do not match.',
@ -131,11 +135,14 @@ const en = {
powered_by_puter_js: `Powered by <a href="https://docs.puter.com/" target="_blank">Puter.js</a>`,
preparing: "Preparing...",
preparing_for_upload: "Preparing for upload...",
privacy: "Privacy",
proceed_to_login: 'Proceed to login',
proceed_with_account_deletion: "Proceed with Account Deletion",
properties: "Properties",
publish: "Publish",
publish_as_website: 'Publish as website',
puter_description: `Puter is a privacy-first personal cloud to keep all your files, apps, and games in one
secure place, accessible from anywhere at any time.`,
recent: "Recent",
recover_password: "Recover Password",
refer_friends_c2a: "Get 1 GB for every friend who creates and confirms an account on Puter. Your friend will get 1 GB too!",
@ -173,13 +180,17 @@ const en = {
skip: 'Skip',
sort_by: 'Sort by',
start: 'Start',
status: "Status",
storage_usage: "Storage Usage",
taking_longer_than_usual: 'Taking a little longer than usual. Please wait...',
terms: "Terms",
text_document: 'Text document',
tos_fineprint: `By clicking 'Create Free Account' you agree to Puter's <a href="https://puter.com/terms" target="_blank">Terms of Service</a> and <a href="https://puter.com/privacy" target="_blank">Privacy Policy</a>.`,
trash: 'Trash',
type: 'Type',
type_confirm_to_delete_account: "Type 'confirm' to delete your account.",
undo: 'Undo',
unlimited: 'Unlimited',
unzip: "Unzip",
upload: 'Upload',
upload_here: 'Upload here',