From f21b95e358db521895de5926468ad4400a7c4a12 Mon Sep 17 00:00:00 2001
From: amcmanu3 <mcdeweykp@gmail.com>
Date: Sat, 18 Mar 2023 16:46:29 -0400
Subject: [PATCH] Start of frontend

---
 app/classes/web/server_handler.py             |   17 +
 .../templates/server/bedrock_wizard.html      |   21 +
 .../templates/server/steam_wizard.html        | 1094 +++++++++++++++++
 app/frontend/templates/server/wizard.html     |   24 +
 4 files changed, 1156 insertions(+)
 create mode 100644 app/frontend/templates/server/steam_wizard.html

diff --git a/app/classes/web/server_handler.py b/app/classes/web/server_handler.py
index 8b533bdf..6ef23de2 100644
--- a/app/classes/web/server_handler.py
+++ b/app/classes/web/server_handler.py
@@ -92,6 +92,8 @@ class ServerHandler(BaseHandler):
 
         page_data = {
             "update_available": self.helper.update_available,
+            "steamCMD": True,
+            "windows": self.helper.is_os_windows(),
             "version_data": self.helper.get_version_string(),
             "user_data": exec_user,
             "user_role": exec_user_role,
@@ -165,6 +167,21 @@ class ServerHandler(BaseHandler):
 
             template = "server/bedrock_wizard.html"
 
+        if page == "steam_cmd_step1":
+            if not superuser and not self.controller.crafty_perms.can_create_server(
+                exec_user["user_id"]
+            ):
+                self.redirect(
+                    "/panel/error?error=Unauthorized access: "
+                    "not a server creator or server limit reached"
+                )
+                return
+
+            page_data["servers"] = self.controller.steam_apps.fetch_cache()
+            if page_data["servers"] is None:
+                page_data["servers"] = []
+            template = "server/steam_wizard.html"
+
         self.render(
             template,
             data=page_data,
diff --git a/app/frontend/templates/server/bedrock_wizard.html b/app/frontend/templates/server/bedrock_wizard.html
index d910eb06..03659510 100644
--- a/app/frontend/templates/server/bedrock_wizard.html
+++ b/app/frontend/templates/server/bedrock_wizard.html
@@ -14,6 +14,20 @@
       <a class="nav-link active" href="/server/bedrock_step1" role="tab" aria-selected="false">
         <i class="fas fa-file-signature"></i>Minecraft-Bedrock</a>
     </li>
+    {% if data["steamCMD"] %}
+    <li class="nav-item term-nav-item">
+      <a class="nav-link" href="/server/steam_cmd_step1" role="tab" aria-selected="false">
+        <i class="fas fa-file-signature"></i>Steam-CMD</a>
+    </li>
+    {% else %}
+    <li class="nav-item term-nav-item" id="steam_link">
+      <a style="color: gray;" class="nav-link" href="" role="tab" aria-selected="false">
+        <i class="fas fa-file-signature"></i>Steam-CMD 🔒</a>
+    </li>
+    <span class="missing" title="Missing Deps" ,
+      data-content="SteamCMD dependencies missing. To run SteamCMD servers please install dependencies as noted in our docs."
+      , data-placement="bottom"></span>
+    {% end %}
   </ul>
   <div class="d-none" id="overlay" onclick="hide(event)"></div>
   <div class="row">
@@ -662,6 +676,13 @@
   }
 </script>
 <script>
+  $("#steam_link").mouseenter(function () {
+    $('[data-toggle="popover"]').popover();
+    $('.missing').popover("show");
+  })
+  $("#steam_link").mouseleave(function () {
+    $('.missing').popover("hide");
+  });
   $(".tree-reset").on("click", function () {
     location.href = "/server/bedrock_step1";
   });
diff --git a/app/frontend/templates/server/steam_wizard.html b/app/frontend/templates/server/steam_wizard.html
new file mode 100644
index 00000000..6b501388
--- /dev/null
+++ b/app/frontend/templates/server/steam_wizard.html
@@ -0,0 +1,1094 @@
+{% extends ../base.html %}
+
+{% block title %}Crafty Controller - {{ translate('serverWizard', 'newServer', data['lang']) }}{% end %}
+
+{% block content %}
+
+<div class="content-wrapper">
+  <ul class="nav nav-tabs col-md-12 tab-simple-styled " role="tablist">
+    <li class="nav-item term-nav-item">
+      <a class="nav-link" href="/server/step1" role="tab" aria-selected="false">
+        <i class="fas fa-file-signature"></i>Minecraft-Java</a>
+    </li>
+    <li class="nav-item term-nav-item">
+      <a class="nav-link" href="/server/bedrock_step1" role="tab" aria-selected="false">
+        <i class="fas fa-file-signature"></i>Minecraft-Bedrock</a>
+    </li>
+    <li class="nav-item term-nav-item">
+      <a class="nav-link active" href="/server/steam_cmd_step1" role="tab" aria-selected="false">
+        <i class="fas fa-file-signature"></i>Steam-CMD</a>
+    </li>
+  </ul>
+  <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="card">
+        <div class="card-body">
+
+          <h4>{{ translate('serverWizard', 'newServer', data['lang']) }}</h4>
+          <br />
+          <p class="card-description">
+
+          <form method="post" class="server-wizard" onSubmit="wait_msg()">
+            {% 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">
+                    {% else %}
+                    <select required class="form-control form-control-lg select-css" id="server_jar" name="server_jar">
+                      {% end %}
+                      <option value="None">{{ translate('serverWizard', 'selectType', data['lang']) }}</option>
+                      {% for s in data['servers'] %}
+                      {% if data["windows"] and s["windows"] %}
+                      <option value="{{ s['appid'] }}">{{ s["name"].capitalize() }}</option>
+                      {% elif not data["windows"] and s["linux"] %}
+                      <option value="{{ s['appid'] }}">{{ s["name"].capitalize() }}</option>
+                      {% end %}
+                      {% 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">
+                <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>
+            <button type="submit" class="btn btn-primary mr-2">{{ translate('serverWizard', 'buildServer',
+              data['lang']) }}</button>
+            <button type="reset" class="btn btn-danger mr-2">{{ translate('serverWizard', 'resetForm', data['lang'])
+              }}</button>
+
+          </form>
+          </p>
+        </div>
+      </div>
+      {% end %}
+    </div>
+
+    <div class="col-sm-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="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=""
+                    placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
+                </div>
+              </div>
+
+              <div class="col-sm-12">
+                <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"
+                    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="paper.jar" 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_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"
+                    min="0.5" required>
+                </div>
+              </div>
+
+              <div class="col-sm-4">
+                <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"
+                    min="0.5" required>
+                </div>
+              </div>
+
+              <div class="col-sm-4">
+                <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"
+                    max="65535" required>
+                </div>
+              </div>
+              <div class="col-sm-12">
+                <div class="form-group">
+                  <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"
+                          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>
+                        </p>
+                      </div>
+                      <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>
+                </div>
+              </div>
+            </div>
+            <button type="submit" class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton',
+              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="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="col-sm-12">
+                <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=""
+                      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="paper.jar" required>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+
+
+            <div class="col-sm-12">
+              <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-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"
+                      min="0.5" required>
+                  </div>
+                </div>
+
+                <div class="col-sm-12">
+                  <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>
+
+                <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_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>
+        </form>
+        </p>
+      </div>
+    </div>
+    <div class="col-sm-6 grid-margin stretch-card">
+      <div class="card">
+        <div class="card-body">
+
+          <h4>{{ translate('serverWizard', 'uploadZip', 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="col-sm-12">
+                <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=""
+                      placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
+                  </div>
+                </div>
+
+                <div class="col-sm-12">
+                  <div class="form-group">
+                    <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 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 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="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',
+                      data['lang']) }}</small></h4>
+                  <hr>
+                  <div class="row">
+
+                    <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" min="0.5" required>
+                      </div>
+                    </div>
+
+                    <div class="col-sm-12">
+                      <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>
+
+                    <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>
+          </form>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<style>
+  .refresh-class:hover {
+    cursor: grab;
+  }
+
+  .scroll {
+    max-height: 12em;
+    overflow-y: auto;
+  }
+
+  .menu-btn {
+    font-size: 0.9em;
+    padding: 2px 10px;
+  }
+
+  .menu {
+    padding-top: 10px;
+    z-index: 200;
+    margin-top: 4px;
+    position: absolute;
+    background-color: var(--card-banner-bg);
+  }
+
+  .menu-option {
+    padding: 6px 20px 6px;
+    color: white;
+  }
+
+  #overlay {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+  }
+</style>
+<style>
+  /* Remove default bullets */
+  .tree-view,
+  .tree-nested {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    margin-left: 10px;
+  }
+
+  /* Style the items */
+  .tree-item,
+  .files-tree-title {
+    cursor: pointer;
+    user-select: none;
+    /* Prevent text selection */
+  }
+
+  /* Create the caret/arrow with a unicode, and style it */
+  .tree-caret .fa-folder {
+    display: inline-block;
+  }
+
+  .tree-caret .fa-folder-open {
+    display: none;
+  }
+
+  /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
+  .tree-caret-down .fa-folder {
+    display: none;
+  }
+
+  .tree-caret-down .fa-folder-open {
+    display: inline-block;
+  }
+
+  /* Hide the nested list */
+  .tree-nested {
+    display: none;
+  }
+
+  #op_logo {
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+</style>
+<style>
+  .scroll {
+    max - height: 12em;
+    overflow - y: auto;
+  }
+
+  .menu - btn {
+    font - size: 0.9em;
+    padding: 2px 10px;
+  }
+
+  .menu {
+    padding - top: 10px;
+    z - index: 200;
+    margin - top: 4px;
+    position: absolute;
+    background - color: #2a2c44;
+  }
+
+  .menu - option {
+    padding: 6px 20px 6px;
+    color: white;
+  }
+
+  #overlay {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100 %;
+    height: 100 %;
+    z - index: 100;
+  }
+</style>
+<style>
+  /* Remove default bullets */
+  .tree-view,
+  .tree-nested {
+    list - style - type: none;
+    margin: 0;
+    padding: 0;
+    margin-left: 10px;
+  }
+
+  /* Style the items */
+  .tree-item,
+  .files-tree-title {
+    cursor: pointer;
+    user-select: none;
+    /* Prevent text selection */
+  }
+
+  /* Create the caret/arrow with a unicode, and style it */
+  .tree-caret .fa-folder {
+    display: inline-block;
+  }
+
+  .tree-caret .fa-folder-open {
+    display: none;
+  }
+
+  /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
+  .tree-caret-down .fa-folder {
+    display: none;
+  }
+
+  .tree-caret-down .fa-folder-open {
+    display: inline-block;
+  }
+
+  /* Hide the nested list */
+  .tree-nested {
+    display: none;
+  }
+
+  #op_logo {
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+</style>
+</style>
+
+{% end %}
+
+{% block js%}
+<script>
+  document.getElementById("root_files_button").addEventListener("click", function () {
+    if (document.forms["zip"]["server_path"].value != "") {
+      if (document.getElementById('root_files_button').classList.contains('clicked')) {
+        document.getElementById('main-tree-div').innerHTML = '<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>'
+      } else {
+        document.getElementById('root_files_button').classList.add('clicked')
+      }
+      path = document.forms["zip"]["server_path"].value;
+      console.log(document.forms["zip"]["server_path"].value)
+      var token = getCookie("_xsrf");
+      var dialog = bootbox.dialog({
+        message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Please wait while we gather your files...</p>',
+        closeButton: false
+      });
+      $.ajax({
+        type: "POST",
+        headers: { 'X-XSRFToken': token },
+        url: '/ajax/unzip_server?id=-1&path=' + encodeURIComponent(path),
+      });
+    } else {
+      bootbox.alert("You must input a path before selecting this button");
+    }
+</script>
+
+{% end %}
+
+{% block js %}
+<script>
+    var upload = false;
+    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>'
+      let xmlHttpRequest = new XMLHttpRequest();
+      let token = getCookie("_xsrf")
+      let fileName = file.name
+      let target = '/upload'
+      let mimeType = file.type
+      let size = file.size
+      let type = 'server_import'
+
+      xmlHttpRequest.upload.addEventListener('progress', function (e) {
+
+        if (e.loaded <= size) {
+          var percent = Math.round(e.loaded / size * 100);
+          $(`#upload-progress-bar`).css('width', percent + '%');
+          $(`#upload-progress-bar`).html(percent + '%');
+        }
+      });
+
+      xmlHttpRequest.open('POST', target, true);
+      xmlHttpRequest.setRequestHeader('X-Content-Type', mimeType);
+      xmlHttpRequest.setRequestHeader('X-XSRFToken', token);
+      xmlHttpRequest.setRequestHeader('X-Content-Length', size);
+      xmlHttpRequest.setRequestHeader('X-Content-Disposition', 'attachment; filename="' + fileName + '"');
+      xmlHttpRequest.setRequestHeader('X-Content-Upload-Type', type);
+      xmlHttpRequest.setRequestHeader('X-FileName', fileName);
+      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("lower_half").style.visibility = "visible";
+        }
+        else {
+          let response_text = JSON.parse(event.target.responseText);
+          var x = document.querySelector('.bootbox');
+          console.log(JSON.parse(event.target.responseText).info)
+          bootbox.alert({
+            message: JSON.parse(event.target.responseText).info,
+            callback: function () {
+              window.location.reload();
+            }
+          });
+          doUpload = false;
+        }
+      }, false);
+      xmlHttpRequest.addEventListener('error', (e) => {
+        console.error('Error while uploading file', file.name + '.', 'Event:', e)
+      }, false);
+      xmlHttpRequest.send(file);
+    }
+
+
+    document.getElementById("root_files_button").addEventListener("click", function () {
+      if (document.forms["zip"]["server_path"].value != "") {
+        if (document.getElementById('root_files_button').classList.contains('clicked')) {
+          document.getElementById('main-tree-div').innerHTML = '<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>'
+        } else {
+          document.getElementById('root_files_button').classList.add('clicked')
+        }
+        path = document.forms["zip"]["server_path"].value;
+        console.log(document.forms["zip"]["server_path"].value)
+        var token = getCookie("_xsrf");
+        var dialog = bootbox.dialog({
+          message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Please wait while we gather your files...</p>',
+          closeButton: false
+        });
+        $.ajax({
+          type: "POST",
+          headers: { 'X-XSRFToken': token },
+          url: '/ajax/unzip_server?id=-1&path=' + encodeURIComponent(path),
+        });
+      } else {
+        bootbox.alert("You must input a path before selecting this button");
+      }
+    });
+
+    document.getElementById("root_upload_button").addEventListener("click", function () {
+      if (file) {
+        upload = true;
+        if (document.getElementById('root_upload_button').classList.contains('clicked')) {
+          document.getElementById('main-tree-div-upload').innerHTML = '<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>'
+        } else {
+          document.getElementById('root_upload_button').classList.add('clicked')
+        }
+        var token = getCookie("_xsrf");
+        var dialog = bootbox.dialog({
+          message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Please wait while we gather your files...</p>',
+          closeButton: false
+        });
+        $.ajax({
+          type: "POST",
+          headers: { 'X-XSRFToken': token },
+          url: '/ajax/unzip_server?id=-1&file=' + encodeURIComponent(file.name),
+        });
+      } else {
+        bootbox.alert("You must input a path before selecting this button");
+      }
+    });
+</script>
+
+<script>
+    $(".tree-reset").on("click", function () {
+      location.href = "/server/step1";
+    });
+    function dropDown(event) {
+      event.target.parentElement.children[1].classList.remove("d-none");
+      document.getElementById("overlay").classList.remove("d-none");
+    }
+
+    function hide(event) {
+      var items = document.getElementsByClassName('menu');
+      items.forEach(item => {
+        item.classList.add("d-none");
+      })
+
+      document.getElementById("overlay").classList.add("d-none");
+    }
+
+    $(document).ready(function () {
+      console.log('ready');
+      var forms = $('form.server-wizard');
+      forms.each(function (i, formEl) {
+        var form = $(formEl);
+        var min = form.find('[name=min_memory]');
+        var max = form.find('[name=max_memory]');
+        console.log(form, min, max)
+        min.change(function () {
+          check_sizes(max, min, 'min');
+        });
+        max.change(function () {
+          check_sizes(max, min, 'max');
+        });
+      });
+    });
+
+    function wait_msg(importing) {
+      bootbox.alert({
+        title: importing ? '{% raw translate("serverWizard", "importing", data["lang"]) %}' : '{% raw translate("serverWizard", "downloading", data["lang"]) %}',
+        message: '<i class="fas fa-cloud-download"></i> {% raw translate("serverWizard", "bePatient", data["lang"]) %}',
+      });
+    }
+
+    function show_file_tree() {
+      if (upload) {
+        $("#dir_upload_select").modal();
+      } else {
+        $("#dir_select").modal();
+      }
+    }
+
+    function check_sizes(a, b, changed) {
+      max_mem = parseFloat(a.val());
+      min_mem = parseFloat(b.val());
+      if (max_mem < min_mem && changed === 'min') {
+        a.val(min_mem)
+      }
+      if (max_mem < min_mem && changed === 'max') {
+        b.val(max_mem)
+      }
+    }
+
+    function getTreeView(path) {
+      const styles = window.getComputedStyle(document.getElementById("lower_half"));
+      //If this value is still hidden we know the user is executing a zip import and not an upload
+      if (styles.visibility === "hidden") {
+        document.getElementById('zip_submit').disabled = false;
+      } else {
+        document.getElementById('upload_submit').disabled = false;
+      }
+      path = path
+
+      $.ajax({
+        type: "GET",
+        url: '/ajax/get_zip_tree?id=-1&path=' + path,
+        dataType: 'text',
+        success: function (data) {
+          console.log("got response:");
+          console.log(data);
+
+          dataArr = data.split('\n');
+          serverDir = dataArr.shift(); // Remove & return first element (server directory)
+          text = dataArr.join('\n');
+          if (styles.visibility === "hidden") {
+            try {
+              document.getElementById('main-tree-div').innerHTML += text;
+              document.getElementById('main-tree').parentElement.classList.add("clicked");
+            } catch {
+              document.getElementById('files-tree').innerHTML = text;
+            }
+          } else {
+            try {
+              document.getElementById('main-tree-div-upload').innerHTML += text;
+              document.getElementById('main-tree-upload').parentElement.classList.add("clicked");
+            } catch {
+              document.getElementById('files-tree').innerHTML = text;
+            }
+          }
+
+          document.getElementsByClassName('files-tree-title')[0].setAttribute('data-path', serverDir);
+          document.getElementsByClassName('files-tree-title')[0].setAttribute('data-name', 'Files');
+
+        },
+      });
+    }
+
+    function getToggleMain(event) {
+      path = event.target.parentElement.getAttribute('data-path');
+      document.getElementById("files-tree").classList.toggle("d-block");
+      document.getElementById(path + "span").classList.toggle("tree-caret-down");
+      document.getElementById(path + "span").classList.toggle("tree-caret");
+    }
+
+
+    function getDirView(event) {
+      path = event.target.parentElement.getAttribute('data-path');
+
+      if (document.getElementById(path).classList.contains('clicked')) {
+
+        var toggler = document.getElementById(path + "span");
+
+        if (toggler.classList.contains('files-tree-title')) {
+          document.getElementById(path + "ul").classList.toggle("d-block");
+          document.getElementById(path + "span").classList.toggle("tree-caret-down");
+        }
+        return;
+      } else {
+        $.ajax({
+          type: "GET",
+          url: '/ajax/get_zip_dir?id=-1&path=' + path,
+          dataType: 'text',
+          success: function (data) {
+            console.log("got response:");
+
+            dataArr = data.split('\n');
+            serverDir = dataArr.shift(); // Remove & return first element (server directory)
+            text = dataArr.join('\n');
+
+            try {
+              document.getElementById(path + "span").classList.add('tree-caret-down');
+              document.getElementById(path).innerHTML += text;
+              document.getElementById(path).classList.add("clicked");
+            } catch {
+              console.log("Bad")
+            }
+
+            var toggler = document.getElementById(path);
+
+            if (toggler.classList.contains('files-tree-title')) {
+              document.getElementById(path + "span").addEventListener("click", function caretListener() {
+                document.getElementById(path + "ul").classList.toggle("d-block");
+                document.getElementById(path + "span").classList.toggle("tree-caret-down");
+              });
+            }
+          },
+        });
+      }
+    }
+    if (webSocket) {
+      webSocket.on('send_temp_path', function (data) {
+        setTimeout(function () {
+          var x = document.querySelector('.bootbox');
+          if (x) {
+            x.remove()
+          }
+          var x = document.querySelector('.modal-backdrop');
+          if (x) {
+            x.remove()
+          }
+          document.getElementById('main-tree-input').setAttribute('value', data.path)
+          document.getElementById('main-tree-input-upload').setAttribute('value', data.path)
+          getTreeView(data.path);
+          show_file_tree();
+
+          $("#root_files_button").attr("disabled", "disabled");
+          $("#root_upload_button").attr("disabled", "disabled");
+
+        }, 5000);
+      });
+    }
+
+    function refreshCache() {
+      var token = getCookie("_xsrf")
+      document.getElementById("refresh-cache").classList.add("fa-spin")
+      $.ajax({
+        type: "POST",
+        headers: { 'X-XSRFToken': token },
+        url: '/ajax/jar_cache',
+        success: function () {
+          document.getElementById("refresh-cache").classList.remove("fa-sync");
+          document.getElementById("refresh-cache").classList.remove("fa-spin");
+          document.getElementById("refresh-cache").classList.add("fa-check");
+
+          setTimeout(function () {
+            location.reload();
+          }, 2000);
+        },
+      });
+    }
+
+</script>
+{% end %}
\ No newline at end of file
diff --git a/app/frontend/templates/server/wizard.html b/app/frontend/templates/server/wizard.html
index aea48f1c..4aa1562a 100644
--- a/app/frontend/templates/server/wizard.html
+++ b/app/frontend/templates/server/wizard.html
@@ -14,6 +14,20 @@
       <a class="nav-link" href="/server/bedrock_step1" role="tab" aria-selected="false">
         <i class="fas fa-file-signature"></i>Minecraft-Bedrock</a>
     </li>
+    {% if data["steamCMD"] %}
+    <li class="nav-item term-nav-item">
+      <a class="nav-link" href="/server/steam_cmd_step1" role="tab" aria-selected="false">
+        <i class="fas fa-file-signature"></i>Steam-CMD</a>
+    </li>
+    {% else %}
+    <li class="nav-item term-nav-item" id="steam_link">
+      <a style="color: gray;" class="nav-link" href="" role="tab" aria-selected="false">
+        <i class="fas fa-file-signature"></i>Steam-CMD 🔒</a>
+    </li>
+    <span class="missing" title="Missing Deps" ,
+      data-content="SteamCMD dependencies missing. To run SteamCMD servers please install dependencies as noted in our docs."
+      , data-placement="bottom"></span>
+    {% end %}
   </ul>
   <div class="d-none" id="overlay" onclick="hide(event)"></div>
   <div class="row">
@@ -905,6 +919,16 @@
 </script>
 
 <script>
+    $("#steam_link").mouseenter(function () {
+      $('[data-toggle="popover"]').popover();
+      $('.missing').popover("show");
+    })
+    $("#steam_link").mouseleave(function () {
+      $('.missing').popover("hide");
+    });
+    $(".tree-reset").on("click", function () {
+      location.href = "/server/bedrock_step1";
+    });
     $(".tree-reset").on("click", function () {
       location.href = "/server/step1";
     });