restored console and login

Author: Bumer-32

src/main/kotlin/ua/pp/lumivoid/iwtcms/ktor/api/doAuth.kt

@@ -39,16 +39,15 @@ suspend fun doAuth(
     }
 
     return newSuspendedTransaction {
-        val user: ResultRow =
-            try {
-                Users
-                    .selectAll()
-                    .where { (Users.username eq session.name) and (Users.uniqueId eq session.id) }
-                    .first()
-            } catch (_: NoSuchElementException) {
-                unauthorized()
-                return@newSuspendedTransaction HttpStatusCode.Unauthorized
-            }
+        val user: ResultRow = try {
+            Users
+                .selectAll()
+                .where { (Users.username eq session.name) and (Users.uniqueId eq session.id) }
+                .first()
+        } catch (_: NoSuchElementException) {
+            unauthorized()
+            return@newSuspendedTransaction HttpStatusCode.Unauthorized
+        }
 
         if (user[Users.admin]) {
             success()

src/main/kotlin/ua/pp/lumivoid/iwtcms/ktor/api/requests/IsAllowedG.kt

@@ -1,32 +1,29 @@
 package ua.pp.lumivoid.iwtcms.ktor.api.requests
 
-import io.ktor.server.request.receive
+import io.ktor.http.HttpStatusCode
 import io.ktor.server.response.respond
 import io.ktor.server.routing.Routing
 import io.ktor.server.routing.get
 import kotlinx.coroutines.runBlocking
-import kotlinx.serialization.Serializable
 import ua.pp.lumivoid.iwtcms.ktor.api.doAuth
 
 object IsAllowedG : Request() {
-    override val path = "/api/isAllowed"
+    override val path = "/api/isAllowed/{permission}"
 
     override val request: Routing.() -> Unit = {
         get(path) {
-            val payload = call.receive<IsAllowedPayload>()
+            if (call.parameters["permission"] == null) {
+                call.respond(HttpStatusCode.Unauthorized)
+                return@get
+            }
 
             doAuth(
                 call = call,
-                permission = payload.permission,
+                permission = call.parameters["permission"]!!,
                 success = {
                     runBlocking { call.respond("allowed") }
                 },
             )
         }
     }
 }
-
-@Serializable
-data class IsAllowedPayload(
-    val permission: String,
-)

src/main/web/App.svelte

@@ -2,7 +2,7 @@
     import Header from "./lib/Header.svelte";
     import Footer from "./lib/Footer.svelte";
     import ConsoleTab from "./lib/tabs/ConsoleTab/ConsoleTab.svelte";
-    import SettingsTab from "./lib/tabs/SettingsTab/SettingsTab.svelte";
+    // import SettingsTab from "./lib/tabs/SettingsTab/SettingsTab.svelte";
     import PlayersTab from "./lib/tabs/PlayersTab/PlayersTab.svelte";
     import Login from "./lib/Login.svelte";
     import ToastSystem from "./scripts/toastSystem";
@@ -19,15 +19,15 @@
 
 <Footer />
 
-{#if window.location.pathname == "/BadConnection"}
+{#if window.location.pathname === "/BadConnection"}
     <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>
+                <h1>Oh no!</h1>
+                <h1>It seems like you have a bad connection to the server.</h1>
+                <h1>Try to refresh the page or check your internet connection.</h1>
+                <h1>Good luck!</h1>
             </div>
         </div>
     </main>
@@ -59,7 +59,7 @@
                 width: 100%;
                 height: 100%;
 
-                .container {
+                .tab-container {
                     display: flex;
                     align-items: center;
                     justify-content: center;
@@ -72,6 +72,3 @@
         }
     </style>
 {/if}
-
-<style lang="scss">
-</style>

src/main/web/index.html

@@ -11,17 +11,29 @@
 
         <!-- Meta -->
         <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>I want to control my Server!</title>
 
         <link rel="icon" href="./assets/favicon.ico" type="image/x-icon" />
 
-        <!-- Styles -->
-        <link rel="stylesheet" href="./styles/style.scss" />
-
         <!-- for quick load loading animation -->
         <style>
+            noscript {
+                position: absolute;
+                z-index: 100;
+                color: white;
+                display: flex;
+                top: 0;
+                left: 0;
+                width: 100vw;
+                height: 100vh;
+                background-color: #1f2626;
+                justify-content: center;
+                align-items: center;
+                font-family: "Nunito", sans-serif;
+                font-weight: 700;
+            }
+
             /* a part of https://uiverse.io/alexruix/neat-tiger-82 */
             .loading {
                 z-index: 50;

src/main/web/lib/Footer.svelte

@@ -72,7 +72,6 @@
         bottom: 0;
         display: flex;
         align-items: center;
-        transition: background-color 0.3s ease;
 
         .left {
             display: flex;
@@ -93,12 +92,10 @@
                 flex-direction: column;
                 transform: translateX(-50%);
                 color: var(--footer-authors-color);
-                transition: color 0.3s ease;
 
                 a {
                     color: var(--footer-authors-url-color);
                     text-decoration: none;
-                    transition: color 0.3s ease;
                 }
             }
         }
@@ -115,15 +112,13 @@
             gap: 5px;
             transition:
                 filter 0.3s ease,
-                box-shadow 0.3s ease,
-                color 0.3s ease;
+                box-shadow 0.3s ease;
 
             &:hover {
                 @include hover-holo-effect.hover-holo-effect;
 
                 .material-symbols-rounded {
                     color: var(--footer-github-star-hover-color);
-                    transition: color ease 0.3s;
                 }
             }
 
@@ -135,7 +130,6 @@
             .material-symbols-rounded {
                 font-size: 12px;
                 color: var(--footer-github-star-color);
-                transition: color ease 0.3s;
             }
         }
     }

src/main/web/lib/Header.svelte

@@ -1,3 +1,6 @@
+<!--TODO: Rewrite to tailwind-->
+
+
 <script lang="ts">
     import iwtcmsIcon from "../assets/icon_clearbg.png";
     import githubIcon from "../assets/github.svg";
@@ -66,6 +69,7 @@
             document.body.classList.toggle("light-mode-impl");
             localStorage.setItem("color-mode", colorModeSwitchInput.checked ? "light" : "dark");
         };
+
         if (localStorage.getItem("color-mode") == "light") {
             colorModeSwitchInput.checked = true;
             document.body.classList.add("light-mode-impl");
@@ -163,7 +167,6 @@
         align-items: center;
         justify-content: center;
         background-color: var(--header-color);
-        transition: background-color 0.3s ease;
         border-bottom: solid var(--header-bottom-border-color);
 
         .material-symbols-rounded,
@@ -258,8 +261,7 @@
                 background-color: var(--header-menu-background-color);
                 border-radius: 10px;
                 transition:
-                    left 0.3s ease,
-                    background-color 0.3s ease;
+                    left 0.3s ease;
                 padding-top: 10px;
                 padding-bottom: 10px;
                 z-index: 50;
@@ -280,7 +282,6 @@
                         border: none;
                         background-color: transparent;
                         color: var(--header-menu-item-fg-color);
-                        transition: color 0.3s ease;
                         font-family: "Nunito", sans-serif;
                         font-weight: 700;
                         text-decoration: none;
@@ -294,17 +295,14 @@
                             font-size: 20px;
                             margin-right: 10px;
                             color: var(--header-menu-item-fg-color);
-                            transition: color 0.3s ease;
                             filter: none;
                         }
 
                         :global(img) {
                             width: 20px;
                             height: 20px;
                             margin-right: 10px;
-                            transition:
-                                filter 0.3s ease,
-                                color 0.3s ease;
+                            transition: filter 0.3s ease;
                         }
                     }
                 }
@@ -350,8 +348,6 @@
 
                 .slider {
                     background-color: var(--color-mode-switch-background-color);
-                    transition: background-color 0.3s ease;
-
                     &:before {
                         background-color: var(--color-mode-switch-handle-color);
                         content: "brightness_4";
@@ -362,10 +358,7 @@
                         display: flex;
                         justify-content: center;
                         align-items: center;
-                        transition:
-                            background-color 0.3s ease,
-                            color 0.3s ease,
-                            transform 0.4s;
+                        transition: transform 0.4s;
                     }
                 }
 

src/main/web/lib/Login.svelte

@@ -24,105 +24,32 @@
     });
 </script>
 
-<div class="login" bind:this={loginDiv}>
-    <div class="background"></div>
-    <div class="container">
-        <h1>Login</h1>
-        <a href="https://modrinth.com/mod/i-want-to-control-my-server"><img src={icon} alt="IWTCMS logo" /></a>
-        <form id="loginForm" method="post" bind:this={loginForm}>
-            <label for="username" id="username">Username:</label>
-            <input type="text" name="username" required />
-            <br />
-            <label for="password" id="password">Password:</label>
-            <input type="password" name="password" required />
-            <br />
-            <button type="submit">Login</button>
+<div class="absolute flex items-center justify-center w-screen h-screen z-10" bind:this={loginDiv}>
+    <div class="absolute w-screen h-screen z-[99] bg-[var(--login-background-color)] backdrop-blur-[20px]"></div>
+    <div class="flex z-[100] items-center absolute h-[250px] bg-[var(--login-panel-background-color)] rounded-[10px] pr-[10px] pl-px">
+        <h1 class="absolute top-0 left-[50%] transform-[translateX(-50%)]">Login</h1>
+        <a class="h-[110px] w-[110px] block" href="https://modrinth.com/mod/i-want-to-control-my-server"><img class="block h-[110px] w-[110px] transition-[filer 0.3s ease, box-shadow 0.3s ease]" src={icon} alt="IWTCMS logo" /></a>
+        <form class="w-[250px]" bind:this={loginForm}>
+            <label for="username">Username:</label>
+            <input class="bg-[var(--login-input-background-color)] border-none rounded-[5px] focus:outline-none w-full text-[var(--login-text-color)] px-[5px] transition-[filer 0.3s ease, box-shadow 0.3s ease] mb-[10px]" type="text" id="username" name="username" required />
+
+            <label for="password">Password:</label>
+            <input class="bg-[var(--login-input-background-color)] border-none rounded-[5px] focus:outline-none w-full text-[var(--login-text-color)] px-[5px] transition-[filer 0.3s ease, box-shadow 0.3s ease] mb-[10px]" type="password" name="password" required />
+
+            <button class="w-full h-[25px] bg-[var(--login-input-background-color)] border-none rounded-[5px] text-[var(--login-text-color)] transition-[filer 0.3s ease, box-shadow 0.3s ease]" type="submit" id="password">Login</button>
         </form>
     </div>
 </div>
 
 <style lang="scss">
-    .login {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100vw;
-        height: 100vh;
-
-        z-index: 10;
-
-        .background {
-            position: absolute;
-            width: 100vw;
-            height: 100vh;
-            z-index: 99;
-            background: var(--login-background-color);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        .container {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            z-index: 100;
-            width: 400px;
-            height: 250px;
-            background-color: var(--login-panel-background-color);
-            border-radius: 10px;
-            padding-right: 10px;
-
-            h1 {
-                position: absolute;
-                top: 0;
-                left: 50%;
-                transform: translateX(-50%);
-            }
-
-            input {
-                border: none;
-                border-radius: 5px;
-
-                &:focus {
-                    outline: none;
-                }
-            }
-
-            label {
-                display: inline-block;
-                width: 90px;
-            }
-
-            br {
-                margin-bottom: 10px;
-            }
-
-            button {
-                width: 100%;
-                height: 20px;
-                border: none;
-                border-radius: 5px;
-            }
-
-            input,
-            button,
-            img {
-                // hover holo effect
-                transition:
-                    filter 0.3s ease,
-                    box-shadow 0.3s ease;
-                &:hover {
-                    filter: drop-shadow(0 0 10px var(--holo-effect-color));
-                }
-            }
+    @use "../styles/hover-holo-effect";
+
+    form > input,
+    button,
+    img {
+        transition: filter 0.3s ease, box-shadow 0.3s ease;
+        &:hover {
+            @include hover-holo-effect.hover-holo-effect;
         }
     }
 </style>