small redesign of auth view

client/src/jsMain/kotlin/dev/inmo/postssystem/client/JSDI.kt

@@ -77,7 +77,7 @@ fun baseKoin(): Koin {
             )
         },
         {
-            OneStateUIFSMStatesRepo(get(), localStorage)
+            JSUIFSMStatesRepo(get(), localStorage)
         }
     ) {
         first.apply {

client/src/jsMain/kotlin/dev/inmo/postssystem/client/JSUIFSMStatesRepo.kt

@@ -5,7 +5,7 @@ import dev.inmo.micro_utils.fsm.common.managers.DefaultStatesManagerRepo
 import kotlinx.serialization.StringFormat
 import org.w3c.dom.*
 
-class OneStateUIFSMStatesRepo(
+class JSUIFSMStatesRepo(
     private val serialFormat: StringFormat,
     private val storage: Storage,
     private val initialState: UIFSMState = DefaultAuthUIFSMState

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

@@ -15,7 +15,7 @@ import kotlinx.browser.document
 import kotlinx.coroutines.*
 import kotlinx.dom.*
 import org.jetbrains.compose.web.attributes.InputType
-import org.jetbrains.compose.web.dom.Form
+import org.jetbrains.compose.web.dom.*
 import org.jetbrains.compose.web.dom.Text
 import org.w3c.dom.*
 
@@ -32,22 +32,42 @@ class AuthView(
 
         val usernameState = mutableStateOf("")
         val passwordState = mutableStateOf("")
-        val usernameDisabled = mutableStateOf(true)
-        val passwordDisabled = mutableStateOf(true)
+        val disabled = mutableStateOf(true)
         val errorText = mutableStateOf<String?>(null)
 
-        val root = htmlElement.appendElement("div") {
-            addClass(*UIKitWidth.Fixed.Medium.classes, *UIKitText.Alignment.Center.classes)
-        }
+        val root = htmlElement.appendElement("div") {}
         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) {
+            Flex(
+                UIKitFlex.Alignment.Horizontal.Center
+            ) {
+                Card(
+                    Attrs(UIKitText.Alignment.Center),
+                    bodyAttrs = Attrs(UIKitWidth.Fixed.Medium),
+                ) {
+                    CardTitle { Text("Log in") }
+
+                    if (errorText.value != null) {
+                        CardBadge(Attrs(UIKitLabel.Error)) {
+                            Text(errorText.value.toString())
+                        }
+                    }
+
+                    TextField(
+                        InputType.Text,
+                        usernameState,
+                        disabled,
+                        "Username",
+                    )
+                    TextField(
+                        InputType.Password,
+                        passwordState,
+                        disabled,
+                        "Password"
+                    )
+
+                    DefaultButton("Authorise", UIKitButton.Type.Primary, UIKitMargin.Small, disabled = authBtnDisabled) {
                         it.nativeEvent.preventDefault()
                         val serverUrl = document.location ?.run { "$hostname:$port" }
                         if (serverUrl != null) {
@@ -55,41 +75,25 @@ class AuthView(
                         }
                     }
                 }
-            ) {
-                CardTitle { Text("Log in") }
-
-                TextField(
-                    InputType.Text,
-                    usernameState,
-                    disabledState = usernameDisabled
-                )
-                TextField(
-                    InputType.Password,
-                    passwordState,
-                    disabledState = passwordDisabled
-                )
-
-                if (errorText.value != null) {
-                    Label(errorText.value.toString(), Attrs(UIKitLabel.Error, UIKitMargin.Small.Bottom))
-                }
             }
         }
 
         val viewJob = viewModel.currentState.subscribeSafelyWithoutExceptions(uiScope) {
             when (it) {
                 is InitAuthUIState -> {
-                    usernameDisabled.value = false
-                    passwordDisabled.value = false
+                    disabled.value = false
 
                     errorText.value = when (it.showError) {
-                        ServerUnavailableAuthUIError -> "Сервер недоступен"
-                        AuthIncorrectAuthUIError -> "Данные некорректны"
+                        ServerUnavailableAuthUIError -> "Server unavailable"
+                        AuthIncorrectAuthUIError -> {
+                            passwordState.value = ""
+                            "Username or password is incorrect"
+                        }
                         null -> null
                     }
                 }
                 LoadingAuthUIState -> {
-                    usernameDisabled.value = true
-                    passwordDisabled.value = true
+                    disabled.value = true
                     errorText.value = null
                 }
                 AuthorizedAuthUIState -> {

client/src/jsMain/resources/index.html

@@ -12,8 +12,8 @@
 </head>
 <body>
     <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>
+    <main>
+        <div id="main" class="main-view"></div>
         <div id="modal"></div>
     </main>
 

gradle/libs.versions.toml

@@ -1,6 +1,6 @@
 [versions]
 
-jsuikit = "0.0.21"
+jsuikit = "0.0.27"
 compose = "1.0.1"
 microutils = "0.9.4"
 

server/src/main/resources/web/index.html

@@ -12,7 +12,7 @@
 </head>
 <body>
     <div id="navbar" class="uk-section uk-section-secondary uk-padding-remove"></div>
-    <main class="uk-flex">
+    <main>
         <div id="main" class="main-view"></div>
         <div id="modal"></div>
     </main>