Разработана двусторонняя интеграция Kotlin и JavaScript

composeApp/src/commonMain/kotlin/ru/tularegion/corp/App.kt

@@ -22,6 +22,7 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.unit.dp
 import corp_tularegion_extension.composeapp.generated.resources.Res
 import corp_tularegion_extension.composeapp.generated.resources.logo_48
@@ -31,6 +32,9 @@ import corp_tularegion_extension.composeapp.generated.resources.round_settings_2
 import org.jetbrains.compose.resources.DrawableResource
 import org.jetbrains.compose.resources.painterResource
 import ru.tularegion.corp.backend.JsCallbacks
+import ru.tularegion.corp.backend.setAutoAuthLogin
+import ru.tularegion.corp.backend.setAutoAuthMode
+import ru.tularegion.corp.backend.setAutoAuthPassword
 import ru.tularegion.corp.backend.setCopyMode
 import ru.tularegion.corp.backend.setRedirectMode
 import ru.tularegion.corp.ui.components.CopyMode
@@ -152,6 +156,11 @@ fun App() {
                         val copyModeState = remember {
                             mutableStateOf(CopyMode.NO_REPLACE)
                         }
+                        JsCallbacks.copyMode = { value ->
+                            copyModeState.value = CopyMode.entries.find {
+                                it.id == value
+                            } ?: CopyMode.NO_REPLACE
+                        }
                         DropdownSelect(
                             title = "Замена ссылок при копировании",
                             caption = "Заменять все ссылки при копировании на RU, либо на LOCAL",
@@ -163,13 +172,19 @@ fun App() {
                         )
                     }
 
-                    val autoLogInState = remember {
+                    val autoAuthModeState = remember {
                         mutableStateOf(false)
                     }
+                    JsCallbacks.autoAuthMode = {
+                        autoAuthModeState.value = it
+                    }
                     SwitchSpoiler(
                         title = "Автоматический вход",
                         caption = "Выполнять вход на портал автоматически",
-                        enabledState = autoLogInState,
+                        enabledState = autoAuthModeState,
+                        onValueChange = {
+                            setAutoAuthMode(it)
+                        },
                     ) {
                         Column(
                             modifier = Modifier
@@ -179,9 +194,13 @@ fun App() {
                             val loginState = remember {
                                 mutableStateOf("")
                             }
+                            JsCallbacks.autoAuthLogin = {
+                                loginState.value = it
+                            }
                             OutlinedTextField(
                                 value = loginState.value,
                                 onValueChange = {
+                                    setAutoAuthLogin(it)
                                     loginState.value = it
                                 },
                                 modifier = Modifier
@@ -191,14 +210,19 @@ fun App() {
                                         text = "Логин",
                                     )
                                 },
+                                singleLine = true,
                             )
 
                             val passwordState = remember {
                                 mutableStateOf("")
                             }
+                            JsCallbacks.autoAuthPassword = {
+                                passwordState.value = it
+                            }
                             OutlinedTextField(
                                 value = passwordState.value,
                                 onValueChange = {
+                                    setAutoAuthPassword(it)
                                     passwordState.value = it
                                 },
                                 modifier = Modifier
@@ -208,6 +232,8 @@ fun App() {
                                         text = "Пароль",
                                     )
                                 },
+                                visualTransformation = PasswordVisualTransformation(),
+                                singleLine = true,
                             )
                         }
                     }

composeApp/src/commonMain/kotlin/ru/tularegion/corp/backend/api.kt

@@ -9,7 +9,7 @@ object JsCallbacks {
     var copyMode: ((Int) -> Unit)? = null
     var autoAuthMode: ((Boolean) -> Unit)? = null
     var autoAuthLogin: ((String) -> Unit)? = null
-    var autoAuthLPassword: ((String) -> Unit)? = null
+    var autoAuthPassword: ((String) -> Unit)? = null
 }
 
 @OptIn(ExperimentalJsExport::class)
@@ -54,7 +54,7 @@ fun autoAuthModeCallback(
 
 @JsName("setAutoAuthMode")
 external fun setAutoAuthMode(
-    value: Int,
+    value: Boolean,
 )
 
 @OptIn(ExperimentalJsExport::class)
@@ -74,15 +74,15 @@ external fun setAutoAuthLogin(
 
 @OptIn(ExperimentalJsExport::class)
 @JsExport
-fun autoAuthLPasswordCallback(
+fun autoAuthPasswordCallback(
     value: String,
 ) {
-    JsCallbacks.autoAuthLPassword?.let {
+    JsCallbacks.autoAuthPassword?.let {
         it(value)
     }
 }
 
-@JsName("setAutoAuthLPassword")
+@JsName("setAutoAuthPassword")
-external fun setAutoAuthLPassword(
+external fun setAutoAuthPassword(
     value: String,
 )

composeApp/src/commonMain/kotlin/ru/tularegion/corp/ui/components/SwitchSpoiler.kt

@@ -36,6 +36,7 @@ fun SwitchSpoiler(
     title: String,
     caption: String,
     enabledState: MutableState<Boolean>,
+    onValueChange: (Boolean) -> Unit,
     content: @Composable ColumnScope.() -> Unit,
 ) {
     val backgroundColor = animateColorAsState(
@@ -104,6 +105,7 @@ fun SwitchSpoiler(
                 Switch(
                     checked = enabledState.value,
                     onCheckedChange = {
+                        onValueChange(it)
                         enabledState.value = it
                     },
                 )
@@ -121,51 +123,4 @@ fun SwitchSpoiler(
             }
         }
     }
-
-//    Column {
-//        Row(
-//            modifier = Modifier
-//                .fillMaxWidth()
-//                .clickable(
-//                    onClick = {
-//                        enabledState.value = !enabledState.value
-//                    },
-//                )
-//                .padding(16.dp),
-//            verticalAlignment = Alignment.CenterVertically,
-//        ) {
-//            Column(
-//                modifier = Modifier
-//                    .weight(1f),
-//            ) {
-//                Text(
-//                    text = title,
-//                    style = MaterialTheme.typography.titleLarge,
-//                )
-//                Spacer(
-//                    modifier = Modifier.height(4.dp),
-//                )
-//                Text(
-//                    text = caption,
-//                    style = MaterialTheme.typography.bodyMedium,
-//                )
-//            }
-//            Spacer(
-//                modifier = Modifier
-//                    .width(16.dp),
-//            )
-//            Switch(
-//                checked = enabledState.value,
-//                onCheckedChange = {
-//                    enabledState.value = it
-//                },
-//            )
-//        }
-//
-//        when {
-//            enabledState.value -> {
-//                content()
-//            }
-//        }
-//    }
 }

composeApp/src/wasmJsMain/resources/api.js

@@ -22,6 +22,6 @@ function setAutoAuthLogin(value) {
     chrome.storage.local.set({ autoAuthLogin: value })
 }
 
-function setAutoAuthLPassword(value) {
+function setAutoAuthPassword(value) {
-    chrome.storage.local.set({ autoAuthLPassword: value })
+    chrome.storage.local.set({ autoAuthPassword: value })
 }

composeApp/src/wasmJsMain/resources/index.css

@@ -7,7 +7,7 @@ html, body {
 html {
     position: relative;
     width: 48rem;
-    height: 32rem;
+    height: 27rem;
 }
 
 body {

composeApp/src/wasmJsMain/resources/index.js

@@ -3,5 +3,5 @@ composeApp.then(module => {
     getValueByKey('copyMode').then(value => module.copyModeCallback(value))
     getValueByKey('autoAuthMode').then(value => module.autoAuthModeCallback(value))
     getValueByKey('autoAuthLogin').then(value => module.autoAuthLoginCallback(value))
-    getValueByKey('autoAuthLPassword').then(value => module.autoAuthLPasswordCallback(value))
+    getValueByKey('autoAuthPassword').then(value => module.autoAuthPasswordCallback(value))
 })