Implemented showing decoding error

composeApp/src/androidMain/kotlin/net/codinux/banking/ui/dialogs/EnterTanDialogPreview.kt

@@ -34,6 +34,19 @@ fun EnterTanDialogPreview_TanImage() {
     EnterTanDialog(TanChallengeReceived(tanChallenge) { }) { }
 }
 
+@Preview
+@Composable
+fun EnterTanDialogPreview_TanImage_DecodingError() {
+    val tanMethod = TanMethod("photoTAN-Verfahren", TanMethodType.photoTan, "902", 6, AllowedTanFormat.Numeric)
+    val tanImage = TanImage("image/png", "", "Ja Hoppla, da ist dann wohl etwas schief gelaufen. Hinterfragen Sie Ihre eigene Existenz woran das liegen könnte!")
+
+    val bank = BankViewInfo("10010010", "Ihr krasser Login Name", "Phantasie Bank", BankingGroup.Comdirect)
+
+    val tanChallenge = TanChallenge(TanChallengeType.Image, ActionRequiringTan.GetAccountInfo, "Geben Sie die TAN ein", tanMethod.identifier, listOf(tanMethod), null, emptyList(), tanImage, null, bank)
+
+    EnterTanDialog(TanChallengeReceived(tanChallenge) { }) { }
+}
+
 @Preview
 @Composable
 fun EnterTanDialogPreview_WithMultipleTanMedia() { // shows that dialog is really long if a TAN Image, select box for TAN Media, bank name, bank account, ... gets displayed
@@ -67,3 +80,13 @@ fun EnterTanDialogPreview_Flickercode() {
 
     EnterTanDialog(TanChallengeReceived(tanChallenge) { }) { }
 }
+
+@Preview
+@Composable
+fun EnterTanDialogPreview_Flickercode_DecodingError() {
+    val tanMethods = listOf(TanMethod("chipTAN Flickercode", TanMethodType.ChipTanFlickercode, "902"))
+    val bank = BankViewInfo("12345678", "SupiDupiNutzer", "Abzockbank", BankingGroup.Postbank)
+    val tanChallenge = TanChallenge(TanChallengeType.Flickercode, ActionRequiringTan.GetAccountInfo, "Geben Sie die TAN ein", tanMethods.first().identifier, tanMethods, bank = bank, flickerCode = FlickerCode("100880077104", "", decodingError = "Ja Hoppla, da ist dann wohl etwas schief gelaufen."))
+
+    EnterTanDialog(TanChallengeReceived(tanChallenge) { }) { }
+}

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

@@ -14,6 +14,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import net.codinux.banking.client.model.tan.FlickerCode
+import net.codinux.banking.ui.model.Config.NewLine
 import net.codinux.banking.ui.service.tan.Bit
 import net.codinux.banking.ui.service.tan.FlickerCodeAnimator
 import net.codinux.banking.ui.service.tan.Step
@@ -99,49 +100,55 @@ fun ChipTanFlickerCodeView(flickerCode: FlickerCode, textColor: Color = Color.Bl
 
 
     Column(Modifier.fillMaxWidth()) {
-        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
+        flickerCode.decodingError?.let {
-            ImageSizeControls(true, true, textColor, { decreaseSize() }, { increaseSize() })
+            Text("Hier sollte eigentlich ein FlickerCode stehen, dieser konnte jedoch nicht dekodiert werden:${NewLine}${flickerCode.decodingError}", color = MaterialTheme.colors.error, modifier = Modifier.padding(vertical = 8.dp))
-
-            Spacer(Modifier.width(16.dp))
-
-            Text("Geschw.", color = textColor)
-
-            IconButton({ decreaseFrequency() }, enabled = frequency - FrequencyStepSize > 0) {
-                Icon(Icons.AutoMirrored.Filled.DirectionsWalk, contentDescription = "Frequenz verkleinern", Modifier.size(28.dp), tint = textColor)
-            }
-
-            IconButton({ increaseFrequency() }, enabled = frequency - FrequencyStepSize > 0) {
-                Icon(Icons.AutoMirrored.Filled.DirectionsRun, contentDescription = "Frequenz vergrößern", Modifier.size(28.dp), tint = textColor)
-            }
-
-            IconButton({ toggleIsPaused() }) {
-                if (isPaused) {
-                    Icon(Icons.Filled.PlayArrow, "FlickerCode Animation wieder starten", Modifier.size(28.dp), tint = textColor)
-                } else {
-                    Icon(Icons.Filled.Pause, "FlickerCode Animation pausieren", Modifier.size(28.dp), tint = textColor)
-                }
-            }
         }
 
-        Row(Modifier.background(Color.Black).padding(vertical = 20.dp), verticalAlignment = Alignment.CenterVertically) {
+        flickerCode.parsedDataSet?.let {
-            Row(Modifier.fillMaxWidth().height(stripesHeight).background(Color.Black), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
+            Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
-                ChipTanFlickerCodeStripeView(step.bit1, stripesWidth, true)
+                ImageSizeControls(true, true, textColor, { decreaseSize() }, { increaseSize() })
 
-                Spacer(Modifier.width(spaceBetweenStripes))
+                Spacer(Modifier.width(16.dp))
 
-                ChipTanFlickerCodeStripeView(step.bit2, stripesWidth)
+                Text("Geschw.", color = textColor)
 
-                Spacer(Modifier.width(spaceBetweenStripes))
+                IconButton({ decreaseFrequency() }, enabled = frequency - FrequencyStepSize > 0) {
+                    Icon(Icons.AutoMirrored.Filled.DirectionsWalk, contentDescription = "Frequenz verkleinern", Modifier.size(28.dp), tint = textColor)
+                }
 
-                ChipTanFlickerCodeStripeView(step.bit3, stripesWidth)
+                IconButton({ increaseFrequency() }, enabled = frequency - FrequencyStepSize > 0) {
+                    Icon(Icons.AutoMirrored.Filled.DirectionsRun, contentDescription = "Frequenz vergrößern", Modifier.size(28.dp), tint = textColor)
+                }
 
-                Spacer(Modifier.width(spaceBetweenStripes))
+                IconButton({ toggleIsPaused() }) {
+                    if (isPaused) {
+                        Icon(Icons.Filled.PlayArrow, "FlickerCode Animation wieder starten", Modifier.size(28.dp), tint = textColor)
+                    } else {
+                        Icon(Icons.Filled.Pause, "FlickerCode Animation pausieren", Modifier.size(28.dp), tint = textColor)
+                    }
+                }
+            }
 
-                ChipTanFlickerCodeStripeView(step.bit4, stripesWidth)
+            Row(Modifier.background(Color.Black).padding(vertical = 20.dp), verticalAlignment = Alignment.CenterVertically) {
+                Row(Modifier.fillMaxWidth().height(stripesHeight).background(Color.Black), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
+                    ChipTanFlickerCodeStripeView(step.bit1, stripesWidth, true)
 
-                Spacer(Modifier.width(spaceBetweenStripes))
+                    Spacer(Modifier.width(spaceBetweenStripes))
 
-                ChipTanFlickerCodeStripeView(step.bit5, stripesWidth, true)
+                    ChipTanFlickerCodeStripeView(step.bit2, stripesWidth)
+
+                    Spacer(Modifier.width(spaceBetweenStripes))
+
+                    ChipTanFlickerCodeStripeView(step.bit3, stripesWidth)
+
+                    Spacer(Modifier.width(spaceBetweenStripes))
+
+                    ChipTanFlickerCodeStripeView(step.bit4, stripesWidth)
+
+                    Spacer(Modifier.width(spaceBetweenStripes))
+
+                    ChipTanFlickerCodeStripeView(step.bit5, stripesWidth, true)
+                }
             }
         }
     }

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

@@ -24,6 +24,7 @@ import net.codinux.banking.ui.config.Colors
 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
@@ -142,6 +143,10 @@ fun EnterTanDialog(tanChallengeReceived: TanChallengeReceived, onDismiss: () ->
                     }
 
                     challenge.tanImage?.let { tanImage ->
+                        tanImage.decodingError?.let {
+                            Text("Hier sollte eigentlich das TAN Bild angezeigt werden, dieses konnte jedoch nicht dekodiert werden:$NewLine${tanImage.decodingError}", color = MaterialTheme.colors.error, modifier = Modifier.padding(vertical = 8.dp))
+                        }
+
                         if (tanImage.decodingSuccessful) {
                             val imageBytes = Base64.decode(tanImage.imageBytesBase64)
 

composeApp/src/commonMain/kotlin/net/codinux/banking/ui/service/tan/FlickerCodeAnimator.kt

@@ -29,10 +29,12 @@ class FlickerCodeAnimator {
     fun animateFlickerCode(flickerCode: FlickerCode, showStep: (Step) -> Unit) { // TODO: find better coroutine scope
         stop() // stop may still running previous animation
 
-        animationJob = GlobalScope.launch(Dispatchers.Default) {
+        flickerCode.parsedDataSet?.let { parsedDataSet ->
-            val steps = FlickerCodeStepsCalculator().calculateSteps(flickerCode.parsedDataSet)
+            animationJob = GlobalScope.launch(Dispatchers.Default) {
+                val steps = FlickerCodeStepsCalculator().calculateSteps(parsedDataSet)
 
-            calculateAnimation(steps, showStep)
+                calculateAnimation(steps, showStep)
+            }
         }
     }