Huge improvments for the mobile comunity, Fixed some tiny things, made that the files are now on the right language on view

Author: privt00

public/assets/tailwind.css

@@ -29,7 +29,7 @@ router.ws("/console/:id", async (ws, req) => {
     };
 
     socket.onerror = (error) => {
-        ws.send('\x1b[31;1mThis instance is unavailable! \n\x1b[0mThe skyportd instance appears to be down. Retrying...')
+        ws.send('\x1b[31;1mThis instance is unavailable! \n\x1b[0mThe skyportd instance appears to be down. Retrying...\n')
     };
 
     socket.onclose = (event) => {};

routes/Instance/WebSocket/Console.js

@@ -20,7 +20,6 @@ async function fetchFiles(instance, path = '') {
 
     return response.data.files || [];
     } catch (error) {
-        console.error('Error on fetching files');
         return [];
     }
 }

utils/fileHelper.js

@@ -2,8 +2,8 @@
 
 <main id="content">
    <div class="px-4 sm:px-6 lg:px-8">
-      <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-4">
-         <div class="p-3 bg-transparent shadow-xl border border-white/5 rounded-xl overflow-hidden sm:p-6 lg:p-10 card" style="width: 800px;">
+      <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-2">
+         <div class="p-3 bg-transparent shadow-xl border border-white/5 rounded-xl overflow-hidden sm:p-6 lg:p-10 card w-full">
             <div class="lg:flex lg:items-center lg:justify-between">
                <div class="min-w-0 flex-1">
                   <h2 class="text-md font-medium tracking-tight">
@@ -14,17 +14,17 @@
                      </span>
                   </h2>
                   <form id="change-username-form" action="/change-username" method="POST" class="mt-5">
-                     <div class="flex justify-between">
-                        <div class="w-1/2 mr-4">
+                     <div class="flex flex-col sm:flex-row justify-between">
+                        <div class="w-full sm:w-1/2 sm:mr-4 mb-4 sm:mb-0">
                            <label class="text-neutral-400 text-sm tracking-tight mb-2"><%= req.translations.username %>:</label>
                            <input id="username" type="text" name="username" 
                            class="rounded-xl focus:ring-transparent focus:border-transparent text-sm mt-1 mb-0 w-full items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-600/20 dark:bg-neutral-900 placeholder-neutral-400 text-white border border-black/10" 
-                           style="width: 340px;" placeholder="<%= user.username %>" />
+                           placeholder="<%= user.username %>" />
                            <span id="username-feedback" class="mt-2 border border-neutral-600/30 text-neutral-400 text-xs font-medium me-2 px-2.5 py-1 rounded-full"><%= req.translations.checking %></span>
                         </div>
-                        <div class="w-1/2">
-                           <label class="text-neutral-400 text-sm tracking-tight mt-4"><%= req.translations.email %>:</label>
-                           <input id="email" type="email" name="email" value="" class="text-white rounded-xl focus:ring-transparent focus:border-transparent text-sm mt-1 mb-0 w-full items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-600/20 dark:bg-neutral-900 placeholder:text-white/20 border border-black/10" style="width: 340px;" placeholder="<%= user.email %>" disabled />
+                        <div class="w-full sm:w-1/2">
+                           <label class="text-neutral-400 text-sm tracking-tight mt-4 sm:mt-0"><%= req.translations.email %>:</label>
+                           <input id="email" type="email" name="email" value="" class="text-white rounded-xl focus:ring-transparent focus:border-transparent text-sm mt-1 mb-0 w-full items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-600/20 dark:bg-neutral-900 placeholder:text-white/20 border border-black/10" placeholder="<%= user.email %>" disabled />
                         </div>
                      </div>
                      <button type="submit" id="change-username-btn" class="mt-4 block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" disabled><%= req.translations.updateUsername %></button>
@@ -37,7 +37,7 @@
                      <label class="block text-neutral-400 text-sm tracking-tight mt-4"><%= req.translations.newPassword %>:</label>
                      <input id="newPassword" type="password" name="newPassword" class="rounded-xl focus:ring-transparent focus:border-transparent text-sm mt-1 mb-0 w-full items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-600/20 dark:bg-neutral-900 placeholder-neutral-400 text-white border border-black/10" placeholder="<%= req.translations.newPasswordHide %>" disabled />
                      <button type="submit" class="mt-4 block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"><%= req.translations.update_password %></button>
-                 </form>
+                  </form>
                  <% if (user.twoFAEnabled !== true) { %>
                   <button onclick="window.location.href = '/enable-2fa';" class="mt-4 block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"><%= req.translations.enabled2FA %></button>      
                  <% } else { %>
@@ -52,6 +52,7 @@
    </div>
 </main>
 
+
 <style>
    #username-feedback, #current-password-feedback {
    transition: opacity 0.3s ease-in-out;

views/account.ejs

@@ -1,4 +1,5 @@
 <%- include('../../components/template') %>
+
 <main id="content">
    <div class="bg-transparent">
       <div class="sm:flex sm:items-center px-8 pt-4">
@@ -9,18 +10,17 @@
       </div>
    </div>
    <%- include('../../components/settings') %>
-   <!--div class="grid grid-cols-1 md:lg:grid-cols-2 gap-2 md-lg"-->
    <div class="flex flex-col bg-white/5 m-8 pt-0 py-5 rounded-xl">
-      <h1 class="text-white text-[18px] px-5 p-1 py-4 mb-1 w-full bg-white/5 rounded-t-xl font-medium"><%= req.translations.general %></h1>
-      <div class="grid grid-cols-3">
-         <div id="changenameform" class="mt-4 ml-5">
+      <h1 class="text-white text-[18px] px-5 py-4 mb-1 w-full bg-white/5 rounded-t-xl font-medium"><%= req.translations.general %></h1>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 px-5">
+         <div id="changenameform" class="mt-4">
             <form action="/admin/settings/change/name" method="POST">
                <label for="name" class="text-neutral-400 text-sm tracking-tight mb-2"><%= req.translations.panelName %></label>
-               <input id="name" name="name" type="text" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-88 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-white/5 placeholder:text-white/20 text-white border border-black/10" value="<%= name %>" placeholder="<%= name %>" required>
+               <input id="name" name="name" type="text" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-fit items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-white/5 placeholder:text-white/20 text-white border border-black/10" value="<%= name %>" placeholder="<%= name %>" required>
                <button id="Save-Name" type="submit" class="mt-6 block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2"><%= req.translations.save %></button>
             </form>
          </div>
-         <div id="changelogoform" class="mt-6 ml-5">
+         <div id="changelogoform" class="mt-6">
             <label for="name" class="text-neutral-400 text-sm tracking-tight mb-2"><%= req.translations.panelLogo %></label>
             <form action="/admin/settings/change/logo" class="mt-4" method="POST" enctype="multipart/form-data">
                <div class="flex items-center mb-4">
@@ -44,13 +44,13 @@
                   <span class="text-neutral-400 text-sm tracking-tight mb-2"><%= req.translations.registerPage %> <span class="font-medium text-red-500"><%= req.translations.disabled %></span></span>
                   <% } %>
                </div>
-               <div class="flex flex-row">
+               <div class="flex flex-col sm:flex-row">
                   <% if (settings.register === true) { %>  
-                  <button id="toggleregister" type="submit" class="block rounded-l-lg bg-white px-3 py-2 text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2"><%= req.translations.disable %></button>
-                  <button id="toggleregister" type="submit" class="block rounded-r-lg bg-green-600 px-3 py-2 text-sm font-medium text-white shadow-lg hover:bg-green-500 transition focus:outline focus:outline-2 focus:outline-offset-2 opacity-[0.7]" disabled><%= req.translations.enable %></button>
+                  <button id="toggleregister" type="submit" class="block rounded-lg bg-white px-3 py-2 text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2 sm:rounded-l-lg sm:rounded-r-none"><%= req.translations.disable %></button>
+                  <button id="toggleregister" type="submit" class="block rounded-lg bg-green-600 px-3 py-2 text-sm font-medium text-white shadow-lg hover:bg-green-500 transition focus:outline focus:outline-2 focus:outline-offset-2 sm:rounded-none sm:rounded-r-lg opacity-[0.7]" disabled><%= req.translations.enable %></button>
                   <% } else { %>
-                  <button id="toggleregister" type="submit" class="block rounded-l-lg bg-red-600 px-3 py-2 text-sm font-medium text-white shadow-lg hover:bg-red-500 transition focus:outline focus:outline-2 focus:outline-offset-2 opacity-[0.7]" disabled><%= req.translations.disable %></button>
-                  <button id="toggleregister" type="submit" class="block rounded-r-lg bg-white px-3 py-2 text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2"><%= req.translations.enable %></button>
+                  <button id="toggleregister" type="submit" class="block rounded-lg bg-red-600 px-3 py-2 text-sm font-medium text-white shadow-lg hover:bg-red-500 transition focus:outline focus:outline-2 focus:outline-offset-2 sm:rounded-l-lg sm:rounded-r-none opacity-[0.7]" disabled><%= req.translations.disable %></button>
+                  <button id="toggleregister" type="submit" class="block rounded-lg bg-white px-3 py-2 text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2 sm:rounded-none sm:rounded-r-lg"><%= req.translations.enable %></button>
                   <% } %>  
                </div>
             </form>
@@ -63,23 +63,24 @@
                      <span class="text-neutral-400 text-sm tracking-tight mb-2"><%= req.translations.forceVerifyEmail %> <span class="font-medium text-red-500"><%= req.translations.disabled %></span></span>
                      <% } %>
                   </div>
-                  <div class="flex flex-row">
+                  <div class="flex flex-col sm:flex-row">
                      <% if (settings.forceVerify === true) { %>
-                     <button id="toggleforceverify" type="submit" class="block rounded-l-lg bg-white px-3 py-2 text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2"><%= req.translations.disable %></button>
-                     <button id="toggleforceverify" type="submit" class="block rounded-r-lg bg-green-600 px-3 py-2 text-sm font-medium text-white shadow-lg hover:bg-green-500 transition focus:outline focus:outline-2 focus:outline-offset-2 opacity-[0.7]" disabled><%= req.translations.enable %></button>
+                     <button id="toggleforceverify" type="submit" class="block rounded-lg bg-white px-3 py-2 text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2 sm:rounded-l-lg sm:rounded-r-none"><%= req.translations.disable %></button>
+                     <button id="toggleforceverify" type="submit" class="block rounded-lg bg-green-600 px-3 py-2 text-sm font-medium text-white shadow-lg hover:bg-green-500 transition focus:outline focus:outline-2 focus:outline-offset-2 sm:rounded-none sm:rounded-r-lg opacity-[0.7]" disabled><%= req.translations.enable %></button>
                      <% } else { %>
-                     <button id="toggleforceverify" type="submit" class="block rounded-l-lg bg-red-600 px-3 py-2 text-sm font-medium text-white shadow-lg hover:bg-red-500 transition focus:outline focus:outline-2 focus:outline-offset-2 opacity-[0.7]" disabled><%= req.translations.disable %></button>
-                     <button id="toggleforceverify" type="submit" class="block rounded-r-lg bg-white px-3 py-2 text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2"><%= req.translations.enable %></button>
+                     <button id="toggleforceverify" type="submit" class="block rounded-lg bg-red-600 px-3 py-2 text-sm font-medium text-white shadow-lg hover:bg-red-500 transition focus:outline focus:outline-2 focus:outline-offset-2 sm:rounded-l-lg sm:rounded-r-none opacity-[0.7]" disabled><%= req.translations.disable %></button>
+                     <button id="toggleforceverify" type="submit" class="block rounded-lg bg-white px-3 py-2 text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2 sm:rounded-none sm:rounded-r-lg"><%= req.translations.enable %></button>
                      <% } %>
                   </div>
                </form>
             </div>
          </div>
       </div>
-      <!--/div-->
    </div>
 </main>
+
 <%- include('../../components/footer') %>
+
 <script>
    document.getElementById('useImage').addEventListener('change', function() {
      const imageUploadBox = document.getElementById('imageUploadBox');
@@ -96,4 +97,4 @@
        logoType.value = 'none';
      }
    });
-</script>
+</script>