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

src/UI/Settings/UITabAbout.js

@@ -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>

src/UI/Settings/UIWindowConfirmUserDeletion.js

@@ -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>`;
 

src/UI/Settings/UIWindowFinalizeUserDeletion.js

@@ -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>`;
         }

src/UI/Settings/UIWindowSettings.js

@@ -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>
                         `;
                     }

src/css/style.css

@@ -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;
 }

src/helpers/update_username_in_gui.js

@@ -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

src/i18n/translations/en.js

@@ -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',