continue break all with tailwind

Author: Bumer-32

src/main/web/App.svelte

@@ -8,6 +8,8 @@
     import ToastSystem from "./scripts/toastSystem";
     import icon from "./assets/icon_clearbg.png";
     import "./styles/tailwind.css";
+    import "./styles/style.scss";
+    import UsersTab from "./lib/tabs/UsersTab/UsersTab.svelte";
 
     window.addEventListener("load", async () => {
         // ? remove loading screen
@@ -18,42 +20,26 @@
 <Footer />
 
 {#if window.location.pathname == "/BadConnection"}
-    <main>
-        <a href="/"><img src={icon} alt="icon" /></a>
-        <div class="text">
-            <p1>Oh no!</p1>
-            <p1>It seems like you have a bad connection to the server.</p1>
-            <p1>Try to refresh the page or check your internet connection.</p1>
-            <p1>Good luck!</p1>
+    <main class="h-screen content-center">
+        <div class="flex justify-center">
+            <a href="/"><img src={icon} alt="icon" /></a>
+            <div class="ml-[20px] flex flex-col content-center justify-center font-['Nunito'] text-[20px]">
+                <p1>Oh no!</p1>
+                <p1>It seems like you have a bad connection to the server.</p1>
+                <p1>Try to refresh the page or check your internet connection.</p1>
+                <p1>Good luck!</p1>
+            </div>
         </div>
     </main>
-
-    <style lang="scss">
-        main {
-            justify-content: center;
-            align-items: center;
-            display: flex;
-            height: 100vh;
-
-            .text {
-                margin-left: 20px;
-                font-size: 20px;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-                font-family: "Nunito", sans-serif;
-            }
-        }
-    </style>
 {:else}
     <Header />
 
-    <main>
-        <div class="tabs">
+    <main class="align-center absolute flex w-screen justify-center">
+        <div class="tabs h-full w-full">
             <ConsoleTab />
-            <SettingsTab />
+            <!-- <SettingsTab /> -->
             <PlayersTab />
+            <UsersTab />
         </div>
     </main>
 
@@ -63,34 +49,29 @@
 
     <style lang="scss">
         @use "./styles/variables";
+        @use "./styles/disabled";
 
         main {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 100vw;
             height: variables.$container-height;
-            position: absolute;
             top: variables.$header-height;
 
-            .tabs {
+            .tabs > div {
                 width: 100%;
                 height: 100%;
 
-                .tab {
-                    width: 100%;
-                    height: 100%;
-
-                    .container {
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        color: var(--main-text-color);
-                        transition: color 0.3s ease;
-                        top: 0;
-                    }
+                .container {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: var(--main-text-color);
+                    transition: color 0.3s ease;
+                    top: 0;
+                    height: variables.$container-height;
                 }
             }
         }
     </style>
 {/if}
+
+<style lang="scss">
+</style>

src/main/web/lib/Header.svelte

@@ -97,17 +97,23 @@
                         GitHub
                     </a>
                 </li>
+                <li>
+                    <a href="https://github.com/Bumer-32/I-Want-To-Control-My-Server/issues">
+                        <span class="material-symbols-rounded">bug_report</span>
+                        Bug tracker
+                    </a>
+                </li>
                 <li>
                     <a href="files/iwtcms_client.zip">
                         <span class="material-symbols-rounded">download</span>
                         Python CLI
                     </a>
                 </li>
                 <li>
-                    <a href="https://github.com/Bumer-32/I-Want-To-Control-My-Server/issues">
-                        <span class="material-symbols-rounded">bug_report</span>
-                        Bug tracker
-                    </a>
+                    <button type="button" on:click={() => switchTab("users-tab")}>
+                        <span class="material-symbols-rounded">account_circle</span>
+                        Users
+                    </button>
                 </li>
                 <li id="logout-button">
                     <button type="button" on:click={logout}>

src/main/web/lib/Login.svelte

@@ -1,44 +1,13 @@
 <script lang="ts">
     import icon from "../assets/icon_clearbg.png";
     import { checkAuth, login } from "../scripts/auth";
-    import Constants from "../scripts/constants";
-    import { isDev } from "../scripts/devMode";
     import ToastSystem from "../scripts/toastSystem";
     import { onMount } from "svelte";
 
     let loginForm: HTMLFormElement;
     let loginDiv: HTMLDivElement;
 
-    async function checkIsLoginNeeded(): Promise<boolean> {
-        try {
-            const response = await fetch(Constants.IS_AUTH_ENABLED_URL);
-
-            if (!response.ok) {
-                console.error("Error fetching data:", response.status, response.statusText);
-                ToastSystem.addToQueue(`Error fetching data: ${response.status}`, ToastSystem.ToastType.ERROR);
-                if (!(await isDev())) {
-                    window.location.href = Constants.PAGE_BAD_CONNECTION_URL;
-                }
-                return false;
-            }
-
-            if ((await response.text()) == "false") {
-                loginDiv.classList.add("disabled");
-            }
-        } catch (error) {
-            console.error(error);
-            ToastSystem.addToQueue(`Error: ${error}`, ToastSystem.ToastType.ERROR);
-            if (!(await isDev())) {
-                window.location.assign(Constants.PAGE_BAD_CONNECTION_URL);
-            }
-        }
-        return true;
-    }
-
     onMount(async () => {
-        const isLoginNeeded = await checkIsLoginNeeded();
-        if (!isLoginNeeded) return;
-
         const auth = await checkAuth();
         if (auth != null) {
             ToastSystem.addToQueue(`Hello ${auth}`, ToastSystem.ToastType.INFO);