Merge pull request 'merge feat/welcome-screen into screen' (#2) from feat/welcome-screen into master

Reviewed-on: #2

.idea/gradle.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="GradleMigrationSettings" migrationVersion="1" />
   <component name="GradleSettings">
     <option name="linkedExternalProjectsSettings">
       <GradleProjectSettings>

.idea/misc.xml

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ExternalStorageConfigurationManager" enabled="true" />
   <component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="jbr-21" project-jdk-type="JavaSDK">

app/build.gradle.kts

@@ -33,6 +33,7 @@ android {
     }
     kotlinOptions {
         jvmTarget = "11"
+        freeCompilerArgs += "-opt-in=androidx.compose.material3.ExperimentalMaterial3ExpressiveApi"
     }
     buildFeatures {
         compose = true
@@ -48,7 +49,8 @@ dependencies {
     implementation(libs.androidx.ui)
     implementation(libs.androidx.ui.graphics)
     implementation(libs.androidx.ui.tooling.preview)
-    implementation(libs.androidx.material3)
+    //implementation(libs.androidx.material3)
+    implementation("androidx.compose.material3:material3:1.4.0-alpha15")
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)

app/src/main/java/de/lelehier/keeper/MainActivity.kt

@@ -4,14 +4,13 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
+import androidx.compose.runtime.getValue
-import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
-import androidx.compose.ui.Modifier
+import androidx.compose.runtime.remember
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.runtime.setValue
 import de.lelehier.keeper.ui.theme.KeeperTheme
+import de.lelehier.keeper.screens.LoginScreen
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -19,29 +18,12 @@ class MainActivity : ComponentActivity() {
         enableEdgeToEdge()
         setContent {
             KeeperTheme {
-                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
+                var currentScreen by remember { mutableStateOf(0) }
-                    Greeting(
-                        name = "Android",
-                        modifier = Modifier.padding(innerPadding)
-                    )
-                }
-            }
-        }
-    }
-}
 
-@Composable
+                Scaffold() { paddingValues ->
-fun Greeting(name: String, modifier: Modifier = Modifier) {
+                LoginScreen(paddingValues)
-    Text(
+                }
-        text = "Kakapo",
+            }
-        modifier = modifier
+        }
-    )
-}
-
-@Preview(showBackground = true)
-@Composable
-fun GreetingPreview() {
-    KeeperTheme {
-        Greeting("Android")
     }
 }

app/src/main/java/de/lelehier/keeper/Typography.kt

@@ -0,0 +1,44 @@
+import android.os.Build
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.Typography
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.ExperimentalTextApi
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontVariation
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.core.R
+
+// VariableFontDimension.kt
+object DisplayLargeVFConfig {
+    const val WEIGHT = 950
+    const val WIDTH = 30f
+    const val SLANT = -6f
+    const val ASCENDER_HEIGHT = 800f
+    const val COUNTER_WIDTH = 500
+}
+
+@OptIn(ExperimentalTextApi::class)
+val KeeperLargeFontFamily =
+    FontFamily(
+        Font(
+            de.lelehier.keeper.R.font.robotoflex_variable,
+            variationSettings = FontVariation.Settings(
+                FontVariation.weight(DisplayLargeVFConfig.WEIGHT),
+                FontVariation.width(DisplayLargeVFConfig.WIDTH),
+                FontVariation.slant(DisplayLargeVFConfig.SLANT),
+            )
+        )
+    )

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

@@ -0,0 +1,285 @@
+package de.lelehier.keeper.screens
+
+import KeeperLargeFontFamily
+
+import android.util.Patterns
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.AnimatedContentTransitionScope
+import androidx.compose.animation.AnimatedVisibility
+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.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Button
+import androidx.compose.material3.CircularWavyProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+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.input.KeyboardType
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.ui.autofill.ContentType
+import androidx.compose.ui.semantics.contentType
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+
+@Composable
+fun LoginScreen(paddingValues: PaddingValues) {
+    var currentScreen by rememberSaveable { mutableStateOf("serverDialog") }
+    var serverURL by rememberSaveable { mutableStateOf("") }
+    var username by rememberSaveable { mutableStateOf("") }
+    var password by rememberSaveable { mutableStateOf("") }
+    var apiKey by rememberSaveable { mutableStateOf("") }
+
+    Column (
+        modifier = Modifier
+            .padding(paddingValues)
+            .fillMaxSize()
+            .imePadding()
+            .padding(start = 56.dp, end = 56.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center) {
+        Greeting(serverURL, currentScreen);
+        AnimatedContent(
+            modifier = Modifier.padding(bottom = 24.dp),
+            targetState = currentScreen,
+            transitionSpec = {
+                fadeIn(
+                    animationSpec = tween(250)
+                ) togetherWith fadeOut(animationSpec = tween(250))
+            },
+
+        ) { targetState -> when(targetState) {
+            "serverDialog" -> ServerDialog(serverURL, {newServerURL -> serverURL = newServerURL })
+            "passwordDialog" -> PasswordDialog(username, password, {newUsername ->  username = newUsername}, {newPassword -> password = newPassword  })
+            "apiDialog" -> ApiDialog(apiKey) {newApiKey ->  apiKey = newApiKey}
+            "loadingDialog" -> LoadingDialog()
+        }
+        }
+
+        AnimatedVisibility(currentScreen == "passwordDialog" || currentScreen == "apiDialog") {
+            Row(
+                modifier = Modifier
+                    .padding(bottom = 12.dp)
+                    .fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween
+            ) {
+                OutlinedButton(
+                    onClick = { currentScreen = "serverDialog" },
+                    modifier = Modifier.weight(1f)
+                ) {
+                    Row() {
+                        Text(text = "Change Server")
+                    }
+                }
+                Spacer(modifier = Modifier.width(12.dp))
+                OutlinedButton(
+                    modifier = Modifier.weight(1f),
+                    onClick = {
+                        when (currentScreen) {
+                            "passwordDialog" -> {
+                                currentScreen = "apiDialog"
+                            }
+
+                            "apiDialog" -> {
+                                currentScreen = "passwordDialog"
+                            }
+                        }
+                    },
+                ) {
+                    Row() {
+                        when (currentScreen) {
+                            "passwordDialog" -> Text(text = "Use API Key")
+                            "apiDialog" -> Text(text = "Use Password")
+                        }
+                    }
+                }
+            }
+        }
+        AnimatedVisibility(currentScreen != "loadingDialog") {
+            Button(
+                onClick = {
+                    when (currentScreen) {
+                        "serverDialog" -> currentScreen = "passwordDialog"
+                        "passwordDialog" -> currentScreen = "loadingDialog"
+                        "apiDialog" -> currentScreen = "loadingDialog"
+                        "loadingDialog" -> currentScreen = "loadingDialog"
+                    }
+                },
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(96.dp),
+                enabled = when (currentScreen) {
+                    "serverDialog" -> isValidUrl(serverURL)
+                    "passwordDialog" -> username.isNotEmpty() && password.isNotEmpty()
+                    "apiDialog" -> apiKey.isNotEmpty()
+                    else -> false
+                },
+            ) {
+                Row() {
+                    Text(
+                        text = when (currentScreen) {
+                            "serverDialog" -> "Next"
+                            "passwordDialog" -> "Login"
+                            "apiDialog" -> "Login"
+                            else -> ""
+
+                        }
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun Greeting(serverURL: String, currentScreen: String) {
+    Column (horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.padding(bottom = 24.dp)) {
+        AnimatedVisibility (currentScreen == "serverDialog") {
+            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,
+        )
+        AnimatedVisibility(currentScreen != "serverDialog") {
+            Text(
+                text = "@$serverURL",
+                style = MaterialTheme.typography.titleSmall,
+                textAlign = TextAlign.Center
+            )
+        }
+
+    }
+}
+
+@Composable
+fun ServerDialog(serverURL: String, updateServerURL: (newServerURL: String) -> Unit) {
+    var dialogServerURL by remember { mutableStateOf("") }
+    OutlinedTextField(
+        singleLine = true,
+        modifier = Modifier.fillMaxWidth(),
+        label = { Text(text = "Server URL") },
+        textStyle = MaterialTheme.typography.bodySmall,
+        value = serverURL,
+        onValueChange = { text ->
+            dialogServerURL = text
+            updateServerURL(dialogServerURL)
+        },
+        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Uri),
+        supportingText = {
+                AnimatedVisibility(!isValidUrl(serverURL) && serverURL != "") {
+                    Text(
+                        text = "No valid URL",
+                        color = MaterialTheme.colorScheme.error
+                    )
+                }
+        }
+    )
+}
+
+fun isValidUrl(url: String): Boolean {
+    return try {
+        // Use Android's Patterns.WEB_URL for robust URL validation
+        // This handles various URL formats, including those without schemes.
+        Patterns.WEB_URL.matcher(url).matches()
+    } catch (e: Exception) {
+        false
+    }
+}
+
+@Composable
+fun PasswordDialog(username: String, password: String, updateUsername: (newUsername: String) -> Unit, updatePassword: (newPassword: String) -> Unit) {
+    var dialogUsername by remember { mutableStateOf("") }
+    var dialogPassword by remember { mutableStateOf("") }
+    Column {
+        OutlinedTextField(
+            singleLine = true,
+            modifier = Modifier.fillMaxWidth().semantics {contentType = ContentType.Username + ContentType.EmailAddress},
+            label = { Text(text = "Username") },
+            textStyle = MaterialTheme.typography.bodySmall,
+            value = username,
+            onValueChange = { text ->
+                dialogUsername = text
+                updateUsername(dialogUsername)
+            })
+        OutlinedTextField(
+            singleLine = true,
+            modifier = Modifier.fillMaxWidth().semantics {contentType = ContentType.Password},
+            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
+            label = { Text(text = "Password") },
+            textStyle = MaterialTheme.typography.bodySmall,
+            value = password,
+            visualTransformation = PasswordVisualTransformation(),
+            onValueChange = { text ->
+                dialogPassword = text
+            updatePassword(dialogPassword)}
+        )
+
+    }
+}
+
+@Composable
+fun ApiDialog(apiKey: String, updateApiKey: (newApiKey: String) -> Unit) {
+    var dialogApiKey by remember { mutableStateOf(apiKey) }
+    Column {
+        OutlinedTextField(
+            singleLine = true,
+            modifier = Modifier.fillMaxWidth(),
+            label = { Text(text = "API Key") },
+            textStyle = MaterialTheme.typography.bodySmall,
+            value = dialogApiKey,
+            onValueChange = { text ->
+                dialogApiKey = text
+                updateApiKey(dialogApiKey)
+            }
+        )
+
+    }
+}
+
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
+@Composable
+fun LoadingDialog () {
+    CircularWavyProgressIndicator()
+}

gradle/libs.versions.toml

@@ -11,6 +11,7 @@ composeBom = "2024.09.00"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
+androidx-material-icons-extended = { module = "androidx.compose.material:material-icons-extended" }
 junit = { group = "junit", name = "junit", version.ref = "junit" }
 androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" }
 androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }