Merge branch 'tweak/improve-display' into 'dev'

Tweak/improve display

See merge request crafty-controller/crafty-4!547

CHANGELOG.md

@@ -5,7 +5,7 @@ TBD
 ### Bug fixes
 TBD
 ### Tweaks
-TBD
+-  Improve the UI on several areas of the Crafty Panel ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/547))
 ### Lang
 TBD
 <br><br>

app/classes/controllers/servers_controller.py

@@ -515,6 +515,25 @@ class ServersController(metaclass=Singleton):
     # **********************************************************************************
     #                                    Servers Helpers Methods
     # **********************************************************************************
+    @staticmethod
+    def get_cached_players(server_id):
+        srv = ServersController().get_server_instance_by_id(server_id)
+        stats = srv.stats_helper.get_server_stats()
+        server_path = stats["server_id"]["path"]
+        path = os.path.join(server_path, "usercache.json")
+
+        try:
+            with open(
+                Helpers.get_os_understandable_path(path), encoding="utf-8"
+            ) as file:
+                content = file.read()
+                file.close()
+        except Exception as ex:
+            print(ex)
+            return None
+
+        return json.loads(content)
+
     @staticmethod
     def get_banned_players(server_id):
         srv = ServersController().get_server_instance_by_id(server_id)

app/classes/shared/helpers.py

@@ -1294,3 +1294,24 @@ class Helpers:
         if region == "EN":
             return "en"
         return lang + "-" + region
+
+    @staticmethod
+    def get_player_avatar(uuid_player):
+        mojang_response = requests.get(
+            f"https://sessionserver.mojang.com/session/minecraft/profile/{uuid_player}",
+            timeout=10,
+        )
+        if mojang_response.status_code == 200:
+            uuid_profile = mojang_response.json()
+            profile_properties = uuid_profile["properties"]
+            for prop in profile_properties:
+                if prop["name"] == "textures":
+                    decoded_bytes = base64.b64decode(prop["value"])
+                    decoded_str = decoded_bytes.decode("utf-8")
+                    texture_json = json.loads(decoded_str)
+            skin_url = texture_json["textures"]["SKIN"]["url"]
+            skin_response = requests.get(skin_url, stream=True, timeout=10)
+            if skin_response.status_code == 200:
+                return base64.b64encode(skin_response.content)
+        else:
+            return

app/classes/web/panel_handler.py

@@ -777,7 +777,34 @@ class PanelHandler(BaseHandler):
                 ):
                     if not superuser:
                         self.redirect("/panel/error?error=Unauthorized access")
-                page_data["banned_players"] = get_banned_players_html()
+                page_data["banned_players_html"] = get_banned_players_html()
+                page_data[
+                    "banned_players"
+                ] = self.controller.servers.get_banned_players(server_id)
+                page_data[
+                    "cached_players"
+                ] = self.controller.servers.get_cached_players(server_id)
+
+                page_data["all_players"] = []
+                for player in page_data["cached_players"]:
+                    if player["name"] in page_data["get_players"]:
+                        player["status"] = "online"
+                    else:
+                        player["status"] = "offline"
+                        temp_date = datetime.datetime.strptime(
+                            player["expiresOn"], "%Y-%m-%d %H:%M:%S %z"
+                        )
+                        player["last_seen"] = (
+                            temp_date - datetime.timedelta(30, 0, 0, 0, 0, 0, 0)
+                        ).strftime("%Y/%m/%d %H:%M:%S")
+                    player["avatar"] = Helpers.get_player_avatar(player["uuid"])
+                    page_data["all_players"].append(player)
+                for player in page_data["banned_players"]:
+                    player["banned"] = True
+                    temp_date = datetime.datetime.strptime(
+                        player["created"], "%Y-%m-%d %H:%M:%S %z"
+                    )
+                    player["banned_on"] = (temp_date).strftime("%Y/%m/%d %H:%M:%S")
 
             template = f"panel/server_{subpage}.html"
 

app/frontend/static/assets/css/crafty.css

@@ -134,4 +134,47 @@ body {
 
 .accordion .card {
     margin-bottom: 0px;
-}
+}
+
+/**************************************************************/
+/* CSS for Froms Displays */
+/**************************************************************/
+div>.input-group>.custom-file-input {
+    position: relative !important;
+    -webkit-box-flex: 1 !important;
+    -ms-flex: 1 1 auto !important;
+    flex: 1 1 auto !important;
+    width: 1% !important;
+    margin-bottom: 0 !important;
+    border: 1px solid var(--outline);
+}
+
+div>.input-group>.form-control-file {
+    position: relative !important;
+    -webkit-box-flex: 1 !important;
+    -ms-flex: 1 1 auto !important;
+    flex: 1 1 auto !important;
+    width: 1% !important;
+    margin-bottom: 0 !important;
+    border: 1px solid var(--outline);
+}
+
+.custom-picker {
+    border: 1px solid var(--outline);
+}
+
+div>.input-group>.form-control {
+    position: relative !important;
+    -webkit-box-flex: 1 !important;
+    -ms-flex: 1 1 auto !important;
+    flex: 1 1 auto !important;
+    width: 1% !important;
+    margin-bottom: 0 !important;
+    border: 1px solid var(--outline);
+}
+
+.input-group>.input-group-append>button.upload-button {
+    height: calc(1.5em + 0.75rem + 2px);
+}
+
+/**************************************************************/

app/frontend/templates/panel/config_json.html

@@ -6,8 +6,7 @@
 {% block title %}Crafty Controller - {{ translate('panelConfig', 'pageTitle', data['lang']) }}{% end %}
 
 {% block content %}
-<link rel="stylesheet"
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.min.css">
-  href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.min.css">
 
 
 <div class="content-wrapper">
@@ -30,7 +29,12 @@
         <div class="card-body">
 
           {% if data['superuser'] %}
-          {% include "parts/crafty_config_list.html %}
+          <span class="d-none d-sm-block">
+            {% include "parts/crafty_config_list.html %}
+          </span>
+          <span class="d-block d-sm-none">
+            {% include "parts/m_crafty_config_list.html %}
+          </span>
           {% end %}
 
           <!-- Page Title Header Starts-->
@@ -69,11 +73,8 @@
                 </select>
                 {% elif item[0] == 'disabled_language_files' %}
                 <div class="input-group">
-                  <button type="button" class="btn btn-outline-default custom-picker" onclick="$('option', $('#lang_select')).each(function(element) {
+                  <button type="button" class="btn btn-outline-default custom-picker" onclick="$('option', $('#lang_select')).each(function(element) {$(this).removeAttr('selected').prop('selected', false); $('.selectpicker').selectpicker('refresh')});">{{ translate('panelConfig', 'enableLang', data['lang']) }}</button>
-                $(this).removeAttr('selected').prop('selected', false); $('.selectpicker').selectpicker('refresh')
+                  <select id="lang_select" class="form-control selectpicker show-tick custom-picker" data-icon-base="fas" data-tick-icon="fa-check" multiple data-style="custom-picker">
-            });">{{ translate('panelConfig', 'enableLang', data['lang']) }}</button>
-                  <select id="lang_select" class="form-control selectpicker show-tick" data-icon-base="fas"
-                    data-tick-icon="fa-check" multiple data-style="custom-picker">
                     {% for lang in data['all_languages'] %}
                     {% if lang in item[1] %}
                     <option selected>{{lang}}</option>
@@ -82,17 +83,12 @@
                     {% end %}
                     {% end %}
                   </select>
-                  <textarea id="disabled_lang" name="{{item[0]}}" class="form-control list hidden"
+                  <textarea id="disabled_lang" name="{{item[0]}}" class="form-control list hidden" rows="{{ len(data['all_languages']) }}" value="{{','.join(item[1])}}" hidden>{{','.join(item[1])}}</textarea>
-                    rows="{{ len(data['all_languages']) }}" value="{{','.join(item[1])}}"
-                    hidden>{{','.join(item[1])}}</textarea>
                 </div>
                 {% elif item[0] == 'monitored_mounts'%}
                 <div class="input-group">
-                  <button type="button" class="btn btn-outline-default custom-picker" onclick="$('option', $('#mount_select')).each(function(element) {
+                  <button type="button" class="btn btn-outline-default custom-picker" onclick="$('option', $('#mount_select')).each(function(element) {$(this).removeAttr('selected').prop('selected', false); $('.selectpicker').selectpicker('refresh')});">{{ translate('panelConfig', 'noMounts', data['lang']) }}</button>
-                $(this).removeAttr('selected').prop('selected', false); $('.selectpicker').selectpicker('refresh')
+                  <select id="mount_select" class="form-control selectpicker show-tick" data-icon-base="fas" data-tick-icon="fa-check" multiple data-style="custom-picker">
-            });">{{ translate('panelConfig', 'noMounts', data['lang']) }}</button>
-                  <select id="mount_select" class="form-control selectpicker show-tick" data-icon-base="fas"
-                    data-tick-icon="fa-check" multiple data-style="custom-picker">
                     {% for mount in data['all_partitions'] %}
                     {% if mount in item[1] %}
                     <option selected>{{mount}}</option>
@@ -101,13 +97,10 @@
                     {% end %}
                     {% end %}
                   </select>
-                  <textarea id="monitored_mounts" name="{{item[0]}}" class="form-control list hidden"
+                  <textarea id="monitored_mounts" name="{{item[0]}}" class="form-control list hidden" rows="{{ len(data['all_partitions']) }}" value="{{','.join(item[1])}}" hidden>{{','.join(item[1])}}</textarea>
-                    rows="{{ len(data['all_partitions']) }}" value="{{','.join(item[1])}}"
-                    hidden>{{','.join(item[1])}}</textarea>
                 </div>
                 {% elif isinstance(item[1], list) %}
-                <textarea value="{{','.join(item[1])}}" type="text" name="{{item[0]}}"
+                <textarea value="{{','.join(item[1])}}" type="text" name="{{item[0]}}" class="form-control list">{{','.join(item[1])}}</textarea>
-                  class="form-control list">{{','.join(item[1])}}</textarea>
                 {% elif isinstance(item[1], bool) %}
                 <div style="margin-left: 30px;">
                   {% if item[1] == True %}
@@ -123,11 +116,9 @@
                   {% end %}
                 </div>
                 {% elif isinstance(item[1], int) %}
-                <input type="number" class="form-control" name="{{item[0]}}" id="{{item[0]}}" value="{{ item[1]  }}"
+                <input type="number" class="form-control" name="{{item[0]}}" id="{{item[0]}}" value="{{ item[1]  }}" step="1" min="0" required>
-                  step="1" min="0" required>
                 {% else %}
-                <input type="text" class="form-control" name="{{item[0]}}" id="{{item[0]}}" value="{{ item[1]  }}"
+                <input type="text" class="form-control" name="{{item[0]}}" id="{{item[0]}}" value="{{ item[1]  }}" step="2" min="0" required>
-                  step="2" min="0" required>
                 {% end %}
               </div>
               {% end %}
@@ -142,10 +133,6 @@
 </div>
 
 <style>
-  .custom-picker {
-    border: 1px solid var(--outline);
-  }
-
   .dropdown-menu.inner {
     display: inline-block !important;
   }

app/frontend/templates/panel/custom_login.html

@@ -28,7 +28,12 @@
 
 
           {% if data['superuser'] %}
-          {% include "parts/crafty_config_list.html %}
+          <span class="d-none d-sm-block">
+            {% include "parts/crafty_config_list.html %}
+          </span>
+          <span class="d-block d-sm-none">
+            {% include "parts/m_crafty_config_list.html %}
+          </span>
           {% end %}
 
           <!-- Page Title Header Starts-->
@@ -51,16 +56,19 @@
                     <div class="col-12">
                       <h4>{{ translate('customLogin', 'loginImage', data['lang']) }}</h4>
                       <hr>
-                      <form class="form-row" name="zip" method="post" class="server-wizard" onSubmit="wait_msg(true)">
+                      <form class="form" name="zip" method="post" class="server-wizard" onSubmit="wait_msg(true)">
                         {% raw xsrf_form_html() %}
                         <input type="hidden" value="import_zip" name="create_type">
-                        <div class="col form-group">
+                        <div class="form-group">
-                          <span id="upload_input"><input type="file" class="form-control-file" id="file" name="file"
+                          <div id="upload_input" class="input-group">
-                              multiple="false" required></span>
+                            <div class="custom-file">
-                        </div>
+                              <input type="file" class="custom-file-input" id="file" name="file" multiple="false" required>
-                        <div class="col form-group">
+                              <label id="fileLabel" class="custom-file-label" for="file">{{ translate('customLogin', 'labelLoginImage', data['lang']) }}</label>
-                          <button type="button" class="btn btn-info" id="upload-button" onclick="sendFile()"
+                            </div>
-                            disabled>UPLOAD</button>
+                            <div class="input-group-append">
+                              <button type="button" class="btn btn-info upload-button" id="upload-button" onclick="sendFile()" disabled>UPLOAD</button>
+                            </div>
+                          </div>
                         </div>
                       </form>
                       <hr>
@@ -73,8 +81,7 @@
                           <div class="form-group row">
                             <label for="photo" class="col-sm-6 col-form-label">Selected Background Image</label>
                             <div class="col-sm-6">
-                              <select class="form-select form-control form-control-lg select-css form-control-plaintext"
+                              <select class="form-select form-control form-control-lg select-css form-control-plaintext" id="photo" name="photo" form="photo_form" onchange="updateBackgroundPreview()">
-                                id="photo" name="photo" form="photo_form" onchange="updateBackgroundPreview()">
                                 {% for image in data["backgrounds"] %}
                                 <option value="{{image}}">{{image}}</option>
                                 {% end %}
@@ -83,9 +90,7 @@
                           </div>
                           <div id="photo_loading" class="form-group" hidden>
                             <div class="progress">
-                              <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
+                              <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">&nbsp;<i class="fa-solid fa-spinner"></i></div>
-                                aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">&nbsp;<i
-                                  class="fa-solid fa-spinner"></i></div>
                             </div>
                           </div>
                           <div class="form-group row">
@@ -93,13 +98,11 @@
                               data['lang']) }}</label>
                             <label class="col-sm-1" id="opacityValue">{{ data['login_opacity'] }}%</label>
                             <div class="range col-sm-8">
-                              <input type="range" class="form-control-range" id="modal_opacity" name="modal_opacity"
+                              <input type="range" class="form-control-range" id="modal_opacity" name="modal_opacity" onchange="previewOpacity()" min="0" max="100" value="{{ data['login_opacity'] }}">
-                                onchange="previewOpacity()" min="0" max="100" value="{{ data['login_opacity'] }}">
                             </div>
                           </div>
                           <div id="login_preview" style="position: relative;">
-                            <img id="bg-preview" src="../../static/assets/images/auth/{{ data['background'] }}"
+                            <img id="bg-preview" src="../../static/assets/images/auth/{{ data['background'] }}" class="img-fluid" alt="Responsive image">
-                              class="img-fluid" alt="Responsive image">
                             <div id="login-form-preview">
                               <div id="login-form-background" class="auto-form-wrapper login-modal">
                                 <div class="text-center auto-form-logo">
@@ -163,20 +166,17 @@
                                 </style>
 
                                 <div id="login_form_data">
-                                  <input type="hidden" name="_xsrf"
+                                  <input type="hidden" name="_xsrf" value="2|1d603267|809fb6bd82f677d440e484dde7c3a310|1671726040" disabled>
-                                    value="2|1d603267|809fb6bd82f677d440e484dde7c3a310|1671726040" disabled>
                                   <div class="form-group">
                                     <label class="label">Username</label>
                                     <div class="input-group">
-                                      <input type="text" class="form-control login-text-input login-input"
+                                      <input type="text" class="form-control login-text-input login-input" placeholder="Username" name="username" id="username" required="true" disabled>
-                                        placeholder="Username" name="username" id="username" required="true" disabled>
                                     </div>
                                   </div>
                                   <div class="form-group">
                                     <label class="label">Password</label>
                                     <div class="input-group">
-                                      <input type="password" class="form-control login-text-input login-input"
+                                      <input type="password" class="form-control login-text-input login-input" placeholder="Password" name="password" id="password" required="true" disabled>
-                                        placeholder="Password" name="password" id="password" required="true" disabled>
                                     </div>
                                   </div>
                                   <div class="form-group">
@@ -195,8 +195,7 @@
                                     <a href="#" class="text-small forgot-password" disabled>Forgot Password</a>
                                   </div>
                                   <div class="text-block text-center my-3">
-                                    <span class="text-small font-weight-semibold"><a
+                                    <span class="text-small font-weight-semibold"><a href="https://craftycontrol.com/">Crafty Control
-                                        href="https://craftycontrol.com/">Crafty Control
                                         4.0.20</a> </span>
                                   </div>
                                 </div>
@@ -228,6 +227,10 @@
 </div>
 
 <style>
+  .img-fluid {
+    margin-bottom: 1rem;
+  }
+
   .popover-body {
     color: white !important;
     ;
@@ -272,6 +275,7 @@
     console.log("File changed");
     if ($('#file').val()) {
       $('#upload-button').prop("disabled", false);
+      document.getElementById("fileLabel").innerHTML = $('#file').val().split('\\').pop().split('/').pop();
       console.log("File changed good");
     }
   });
@@ -352,7 +356,7 @@
   var file;
   function sendFile() {
     file = $("#file")[0].files[0]
-    document.getElementById("upload_input").innerHTML = '<div class="progress"><div id="upload-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">&nbsp;<i class="fa-solid fa-spinner"></i></div></div>';
+    document.getElementById("upload_input").innerHTML = '<div class="progress" style="width: 100%"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">&nbsp;<i class="fa-solid fa-spinner"></i></div></div>';
     let xmlHttpRequest = new XMLHttpRequest();
     let token = getCookie("_xsrf")
     let fileName = file.name
@@ -380,7 +384,7 @@
     xmlHttpRequest.addEventListener('load', (event) => {
       if (event.target.responseText == 'success') {
         console.log('Upload for file', file.name, 'was successful!')
-        document.getElementById("upload_input").innerHTML = '<div class="card-header header-sm d-flex justify-content-between align-items-center"><span id="file-uploaded" style="color: gray;">' + fileName + '</span> 🔒</div>';
+        document.getElementById("upload_input").innerHTML = '<div class="card-header header-sm d-flex justify-content-between align-items-center" style="width: 100%"><span id="file-uploaded" style="color: gray;">' + fileName + '</span> 🔒</div>';
         setTimeout(function () {
           window.location.reload();
         }, 2000);

app/frontend/templates/panel/panel_config.html

@@ -28,7 +28,12 @@
 
 
           {% if data['superuser'] %}
-          {% include "parts/crafty_config_list.html %}
+          <span class="d-none d-sm-block">
+            {% include "parts/crafty_config_list.html %}
+          </span>
+          <span class="d-block d-sm-none">
+            {% include "parts/m_crafty_config_list.html %}
+          </span>
           {% end %}
 
           <!-- Page Title Header Starts-->

app/frontend/templates/panel/parts/crafty_config_list.html

@@ -1,17 +1,14 @@
 <ul class="nav nav-tabs col-md-12 tab-simple-styled" role="tablist" style="margin-top: 0;">
     <li class="nav-item term-nav-item">
-        <a class="nav-link {% if data['active_link'] == 'panel_config' %}active{% end %}" href="/panel/panel_config"
+        <a class="nav-link {% if data['active_link'] == 'panel_config' %}active{% end %}" href="/panel/panel_config" role="tab" aria-selected="false">
-            role="tab" aria-selected="false">
+            <i class="fas fa-wrench"></i>{{ translate('panelConfig', 'pageTitle', data['lang']) }}</a>
-            <i class="fa-solid fa-wrench"></i>{{ translate('panelConfig', 'pageTitle', data['lang']) }}</a>
     </li>
     <li class="nav-item term-nav-item">
-        <a class="nav-link {% if data['active_link'] == 'config_json' %}active{% end %}" href="/panel/config_json"
+        <a class="nav-link {% if data['active_link'] == 'config_json' %}active{% end %}" href="/panel/config_json" role="tab" aria-selected="false">
-            role="tab" aria-selected="false">
+            <i class="fas fa-code"></i>{{ translate('panelConfig', 'json', data['lang']) }}</a>
-            <i class="fa-solid fa-code"></i>{{ translate('panelConfig', 'json', data['lang']) }}</a>
     </li>
     <li class="nav-item term-nav-item">
-        <a class="nav-link {% if data['active_link'] == 'custom_login' %}active{% end %}" href="/panel/custom_login"
+        <a class="nav-link {% if data['active_link'] == 'custom_login' %}active{% end %}" href="/panel/custom_login" role="tab" aria-selected="false">
-            role="tab" aria-selected="false">
+            <i class="fas fa-palette"></i>{{ translate('panelConfig', 'custom', data['lang']) }}</a>
-            <i class="fa fa-palette"></i>{{ translate('panelConfig', 'custom', data['lang']) }}</a>
     </li>
 </ul>

app/frontend/templates/panel/parts/m_crafty_config_list.html

@@ -0,0 +1,15 @@
+<div class="col-sm-12 mt-4 mb-4">
+    <div class="dropdown">
+        <button class="btn btn-outline dropdown-toggle custom-picker" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
+            <i class="fas fa-bars"></i> Crafty Config
+        </button>
+        <div class="dropdown-menu col-md-12" aria-labelledby="dropdownMenuButton">
+            <a class="dropdown-item {% if data['active_link'] == 'panel_config' %}active{% end %}" href="/panel/panel_config" role="tab" aria-selected="false">
+                <i class="fas fa-wrench"></i> Panel Config</a>
+            <a class="dropdown-item {% if data['active_link'] == 'config_json' %}active{% end %}" href="/panel/config_json" role="tab" aria-selected="false">
+                <i class="fas fa-code"></i> Config.json</a>
+            <a class="dropdown-item {% if data['active_link'] == 'custom_login' %}active{% end %}" href="/panel/custom_login" role="tab" aria-selected="false">
+                <i class="fas fa-palette"></i> Custom Login</a>
+        </div>
+    </div>
+</div>

app/frontend/templates/panel/parts/m_server_controls_list.html

@@ -1,7 +1,7 @@
 <div class="col-sm-12 mt-4 mb-4">
     <div class="dropdown">
-        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
+        <button class="btn btn-outline dropdown-toggle custom-picker" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
-            Server Controls
+            <i class="fas fa-bars"></i> Server Controls
         </button>
         <div class="dropdown-menu col-md-12" aria-labelledby="dropdownMenuButton">
             {% if data['permissions']['Terminal'] in data['user_permissions'] %}
@@ -12,7 +12,7 @@
             <a class="dropdown-item {% if data['active_link'] == 'logs' %}active{% end %}" href="/panel/server_detail?id={{ data['server_stats']['server_id']['server_id'] }}&subpage=logs" role="tab" aria-selected="false"><i class="fa-solid fa-book-open-reader"></i> {{ translate('serverDetails', 'logs', data['lang']) }}</a>
             {% end %}
             {% if data['permissions']['Schedule'] in data['user_permissions'] %}
-            <a class="dropdown-item {% if data['active_link'] == 'schedules' %}active{% end %}" href="/panel/server_detail?id={{ data['server_stats']['server_id']['server_id'] }}&subpage=schedules" role="tab" aria-selected="false"><i class="fas fa-clock"></i> {{ translate('serverDetails', 'schedule', data['lang']) }}</a>
+            <a class="dropdown-item {% if data['active_link'] == 'schedules' %}active{% end %}" href="/panel/server_detail?id={{ data['server_stats']['server_id']['server_id'] }}&subpage=schedules" role="tab" aria-selected="false"><i class="fa-solid fa-clock"></i> {{ translate('serverDetails', 'schedule', data['lang']) }}</a>
             {% end %}
             {% if data['permissions']['Backup'] in data['user_permissions'] %}
             {% if data['backup_failed'] %}

app/frontend/templates/panel/parts/server_players.html

@@ -0,0 +1,61 @@
+<div class="col-md-6 col-sm-12">
+    <h2>{{ translate('serverPlayerManagement', 'players', data['lang']) }}:</h2>
+    <table class="table table-sm-responsive">
+        <thead class="thead">
+            <tr>
+                <th scope="col">Player</th>
+                <th scope="col">Status</th>
+                <th scope="col">Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for player in data['all_players'] %}
+            <tr id="playerItem-{{ player['name'] }}" class="playerItem--">
+                <td>
+                    <strong> {{ player['name'] }}</strong>
+                </td>
+                {% if player['status'] == 'online' %}
+                <td><span class="text-success"><i class="fas fa-signal"></i> {{ player['status'] }}</span></td>
+                {% elif player['status'] == 'offline' %}
+                <td><span class="text-warning"><i class="fa-solid fa-signal-slash"></i> Last connexion : {{ player['last_seen'] }}</span></td>
+                {% end %}
+                <td class="buttons">
+                    {% if data['server_stats']['running'] %}
+                    <button onclick="send_command_to_server(`ban {{ player['name'] }}`)" type="button" class="btn btn-danger">Ban</button>
+                    <button onclick="send_command_to_server(`kick {{ player['name'] }}`)" type="button" class="btn btn-outline-danger">Kick</button>
+                    <button onclick="send_command_to_server(`op {{ player['name'] }}`)" type="button" class="btn btn-warning">OP</button>
+                    <button onclick="send_command_to_server(`deop {{ player['name'] }}`)" type="button" class="btn btn-outline-warning">De-OP</button>
+                    {% else %}
+                    <span> Unavailable (Server Offline)</span>
+                    {% end %}
+                </td>
+            </tr>
+            {% end %}
+        </tbody>
+    </table>
+</div>
+<div class="col-md-6 col-sm-12">
+    <h2>{{ translate('serverPlayerManagement', 'bannedPlayers', data['lang']) }}:</h2>
+    <table class="table table-sm-responsive">
+        <thead class="thead">
+            <tr>
+                <th scope="col">Player</th>
+                <th scope="col">Status</th>
+                <th scope="col">Reason</th>
+                <th scope="col">Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for player in data['banned_players'] %}
+            <tr id="playerItem-{{ player }}" class="playerItem--">
+                <td><strong> {{ player['name'] }}</strong></td>
+                <td>Banned on {{ player['banned_on'] }}</td>
+                <td>Banned by : {{ player['source'] }} <br />Reason : {{ player['reason'] }}</td>
+                <td class="buttons">
+                    <button onclick="send_command_to_server(`pardon {{ player['name'] }} `)" type="button" class="btn btn-danger">Unban</button>
+                </td>
+            </tr>
+            {% end %}
+        </tbody>
+    </table>
+</div>

app/frontend/templates/panel/server_admin_controls.html

@@ -40,6 +40,13 @@
           </span>
 
           <div class="row">
+            {% include "parts/server_players.html %}
+          </div>
+
+          <hr />
+
+          <div class="row">
+
             <div class="col-md-6 col-sm-12">
               <style>
                 .playerItem {
@@ -133,7 +140,7 @@
   $(document).ready(function () {
     console.log("ready!");
 
-    var bannedPlayers = `{{ data['banned_players'] }}`;
+    var bannedPlayers = `{{ data['banned_players_html'] }}`;
 
     var bannedPlayersDecoded = htmlDecode(bannedPlayers);
 

app/frontend/templates/panel/server_config.html

@@ -46,43 +46,33 @@
               <form class="forms-sample" method="post" id="config_form">
 
                 <div class="form-group">
-                  <label for="server_name">{{ translate('serverConfig', 'serverName', data['lang']) }} <small
+                  <label for="server_name">{{ translate('serverConfig', 'serverName', data['lang']) }} <small class="text-muted ml-1"> - {{ translate('serverConfig', 'serverNameDesc', data['lang']) }}</small>
-                      class="text-muted ml-1"> - {{ translate('serverConfig', 'serverNameDesc', data['lang']) }}</small>
                   </label>
-                  <input type="text" class="form-control" name="server_name" id="server_name"
+                  <input type="text" class="form-control" name="server_name" id="server_name" value="{{ data['server_stats']['server_id']['server_name']  }}" placeholder="{{ translate('serverConfig', 'serverName', data['lang']) }}" required>
-                    value="{{ data['server_stats']['server_id']['server_name']  }}"
-                    placeholder="{{ translate('serverConfig', 'serverName', data['lang']) }}" required>
                 </div>
 
                 {% if data['super_user'] %}
                 <div class="form-group">
-                  <label for="server_path">{{ translate('serverConfig', 'serverPath', data['lang']) }} <small
+                  <label for="server_path">{{ translate('serverConfig', 'serverPath', data['lang']) }} <small class="text-muted ml-1"> - {{ translate('serverConfig', 'serverPathDesc', data['lang']) }}</small>
-                      class="text-muted ml-1"> - {{ translate('serverConfig', 'serverPathDesc', data['lang']) }}</small>
                   </label>
                   <div class="card-header header-sm d-flex justify-content-between align-items-center">
-                    <span style="color: gray;   font-size: 12px;">{{ data['server_stats']['server_id']['path'] }}</span>
+                    <span style="color: gray;   font-size: .9vw;">{{ data['server_stats']['server_id']['path'] }}</span>
                     🔒
                   </div>
 
                 </div>
                 {% if data['server_stats']['server_type'] != "minecraft-bedrock" %}
                 <div class="form-group">
-                  <label for="log_path">{{ translate('serverConfig', 'serverLogLocation', data['lang']) }} <small
+                  <label for="log_path">{{ translate('serverConfig', 'serverLogLocation', data['lang']) }} <small class="text-muted ml-1"> - {{ translate('serverConfig', 'serverLogLocationDesc', data['lang'])
-                      class="text-muted ml-1"> - {{ translate('serverConfig', 'serverLogLocationDesc', data['lang'])
                       }}</small> </label>
-                  <input type="text" class="form-control" name="log_path" id="log_path"
+                  <input type="text" class="form-control" name="log_path" id="log_path" value="{{ data['server_stats']['server_id']['log_path']  }}" placeholder="{{ translate('serverConfig', 'serverLogLocation', data['lang']) }}" required>
-                    value="{{ data['server_stats']['server_id']['log_path']  }}"
-                    placeholder="{{ translate('serverConfig', 'serverLogLocation', data['lang']) }}" required>
                 </div>
                 {% end %}
 
                 <div class="form-group">
-                  <label for="executable">{{ translate('serverConfig', 'serverExecutable', data['lang']) }} <small
+                  <label for="executable">{{ translate('serverConfig', 'serverExecutable', data['lang']) }} <small class="text-muted ml-1"> - {{ translate('serverConfig', 'serverExecutableDesc', data['lang'])
-                      class="text-muted ml-1"> - {{ translate('serverConfig', 'serverExecutableDesc', data['lang'])
                       }}</small> </label>
-                  <input type="text" class="form-control" name="executable" id="executable"
+                  <input type="text" class="form-control" name="executable" id="executable" value="{{ data['server_stats']['server_id']['executable']  }}" placeholder="{{ translate('serverConfig', 'serverExecutable', data['lang']) }}" required>
-                    value="{{ data['server_stats']['server_id']['executable']  }}"
-                    placeholder="{{ translate('serverConfig', 'serverExecutable', data['lang']) }}" required>
                 </div>
                 {% end %}
                 {% if data['server_stats']['server_type'] == "minecraft-java" %}
@@ -91,10 +81,8 @@
                     <small class="text-muted ml-1">{{ translate('serverConfig', 'javaVersionDesc', data['lang'])
                       }}</small>
                   </label>
-                  <select class="form-select form-control form-control-lg select-css" id="java_selection"
+                  <select class="form-select form-control form-control-lg select-css" id="java_selection" name="java_selection" form="config_form">
-                    name="java_selection" form="config_form">
+                    <option value="none">{{ translate('serverConfig', 'javaNoChange', data['lang'])}}</option>
-                    <option value="none">{{ translate('serverConfig',
-                      'javaNoChange', data['lang'])}}</option>
                     {% for path in data['java_versions'] %}
                     <option value="{{path}}">{{path}}</option>
                     {% end %}
@@ -107,33 +95,26 @@
                   <label for="execution_command">{{ translate('serverConfig', 'serverExecutionCommand', data['lang']) }}
                     <small class="text-muted ml-1"> - {{ translate('serverConfig', 'serverExecutionCommandDesc',
                       data['lang']) }}</small> </label>
-                  <input type="text" class="form-control" name="execution_command" id="execution_command"
+                  <input type="text" class="form-control" name="execution_command" id="execution_command" value="{{ data['server_stats']['server_id']['execution_command']  }}" placeholder="{{ translate('serverConfig', 'serverExecutionCommand', data['lang']) }}" required>
-                    value="{{ data['server_stats']['server_id']['execution_command']  }}"
-                    placeholder="{{ translate('serverConfig', 'serverExecutionCommand', data['lang']) }}" required>
                 </div>
                 {% else %}
                 <label for="execution_command">{{ translate('serverConfig', 'serverExecutionCommand', data['lang']) }}
                   <div class="card-header header-sm d-flex justify-content-between align-items-center">
-                    <span style="color: gray;">{{ data['server_stats']['server_id']['execution_command'] }}</span> 🔒
+                    <span style="color: gray; font-size: .9vw;">{{ data['server_stats']['server_id']['execution_command'] }}</span> 🔒
                   </div>
                   <br>
                   {% end %}
                   <div class="form-group">
-                    <label for="stop_command">{{ translate('serverConfig', 'serverStopCommand', data['lang']) }} <small
+                    <label for="stop_command">{{ translate('serverConfig', 'serverStopCommand', data['lang']) }} <small class="text-muted ml-1"> - {{ translate('serverConfig', 'serverStopCommandDesc', data['lang'])
-                        class="text-muted ml-1"> - {{ translate('serverConfig', 'serverStopCommandDesc', data['lang'])
                         }}</small> </label>
-                    <input type="text" class="form-control" name="stop_command" id="stop_command"
+                    <input type="text" class="form-control" name="stop_command" id="stop_command" value="{{ data['server_stats']['server_id']['stop_command']  }}" placeholder="{{ translate('serverConfig', 'serverStopCommand', data['lang']) }}" required>
-                      value="{{ data['server_stats']['server_id']['stop_command']  }}"
-                      placeholder="{{ translate('serverConfig', 'serverStopCommand', data['lang']) }}" required>
                   </div>
 
                   <div class="form-group">
                     <label for="auto_start_delay">{{ translate('serverConfig', 'serverAutostartDelay', data['lang']) }}
                       <small class="text-muted ml-1"> - {{ translate('serverConfig', 'serverAutostartDelayDesc',
                         data['lang']) }}</small> </label>
-                    <input type="number" class="form-control" name="auto_start_delay" id="auto_start_delay"
+                    <input type="number" class="form-control" name="auto_start_delay" id="auto_start_delay" value="{{ data['server_stats']['server_id']['auto_start_delay']  }}" step="1" max="999" min="10" required>
-                      value="{{ data['server_stats']['server_id']['auto_start_delay']  }}" step="1" max="999" min="10"
-                      required>
                   </div>
 
                   {% if data['super_user'] %}
@@ -142,31 +123,21 @@
                     <label for="executable_update_url">{{ translate('serverConfig', 'exeUpdateURL', data['lang']) }}
                       <small class="text-muted ml-1"> - {{ translate('serverConfig', 'exeUpdateURLDesc', data['lang'])
                         }}</small> </label>
-                    <input type="text" class="form-control" name="executable_update_url" id="executable_update_url"
+                    <input type="text" class="form-control" name="executable_update_url" id="executable_update_url" value="{{ data['server_stats']['server_id']['executable_update_url']  }}" placeholder="{{ translate('serverConfig', 'exeUpdateURL', data['lang']) }}">
-                      value="{{ data['server_stats']['server_id']['executable_update_url']  }}"
-                      placeholder="{{ translate('serverConfig', 'exeUpdateURL', data['lang']) }}">
                   </div>
                   {% end %}
 
                   <div class="form-group">
-                    <label for="server_ip">{{ translate('serverConfig', 'serverIP', data['lang']) }} <small
+                    <label for="server_ip">{{ translate('serverConfig', 'serverIP', data['lang']) }} <small class="text-muted ml-1">- {{ translate('serverConfig', 'serverIPDesc', data['lang']) }}</small>
-                        class="text-muted ml-1">- {{ translate('serverConfig', 'serverIPDesc', data['lang']) }}</small>
                     </label>
-                    <input type="text" class="form-control" name="server_ip" id="server_ip"
+                    <input type="text" class="form-control" name="server_ip" id="server_ip" value="{{ data['server_stats']['server_id']['server_ip']  }}" required>
-                      value="{{ data['server_stats']['server_id']['server_ip']  }}" required>
                   </div>
                   <div class="form-group">
-                    <label for="server_port">{{ translate('serverConfig', 'serverPort', data['lang']) }} <small
+                    <label for="server_port">{{ translate('serverConfig', 'serverPort', data['lang']) }} <small class="text-muted ml-1"> - {{ translate('serverConfig', 'serverPortDesc', data['lang']) }}
-                        class="text-muted ml-1"> - {{ translate('serverConfig', 'serverPortDesc', data['lang']) }}
                       </small> </label>
-                    <input type="number" class="form-control" name="server_port" id="server_port"
+                    <input type="number" class="form-control" name="server_port" id="server_port" value="{{ data['server_stats']['server_id']['server_port']  }}" step="1" max="65566" min="1" required>
-                      value="{{ data['server_stats']['server_id']['server_port']  }}" step="1" max="65566" min="1"
+                    <span data-html="true" class="port-hint text-center" title="<i class='fal fa-exclamation-triangle'></i> " , data-content="{{
-                      required>
+                        translate('serverConfig', 'statsHint1' , data['lang'])}} <br> <br> <strong>{{ translate('serverConfig', 'statsHint2', data['lang'])}}</strong>" , data-placement="right"></span>
-                    <span data-html="true" class="port-hint text-center"
-                      title="<i class='fal fa-exclamation-triangle'></i> " ,
-                      data-content="{{
-                        translate('serverConfig', 'statsHint1' , data['lang'])}} <br> <br> <strong>{{ translate('serverConfig', 'statsHint2', data['lang'])}}</strong>" ,
-                      data-placement="right"></span>
                   </div>
                   {% end %}
 
@@ -177,9 +148,7 @@
                         {{ data['server_stats']['server_id']['stop_command'] }}&nbsp;{{ translate('serverConfig',
                         'timeoutExplain2', data['lang']) }}
                       </small> </label>
-                    <input type="number" class="form-control" name="shutdown_timeout" id="shutdown_timeout"
+                    <input type="number" class="form-control" name="shutdown_timeout" id="shutdown_timeout" value="{{ data['server_stats']['server_id']['shutdown_timeout']  }}" step="2" max="300" min="60" required>
-                      value="{{ data['server_stats']['server_id']['shutdown_timeout']  }}" step="2" max="300" min="60"
-                      required>
                   </div>
                   <div class="form-group">
                     <label for="ignored_exits">{{ translate('serverConfig', 'ignoredExits', data['lang']) }}
@@ -187,28 +156,26 @@
                         data['lang'])
                         }}
                       </small> </label>
-                    <input type="text" class="form-control" name="ignored_exits" id="ignored_exits"
+                    <input type="text" class="form-control" name="ignored_exits" id="ignored_exits" value="{{ data['server_stats']['server_id']['ignored_exits']  }}">
-                      value="{{ data['server_stats']['server_id']['ignored_exits']  }}">
                   </div>
 
                   <div class="form-group">
                     <label for="logs_delete_after">{{ translate('serverConfig', 'removeOldLogsAfter', data['lang']) }}
                       <small class="text-muted ml-1"> - {{ translate('serverConfig', 'removeOldLogsAfterDesc',
                         data['lang']) }}</small> </label>
-                    <input type="number" class="form-control" name="logs_delete_after" id="logs_delete_after"
+                    <input type="number" class="form-control" name="logs_delete_after" id="logs_delete_after" value="{{ data['server_stats']['server_id']['logs_delete_after']  }}" step="1" max="365" min="0" required>
-                      value="{{ data['server_stats']['server_id']['logs_delete_after']  }}" step="1" max="365" min="0"
-                      required>
                   </div>
 
+                  <!--
                   <div class="form-check-flat">
                     <label for="auto_start" class="form-check-label ml-4 mb-4">
                       {% if data['server_stats']['server_id']['auto_start'] %}
                       <input type="checkbox" class="form-check-input" id="auto_start" name="auto_start" checked=""
-                        data-toggle="toggle" value="1">&nbsp;&nbsp;{{ translate('serverConfig', 'serverAutoStart',
+                             data-toggle="toggle" value="1">&nbsp;&nbsp;{{ translate('serverConfig', 'serverAutoStart',
                       data['lang']) }}
                       {% else %}
                       <input type="checkbox" class="form-check-input" id="auto_start" name="auto_start" value="1"
-                        data-toggle="toggle">&nbsp;&nbsp;{{
+                             data-toggle="toggle">&nbsp;&nbsp;{{
                       translate('serverConfig', 'serverAutoStart', data['lang']) }}
                       {% end %}
                     </label>
@@ -216,11 +183,11 @@
                     <label for="crash_detection" class="form-check-label ml-4 mb-4">
                       {% if data['server_stats']['server_id']['crash_detection'] %}
                       <input type="checkbox" class="form-check-input" id="crash_detection" name="crash_detection"
-                        data-toggle="toggle" checked="" value="1">&nbsp;&nbsp;{{ translate('serverConfig',
+                             data-toggle="toggle" checked="" value="1">&nbsp;&nbsp;{{ translate('serverConfig',
                       'serverCrashDetection', data['lang']) }}
                       {% else %}
                       <input type="checkbox" class="form-check-input" id="crash_detection" name="crash_detection"
-                        data-toggle="toggle" value="1">&nbsp;&nbsp;{{ translate('serverConfig', 'serverCrashDetection',
+                             data-toggle="toggle" value="1">&nbsp;&nbsp;{{ translate('serverConfig', 'serverCrashDetection',
                       data['lang']) }}
                       {% end %}
                     </label>
@@ -229,16 +196,53 @@
                     <label for="show_status" class="form-check-label ml-4 mb-4">
                       {% if data['server_stats']['server_id']['show_status'] %}
                       <input type="checkbox" class="form-check-input" id="show_status" name="show_status"
-                        data-toggle="toggle" checked="" value="1">&nbsp;&nbsp;{{ translate('serverConfig', 'showStatus',
+                             data-toggle="toggle" checked="" value="1">&nbsp;&nbsp;{{ translate('serverConfig', 'showStatus',
                       data['lang']) }}
                       {% else %}
                       <input type="checkbox" class="form-check-input" id="show_status" name="show_status"
-                        data-toggle="toggle" value="1">&nbsp;&nbsp;{{ translate('serverConfig', 'showStatus',
+                             data-toggle="toggle" value="1">&nbsp;&nbsp;{{ translate('serverConfig', 'showStatus',
                       data['lang']) }}
                       {% end %}
                     </label>
                     {% end %}
                   </div>
+                -->
+
+                  <div class="form-group">
+                    <div class="custom-control custom-switch">
+                      {% if data['server_stats']['server_id']['auto_start'] %}
+                      <input type="checkbox" class="custom-control-input" id="auto_start" name="auto_start" checked="" value="1">
+                      <label class="custom-control-label" for="auto_start">&nbsp;&nbsp;{{ translate('serverConfig', 'serverAutoStart', data['lang']) }}</label>
+                      {% else %}
+                      <input type="checkbox" class="custom-control-input" id="auto_start" name="auto_start" value="1">
+                      <label class="custom-control-label" for="auto_start">&nbsp;&nbsp;{{ translate('serverConfig', 'serverAutoStart', data['lang']) }}</label>
+                      {% end %}
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="custom-control custom-switch">
+                      {% if data['server_stats']['server_id']['crash_detection'] %}
+                      <input type="checkbox" class="custom-control-input" id="crash_detection" name="crash_detection" checked="" value="1">
+                      <label class="custom-control-label" for="crash_detection">&nbsp;&nbsp;{{ translate('serverConfig', 'serverCrashDetection', data['lang']) }}</label>
+                      {% else %}
+                      <input type="checkbox" class="custom-control-input" id="crash_detection" name="crash_detection" value="1">
+                      <label class="custom-control-label" for="crash_detection">&nbsp;&nbsp;{{ translate('serverConfig', 'serverCrashDetection', data['lang']) }}</label>
+                      {% end %}
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="custom-control custom-switch">
+                      {% if data['super_user'] %}
+                      {% if data['server_stats']['server_id']['show_status'] %}
+                      <input type="checkbox" class="custom-control-input" id="show_status" name="show_status" checked="" value="1">
+                      <label class="custom-control-label" for="show_status">&nbsp;&nbsp;{{ translate('serverConfig', 'showStatus', data['lang']) }}</label>
+                      {% else %}
+                      <input type="checkbox" class="custom-control-input" id="show_status" name="show_status" value="1">&nbsp;&nbsp;{{ translate('serverConfig', 'showStatus', data['lang']) }}
+                      <label class="custom-control-label" for="show_status">&nbsp;&nbsp;{{ translate('serverConfig', 'showStatus', data['lang']) }}</label>
+                      {% end %}
+                      {% end %}
+                    </div>
+                  </div>
 
                   <button type="submit" class="btn btn-success mr-2"><i class="fas fa-save"></i> {{
                     translate('serverConfig', 'save', data['lang']) }}</button>
@@ -262,14 +266,10 @@
               <div class="text-center">
                 {% if data['server_stats']['running'] %}
                 {% if data['server_stats']['updating'] %}
-                <i id="update-spinner" class="fa fa-spinner fa-spin"></i>&nbsp;<button
+                <i id="update-spinner" class="fa fa-spinner fa-spin"></i>&nbsp;<button onclick="send_command(serverId, 'update_executable');" id="update_executable" style="max-width: 7rem;" class="btn btn-warning m-1 flex-grow-1 disabled">{{ translate('serverConfig',
-                  onclick="send_command(serverId, 'update_executable');" id="update_executable" style="max-width: 7rem;"
-                  class="btn btn-warning m-1 flex-grow-1 disabled">{{ translate('serverConfig',
                   'update', data['lang']) }}</button>
                 {% else %}
-                <i style="visibility: hidden;" id="update-spinner" class="fa fa-spinner fa-spin"></i>&nbsp;<button
+                <i style="visibility: hidden;" id="update-spinner" class="fa fa-spinner fa-spin"></i>&nbsp;<button onclick="send_command(serverId, 'update_executable');" id="update_executable" style="max-width: 7rem;" class="btn btn-warning m-1 flex-grow-1 disabled">{{ translate('serverConfig',
-                  onclick="send_command(serverId, 'update_executable');" id="update_executable" style="max-width: 7rem;"
-                  class="btn btn-warning m-1 flex-grow-1 disabled">{{ translate('serverConfig',
                   'update', data['lang']) }}</button>
                 {% end %}
                 <a class="btn btn-sm btn-danger disabled">{{ translate('serverConfig', 'deleteServer', data['lang'])
@@ -278,14 +278,10 @@
                 {% else %}
                 {% if not data['failed'] %}
                 {% if data['server_stats']['updating'] %}
-                <i id="update-spinner" class="fa fa-spinner fa-spin"></i>&nbsp;<button
+                <i id="update-spinner" class="fa fa-spinner fa-spin"></i>&nbsp;<button onclick="send_command(serverId, 'update_executable');" id="update_executable" style="max-width: 7rem;" class="btn btn-warning m-1 flex-grow-1">{{ translate('serverConfig',
-                  onclick="send_command(serverId, 'update_executable');" id="update_executable" style="max-width: 7rem;"
-                  class="btn btn-warning m-1 flex-grow-1">{{ translate('serverConfig',
                   'update', data['lang']) }}</button>
                 {% else %}
-                <i style="visibility: hidden;" id="update-spinner" class="fa fa-spinner fa-spin"></i>&nbsp;<button
+                <i style="visibility: hidden;" id="update-spinner" class="fa fa-spinner fa-spin"></i>&nbsp;<button onclick="send_command(serverId, 'update_executable');" id="update_executable" style="max-width: 7rem;" class="btn btn-warning m-1 flex-grow-1">{{ translate('serverConfig',
-                  onclick="send_command(serverId, 'update_executable');" id="update_executable" style="max-width: 7rem;"
-                  class="btn btn-warning m-1 flex-grow-1">{{ translate('serverConfig',
                   'update', data['lang']) }}</button>
                 {% end %}
                 {% end %}
@@ -301,28 +297,26 @@
               </div>
             </div>
           </div>
-
         </div>
       </div>
     </div>
   </div>
-
-
-
 </div>
-<style>
-  .toggle-handle {
-    background-color: white !important;
-  }
 
-  .toggle-on {
+<style>
+  .custom-control-input:checked~.custom-control-label::before {
     color: black !important;
     background-color: blueviolet !important;
+    border-color: var(--outline) !important;
   }
 
-  .toggle {
+  .custom-control-label::before {
-    height: 0px !important;
+    background-color: white !important;
-    background-color: grey !important;
+    top: calc(-0.2rem);
+  }
+
+  .custom-switch .custom-control-label::after {
+    top: calc(-0.125rem + 1px);
   }
 </style>
 <!-- content-wrapper ends -->
@@ -630,8 +624,8 @@
         bootbox.alert({
           title: responseData.error,
           message: responseData.error_data
-          });
+        });
-      } 
+      }
     });
   });
 </script>

app/frontend/templates/panel/server_schedules.html

@@ -47,18 +47,14 @@
                   <h4 class="card-title"><i class="fas fa-calendar"></i> {{ translate('serverSchedules',
                     'scheduledTasks', data['lang']) }} </h4>
                   {% if data['user_data']['hints'] %}
-                  <span class="too_small" title="{{ translate('serverSchedules', 'cannotSee', data['lang']) }}" ,
+                  <span class="too_small" title="{{ translate('serverSchedules', 'cannotSee', data['lang']) }}" , data-content="{{ translate('serverSchedules', 'cannotSeeOnMobile', data['lang']) }}" , data-placement="bottom"></span>
-                    data-content="{{ translate('serverSchedules', 'cannotSeeOnMobile', data['lang']) }}" ,
-                    data-placement="bottom"></span>
                   {% end %}
-                  <div><button
+                  <div>
-                      onclick="location.href=`/panel/add_schedule?id={{ data['server_stats']['server_id']['server_id'] }}`"
+                    <button onclick="location.href=`/panel/add_schedule?id={{ data['server_stats']['server_id']['server_id'] }}`" class="btn btn-info">{{ translate('serverSchedules', 'create', data['lang']) }}<i class="fas fa-pencil-alt"></i></button>
-                      class="btn btn-info">{{ translate('serverSchedules', 'create', data['lang']) }}<i
+                  </div>
-                        class="fas fa-pencil-alt"></i></button></div>
                 </div>
                 <div class="card-body">
-                  <table class="table table-hover d-none d-lg-block responsive-table" id="schedule_table" width="100%"
+                  <table class="table table-hover d-none d-lg-block responsive-table" id="schedule_table" width="100%" style="table-layout:fixed;">
-                    style="table-layout:fixed;">
                     <thead>
                       <tr class="rounded">
                         <th style="width: 2%; min-width: 10px;">{{ translate('serverSchedules', 'name', data['lang']) }}
@@ -87,7 +83,7 @@
                           <p>{{schedule.action}}</p>
                         </td>
                         <td id="{{schedule.command}}" class="action" style="overflow: scroll; max-width: 30px;">
-                          <p>{{schedule.command}}</p>
+                          <p style="overflow: scroll;">{{schedule.command}}</p>
                         </td>
                         <td id="{{schedule.interval}}" class="action">
                           {% if schedule.interval_type != '' and schedule.interval_type != 'reaction' %}
@@ -105,14 +101,10 @@
                           <p>{{schedule.next_run}}</p>
                         </td>
                         <td id="{{schedule.enabled}}" class="action">
-                          <input style="width: 10px !important;" type="checkbox" class="schedule-enabled-toggle"
+                          <input style="width: 10px !important;" type="checkbox" class="schedule-enabled-toggle" data-schedule-id="{{schedule.schedule_id}}" data-schedule-enabled="{{ 'true' if schedule.enabled else 'false' }}">
-                            data-schedule-id="{{schedule.schedule_id}}"
-                            data-schedule-enabled="{{ 'true' if schedule.enabled else 'false' }}">
                         </td>
                         <td id="{{schedule.action}}" class="action">
-                          <button
+                          <button onclick="window.location.href='/panel/edit_schedule?id={{ data['server_stats']['server_id']['server_id'] }}&sch_id={{schedule.schedule_id}}'" class="btn btn-info">
-                            onclick="window.location.href='/panel/edit_schedule?id={{ data['server_stats']['server_id']['server_id'] }}&sch_id={{schedule.schedule_id}}'"
-                            class="btn btn-info">
                             <i class="fas fa-pencil-alt"></i>
                           </button>
                           <br>
@@ -126,8 +118,7 @@
                     </tbody>
                   </table>
                   <hr />
-                  <table class="table table-hover d-block d-lg-none" id="mini_schedule_table" width="100%"
+                  <table class="table table-hover d-block d-lg-none" id="mini_schedule_table" width="100%" style="table-layout:fixed;">
-                    style="table-layout:fixed;">
                     <thead>
                       <tr class="rounded">
                         <th style="width: 25%; min-width: 50px;">{{ translate('serverSchedules', 'action', data['lang'])
@@ -145,7 +136,7 @@
                           <p>{{schedule.action}}</p>
                         </td>
                         <td id="{{schedule.command}}" class="action" style="overflow: scroll; max-width: 30px;">
-                          <p>{{schedule.command}}</p>
+                          <p style="overflow: scroll;">{{schedule.command}}</p>
                         </td>
                         <td id="{{schedule.enabled}}" class="action">
                           {% if schedule.enabled %}
@@ -160,8 +151,7 @@
                         </td>
                       </tr>
                       <!-- Modal -->
-                      <div class="modal fade" id="task_details_{{schedule.schedule_id}}" tabindex="-1" role="dialog"
+                      <div class="modal fade" id="task_details_{{schedule.schedule_id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-                        aria-labelledby="exampleModalLabel" aria-hidden="true">
                         <div class="modal-dialog" role="document">
                           <div class="modal-content">
                             <div class="modal-header">
@@ -208,19 +198,14 @@
                                   <p>zzzzzzz</p>
                                   {% end %}
                                 </li>
-                                <li id="{{schedule.enabled}}" class="action"
+                                <li id="{{schedule.enabled}}" class="action" style="border-top: .1em solid gray; border-bottom: .1em solid gray">
-                                  style="border-top: .1em solid gray; border-bottom: .1em solid gray">
                                   <h4>{{ translate('serverSchedules', 'enabled', data['lang']) }}</h4>
-                                  <input type="checkbox" class="schedule-enabled-toggle"
+                                  <input type="checkbox" class="schedule-enabled-toggle" data-schedule-id="{{schedule.schedule_id}}" data-schedule-enabled="{{ 'true' if schedule.enabled else 'false' }}">
-                                    data-schedule-id="{{schedule.schedule_id}}"
-                                    data-schedule-enabled="{{ 'true' if schedule.enabled else 'false' }}">
                                 </li>
                               </ul>
                             </div>
                             <div class="modal-footer">
-                              <button
+                              <button onclick="window.location.href='/panel/edit_schedule?id={{ data['server_stats']['server_id']['server_id'] }}&sch_id={{schedule.schedule_id}}'" class="btn btn-info">
-                                onclick="window.location.href='/panel/edit_schedule?id={{ data['server_stats']['server_id']['server_id'] }}&sch_id={{schedule.schedule_id}}'"
-                                class="btn btn-info">
                                 <i class="fas fa-pencil-alt"></i> {{ translate('serverSchedules', 'edit', data['lang'])
                                 }}
                               </button>
@@ -381,39 +366,6 @@
     console.log("ready!");
 
   });
-
-  function yesnoCheck(that) {
-    if (that.value == "command") {
-      document.getElementById("ifYes").style.display = "block";
-      document.getElementById("command").required = true;
-    } else {
-      document.getElementById("ifYes").style.display = "none";
-      document.getElementById("command").required = false;
-    }
-  }
-  function basicAdvanced(that) {
-    if (that.value == "advanced") {
-      document.getElementById("ifAdvanced").style.display = "block";
-      document.getElementById("ifBasic").style.display = "none";
-      document.getElementById("interval").required = false;
-      document.getElementById("time").required = false;
-    } else {
-      document.getElementById("ifAdvanced").style.display = "none";
-      document.getElementById("ifBasic").style.display = "block";
-      document.getElementById("interval").required = true;
-      document.getElementById("time").required = true;
-    }
-  }
-  function ifDays(that) {
-    if (that.value == "days") {
-      document.getElementById("ifDays").style.display = "block";
-      document.getElementById("time").required = true;
-    } else {
-      document.getElementById("ifDays").style.display = "none";
-      document.getElementById("time").required = false;
-    }
-  }
-
   $(".del_button").click(function () {
     var sch_id = $(this).data('sch');
 

app/frontend/templates/panel/server_term.html

@@ -41,21 +41,20 @@
           </span>
 
           <div class="col-md-12">
-            <button id="to-bottom" style="visibility: hidden; float: right;" class="btn btn-outline-success">{{
+            <button id="to-bottom" style="visibility: hidden; float: right;" class="btn btn-outline-success" hidden>{{
               translate('serverDetails', 'reset', data['lang']) }}</button>
-            <br />
+
-            <br />
             <div class="input-group">
               <div id="virt_console" class=""
-                style="width: 100%; font-size: .8em; padding: 5px 10px; border: 1px solid var(--outline); background-color:var(--card-banner-bg);height:500px; overflow: scroll;">
+                   style="width: 100%; font-size: .8em; padding: 5px 10px; border: 1px solid var(--outline); background-color:var(--card-banner-bg);height:500px; overflow: scroll;">
               </div>
             </div>
             <br />
 
             <div style="gap: 0.5rem;" class="input-group flex-wrap">
               <input style="min-width: 10rem;" type="text" class="form-control" id="server_command"
-                name="server_command" placeholder="{{ translate('serverTerm', 'commandInput', data['lang']) }}"
+                     name="server_command" placeholder="{{ translate('serverTerm', 'commandInput', data['lang']) }}"
-                autofocus="">
+                     autofocus="">
               <span class="input-group-btn ml-5">
                 <button id="submit" class="btn btn-sm btn-info" type="button">{{ translate('serverTerm', 'sendCommand',
                   data['lang']) }}</button>
@@ -64,73 +63,73 @@
             {% if data['permissions']['Commands'] in data['user_permissions'] %}
             {% if data['importing'] and data['server_stats']['running']%}
             <div id="update_control_buttons"
-              class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0"
+                 class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0"
-              style="visibility: visible">
+                 style="visibility: visible">
               <button onclick="" id="start-btn" style="max-width: 7rem;"
-                class="btn btn-warning m-1 flex-grow-1 disabled"><i
+                      class="btn btn-warning m-1 flex-grow-1 disabled"><i
-                  class="fa fa-spinner fa-spin"></i>&nbsp;{{translate('serverTerm', 'installing', data['lang']) }}</button>
+                   class="fa fa-spinner fa-spin"></i>&nbsp;{{translate('serverTerm', 'installing', data['lang']) }}</button>
               <button onclick="" id="restart-btn" style="max-width: 7rem;"
-                class="btn btn-outline-primary m-1 flex-grow-1 disabled">{% raw translate('serverTerm', 'restart',
+                      class="btn btn-outline-primary m-1 flex-grow-1 disabled">{% raw translate('serverTerm', 'restart',
                 data['lang']) %}</button>
               <button onclick="" id="stop-btn" style="max-width: 7rem;"
-                class="btn btn-danger m-1 flex-grow-1 disabled">{{ translate('serverTerm', 'stop', data['lang'])
+                      class="btn btn-danger m-1 flex-grow-1 disabled">{{ translate('serverTerm', 'stop', data['lang'])
                 }}</button>
             </div>
             {% elif data['server_stats']['updating']%}
             <div id="update_control_buttons"
-              class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0"
+                 class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0"
-              style="visibility: visible">
+                 style="visibility: visible">
               <button onclick="" id="start-btn" style="max-width: 7rem;"
-                class="btn btn-warning m-1 flex-grow-1 disabled"><i class="fa fa-spinner fa-spin"></i>&nbsp;{{
+                      class="btn btn-warning m-1 flex-grow-1 disabled"><i class="fa fa-spinner fa-spin"></i>&nbsp;{{
                 translate('serverTerm', 'updating', data['lang']) }}</button>
               <button onclick="" id="restart-btn" style="max-width: 7rem;"
-                class="btn btn-outline-primary m-1 flex-grow-1 disabled">{% raw translate('serverTerm', 'restart',
+                      class="btn btn-outline-primary m-1 flex-grow-1 disabled">{% raw translate('serverTerm', 'restart',
                 data['lang']) %}</button>
               <button onclick="" id="stop-btn" style="max-width: 7rem;"
-                class="btn btn-danger m-1 flex-grow-1 disabled">{{ translate('serverTerm', 'stop', data['lang'])
+                      class="btn btn-danger m-1 flex-grow-1 disabled">{{ translate('serverTerm', 'stop', data['lang'])
                 }}</button>
             </div>
             {% elif data['waiting_start'] %}
             <div id="control_buttons"
-              class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0"
+                 class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0"
-              style="visibility: visible">
+                 style="visibility: visible">
               <button onclick="" id="start-btn" style="max-width: 7rem; white-space: nowrap;"
-                class="btn btn-secondary m-1 flex-grow-1 disabled" data-toggle="tooltip"
+                      class="btn btn-secondary m-1 flex-grow-1 disabled" data-toggle="tooltip"
-                title="{{ translate('serverTerm', 'delay-explained', data['lang'])}}">{{ translate('serverTerm',
+                      title="{{ translate('serverTerm', 'delay-explained', data['lang'])}}">{{ translate('serverTerm',
                 'starting', data['lang']) }}</button>
               <button onclick="" id="restart-btn" style="max-width: 7rem;"
-                class="btn btn-outline-primary m-1 flex-grow-1 disabled">{% raw translate('serverTerm', 'restart',
+                      class="btn btn-outline-primary m-1 flex-grow-1 disabled">{% raw translate('serverTerm', 'restart',
                 data['lang']) %}</button>
               <button onclick="" id="stop-btn" style="max-width: 7rem;"
-                class="btn btn-danger m-1 flex-grow-1 disabled">{{ translate('serverTerm', 'stop', data['lang'])
+                      class="btn btn-danger m-1 flex-grow-1 disabled">{{ translate('serverTerm', 'stop', data['lang'])
                 }}</button>
             </div>
             {% elif data['importing'] %}
             <div id="control_buttons"
-              class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0"
+                 class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0"
-              style="visibility: visible">
+                 style="visibility: visible">
               <button onclick="" id="start-btn" style="max-width: 12rem; white-space: nowrap;"
-                class="btn btn-secondary m-1 flex-grow-1 disabled"><i class="fa fa-spinner fa-spin"></i> {{
+                      class="btn btn-secondary m-1 flex-grow-1 disabled"><i class="fa fa-spinner fa-spin"></i> {{
                 translate('serverTerm', 'importing',
                 data['lang']) }}</button>
               <button onclick="" id="restart-btn" style="max-width: 7rem;"
-                class="btn btn-outline-primary m-1 flex-grow-1 disabled">{% raw translate('serverTerm', 'restart',
+                      class="btn btn-outline-primary m-1 flex-grow-1 disabled">{% raw translate('serverTerm', 'restart',
                 data['lang']) %}</button>
               <button onclick="" id="stop-btn" style="max-width: 7rem;"
-                class="btn btn-danger m-1 flex-grow-1 disabled">{{ translate('serverTerm', 'stop', data['lang'])
+                      class="btn btn-danger m-1 flex-grow-1 disabled">{{ translate('serverTerm', 'stop', data['lang'])
                 }}</button>
             </div>
             {% else %}
             <div id="control_buttons"
-              class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0"
+                 class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0"
-              style="visibility: visible">
+                 style="visibility: visible">
               <button onclick="send_command(serverId, 'start_server');" id="start-btn" style="max-width: 7rem;"
-                class="btn btn-primary m-1 flex-grow-1">{{ translate('serverTerm', 'start', data['lang']) }}</button>
+                      class="btn btn-primary m-1 flex-grow-1">{{ translate('serverTerm', 'start', data['lang']) }}</button>
               <button onclick="send_command(serverId, 'restart_server');" id="restart-btn" style="max-width: 7rem;"
-                class="btn btn-outline-primary m-1 flex-grow-1">{% raw translate('serverTerm', 'restart', data['lang'])
+                      class="btn btn-outline-primary m-1 flex-grow-1">{% raw translate('serverTerm', 'restart', data['lang'])
                 %}</button>
               <button onclick="send_command(serverId, 'stop_server');" id="stop-btn" style="max-width: 7rem;"
-                class="btn btn-danger m-1 flex-grow-1">{{ translate('serverTerm', 'stop', data['lang']) }}</button>
+                      class="btn btn-danger m-1 flex-grow-1">{{ translate('serverTerm', 'stop', data['lang']) }}</button>
             </div>
             {% end %}
             {% end %}
@@ -151,6 +150,8 @@
     /* IE and Edge */
     scrollbar-width: none;
     /* Firefox */
+    font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+    white-space: pre-wrap;
   }
 </style>
 <!-- content-wrapper ends -->
@@ -354,9 +355,11 @@
     const elem = $(e.currentTarget);
     if (Math.round(elem[0].scrollHeight - elem.scrollTop()) <= elem.outerHeight()) {
       document.getElementById("to-bottom").style.visibility = "hidden";
+      document.getElementById("to-bottom").hidden = true;
       scrolled = false;
     } else {
       document.getElementById("to-bottom").style.visibility = "visible";
+      document.getElementById("to-bottom").hidden = false;
       scrolled = true;
     }
   }

app/frontend/templates/server/bedrock_wizard.html

@@ -18,49 +18,37 @@
   <div class="d-none" id="overlay" onclick="hide(event)"></div>
   <div class="row">
     {% if data['online'] %}
-    <div class="col-sm-6 grid-margin stretch-card">
+    <div class="col-md-6 grid-margin stretch-card">
       <div class="card">
         <div class="card-body">
 
           <h4>{{ translate('serverWizard', 'newServer', data['lang']) }}</h4>
           <br />
-          <p class="card-description">
 
           <form method="post" name="create_server" class="server-wizard" onSubmit="wait_msg()">
             {% raw xsrf_form_html() %}
-            <div class="row">
+            <div class="form-group">
-
+              <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-              <div class="col-sm-12 col-md-12">
+              <input type="text" class="form-control" id="server_name" name="server_name" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
-                <div class="form-group">
-                  <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-                  <input type="text" class="form-control" id="server_name" name="server_name"
-                    placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
-                </div>
-              </div>
-
             </div>
 
-            <div class="col-sm-12">
+            <div class="form-group">
-              <div class="form-group">
+              <div id="accordion-1">
-                <div id="accordion-1">
+                <div class="card">
-                  <div class="card">
+                  <div class="card-header p-2" id="Role-1">
-                    <div class="card-header p-2" id="Role-1">
+                    <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-1" aria-expanded="true" aria-controls="collapseRole-1">
-                      <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-1" aria-expanded="true"
+                      <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole', data['lang']) }}
-                        aria-controls="collapseRole-1">
+                      <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
-                        <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole', data['lang']) }}
+                        data['lang']) }}</small>
-                        <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
+                    </p>
-                          data['lang']) }}</small>
+                  </div>
-                      </p>
+                  <div id="collapseRole-1" class="collapse" aria-labelledby="Role-1" data-parent="">
-                    </div>
+                    <div class="card-body scroll">
-                    <div id="collapseRole-1" class="collapse" aria-labelledby="Role-1" data-parent="">
+                      <div class="form-group">
-                      <div class="card-body scroll">
+                        {% for r in data['roles'] %}
-                        <div class="form-group">
+                        <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}" type="checkbox">&nbsp;
-                          {% for r in data['roles'] %}
+                            {{ r['role_name'].capitalize() }}</label></span>
-                          <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}"
+                        {% end %}
-                                type="checkbox">&nbsp;
-                              {{ r['role_name'].capitalize() }}</label></span>
-                          {% end %}
-                        </div>
                       </div>
                     </div>
                   </div>
@@ -74,88 +62,58 @@
               }}</button>
         </div>
         </form>
-        </p>
       </div>
     </div>
     {% end %}
-    <div class="col-sm-6 grid-margin stretch-card">
+    <div class="col-md-6 grid-margin stretch-card">
       <div class="card">
         <div class="card-body">
 
           <h4>{{ translate('serverWizard', 'importServer', data['lang']) }}</h4>
           <br />
-          <p class="card-description">
 
           <form method="post" class="server-wizard" onSubmit="wait_msg(true)">
             {% raw xsrf_form_html() %}
             <input type="hidden" value="import_jar" name="create_type">
-            <div class="row">
+            <div class="form-group">
-
+              <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-              <div class="col-sm-12">
+              <input type="text" class="form-control" id="server_name" name="server_name" value="" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
-                <div class="form-group">
+            </div>
-                  <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
+            <div class="form-group">
-                  <input type="text" class="form-control" id="server_name" name="server_name" value=""
+              <label for="server">{{ translate('serverWizard', 'serverPath', data['lang']) }} <small>{{
-                    placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
+                  translate('serverWizard', 'absoluteServerPath', data['lang']) }}</small></label>
-                </div>
+              <input type="text" class="form-control" id="server_path" name="server_path" placeholder="/var/opt/server" required>
-              </div>
+            </div>
-
+            <div class="form-group">
-              <div class="col-sm-12">
+              <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
-                <div class="form-group">
+              <input type="text" class="form-control" id="server_jar" name="server_jar" value="" placeholder="bedrock_server" required>
-                  <label for="server">{{ translate('serverWizard', 'serverPath', data['lang']) }} <small>{{
-                      translate('serverWizard', 'absoluteServerPath', data['lang']) }}</small></label>
-                  <input type="text" class="form-control" id="server_path" name="server_path"
-                    placeholder="/var/opt/server" required>
-                </div>
-              </div>
-
-              <div class="col-sm-12">
-                <div class="form-group">
-                  <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
-                  <input type="text" class="form-control" id="server_jar" name="server_jar" value=""
-                    placeholder="bedrock_server" required>
-                </div>
-              </div>
-
-
-
             </div>
             <br />
-            <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
+            <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
-                style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
                 data['lang']) }}</small></h4>
             <hr>
-            <div class="row">
+            <div class="form-group">
-
+              <label for="port2">{{ translate('serverWizard', 'serverPort', data['lang']) }}
-              <div class="col-sm-12">
+                <small></small></label>
-                <div class="form-group">
+              <input type="number" class="form-control" id="port2" name="port" value="19132" step="1" min="1" max="65535" required>
-                  <label for="port2">{{ translate('serverWizard', 'serverPort', data['lang']) }}
+            </div>
-                    <small></small></label>
+            <div class="form-group">
-                  <input type="number" class="form-control" id="port2" name="port" value="19132" step="1" min="1"
+              <div id="accordion-2">
-                    max="65535" required>
+                <div class="card">
-                </div>
+                  <div class="card-header p-2" id="Role-2">
-              </div>
+                    <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-2" aria-expanded="true" aria-controls="collapseRole-2">
-              <div class="col-sm-12">
+                      <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole', data['lang']) }}
-                <div class="form-group">
+                      <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
-                  <div id="accordion-2">
+                        data['lang']) }}</small>
-                    <div class="card">
+                    </p>
-                      <div class="card-header p-2" id="Role-2">
+                  </div>
-                        <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-2" aria-expanded="true"
+                  <div id="collapseRole-2" class="collapse" aria-labelledby="Role-2" data-parent="">
-                          aria-controls="collapseRole-2">
+                    <div class="card-body scroll">
-                          <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole', data['lang']) }}
+                      <div class="form-group">
-                          <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
+                        {% for r in data['roles'] %}
-                            data['lang']) }}</small>
+                        <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}" type="checkbox">&nbsp;
-                        </p>
+                            {{ r['role_name'].capitalize() }}</label></span>
-                      </div>
+                        {% end %}
-                      <div id="collapseRole-2" class="collapse" aria-labelledby="Role-2" data-parent="">
-                        <div class="card-body scroll">
-                          <div class="form-group">
-                            {% for r in data['roles'] %}
-                            <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}"
-                                  type="checkbox">&nbsp;
-                                {{ r['role_name'].capitalize() }}</label></span>
-                            {% end %}
-                          </div>
-                        </div>
                       </div>
                     </div>
                   </div>
@@ -166,163 +124,118 @@
               data['lang']) }}</button>
             <button type="reset" class="btn btn-danger mr-2">{{ translate('serverWizard', 'resetForm', data['lang'])
               }}</button>
-
           </form>
-          </p>
         </div>
       </div>
     </div>
-  </div>
+    <div class="col-md-6 grid-margin stretch-card">
-
-  <div class="row">
-    <div class="col-sm-6 grid-margin stretch-card">
       <div class="card">
         <div class="card-body">
 
           <h4>{{ translate('serverWizard', 'importZip', data['lang']) }}</h4>
           <br />
-          <p class="card-description">
-
           <form name="zip" method="post" class="server-wizard" onSubmit="wait_msg(true)">
             {% raw xsrf_form_html() %}
             <input type="hidden" value="import_zip" name="create_type">
 
-            <div class="row">
+            <div class="form-group">
-              <div class="col-sm-9">
+              <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-                <div class="col-sm-12">
+              <input type="text" class="form-control" id="server_name" name="server_name" value="" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
-                  <div class="form-group">
-                    <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-                    <input type="text" class="form-control" id="server_name" name="server_name" value=""
-                      placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
-                  </div>
-                </div>
-
-                <div class="col-sm-12">
-                  <div class="form-group">
-                    <label for="server">{{ translate('serverWizard', 'zipPath', data['lang']) }} <small>{{
-                        translate('serverWizard', 'absoluteZipPath', data['lang']) }}</small></label>
-                    <input type="text" class="form-control" id="server_path" name="server_path"
-                      placeholder="/var/opt/server.zip" required>
-                  </div>
-                </div>
-
-                <div class="col-sm-12">
-                  <div class="form-group">
-                    <label for="server">{{ translate('serverWizard', 'selectRoot', data['lang']) }} <small>{{
-                        translate('serverWizard', 'explainRoot', data['lang']) }}</small></label>
-                    <br>
-                    <button class="btn btn-primary mr-2" id="root_files_button" type="button">{{
-                      translate('serverWizard', 'clickRoot', data['lang']) }}</button>
-                  </div>
-                </div>
-
-
-                <div class="col-sm-12">
-                  <div class="form-group">
-                    <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
-                    <input type="text" class="form-control" id="server_jar" name="server_jar" value=""
-                      placeholder="bedrock_server" required>
-                  </div>
-                </div>
-              </div>
             </div>
 
+            <div class="form-group">
+              <label for="server">{{ translate('serverWizard', 'zipPath', data['lang']) }} <small>{{
+                  translate('serverWizard', 'absoluteZipPath', data['lang']) }}</small></label>
+              <input type="text" class="form-control" id="server_path" name="server_path" placeholder="/var/opt/server.zip" required>
+            </div>
 
-
+            <div class="form-group">
-            <div class="col-sm-12">
+              <label for="server">{{ translate('serverWizard', 'selectRoot', data['lang']) }} <small>{{
-              <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
+                  translate('serverWizard', 'explainRoot', data['lang']) }}</small></label>
-                  style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
+              <br>
-                  data['lang']) }}</small></h4>
+              <button class="btn btn-primary mr-2" id="root_files_button" type="button">{{
-              <hr>
+                translate('serverWizard', 'clickRoot', data['lang']) }}</button>
-              <div class="row">
+            </div>
-
+            <div class="form-group">
-                <div class="col-sm-12">
+              <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
-                  <div class="form-group">
+              <input type="text" class="form-control" id="server_jar" name="server_jar" value="" placeholder="bedrock_server" required>
-                    <label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }}
+            </div>
-                      <small></small></label>
+            <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription', data['lang']) }}</small>
-                    <input type="number" class="form-control" id="port3" name="port" value="19132" step="1" min="1"
+            </h4>
-                      max="65535" required>
+            <hr>
+            <div class="form-group">
+              <label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }}
+                <small></small></label>
+              <input type="number" class="form-control" id="port3" name="port" value="19132" step="1" min="1" max="65535" required>
+            </div>
+            <div class="form-group">
+              <div id="accordion-3">
+                <div class="card">
+                  <div class="card-header p-2" id="Role-3">
+                    <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-3" aria-expanded="true" aria-controls="collapseRole-3">
+                      <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole', data['lang'])
+                      }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
+                        data['lang']) }}</small>
+                    </p>
                   </div>
-                </div>
+                  <div id="collapseRole-3" class="collapse" aria-labelledby="Role-3" data-parent="">
-
+                    <div class="card-body scroll">
-                <div class="col-sm-12">
+                      <div class="form-group">
-                  <div class="form-group">
+                        {% for r in data['roles'] %}
-                    <div id="accordion-3">
+                        <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}" type="checkbox">&nbsp;
-                      <div class="card">
+                            {{ r['role_name'].capitalize() }}</label></span>
-                        <div class="card-header p-2" id="Role-3">
+                        {% end %}
-                          <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-3" aria-expanded="true"
-                            aria-controls="collapseRole-3">
-                            <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole', data['lang'])
-                            }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
-                              data['lang']) }}</small>
-                          </p>
-                        </div>
-                        <div id="collapseRole-3" class="collapse" aria-labelledby="Role-3" data-parent="">
-                          <div class="card-body scroll">
-                            <div class="form-group">
-                              {% for r in data['roles'] %}
-                              <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}"
-                                    type="checkbox">&nbsp;
-                                  {{ r['role_name'].capitalize() }}</label></span>
-                              {% end %}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-sm-12" style="visibility: hidden;">
-                  <div class="form-group">
-                    <input type="text" class="form-control" id="zip_root_path" name="zip_root_path">
-                  </div>
-                </div>
-                <div class="modal fade" id="dir_select" tabindex="-1" role="dialog" aria-labelledby="dir_select"
-                  aria-hidden="true">
-                  <div class="modal-dialog" role="document">
-                    <div class="modal-content">
-                      <div class="modal-header">
-                        <h5 class="modal-title" id="exampleModalLongTitle">{{ translate('serverWizard',
-                          'selectZipDir', data['lang']) }}</h5>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                          <span aria-hidden="true">&times;</span>
-                        </button>
-                      </div>
-                      <div class="modal-body">
-                        <div class="tree-ctx-item" id="main-tree-div" data-path=""
-                          style="overflow: scroll; max-height:75%;">
-                          <input type="radio" id="main-tree-input" name="root_path" value="" checked>
-                          <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
-                            <i class="far fa-folder"></i>
-                            <i class="far fa-folder-open"></i>
-                            {{ translate('serverFiles', 'files', data['lang']) }}
-                          </span>
-                          </input>
-                        </div>
-                      </div>
-                      <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{
-                          translate('serverWizard', 'close', data['lang']) }}</button>
-                        <button type="button" id="modal-okay" data-dismiss="modal" class="btn btn-primary">{{
-                          translate('serverWizard', 'save', data['lang']) }}</button>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-              <button id="zip_submit" type="submit" title="You must select server root dir first" disabled
-                class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
-                }}</button>
-              <button type="button" class="btn btn-danger mr-2 tree-reset">{{ translate('serverWizard', 'resetForm',
-                data['lang'])
-                }}</button>
             </div>
+            <div style="visibility: hidden;">
+              <div class="form-group">
+                <input type="text" class="form-control" id="zip_root_path" name="zip_root_path">
+              </div>
+            </div>
+            <div class="modal fade" id="dir_select" tabindex="-1" role="dialog" aria-labelledby="dir_select" aria-hidden="true">
+              <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLongTitle">{{ translate('serverWizard',
+                      'selectZipDir', data['lang']) }}</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                      <span aria-hidden="true">&times;</span>
+                    </button>
+                  </div>
+                  <div class="modal-body">
+                    <div class="tree-ctx-item" id="main-tree-div" data-path="" style="overflow: scroll; max-height:75%;">
+                      <input type="radio" id="main-tree-input" name="root_path" value="" checked>
+                      <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
+                        <i class="far fa-folder"></i>
+                        <i class="far fa-folder-open"></i>
+                        {{ translate('serverFiles', 'files', data['lang']) }}
+                      </span>
+                      </input>
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{
+                      translate('serverWizard', 'close', data['lang']) }}</button>
+                    <button type="button" id="modal-okay" data-dismiss="modal" class="btn btn-primary">{{
+                      translate('serverWizard', 'save', data['lang']) }}</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <button id="zip_submit" type="submit" title="You must select server root dir first" disabled class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
+              }}</button>
+            <button type="button" class="btn btn-danger mr-2 tree-reset">{{ translate('serverWizard', 'resetForm',
+              data['lang'])
+              }}</button>
+          </form>
         </div>
-        </form>
-        </p>
       </div>
     </div>
-    <div class="col-sm-6 grid-margin stretch-card">
+    <div class="col-md-6 grid-margin stretch-card">
       <div class="card">
         <div class="card-body">
 
@@ -334,147 +247,131 @@
             {% raw xsrf_form_html() %}
             <input type="hidden" value="import_zip" name="create_type">
 
-            <div class="row">
+            <div class="form-group">
-              <div class="col-sm-12">
+              <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-                <div class="col-sm-12">
+              <input type="text" class="form-control" id="server_name" name="server_name" value="" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
-                  <div class="form-group">
+            </div>
-                    <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
+
-                    <input type="text" class="form-control" id="server_name" name="server_name" value=""
+            <div class="form-group">
-                      placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
+              <label for="server">Server Upload </label>
-                  </div>
+              <div id="upload_input" class="input-group">
+                <div class="custom-file">
+                  <input type="file" multiple="false" class="custom-file-input" id="file" name="file" required>
+                  <label id="fileLabel" class="custom-file-label" for="file">{{ translate('serverWizard', 'labelZipFile', data['lang']) }}</label>
                 </div>
-
+                <div class="input-group-append">
-                <div class="col-sm-12">
+                  <button type="button" class="btn btn-info upload-button" id="upload-button" onclick="sendFile()" disabled>{{ translate('serverWizard',
-                  <div class="form-group">
+                    'uploadButton', data['lang']) }}</button>
-                    <label for="server">{{ translate('serverWizard', 'serverUpload', data['lang']) }}</label><br>
-                    <span id="upload_input">
-                      <input type="file" multiple="false" class="form-control" id="file" name="file" required
-                        style="width: 70%;">
-                      <button type="button" class="btn btn-info" onclick="sendFile()">{{ translate('serverWizard',
-                        'uploadButton', data['lang']) }}</button>
-                    </span>
-                  </div>
                 </div>
               </div>
-              <div id="lower_half" style="visibility: hidden;">
+            </div>
-                <div class="col-sm-12">
+            <div id="lower_half" style="visibility: hidden;">
-                  <div class="form-group">
+              <div class="form-group">
-                    <label for="server">{{ translate('serverWizard', 'selectRoot', data['lang']) }} <small>{{
+                <label for="server">{{ translate('serverWizard', 'selectRoot', data['lang']) }} <small>{{
-                        translate('serverWizard', 'explainRoot', data['lang']) }}</small></label>
+                    translate('serverWizard', 'explainRoot', data['lang']) }}</small></label>
-                    <br>
+                <br>
-                    <button class="btn btn-primary mr-2" id="root_upload_button" type="button">{{
+                <button class="btn btn-primary mr-2" id="root_upload_button" type="button">{{
-                      translate('serverWizard', 'clickRoot', data['lang']) }}</button>
+                  translate('serverWizard', 'clickRoot', data['lang']) }}</button>
-                  </div>
+              </div>
-                </div>
+
-
+
-
+              <div class="form-group">
-                <div class="col-sm-12">
+                <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
-                  <div class="form-group">
+                <input type="text" class="form-control" id="server_jar" name="server_jar" value="" placeholder="paper.jar" required>
-                    <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
+              </div>
-                    <input type="text" class="form-control" id="server_jar" name="server_jar" value=""
+
-                      placeholder="paper.jar" required>
+              <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
-                  </div>
+                  data['lang']) }}</small></h4>
-                </div>
+              <hr>
-
+
-                <div class="col-sm-12">
+              <div class="form-group">
-                  <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
+                <label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
-                      style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
+                    translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
-                      data['lang']) }}</small></h4>
+                <input type="number" class="form-control" id="port4" name="port" value="19132" step="1" min="1" max="65535" required>
-                  <hr>
+              </div>
-                  <div class="row">
+
-
+              <div class="form-group">
-                    <div class="col-sm-12">
+                <div id="accordion-3">
-                      <div class="form-group">
+                  <div class="card">
-                        <label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
+                    <div class="card-header p-2" id="Role-3">
-                            translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
+                      <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-3" aria-expanded="true" aria-controls="collapseRole-3">
-                        <input type="number" class="form-control" id="port4" name="port" value="19132" step="1" min="1"
+                        <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole',
-                          max="65535" required>
+                        data['lang'])
-                      </div>
+                        }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
-                    </div>
+                          data['lang']) }}</small>
-
+                      </p>
-                    <div class="col-sm-12">
+                    </div>
-                      <div class="form-group">
+                    <div id="collapseRole-3" class="collapse" aria-labelledby="Role-3" data-parent="">
-                        <div id="accordion-3">
+                      <div class="card-body scroll">
-                          <div class="card">
+                        <div class="form-group">
-                            <div class="card-header p-2" id="Role-3">
+                          {% for r in data['roles'] %}
-                              <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-3"
+                          <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}" type="checkbox">&nbsp;
-                                aria-expanded="true" aria-controls="collapseRole-3">
+                              {{ r['role_name'].capitalize() }}</label></span>
-                                <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole',
+                          {% end %}
-                                data['lang'])
+                        </div>
-                                }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
+                      </div>
-                                  data['lang']) }}</small>
+                    </div>
-                              </p>
+                  </div>
-                            </div>
+                </div>
-                            <div id="collapseRole-3" class="collapse" aria-labelledby="Role-3" data-parent="">
+              </div>
-                              <div class="card-body scroll">
+              <div style="visibility: hidden;">
-                                <div class="form-group">
+                <div class="form-group">
-                                  {% for r in data['roles'] %}
+                  <input type="text" class="form-control" id="zip_root_path" name="zip_root_path">
-                                  <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}"
+                </div>
-                                        type="checkbox">&nbsp;
+              </div>
-                                      {{ r['role_name'].capitalize() }}</label></span>
+              <div class="modal fade" id="dir_upload_select" tabindex="-1" role="dialog" aria-labelledby="dir_select" aria-hidden="true">
-                                  {% end %}
+                <div class="modal-dialog" role="document">
-                                </div>
+                  <div class="modal-content">
-                              </div>
+                    <div class="modal-header">
-                            </div>
+                      <h5 class="modal-title" id="exampleModalLongTitle">{{ translate('serverWizard',
-                          </div>
+                        'selectZipDir', data['lang']) }}</h5>
-                        </div>
+                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                      </div>
+                        <span aria-hidden="true">&times;</span>
-                    </div>
+                      </button>
-                    <div class="col-sm-12" style="visibility: hidden;">
+                    </div>
-                      <div class="form-group">
+                    <div class="modal-body">
-                        <input type="text" class="form-control" id="zip_root_path" name="zip_root_path">
+                      <div class="tree-ctx-item" id="main-tree-div-upload" data-path="" style="overflow: scroll; max-height:75%;">
-                      </div>
+                        <input type="radio" id="main-tree-input-upload" name="root_path" value="" checked>
-                    </div>
+                        <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
-                    <div class="modal fade" id="dir_upload_select" tabindex="-1" role="dialog"
+                          <i class="far fa-folder"></i>
-                      aria-labelledby="dir_select" aria-hidden="true">
+                          <i class="far fa-folder-open"></i>
-                      <div class="modal-dialog" role="document">
+                          {{ translate('serverFiles', 'files', data['lang']) }}
-                        <div class="modal-content">
+                        </span>
-                          <div class="modal-header">
+                        </input>
-                            <h5 class="modal-title" id="exampleModalLongTitle">{{ translate('serverWizard',
+                      </div>
-                              'selectZipDir', data['lang']) }}</h5>
+                    </div>
-                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <div class="modal-footer">
-                              <span aria-hidden="true">&times;</span>
+                      <button type="button" class="btn btn-secondary" data-dismiss="modal">{{
-                            </button>
+                        translate('serverWizard', 'close', data['lang']) }}</button>
-                          </div>
+                      <button type="button" id="modal-okay" data-dismiss="modal" class="btn btn-primary">{{
-                          <div class="modal-body">
+                        translate('serverWizard', 'save', data['lang']) }}</button>
-                            <div class="tree-ctx-item" id="main-tree-div-upload" data-path=""
+                    </div>
-                              style="overflow: scroll; max-height:75%;">
+                  </div>
-                              <input type="radio" id="main-tree-input-upload" name="root_path" value="" checked>
+                </div>
-                              <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
+              </div>
-                                <i class="far fa-folder"></i>
+              <button id="upload_submit" type="submit" title="You must select server root dir first" disabled class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
-                                <i class="far fa-folder-open"></i>
+                }}</button>
-                                {{ translate('serverFiles', 'files', data['lang']) }}
+              <button type="button" class="btn btn-danger mr-2 tree-reset">{{ translate('serverWizard', 'resetForm',
-                              </span>
+                data['lang'])
-                              </input>
+                }}</button>
-                            </div>
-                          </div>
-                          <div class="modal-footer">
-                            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{
-                              translate('serverWizard', 'close', data['lang']) }}</button>
-                            <button type="button" id="modal-okay" data-dismiss="modal" class="btn btn-primary">{{
-                              translate('serverWizard', 'save', data['lang']) }}</button>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <button id="upload_submit" type="submit" title="You must select server root dir first" disabled
-                  class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
-                  }}</button>
-                <button type="button" class="btn btn-danger mr-2 tree-reset">{{ translate('serverWizard', 'resetForm',
-                  data['lang'])
-                  }}</button>
-              </div>
             </div>
           </form>
-          </p>
         </div>
       </div>
     </div>
   </div>
 </div>
 <style>
+  div>.input-group>.custom-file-input {
+    position: relative !important;
+    -webkit-box-flex: 1 !important;
+    -ms-flex: 1 1 auto !important;
+    flex: 1 1 auto !important;
+    width: 1% !important;
+    margin-bottom: 0 !important;
+    border: 1px solid var(--outline);
+  }
+
   .scroll {
     max-height: 12em;
     overflow-y: auto;
@@ -563,7 +460,7 @@
   var file;
   function sendFile() {
     file = $("#file")[0].files[0]
-    document.getElementById("upload_input").innerHTML = '<div class="progress"><div id="upload-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">&nbsp;<i class="fa-solid fa-spinner"></i></div></div>'
+    document.getElementById("upload_input").innerHTML = '<div class="progress" style="width: 100%;"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">&nbsp;<i class="fa-solid fa-spinner"></i></div></div>'
     let xmlHttpRequest = new XMLHttpRequest();
     let token = getCookie("_xsrf")
     let fileName = encodeURIComponent(file.name)
@@ -591,7 +488,7 @@
     xmlHttpRequest.addEventListener('load', (event) => {
       if (event.target.responseText == 'success') {
         console.log('Upload for file', file.name, 'was successful!')
-        document.getElementById("upload_input").innerHTML = '<div class="card-header header-sm d-flex justify-content-between align-items-center"><span id="file-uploaded" style="color: gray;">' + fileName + '</span> 🔒</div>';
+        document.getElementById("upload_input").innerHTML = '<div class="card-header header-sm d-flex justify-content-between align-items-center" style="width: 100%;"><span id="file-uploaded" style="color: gray;">' + fileName + '</span> 🔒</div>';
         document.getElementById("lower_half").style.visibility = "visible";
       }
       else {
@@ -837,5 +734,15 @@
     });
   }
 
+
+  $('#file').change(function () {
+    console.log("File changed");
+    if ($('#file').val()) {
+      $('#upload-button').prop("disabled", false);
+      document.getElementById("fileLabel").innerHTML = $('#file').val().split('\\').pop().split('/').pop();
+      console.log("File changed good");
+    }
+  });
+
 </script>
 {% end %}

app/frontend/templates/server/wizard.html

@@ -17,8 +17,9 @@
   </ul>
   <div class="d-none" id="overlay" onclick="hide(event)"></div>
   <div class="row">
+    <!-- Create New Server -->
     {% if data['online'] %}
-    <div class="col-sm-6 grid-margin stretch-card">
+    <div class="col-md-6 grid-margin stretch-card">
       <div class="card" id="creation_wizard">
         <div class="card-body">
 
@@ -29,168 +30,160 @@
           <form method="post" class="server-wizard" onSubmit="wait_msg()">
             {% if data["server_api"] %}
             <fieldset>
-            {% else %}
+              {% else %}
-            <fieldset disabled="disabled">
+              <fieldset disabled="disabled">
-              <style>
+                <style>
-                #creation_wizard {
+                  #creation_wizard {
-                -webkit-filter: grayscale(1);
+                    -webkit-filter: grayscale(1);
-                }
+                  }
-                .api-alert{
-                position:absolute;
-                top:-5px;
-                left:0;
-                font-size: 50px !important;
-                color:#fff;
-                background:rgb(0,170,170);
-                opacity:.4;
-                width:100%;
-                height:100%;
-                z-index: 100;
-                }
-                .api-alert p {
-                  margin: 0;
-                  position: absolute;
-                  top: 50%;
-                  left: 50%;
-                  text-align: center;
-                  font-size: 20px;
-                  -ms-transform: translate(-50%, -50%);
-                  transform: translate(-50%, -50%);
-                }
-              </style>
-            {% end %}
-            {% raw xsrf_form_html() %}
-            <div class="row">
-              <div class="col-sm-12">
-                <div class="form-group">
-                  <label for="server_jar">{{ translate('serverWizard', 'serverType', data['lang'])
-                    }}</label>
-                  {% if data['super_user'] %}
-                  <select style="width: 90%;" required class="form-control form-control-lg select-css" id="server_jar"
-                    name="server_jar" onchange="serverJarChange(this)">
-                    {% else %}
-                    <select required class="form-control form-control-lg select-css" id="server_jar" name="server_jar"
-                      onchange="serverJarChange(this)">
-                      {% end %}
-                      <option value="None">{{ translate('serverWizard', 'selectType', data['lang']) }}</option>
-                      {% for s in data['server_types'] %}
-                      <option value="{{ s }}">{{ s.capitalize() }}</option>
-                      {% end %}
-                    </select>
-                    {% if data['super_user'] %}
-                    &nbsp;&nbsp;<i onclick="refreshCache()" id="refresh-cache" class="refresh-class fas fa-sync"></i>
-                    {% end %}
-                </div>
-              </div>
 
-              <div class="col-sm-12">
+                  .api-alert {
-                <div class="form-group">
+                    position: absolute;
-                  <label for="server_type">{{ translate('serverWizard', 'serverSelect', data['lang']) }}</label>
+                    top: -5px;
-                  <select required class="form-control form-control-lg select-css" id="server_type" name="server_type"
+                    left: 0;
-                    onchange="serverTypeChange(this)">
+                    font-size: 50px !important;
-                    <option value="">{{ translate('serverWizard', 'selectServer', data['lang']) }}</option>
+                    color: #fff;
-                  </select>
+                    background: rgb(0, 170, 170);
-                </div>
+                    opacity: .4;
-              </div>
+                    width: 100%;
+                    height: 100%;
+                    z-index: 100;
+                  }
 
-              <div class="col-sm-12">
+                  .api-alert p {
-                <div class="form-group">
+                    margin: 0;
-                  <label for="server_version">{{ translate('serverWizard', 'serverVersion', data['lang']) }}</label>
+                    position: absolute;
-                  <select required class="form-control form-control-lg select-css" id="server" name="server">
+                    top: 50%;
-                    <option value="">{{ translate('serverWizard', 'selectVersion', data['lang']) }}</option>
+                    left: 50%;
-                  </select>
+                    text-align: center;
-                </div>
+                    font-size: 20px;
-              </div>
+                    -ms-transform: translate(-50%, -50%);
-
+                    transform: translate(-50%, -50%);
-              <div class="col-sm-12">
+                  }
-                <div class="form-group">
+                </style>
-                  <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
+                {% end %}
-                  <input type="text" class="form-control" id="server_name" name="server_name"
+                {% raw xsrf_form_html() %}
-                    placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
+                <div class="row">
-                </div>
+                  <div class="col-sm-12">
-              </div>
+                    <div class="form-group">
-
+                      <label for="server_jar">{{ translate('serverWizard', 'serverType', data['lang'])
-            </div>
+                        }}</label>
-            <br />
+                      <div class="input-group">
-            <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
+                        <select required class="form-control form-control-lg select-css" id="server_jar" name="server_jar" onchange="serverJarChange(this)">
-                style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
+                          <option value="None">{{ translate('serverWizard', 'selectType', data['lang']) }}</option>
-                data['lang']) }}</small></h4>
+                          {% for s in data['server_types'] %}
-            <hr>
+                          <option value="{{ s }}">{{ s.capitalize() }}</option>
-            <div class="row">
+                          {% end %}
-
+                        </select>
-              <div class="col-sm-4">
+                        {% if data['super_user'] %}
-                <div class="form-group">
+                        <div class="input-group-append">
-                  <label for="min_memory1">{{ translate('serverWizard', 'minMem', data['lang']) }} <small> - {{
+                          <button class="btn custom-picker" type="button" onclick="refreshCache()"><i id="refresh-cache" class="refresh-class fas fa-sync"></i></button>
-                      translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
+                        </div>
-                  <input type="number" class="form-control" id="min_memory1" name="min_memory" value="1" step="0.5"
+                        {% end %}
-                    min="0.5" required>
-                </div>
-              </div>
-
-              <div class="col-sm-4">
-                <div class="form-group">
-                  <label for="max_memory1">{{ translate('serverWizard', 'maxMem', data['lang']) }} <small> - {{
-                      translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                  <input type="number" class="form-control" id="max_memory1" name="max_memory" value="2" step="0.5"
-                    min="0.5" required>
-                </div>
-              </div>
-
-              <div class="col-sm-4">
-                <div class="form-group">
-                  <label for="port1">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
-                      translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
-                  <input type="number" class="form-control" id="port1" name="port" value="25565" step="1" min="1"
-                    max="65535 " required>
-                </div>
-              </div>
-              <div class="col-sm-12">
-                <div class="form-group">
-                  <div id="accordion-1">
-                    <div class="card">
-                      <div class="card-header p-2" id="Role-1">
-                        <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-1" aria-expanded="true"
-                          aria-controls="collapseRole-1">
-                          <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole', data['lang']) }}
-                          <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
-                            data['lang']) }}</small>
-                        </p>
                       </div>
-                      <div id="collapseRole-1" class="collapse" aria-labelledby="Role-1" data-parent="">
+                    </div>
-                        <div class="card-body scroll">
+                  </div>
-                          <div class="form-group">
+
-                            {% for r in data['roles'] %}
+                  <div class="col-sm-12">
-                            <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}"
+                    <div class="form-group">
-                                  type="checkbox">&nbsp;
+                      <label for="server_type">{{ translate('serverWizard', 'serverSelect', data['lang']) }}</label>
-                                {{ r['role_name'].capitalize() }}</label></span>
+                      <select required class="form-control form-control-lg select-css" id="server_type" name="server_type" onchange="serverTypeChange(this)">
-                            {% end %}
+                        <option value="">{{ translate('serverWizard', 'selectServer', data['lang']) }}</option>
+                      </select>
+                    </div>
+                  </div>
+
+                  <div class="col-sm-12">
+                    <div class="form-group">
+                      <label for="server_version">{{ translate('serverWizard', 'serverVersion', data['lang']) }}</label>
+                      <select required class="form-control form-control-lg select-css" id="server" name="server">
+                        <option value="">{{ translate('serverWizard', 'selectVersion', data['lang']) }}</option>
+                      </select>
+                    </div>
+                  </div>
+
+                  <div class="col-sm-12">
+                    <div class="form-group">
+                      <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
+                      <input type="text" class="form-control" id="server_name" name="server_name" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
+                    </div>
+                  </div>
+
+                </div>
+                <br />
+                <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
+                    data['lang']) }}</small></h4>
+                <hr>
+                <div class="row">
+
+                  <div class="col-sm-4">
+                    <div class="form-group">
+                      <label for="min_memory1">{{ translate('serverWizard', 'minMem', data['lang']) }} <small> - {{
+                          translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
+                      <input type="number" class="form-control" id="min_memory1" name="min_memory" value="1" step="0.5" min="0.5" required>
+                    </div>
+                  </div>
+
+                  <div class="col-sm-4">
+                    <div class="form-group">
+                      <label for="max_memory1">{{ translate('serverWizard', 'maxMem', data['lang']) }} <small> - {{
+                          translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
+                      <input type="number" class="form-control" id="max_memory1" name="max_memory" value="2" step="0.5" min="0.5" required>
+                    </div>
+                  </div>
+
+                  <div class="col-sm-4">
+                    <div class="form-group">
+                      <label for="port1">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
+                          translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
+                      <input type="number" class="form-control" id="port1" name="port" value="25565" step="1" min="1" max="65535 " required>
+                    </div>
+                  </div>
+                  <div class="col-sm-12">
+                    <div class="form-group">
+                      <div id="accordion-1">
+                        <div class="card">
+                          <div class="card-header p-2" id="Role-1">
+                            <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-1" aria-expanded="true" aria-controls="collapseRole-1">
+                              <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole', data['lang']) }}
+                              <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
+                                data['lang']) }}</small>
+                            </p>
+                          </div>
+                          <div id="collapseRole-1" class="collapse" aria-labelledby="Role-1" data-parent="">
+                            <div class="card-body scroll">
+                              <div class="form-group">
+                                {% for r in data['roles'] %}
+                                <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}" type="checkbox">&nbsp; {{ r['role_name'].capitalize() }}</label></span>
+                                {% end %}
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-              </div>
 
-            </div>
+                </div>
-            <button type="submit" class="btn btn-primary mr-2">{{ translate('serverWizard', 'buildServer',
+                <button type="submit" class="btn btn-primary mr-2">{{ translate('serverWizard', 'buildServer',
-              data['lang']) }}</button>
+                  data['lang']) }}</button>
-            <button type="reset" class="btn btn-danger mr-2">{{ translate('serverWizard', 'resetForm', data['lang'])
+                <button type="reset" class="btn btn-danger mr-2">{{ translate('serverWizard', 'resetForm', data['lang'])
-              }}</button>
+                  }}</button>
-          </fieldset>
+              </fieldset>
-          {% if not data["server_api"] %}
+              {% if not data["server_api"] %}
-          <div class="api-alert" style="position: absolute; top: -5px; z-index: 100; opacity: .99;">
+              <div class="api-alert" style="position: absolute; top: -5px; z-index: 100; opacity: .99;">
-            <p style="color: white !important;"><i class="fas fa-exclamation-triangle" style="color: white;"></i>&nbsp;{{ translate('error', 'serverJars1', data['lang']) }}<a style="color: red;"; href="https://status.craftycontrol.com/status/craftycontrol" 
+                <p style="color: white !important;"><i class="fas fa-exclamation-triangle" style="color: white;"></i>&nbsp;{{ translate('error', 'serverJars1', data['lang']) }}<a style="color: red;" ; href="https://status.craftycontrol.com/status/craftycontrol" target="_blank">&nbsp;{{ translate('error', 'craftyStatus', data['lang']) }}</a>
-              target="_blank">&nbsp;{{ translate('error', 'craftyStatus', data['lang']) }}</a>
+                  &nbsp;{{ translate('error', 'serverJars2', data['lang']) }}</p>
-              &nbsp;{{ translate('error', 'serverJars2', data['lang']) }}</p></div>
+              </div>
-          {% end %}
+              {% end %}
         </div>
       </div>
       </form>
       {% end %}
     </div>
 
-    <div class="col-sm-6 grid-margin stretch-card">
+    <!-- Import an Existing Server -->
+    <div class="col-md-6 grid-margin stretch-card">
       <div class="card">
         <div class="card-body">
 
@@ -206,8 +199,7 @@
               <div class="col-sm-12">
                 <div class="form-group">
                   <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-                  <input type="text" class="form-control" id="server_name" name="server_name" value=""
+                  <input type="text" class="form-control" id="server_name" name="server_name" value="" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
-                    placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
                 </div>
               </div>
 
@@ -215,16 +207,14 @@
                 <div class="form-group">
                   <label for="server">{{ translate('serverWizard', 'serverPath', data['lang']) }} <small>{{
                       translate('serverWizard', 'absoluteServerPath', data['lang']) }}</small></label>
-                  <input type="text" class="form-control" id="server_path" name="server_path"
+                  <input type="text" class="form-control" id="server_path" name="server_path" placeholder="/var/opt/server" required>
-                    placeholder="/var/opt/server" required>
                 </div>
               </div>
 
               <div class="col-sm-12">
                 <div class="form-group">
                   <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
-                  <input type="text" class="form-control" id="server_jar" name="server_jar" value=""
+                  <input type="text" class="form-control" id="server_jar" name="server_jar" value="" placeholder="paper.jar" required>
-                    placeholder="paper.jar" required>
                 </div>
               </div>
 
@@ -232,8 +222,7 @@
 
             </div>
             <br />
-            <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
+            <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
-                style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
                 data['lang']) }}</small></h4>
             <hr>
             <div class="row">
@@ -242,8 +231,7 @@
                 <div class="form-group">
                   <label for="min_memory2">{{ translate('serverWizard', 'minMem', data['lang']) }} <small> - {{
                       translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                  <input type="number" class="form-control" id="min_memory2" name="min_memory" value="1" step="0.5"
+                  <input type="number" class="form-control" id="min_memory2" name="min_memory" value="1" step="0.5" min="0.5" required>
-                    min="0.5" required>
                 </div>
               </div>
 
@@ -251,8 +239,7 @@
                 <div class="form-group">
                   <label for="max_memory2">{{ translate('serverWizard', 'maxMem', data['lang']) }} <small> - {{
                       translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                  <input type="number" class="form-control" id="max_memory2" name="max_memory" value="2" step="0.5"
+                  <input type="number" class="form-control" id="max_memory2" name="max_memory" value="2" step="0.5" min="0.5" required>
-                    min="0.5" required>
                 </div>
               </div>
 
@@ -260,8 +247,7 @@
                 <div class="form-group">
                   <label for="port2">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
                       translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
-                  <input type="number" class="form-control" id="port2" name="port" value="25565" step="1" min="1"
+                  <input type="number" class="form-control" id="port2" name="port" value="25565" step="1" min="1" max="65535" required>
-                    max="65535" required>
                 </div>
               </div>
               <div class="col-sm-12">
@@ -269,8 +255,7 @@
                   <div id="accordion-2">
                     <div class="card">
                       <div class="card-header p-2" id="Role-2">
-                        <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-2" aria-expanded="true"
+                        <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-2" aria-expanded="true" aria-controls="collapseRole-2">
-                          aria-controls="collapseRole-2">
                           <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole', data['lang']) }}
                           <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
                             data['lang']) }}</small>
@@ -280,8 +265,7 @@
                         <div class="card-body scroll">
                           <div class="form-group">
                             {% for r in data['roles'] %}
-                            <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}"
+                            <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}" type="checkbox">&nbsp;
-                                  type="checkbox">&nbsp;
                                 {{ r['role_name'].capitalize() }}</label></span>
                             {% end %}
                           </div>
@@ -302,9 +286,9 @@
         </div>
       </div>
     </div>
-  </div>
+
-  <div class="row">
+    <!-- Import from a Zip File -->
-    <div class="col-sm-6 grid-margin stretch-card">
+    <div class="col-md-6 grid-margin stretch-card">
       <div class="card">
         <div class="card-body">
 
@@ -321,8 +305,7 @@
                 <div class="col-sm-12">
                   <div class="form-group">
                     <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-                    <input type="text" class="form-control" id="server_name" name="server_name" value=""
+                    <input type="text" class="form-control" id="server_name" name="server_name" value="" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
-                      placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
                   </div>
                 </div>
 
@@ -330,8 +313,7 @@
                   <div class="form-group">
                     <label for="server">{{ translate('serverWizard', 'zipPath', data['lang']) }} <small>{{
                         translate('serverWizard', 'absoluteZipPath', data['lang']) }}</small></label>
-                    <input type="text" class="form-control" id="server_path" name="server_path"
+                    <input type="text" class="form-control" id="server_path" name="server_path" placeholder="/var/opt/server.zip" required>
-                      placeholder="/var/opt/server.zip" required>
                   </div>
                 </div>
 
@@ -349,8 +331,7 @@
                 <div class="col-sm-12">
                   <div class="form-group">
                     <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
-                    <input type="text" class="form-control" id="server_jar" name="server_jar" value=""
+                    <input type="text" class="form-control" id="server_jar" name="server_jar" value="" placeholder="paper.jar" required>
-                      placeholder="paper.jar" required>
                   </div>
                 </div>
               </div>
@@ -359,36 +340,31 @@
 
 
             <div class="col-sm-12">
-              <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
+              <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
-                  style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
                   data['lang']) }}</small></h4>
               <hr>
               <div class="row">
-
+                <div class="col-sm-4">
-                <div class="col-sm-12">
                   <div class="form-group">
                     <label for="min_memory3">{{ translate('serverWizard', 'minMem', data['lang']) }} <small> - {{
                         translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                    <input type="number" class="form-control" id="min_memory3" name="min_memory" value="1" step="0.5"
+                    <input type="number" class="form-control" id="min_memory3" name="min_memory" value="1" step="0.5" min="0.5" required>
-                      min="0.5" required>
                   </div>
                 </div>
 
-                <div class="col-sm-12">
+                <div class="col-sm-4">
                   <div class="form-group">
                     <label for="max_memory3">{{ translate('serverWizard', 'maxMem', data['lang']) }} <small> - {{
                         translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                    <input type="number" class="form-control" id="max_memory3" name="max_memory" value="2" step="0.5"
+                    <input type="number" class="form-control" id="max_memory3" name="max_memory" value="2" step="0.5" min="0.5" required>
-                      min="0.5" required>
                   </div>
                 </div>
 
-                <div class="col-sm-12">
+                <div class="col-sm-4">
                   <div class="form-group">
                     <label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
                         translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
-                    <input type="number" class="form-control" id="port3" name="port" value="25565" step="1" min="1"
+                    <input type="number" class="form-control" id="port3" name="port" value="25565" step="1" min="1" max="65535" required>
-                      max="65535" required>
                   </div>
                 </div>
 
@@ -397,8 +373,7 @@
                     <div id="accordion-3">
                       <div class="card">
                         <div class="card-header p-2" id="Role-3">
-                          <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-3" aria-expanded="true"
+                          <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-3" aria-expanded="true" aria-controls="collapseRole-3">
-                            aria-controls="collapseRole-3">
                             <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole', data['lang'])
                             }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
                               data['lang']) }}</small>
@@ -408,8 +383,7 @@
                           <div class="card-body scroll">
                             <div class="form-group">
                               {% for r in data['roles'] %}
-                              <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}"
+                              <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}" type="checkbox">&nbsp;
-                                    type="checkbox">&nbsp;
                                   {{ r['role_name'].capitalize() }}</label></span>
                               {% end %}
                             </div>
@@ -419,13 +393,12 @@
                     </div>
                   </div>
                 </div>
-                <div class="col-sm-12" style="visibility: hidden;">
+                <div class="col-sm-12" style="visibility: hidden;" hidden>
                   <div class="form-group">
                     <input type="text" class="form-control" id="zip_root_path" name="zip_root_path">
                   </div>
                 </div>
-                <div class="modal fade" id="dir_select" tabindex="-1" role="dialog" aria-labelledby="dir_select"
+                <div class="modal fade" id="dir_select" tabindex="-1" role="dialog" aria-labelledby="dir_select" aria-hidden="true">
-                  aria-hidden="true">
                   <div class="modal-dialog" role="document">
                     <div class="modal-content">
                       <div class="modal-header">
@@ -436,8 +409,7 @@
                         </button>
                       </div>
                       <div class="modal-body">
-                        <div class="tree-ctx-item" id="main-tree-div" data-path=""
+                        <div class="tree-ctx-item" id="main-tree-div" data-path="" style="overflow: scroll; max-height:75%;">
-                          style="overflow: scroll; max-height:75%;">
                           <input type="radio" id="main-tree-input" name="root_path" value="" checked>
                           <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
                             <i class="far fa-folder"></i>
@@ -457,8 +429,7 @@
                   </div>
                 </div>
               </div>
-              <button id="zip_submit" type="submit" title="You must select server root dir first" disabled
+              <button id="zip_submit" type="submit" title="You must select server root dir first" disabled class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
-                class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
                 }}</button>
               <button type="button" class="btn btn-danger mr-2 tree-reset">{{ translate('serverWizard', 'resetForm',
                 data['lang'])
@@ -469,7 +440,8 @@
         </p>
       </div>
     </div>
-    <div class="col-sm-6 grid-margin stretch-card">
+    <!-- Upload Zip File For Server Import -->
+    <div class="col-md-6 grid-margin stretch-card">
       <div class="card">
         <div class="card-body">
 
@@ -481,157 +453,124 @@
             {% raw xsrf_form_html() %}
             <input type="hidden" value="import_zip" name="create_type">
 
-            <div class="row">
+            <div class="form-group">
-              <div class="col-sm-12">
+              <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-                <div class="col-sm-12">
+              <input type="text" class="form-control" id="server_name" name="server_name" value="" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
-                  <div class="form-group">
+            </div>
-                    <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
+            <div class="form-group">
-                    <input type="text" class="form-control" id="server_name" name="server_name" value=""
+              <label for="server">{{ translate('serverWizard', 'serverUpload', data['lang']) }}</label>
-                      placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
+              <div id="upload_input" class="input-group">
-                  </div>
+                <div class="custom-file">
+                  <input type="file" multiple="false" class="custom-file-input" id="file" name="file" required>
+                  <label id="fileLabel" class="custom-file-label" for="file">{{ translate('serverWizard', 'labelZipFile', data['lang']) }}</label>
                 </div>
-
+                <div class="input-group-append">
-                <div class="col-sm-12">
+                  <button type="button" class="btn btn-info upload-button" id="upload-button" onclick="sendFile()" disabled>{{ translate('serverWizard',
-                  <div class="form-group">
+                    'uploadButton', data['lang']) }}</button>
-                    <label for="server">{{ translate('serverWizard', 'serverUpload', data['lang']) }}</label><br>
-                    <span id="upload_input">
-                      <input type="file" multiple="false" class="form-control" id="file" name="file" required
-                        style="width: 70%;">
-                      <button type="button" class="btn btn-info" onclick="sendFile()">{{ translate('serverWizard',
-                        'uploadButton', data['lang']) }}</button>
-                    </span>
-                  </div>
                 </div>
               </div>
-              <div id="lower_half" style="visibility: hidden;">
+            </div>
-                <div class="col-sm-12">
-                  <div class="form-group">
-                    <label for="server">{{ translate('serverWizard', 'selectRoot', data['lang']) }} <small>{{
-                        translate('serverWizard', 'explainRoot', data['lang']) }}</small></label>
-                    <br>
-                    <button class="btn btn-primary mr-2" id="root_upload_button" type="button">{{
-                      translate('serverWizard', 'clickRoot', data['lang']) }}</button>
-                  </div>
-                </div>
 
+            <div id="lower_half" style="visibility: hidden;" hidden>
+              <div class="form-group">
+                <label for="server">{{ translate('serverWizard', 'selectRoot', data['lang']) }} <small>{{
+                    translate('serverWizard', 'explainRoot', data['lang']) }}</small></label>
+                <br>
+                <button class="btn btn-primary mr-2" id="root_upload_button" type="button">{{
+                  translate('serverWizard', 'clickRoot', data['lang']) }}</button>
+              </div>
 
-                <div class="col-sm-12">
+              <div class="form-group">
-                  <div class="form-group">
+                <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
-                    <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
+                <input type="text" class="form-control" id="server_jar" name="server_jar" value="" placeholder="paper.jar" required>
-                    <input type="text" class="form-control" id="server_jar" name="server_jar" value=""
+              </div>
-                      placeholder="paper.jar" required>
-                  </div>
-                </div>
 
-                <div class="col-sm-12">
+              <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
-                  <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
+                  data['lang']) }}</small></h4>
-                      style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
+              <hr>
-                      data['lang']) }}</small></h4>
-                  <hr>
-                  <div class="row">
 
-                    <div class="col-sm-12">
+              <div class="form-group">
-                      <div class="form-group">
+                <label for="min_memory3">{{ translate('serverWizard', 'minMem', data['lang']) }} <small> - {{
-                        <label for="min_memory3">{{ translate('serverWizard', 'minMem', data['lang']) }} <small> - {{
+                    translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                            translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
+                <input type="number" class="form-control" id="min_memory3" name="min_memory" value="1" step="0.5" min="0.5" required>
-                        <input type="number" class="form-control" id="min_memory3" name="min_memory" value="1"
+              </div>
-                          step="0.5" min="0.5" required>
+
-                      </div>
+              <div class="form-group">
+                <label for="max_memory3">{{ translate('serverWizard', 'maxMem', data['lang']) }} <small> - {{
+                    translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
+                <input type="number" class="form-control" id="max_memory3" name="max_memory" value="2" step="0.5" min="0.5" required>
+              </div>
+
+              <div class="form-group">
+                <label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
+                    translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
+                <input type="number" class="form-control" id="port3" name="port" value="25565" step="1" min="1" max="65535" required>
+              </div>
+
+              <div class="form-group">
+                <div id="accordion-3">
+                  <div class="card">
+                    <div class="card-header p-2" id="Role-3">
+                      <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-3" aria-expanded="true" aria-controls="collapseRole-3">
+                        <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole',
+                        data['lang'])
+                        }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
+                          data['lang']) }}</small>
+                      </p>
                     </div>
-
+                    <div id="collapseRole-3" class="collapse" aria-labelledby="Role-3" data-parent="">
-                    <div class="col-sm-12">
+                      <div class="card-body scroll">
-                      <div class="form-group">
+                        <div class="form-group">
-                        <label for="max_memory3">{{ translate('serverWizard', 'maxMem', data['lang']) }} <small> - {{
+                          {% for r in data['roles'] %}
-                            translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
+                          <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}" type="checkbox">&nbsp;
-                        <input type="number" class="form-control" id="max_memory3" name="max_memory" value="2"
+                              {{ r['role_name'].capitalize() }}</label></span>
-                          step="0.5" min="0.5" required>
+                          {% end %}
-                      </div>
-                    </div>
-
-                    <div class="col-sm-12">
-                      <div class="form-group">
-                        <label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
-                            translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
-                        <input type="number" class="form-control" id="port3" name="port" value="25565" step="1" min="1"
-                          max="65535" required>
-                      </div>
-                    </div>
-
-                    <div class="col-sm-12">
-                      <div class="form-group">
-                        <div id="accordion-3">
-                          <div class="card">
-                            <div class="card-header p-2" id="Role-3">
-                              <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-3"
-                                aria-expanded="true" aria-controls="collapseRole-3">
-                                <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole',
-                                data['lang'])
-                                }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
-                                  data['lang']) }}</small>
-                              </p>
-                            </div>
-                            <div id="collapseRole-3" class="collapse" aria-labelledby="Role-3" data-parent="">
-                              <div class="card-body scroll">
-                                <div class="form-group">
-                                  {% for r in data['roles'] %}
-                                  <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}"
-                                        type="checkbox">&nbsp;
-                                      {{ r['role_name'].capitalize() }}</label></span>
-                                  {% end %}
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="col-sm-12" style="visibility: hidden;">
-                      <div class="form-group">
-                        <input type="text" class="form-control" id="zip_root_path" name="zip_root_path">
-                      </div>
-                    </div>
-                    <div class="modal fade" id="dir_upload_select" tabindex="-1" role="dialog"
-                      aria-labelledby="dir_select" aria-hidden="true">
-                      <div class="modal-dialog" role="document">
-                        <div class="modal-content">
-                          <div class="modal-header">
-                            <h5 class="modal-title" id="exampleModalLongTitle">{{ translate('serverWizard',
-                              'selectZipDir', data['lang']) }}</h5>
-                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                              <span aria-hidden="true">&times;</span>
-                            </button>
-                          </div>
-                          <div class="modal-body">
-                            <div class="tree-ctx-item" id="main-tree-div-upload" data-path=""
-                              style="overflow: scroll; max-height:75%;">
-                              <input type="radio" id="main-tree-input-upload" name="root_path" value="" checked>
-                              <span id="main-tree-upload" class="files-tree-title tree-caret-down root-dir"
-                                data-path="">
-                                <i class="far fa-folder"></i>
-                                <i class="far fa-folder-open"></i>
-                                {{ translate('serverFiles', 'files', data['lang']) }}
-                              </span>
-                              </input>
-                            </div>
-                          </div>
-                          <div class="modal-footer">
-                            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{
-                              translate('serverWizard', 'close', data['lang']) }}</button>
-                            <button type="button" id="modal-okay" data-dismiss="modal" class="btn btn-primary">{{
-                              translate('serverWizard', 'save', data['lang']) }}</button>
-                          </div>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
-                <button id="upload_submit" type="submit" title="You must select server root dir first" disabled
-                  class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
-                  }}</button>
-                <button type="button" class="btn btn-danger mr-2 tree-reset">{{ translate('serverWizard', 'resetForm',
-                  data['lang'])
-                  }}</button>
               </div>
+              <div style="visibility: hidden;">
+                <div class="form-group">
+                  <input type="text" class="form-control" id="zip_root_path" name="zip_root_path">
+                </div>
+                <div class="modal fade" id="dir_upload_select" tabindex="-1" role="dialog" aria-labelledby="dir_select" aria-hidden="true">
+                  <div class="modal-dialog" role="document">
+                    <div class="modal-content">
+                      <div class="modal-header">
+                        <h5 class="modal-title" id="exampleModalLongTitle">{{ translate('serverWizard',
+                          'selectZipDir', data['lang']) }}</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                          <span aria-hidden="true">&times;</span>
+                        </button>
+                      </div>
+                      <div class="modal-body">
+                        <div class="tree-ctx-item" id="main-tree-div-upload" data-path="" style="overflow: scroll; max-height:75%;">
+                          <input type="radio" id="main-tree-input-upload" name="root_path" value="" checked>
+                          <span id="main-tree-upload" class="files-tree-title tree-caret-down root-dir" data-path="">
+                            <i class="far fa-folder"></i>
+                            <i class="far fa-folder-open"></i>
+                            {{ translate('serverFiles', 'files', data['lang']) }}
+                          </span>
+                          </input>
+                        </div>
+                      </div>
+                      <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{
+                          translate('serverWizard', 'close', data['lang']) }}</button>
+                        <button type="button" id="modal-okay" data-dismiss="modal" class="btn btn-primary">{{
+                          translate('serverWizard', 'save', data['lang']) }}</button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <button id="upload_submit" type="submit" title="You must select server root dir first" disabled class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
+                }}</button>
+              <button type="button" class="btn btn-danger mr-2 tree-reset">{{ translate('serverWizard', 'resetForm',
+                data['lang'])
+                }}</button>
             </div>
           </form>
           </p>
@@ -640,6 +579,12 @@
     </div>
   </div>
 </div>
+<style>
+  button>i.refresh-class {
+    margin: 0px;
+  }
+</style>
+
 <style>
   .refresh-class:hover {
     cursor: grab;
@@ -809,6 +754,7 @@
 {% end %}
 
 {% block js%}
+
 <script>
   document.getElementById("root_files_button").addEventListener("click", function () {
     if (document.forms["zip"]["server_path"].value != "") {
@@ -833,7 +779,6 @@
       bootbox.alert("You must input a path before selecting this button");
     }
 </script>
-
 {% end %}
 
 {% block js %}
@@ -842,7 +787,7 @@
     var file;
     function sendFile() {
       file = $("#file")[0].files[0]
-      document.getElementById("upload_input").innerHTML = '<div class="progress"><div id="upload-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">&nbsp;<i class="fa-solid fa-spinner"></i></div></div>'
+      document.getElementById("upload_input").innerHTML = '<div class="progress" style="width: 100%;"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">&nbsp;<i class="fa-solid fa-spinner"></i></div></div>'
       let xmlHttpRequest = new XMLHttpRequest();
       let token = getCookie("_xsrf")
       let fileName = file.name
@@ -870,8 +815,9 @@
       xmlHttpRequest.addEventListener('load', (event) => {
         if (event.target.responseText == 'success') {
           console.log('Upload for file', file.name, 'was successful!')
-          document.getElementById("upload_input").innerHTML = '<div class="card-header header-sm d-flex justify-content-between align-items-center"><span id="file-uploaded" style="color: gray;">' + fileName + '</span> 🔒</div>';
+          document.getElementById("upload_input").innerHTML = '<div class="card-header header-sm d-flex justify-content-between align-items-center" style="width: 100%;"><span id="file-uploaded" style="color: gray;">' + fileName + '</span> 🔒</div>';
           document.getElementById("lower_half").style.visibility = "visible";
+          document.getElementById("lower_half").hidden = false;
         }
         else {
           let response_text = JSON.parse(event.target.responseText);
@@ -1140,6 +1086,15 @@
       });
     }
 
+    $('#file').change(function () {
+      console.log("File changed");
+      if ($('#file').val()) {
+        $('#upload-button').prop("disabled", false);
+        document.getElementById("fileLabel").innerHTML = $('#file').val().split('\\').pop().split('/').pop();
+        console.log("File changed good");
+      }
+    });
+
 </script>
 <script type="text/javascript">
     var text = '{% raw data["js_server_types"] %}';

app/translations/en_EN.json

@@ -251,6 +251,7 @@
     "customLogin": {
         "customLoginPage": "Customise the Login Page",
         "loginImage": "Upload a background image for the login screen.",
+        "labelLoginImage": "Choose your Login Background",
         "backgroundUpload": "Background Upload",
         "loginBackground": "Login Background Image",
         "loginOpacity": "Select the Login Window Opacity",
@@ -547,6 +548,7 @@
         "importServerButton": "Import Server!",
         "importZip": "Import from a Zip File",
         "uploadZip": "Upload Zip File For Server Import",
+        "labelZipFile": "Choose your Zip File",
         "maxMem": "Maximum Memory",
         "minMem": "Minimum Memory",
         "myNewServer": "My New Server",