Extracted ImageView

composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/tan/ImageSizeControls.kt

@@ -15,7 +15,7 @@ import androidx.compose.ui.unit.dp
 fun ImageSizeControls(decreaseEnabled: Boolean, increaseEnabled: Boolean, textColor: Color = Color.Black, onDecreaseImageSize: () -> Unit, onIncreaseImageSize: () -> Unit) {
 
     Row(verticalAlignment = Alignment.CenterVertically) {
-        Text("Größe", color = textColor)
+        Text("Größe", color = textColor, modifier = Modifier.padding(end = 6.dp))
 
         TextButton({ onDecreaseImageSize() }, enabled = decreaseEnabled, modifier = Modifier.width(48.dp), colors = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent)) {
             Icon(Icons.Filled.ZoomOut, contentDescription = "Bild verkleinern", Modifier.size(28.dp), tint = textColor)

composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/tan/ImageView.kt

@@ -0,0 +1,41 @@
+package net.codinux.banking.ui.composables.tan
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.unit.dp
+import net.codinux.banking.ui.config.Colors
+import net.codinux.banking.ui.service.createImageBitmap
+
+@Composable
+fun ImageView(
+    imageBytes: ByteArray,
+    contentDescription: String,
+    initialImageHeight: Int = 300,
+    minImageHeight: Int = 0,
+    maxImageHeight: Int? = null,
+    changeImageSizeStep: Int = 25,
+    textColor: Color = Colors.MaterialThemeTextColor,
+) {
+
+    var imageHeight by remember { mutableStateOf(initialImageHeight) }
+
+
+    fun changeImageSize(by: Int) {
+        imageHeight += by
+    }
+
+
+    Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
+        ImageSizeControls(imageHeight > minImageHeight, maxImageHeight == null || imageHeight < maxImageHeight, textColor, { changeImageSize(-changeImageSizeStep) }) { changeImageSize(changeImageSizeStep) }
+    }
+
+    Row(Modifier.fillMaxWidth().padding(top = 6.dp), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
+        Image(createImageBitmap(imageBytes), contentDescription, Modifier.height(imageHeight.dp), contentScale = ContentScale.FillHeight)
+    }
+
+}

composeApp/src/commonMain/kotlin/net/codinux/banking/ui/dialogs/EnterTanDialog.kt

@@ -1,33 +1,34 @@
 package net.codinux.banking.ui.dialogs
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.material.*
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
-import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
 import kotlinx.datetime.TimeZone
 import kotlinx.datetime.toLocalDateTime
-import net.codinux.banking.client.model.tan.*
+import net.codinux.banking.client.model.tan.ActionRequiringTan
+import net.codinux.banking.client.model.tan.AllowedTanFormat
+import net.codinux.banking.client.model.tan.EnterTanResult
 import net.codinux.banking.ui.composables.BankIcon
 import net.codinux.banking.ui.composables.tan.ChipTanFlickerCodeView
-import net.codinux.banking.ui.composables.tan.ImageSizeControls
+import net.codinux.banking.ui.composables.tan.ImageView
-import net.codinux.banking.ui.config.*
 import net.codinux.banking.ui.config.Colors
+import net.codinux.banking.ui.config.DI
+import net.codinux.banking.ui.config.Internationalization
 import net.codinux.banking.ui.forms.CaptionText
 import net.codinux.banking.ui.forms.OutlinedTextField
 import net.codinux.banking.ui.forms.Select
 import net.codinux.banking.ui.model.Config.NewLine
 import net.codinux.banking.ui.model.TanChallengeReceived
 import net.codinux.banking.ui.model.error.ErroneousAction
-import net.codinux.banking.ui.service.createImageBitmap
 import kotlin.io.encoding.Base64
 import kotlin.io.encoding.ExperimentalEncodingApi
 
@@ -41,10 +42,6 @@ fun EnterTanDialog(tanChallengeReceived: TanChallengeReceived, onDismiss: () ->
 
     val isNotADecoupledTanMethod = !!!isDecoupledMethod
 
-    var tanImageHeight by remember { mutableStateOf(250) }
-    val minTanImageHeight = 100
-    val maxTanImageHeight = 500
-
     var showSelectingTanMediumNotImplementedWarning by remember { mutableStateOf(false) }
 
     val textFieldFocus = remember { FocusRequester() }
@@ -150,13 +147,7 @@ fun EnterTanDialog(tanChallengeReceived: TanChallengeReceived, onDismiss: () ->
                         tanImage.imageBytesBase64?.let { imageBytesBase64 ->
                             val imageBytes = Base64.decode(imageBytesBase64)
 
-                            Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
+                            ImageView(imageBytes, "Bild mit enkodierter TAN", 250, 100, 500, textColor = textColor)
-                                ImageSizeControls(tanImageHeight > minTanImageHeight, tanImageHeight < maxTanImageHeight, textColor, { tanImageHeight -= 25 }) { tanImageHeight += 25 }
-                            }
-
-                            Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
-                                Image(createImageBitmap(imageBytes), "Bild mit enkodierter TAN", Modifier.height(tanImageHeight.dp), contentScale = ContentScale.FillHeight)
-                            }
                         }
                     }
                 }

composeApp/src/commonMain/kotlin/net/codinux/banking/ui/screens/CreateEpcQrCodeScreen.kt

@@ -1,6 +1,5 @@
 package net.codinux.banking.ui.screens
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.MaterialTheme
@@ -10,13 +9,11 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
-import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import net.codinux.banking.persistence.entities.BankAccountEntity
 import net.codinux.banking.ui.composables.BankIcon
-import net.codinux.banking.ui.composables.tan.ImageSizeControls
+import net.codinux.banking.ui.composables.tan.ImageView
-import net.codinux.banking.ui.config.Colors
 import net.codinux.banking.ui.config.DI
 import net.codinux.banking.ui.extensions.ImeNext
 import net.codinux.banking.ui.extensions.rememberVerticalScroll
@@ -24,7 +21,6 @@ import net.codinux.banking.ui.forms.CaptionText
 import net.codinux.banking.ui.forms.OutlinedTextField
 import net.codinux.banking.ui.forms.Select
 import net.codinux.banking.ui.model.Config.NewLine
-import net.codinux.banking.ui.service.createImageBitmap
 import net.codinux.log.Log
 
 private val epcQrCodeService = DI.epcQrCodeService
@@ -81,10 +77,6 @@ fun CreateEpcQrCodeScreen(onClosed: () -> Unit) {
         }
     }
 
-    var imageHeight by remember { mutableStateOf(350) }
-    val minImageHeight = 100
-    val maxImageHeight = 700
-
 
     FullscreenViewBase("EPC QR Code erstellen", "Schließen", onClosed = onClosed) {
         Column(Modifier.fillMaxWidth().rememberVerticalScroll()) {
@@ -94,15 +86,9 @@ fun CreateEpcQrCodeScreen(onClosed: () -> Unit) {
                 Text("Mit EPC QR Codes, welche als GiroCode, scan2code, ... vermarktet werden, können Überweisungsdaten ganz einfach von Banking Apps eingelesen werden.")
                 Text("Hier können Sie Ihren eigenen erstellen, so dass jemand Ihre Überweisungsdaten einlesen und Ihnen ganz schnell Geld überweisen kann.")
             } else {
-                Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
+                ImageView(epcQrCodeBytes!!, "Erzeugter EPC QR Code", 350, 100, 700)
-                    ImageSizeControls(imageHeight > minImageHeight, imageHeight < maxImageHeight, Colors.MaterialThemeTextColor, { imageHeight -= 25 }) { imageHeight += 25 }
-                }
 
-                Row(Modifier.fillMaxWidth().padding(bottom = 8.dp), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
+                Row(Modifier.fillMaxWidth().padding(top = 8.dp), horizontalArrangement = Arrangement.Center) {
-                    Image(createImageBitmap(epcQrCodeBytes!!), "Erzeugter EPC QR Code", Modifier.height(imageHeight.dp), contentScale = ContentScale.FillHeight)
-                }
-
-                Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
                     Text("Scannen Sie diesen Code auf einem anderen Gerät mit einer Banking App, z. B. Bankmeister", textAlign = TextAlign.Center, modifier = Modifier.padding(horizontal = 16.dp).padding(top = 8.dp))
                 }
             }