Port customizability function added.

Eta06 · Eta06 · commit 6cf00dd623ff · 2024-07-16T17:50:13.000+03:00
diff --git a/main.py b/main.py
@@ -1,8 +1,12 @@
 # Description: Main file for the LockDown project
+import os
+import io
 import webbrowser
 from flask import Flask, render_template, request, redirect, url_for
 from modules.config import readAppConfig, updateAppConfig, loadLanguageFiles, tryLoad
 
+import sys
+import subprocess
 
 app = Flask(__name__)
 appcfg = readAppConfig()
@@ -13,6 +17,17 @@
 port = tryLoad("app_port")
 
 
+def restart_server():
+    """Restarts the current Python script."""
+    print("Restarting server...")
+    python = sys.executable
+    # Close stdout and stderr to prevent inheritance
+    with open(os.devnull, 'wb') as devnull:
+        os.dup2(devnull.fileno(), sys.stdout.fileno())
+        os.dup2(devnull.fileno(), sys.stderr.fileno())
+        os.execl(python, python, *sys.argv)
+
+
 @app.route("/set_language", methods=["POST"])
 def set_language():
     import time
@@ -45,11 +60,26 @@ def reset_everything():
     return redirect(url_for("index"))
 
 
+@app.route("/set_port", methods=["POST"])
+def set_port():
+    global port
+
+    port = request.form.get("port")
+    if port == "" or not port.isdigit() or int(port) < 1024 or int(port) > 65535:
+        return redirect(url_for("index"))
+    appcfg["app_port"] = port
+    updateAppConfig("app_port", port)
+
+    restart_server()  # Restart instead of shutdown
+    return 'Server restarting...'  # Indicate restart in progress
+
+
 @app.route("/")
 def index():
     if language == "":
         return render_template("language.html", version=version, language=language, author=author)
-    return render_template("index.html", version=version, language=language, author=author, language_files=language_files)
+    return render_template("index.html", version=version, language=language, author=author,
+                           language_files=language_files, port=port)
 
 
 @app.route("/status")
@@ -58,8 +88,8 @@ def status():
 
 
 if __name__ == "__main__":
-    appcfg = readAppConfig()
-    app_port = tryLoad("app_port")
-    webbrowser.open("http://localhost:" + str(app_port))
-    app.run(debug=True, port=app_port, host="0.0.0.0")
-
+    while True:
+        appcfg = readAppConfig()
+        app_port = tryLoad("app_port")
+        # webbrowser.open("http://localhost:" + str(app_port))
+        app.run(debug=True, port=app_port, host="0.0.0.0")
diff --git a/modules/config.py b/modules/config.py
@@ -8,6 +8,8 @@ def tryLoad(key):
         data = appcfg[key]
     except:
         data = getDefaultConfig()[key]
+        # Fix the missing key on the config file and update it.
+        updateAppConfig(key, data)
     return data
 
 
diff --git a/templates/index.html b/templates/index.html
@@ -42,6 +42,7 @@
         }
         .main-screen {
             transition: opacity 1s ease-in-out;
+            height: 70vh;
         }
         html {
             height: 100%;
@@ -50,6 +51,8 @@
         body{
             background-color: #212121; /* Bold and Energetic background */
             margin: 0;
+            display: flex;
+            flex-direction: column;
         }
         h1 {
             transition: opacity 1s;
@@ -85,9 +88,10 @@
         .footer-div {
             position: fixed;
             bottom: 0;
+            height: 10vh;
             width: 100%;
             text-align: center;
-            background-color: rgba(21, 102, 192, 0.09); /* Match header for consistency */
+            background-color: rgb(32, 50, 70); /* Match header for consistency */
             padding: 10px;
         }
 
@@ -206,7 +210,8 @@
             height: 100px;
         }
 
-        .language-card select {
+        .port-number,
+        .language-card select{
             width: 100%;
             padding: 5px;
             border: 1px solid #ddd;
@@ -258,21 +263,56 @@
             color: #000000; /* Bold and Energetic text */
         }
 
-        cardwidget {
+        .cardwidget {
             display: flex;
             flex-wrap: wrap;
             justify-content: center;
             width: 80%;
+            overflow-y: scroll;
+            height: 100%;
+            max-height: calc(70vh - 80px); /* Limit height based on viewport and spacing */
         }
 
         @media (max-width: 768px) { /* Adjust the breakpoint as needed */
             .tabs {
                 width: 90%; /* Set the width to 90% on mobile devices */
             }
             .settings-card{
-                width: 90%;
+                width: 100%;
+                height: 120px;
             }
         }
+        input[type=number]::-webkit-inner-spin-button,
+        input[type=number]::-webkit-outer-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+
+        /* Scrollbar Styling for Webkit browsers (Chrome, Safari) */
+::-webkit-scrollbar {
+    width: 10px; /* Width of the scrollbar thumb */
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(33, 33, 33, 0.8); /* Track background with some transparency */
+    border-radius: 8px; /* Rounded corners for the track */
+}
+
+::-webkit-scrollbar-thumb {
+    background: #F25D5D; /* Thumb background color */
+    border-radius: 8px; /* Rounded corners for the thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #993d3d; /* Slightly darker shade for hover */
+}
+
+
+/* Scrollbar Styling for Firefox */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: #F25D5D rgba(33, 33, 33, 0.8);
+}
     </style>
 </head>
 <body>
@@ -303,7 +343,7 @@ <h1>{{ language_files.home }}</h1>
                 </div>
 
             <div class="tab-content" id="settings">
-                <cardwidget>
+                <div class="cardwidget" >
                     <div class="settings-card language-card">
                         <h3>{{ language_files.language }}</h3>
                         <label>
@@ -316,35 +356,35 @@ <h3>{{ language_files.language }}</h3>
                         </label>
                         <button class="click-buttons" id="save-language">{{ language_files.save }}</button>
                     </div>
+                    <div class="settings-card" style="align-items: center;">
+                        <h3>{{ language_files.port }}</h3>
+                        <input style="width: 98%; margin-bottom: 10px" class="port-number" inputmode="numeric" type="number" name="port" value="{{ port }}" min="1" max="65535" placeholder="{{ language_files.portinfo }}">
+                        <button class="click-buttons" id="save-port" style="width: 100%">{{ language_files.save }}</button>
+                    </div>
                     <div class="settings-card reset-card">
                         <h3>{{ language_files.reset }}</h3>
                         <p>{{ language_files.resetinfo }}</p>
                         <button class="click-buttons" id="confirm-reset">{{ language_files.reset }}</button>
                     </div>
-                    <div class="settings-card">
-                        <h3>{{ language_files.port }}</h3>
-                        <p>{{ language_files.portinfo }}</p>
-                        <input type="number" name="port" value="{{ port }}" min="1" max="65535" step="1">
-                    </div>
-                </cardwidget>
-            </div>
 
-        </div>
-    </center>
-    <center>
-        <div class="footer-div" style="right: -10px; left:-10px;">
-            <p class="version-text">{{ language_files.version }} {{ version }}</p>
-            <div class="footer-tabs">
-                <div style="display:none;" class="footer-tab" onclick="window.location.href='/about'">{{ language_files.about }}</div>
-                <div class="footer-tab" style="padding: 0; height: 38px; border-radius: 20px; background-color: transparent"><a href="https://github.com/Eta06" target="_blank">
-                    <img src="{{ url_for('static', filename='images/github.png') }}" alt="GitHub" width="38" height="38" style="filter: invert(100%)">
-                </a>
                 </div>
-                <div style="display:none;" class="footer-tab" onclick="window.location.href='/contact'">{{ language_files.contact }}</div>
             </div>
+
         </div>
     </center>
-    <script>
+<div class="footer-div" style="text-align: center;">
+    <p class="version-text">{{ language_files.version }} {{ version }}</p>
+    <div class="footer-tabs">
+        <div style="display:none;" class="footer-tab" onclick="window.location.href='/about'">{{ language_files.about }}</div>
+        <div class="footer-tab" style="padding: 0; height: 38px; border-radius: 20px; background-color: transparent"><a href="https://github.com/Eta06/LockDown" target="_blank">
+            <img src="{{ url_for('static', filename='images/github.png') }}" alt="GitHub" width="38" height="38" style="filter: invert(100%)">
+        </a>
+        </div>
+        <div style="display:none;" class="footer-tab" onclick="window.location.href='/contact'">{{ language_files.contact }}</div>
+    </div>
+</div>
+
+<script>
 
         // on language save add listener to the save button
         document.getElementById("save-language").addEventListener("click", function () {
@@ -398,6 +438,29 @@ <h3>{{ language_files.port }}</h3>
 });
 });
 
+        // save the port number
+        document.getElementById("save-port").addEventListener("click", function (){
+            const port = document.querySelector('input[name="port"]').value;
+            // save the port number
+            fetch('/set_port', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded'
+                },
+                body: 'port=' + port
+            })
+            const domain = window.location.hostname;
+            const url = `http://${domain}:${port}`;
+            Swal.fire({
+                title: "{{ language_files.portchanged }}",
+                timeout: 3000,
+                icon: "success",
+                showCancelButton: false,
+        })
+                setTimeout(function () {
+                window.location.href = url;
+            }, 2000)
+        })
 
         function clearActiveTabs() {
             tabs.forEach(tab => tab.classList.remove('active'));
@@ -435,6 +498,6 @@ <h3>{{ language_files.port }}</h3>
                 // document.getElementById(footerTabId).classList.add('active');
             });
         });
-    </script>
+</script>
 </body>
 </html>
diff --git a/translations/en.json b/translations/en.json
@@ -16,7 +16,8 @@
   "yesreset": "Yes, reset!",
   "areyousure": "Are you sure?",
   "port": "Server Port",
-  "portinfo": "Port number to use for the application",
+  "portinfo": "Port number to use for the application. Default: 4900",
+  "portchanged": "Port number changed!",
   "irreversibleAction": "This action cannot be undone!",
   "resetinfo": "Are you sure you want to reset all settings?",
   "infotext1": "This is the web UI for LockDown App.",
diff --git a/translations/es.json b/translations/es.json
@@ -16,7 +16,8 @@
   "yesreset": "Si, restablecer!",
   "areyousure": "¿Está seguro?",
   "port": "Puerto del servidor",
-  "portinfo": "Número de puerto para usar la aplicación",
+  "portinfo": "Número de puerto para utilizar la aplicación. Por defecto: 4900",
+  "portchanged": "Número de puerto cambiado!",
   "irreversibleAction": "Esta acción no se puede deshacer!",
   "resetinfo": "¿Está seguro de que desea restablecer todas las configuraciones?",
   "infotext1": "Esta es la interfaz web de la aplicación LockDown.",
diff --git a/translations/ru.json b/translations/ru.json
@@ -16,7 +16,8 @@
   "yesreset": "Да, сбросить!",
   "areyousure": "Вы уверены?",
   "port": "Порт сервера",
-  "portinfo": "",
+  "portinfo": "Номер порта для использования приложения. По умолчанию: 4900",
+  "portchanged": "Номер порта изменен!",
   "irreversibleAction": "Эта операция не может быть отменена!",
   "resetinfo": "Вы уверены, что хотите сбросить все настройки?",
   "infotext1": "Это веб-интерфейс приложения LockDown.",
diff --git a/translations/tr.json b/translations/tr.json
@@ -17,6 +17,7 @@
   "areyousure": "Emin misiniz?",
   "port": "Sunucu Portu",
   "portinfo": "Uygulama için kullanılacak port numarasıdır. Varsayılan: 4900",
+  "portchanged": "Port numarası değiştirildi!",
   "irreversibleAction": "Bu işlem geri alınamaz!",
   "resetinfo": "Tüm ayarları sıfırlamak istediğinizden emin misiniz?",
   "infotext1": "Bu, LockDown uygulamasının web arayüzüdür.",
