Added Animation for TextFields in login form

app/src/main/java/de/lelehier/keeper/screens/home_screen.kt

@@ -0,0 +1,133 @@
+package de.lelehier.keeper.screens
+
+import KeeperLargeFontFamily
+import android.print.PrintAttributes.Margins
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.AnimatedContentTransitionScope
+import androidx.compose.animation.core.EaseIn
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.togetherWith
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Button
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun homeScreen(paddingValues: PaddingValues) {
+    var currentScreen by remember { mutableStateOf(0) }
+    var nextScreen by remember { mutableStateOf(1) }
+    var serverURL = ""
+    var username by remember { mutableStateOf("") }
+    var password by remember { mutableStateOf("") }
+    var apiKey by remember { mutableStateOf("") }
+
+    Column (
+        modifier = Modifier
+            .padding(paddingValues)
+            .fillMaxSize()
+            .imePadding(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center) {
+        Greeting();
+        AnimatedContent(
+            targetState = currentScreen,
+            transitionSpec = {
+                fadeIn(
+                    animationSpec = tween(250)
+                ) togetherWith fadeOut(animationSpec = tween(250))
+            },
+
+        ) { targetState -> when(targetState) {
+            0 -> serverDialog(serverURL)
+            1 -> passwordDialog(username, password)
+        }
+        }
+
+        Button(onClick = {currentScreen = nextScreen}, modifier = Modifier.padding(top = 24.dp)) {
+            Row() {
+                Text(text = "Next")
+            }
+        }
+    }
+}
+
+@Composable
+fun Greeting() {
+    Column (horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.padding(bottom = 24.dp)) {
+        Text(
+            text = "Welcome to",
+            style = MaterialTheme.typography.headlineLarge,
+            textAlign = TextAlign.Center
+        )
+        Text(
+            text = "Keeper",
+            style = TextStyle(
+                fontSize = 72.sp,
+                fontFamily = KeeperLargeFontFamily,
+                brush = Brush.linearGradient(listOf(MaterialTheme.colorScheme.onPrimaryContainer, MaterialTheme.colorScheme.onSecondaryContainer))),
+            textAlign = TextAlign.Center,
+        )
+    }
+}
+
+
+@Composable
+fun serverDialog(serverURL: String) {
+    var serverURL by remember { mutableStateOf("") }
+    OutlinedTextField(
+        label = { Text(text = "Server URL") },
+        textStyle = MaterialTheme.typography.bodySmall,
+        value = serverURL,
+        onValueChange = { text ->
+            serverURL = text
+        }
+
+    )
+}
+
+@Composable
+fun passwordDialog(username: String, password: String) {
+    var username by remember { mutableStateOf("") }
+    var password by remember { mutableStateOf("") }
+    Column {
+        OutlinedTextField(
+            label = { Text(text = "Username") },
+            textStyle = MaterialTheme.typography.bodySmall,
+            value = username,
+            onValueChange = { text ->
+                username = text
+            });
+        OutlinedTextField(
+            label = { Text(text = "Password") },
+            textStyle = MaterialTheme.typography.bodySmall,
+            value = password,
+            onValueChange = { text ->
+                password = text
+            }
+        )
+
+    }
+}