updates

client/src/jsMain/kotlin/dev/inmo/postssystem/client/fsm/ui/AuthView.kt

@@ -3,8 +3,8 @@ package dev.inmo.postssystem.client.fsm.ui
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import dev.inmo.jsuikit.elements.*
-import dev.inmo.jsuikit.modifiers.UIKitButton
-import dev.inmo.jsuikit.modifiers.UIKitMargin
+import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.utils.Attrs
 import dev.inmo.postssystem.client.ui.fsm.*
 import dev.inmo.postssystem.features.auth.client.ui.*
 import dev.inmo.micro_utils.coroutines.launchSafelyWithoutExceptions
@@ -13,9 +13,10 @@ import dev.inmo.micro_utils.fsm.common.StatesMachine
 import dev.inmo.postssystem.client.utils.renderComposableAndLinkToContext
 import kotlinx.browser.document
 import kotlinx.coroutines.*
-import kotlinx.dom.clear
+import kotlinx.dom.*
 import org.jetbrains.compose.web.attributes.InputType
 import org.jetbrains.compose.web.dom.Form
+import org.jetbrains.compose.web.dom.Text
 import org.w3c.dom.*
 
 class AuthView(
@@ -28,7 +29,6 @@ class AuthView(
         state: AuthUIFSMState
     ): UIFSMState? {
         val completion = CompletableDeferred<UIFSMState?>()
-        htmlElement.clear()
 
         val usernameState = mutableStateOf("")
         val passwordState = mutableStateOf("")
@@ -36,11 +36,28 @@ class AuthView(
         val passwordDisabled = mutableStateOf(true)
         val errorText = mutableStateOf<String?>(null)
 
-        val composition = renderComposableAndLinkToContext(htmlElement) {
-            val authBtnDisabled = remember {
-                usernameState.value.isNotBlank() && passwordState.value.isNotBlank()
-            }
-            Form {
+        val root = htmlElement.appendElement("div") {
+            addClass(*UIKitWidth.Fixed.Medium.classes, *UIKitText.Alignment.Center.classes)
+        }
+        val composition = renderComposableAndLinkToContext(root) {
+            val authBtnDisabled = usernameState.value.isBlank() || passwordState.value.isBlank()
+            console.log(authBtnDisabled)
+
+            Card(
+                Attrs(UIKitWidth.Fixed.Medium),
+                footerAttrs = Attrs(UIKitText.Alignment.Center),
+                footer = {
+                    DefaultButton("Authorise", UIKitButton.Type.Primary, disabled = authBtnDisabled) {
+                        it.nativeEvent.preventDefault()
+                        val serverUrl = document.location ?.run { "$hostname:$port" }
+                        if (serverUrl != null) {
+                            uiScope.launchSafelyWithoutExceptions { viewModel.initAuth(serverUrl, usernameState.value, passwordState.value) }
+                        }
+                    }
+                }
+            ) {
+                CardTitle { Text("Log in") }
+
                 TextField(
                     InputType.Text,
                     usernameState,
@@ -53,14 +70,7 @@ class AuthView(
                 )
 
                 if (errorText.value != null) {
-                    Label.Error.draw(errorText.value.toString(), UIKitMargin.Small.Bottom)
-                }
-
-                DefaultButton("Authorise", UIKitButton.Type.Primary, disabled = authBtnDisabled) {
-                    val serverUrl = document.location ?.run { "$hostname:$port" }
-                    if (serverUrl != null) {
-                        uiScope.launchSafelyWithoutExceptions { viewModel.initAuth(serverUrl, usernameState.value, passwordState.value) }
-                    }
+                    Label(errorText.value.toString(), Attrs(UIKitLabel.Error, UIKitMargin.Small.Bottom))
                 }
             }
         }

client/src/jsMain/resources/index.html

@@ -4,30 +4,21 @@
     <meta charset="UTF-8">
     <title>PostsSystem</title>
 
+    <link rel="stylesheet" href="css/uikit.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
     <link rel="stylesheet" href="css/containers.css" type="text/css">
     <link rel="stylesheet" href="css/visibility.css" type="text/css">
 </head>
 <body>
-    <!-- Always shows a header, even in smaller screens. -->
-    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
-        <header class="mdl-layout__header">
-            <div class="mdl-layout__header-row">
-                <!-- Title -->
-                <span class="mdl-layout-title">Posts System</span>
-                <!-- Add spacer, to align navigation to the right -->
-                <div class="mdl-layout-spacer"></div>
-                <!-- Navigation. We hide it in small screens. -->
-                <nav id="tools" class="mdl-navigation mdl-layout--large-screen-only"></nav>
-            </div>
-        </header>
-        <main class="mdl-layout__content">
-            <div id="main" class="page-content"></div>
-        </main>
-    </div>
+    <div id="navbar" class="uk-section uk-section-secondary uk-padding-remove"></div>
+    <main class="uk-flex">
+        <div id="main" class="main-view uk-width-expand"></div>
+        <div id="modal"></div>
+    </main>
 
-    <script type="application/javascript" defer src="js/material.min.js"></script>
+    <script src="js/uikit.min.js"></script>
+    <script src="js/uikit-icons.min.js"></script>
     <script type="application/javascript" src="postssystem.client.js"></script>
 </body>
 </html>