Merge pull request 'merge feat/welcome-screen into screen' (#2) from feat/welcome-screen into master
Reviewed-on: #2
This commit is contained in:
commit
5890e52f5b
8 changed files with 343 additions and 29 deletions
1
.idea/gradle.xml
generated
1
.idea/gradle.xml
generated
|
|
@ -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>
|
||||
|
|
|
|||
1
.idea/misc.xml
generated
1
.idea/misc.xml
generated
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.mutableStateOf
|
||||
import androidx.compose.runtime.remember
|
||||
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 ->
|
||||
Greeting(
|
||||
name = "Android",
|
||||
modifier = Modifier.padding(innerPadding)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
var currentScreen by remember { mutableStateOf(0) }
|
||||
|
||||
@Composable
|
||||
fun Greeting(name: String, modifier: Modifier = Modifier) {
|
||||
Text(
|
||||
text = "Kakapo",
|
||||
modifier = modifier
|
||||
)
|
||||
}
|
||||
|
||||
@Preview(showBackground = true)
|
||||
@Composable
|
||||
fun GreetingPreview() {
|
||||
KeeperTheme {
|
||||
Greeting("Android")
|
||||
Scaffold() { paddingValues ->
|
||||
LoginScreen(paddingValues)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
44
app/src/main/java/de/lelehier/keeper/Typography.kt
Normal file
44
app/src/main/java/de/lelehier/keeper/Typography.kt
Normal file
|
|
@ -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),
|
||||
)
|
||||
)
|
||||
)
|
||||
285
app/src/main/java/de/lelehier/keeper/screens/home_screen.kt
Normal file
285
app/src/main/java/de/lelehier/keeper/screens/home_screen.kt
Normal file
|
|
@ -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()
|
||||
}
|
||||
BIN
app/src/main/res/font/robotoflex_variable.ttf
Normal file
BIN
app/src/main/res/font/robotoflex_variable.ttf
Normal file
Binary file not shown.
|
|
@ -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" }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue