Add account screens

This commit is contained in:
Wolf Montwé 2023-03-31 18:31:25 +02:00
parent c3a2126e29
commit 1e9a5dbb30
No known key found for this signature in database
GPG key ID: 6D45B21512ACBF72
12 changed files with 449 additions and 146 deletions

View file

@ -16,4 +16,5 @@ dependencies {
implementation(projects.core.ui.compose.designsystem)
implementation(projects.feature.onboarding)
implementation(projects.feature.account.setup)
}

View file

@ -4,8 +4,10 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import net.thunderbird.feature.onboarding.navigation.NAVIGATION_ROUTE_ONBOARDING
import net.thunderbird.feature.onboarding.navigation.onboardingScreen
import app.k9mail.feature.account.setup.navigation.accountSetupScreen
import app.k9mail.feature.account.setup.navigation.navigateToAccountSetup
import app.k9mail.feature.onboarding.navigation.NAVIGATION_ROUTE_ONBOARDING
import app.k9mail.feature.onboarding.navigation.onboardingScreen
@Composable
fun FeatureNavHost(
@ -19,8 +21,12 @@ fun FeatureNavHost(
modifier = modifier,
) {
onboardingScreen(
onStartClick = { /* TODO */ },
onStartClick = { navController.navigateToAccountSetup() },
onImportClick = { /* TODO */ },
)
accountSetupScreen(
onBackClick = navController::popBackStack,
onFinishClick = { /* TODO */ },
)
}
}

View file

@ -4,12 +4,9 @@ import androidx.navigation.NavController
import androidx.navigation.NavGraphBuilder
import androidx.navigation.NavOptions
import androidx.navigation.compose.composable
import androidx.navigation.compose.navigation
import app.k9mail.feature.account.setup.ui.AccountSetupScreen
const val NAVIGATION_ROUTE_ACCOUNT_SETUP = "account_setup"
private const val NESTED_NAVIGATION_ROUTE_EMAIL = "email"
const val NAVIGATION_ROUTE_ACCOUNT_SETUP = "/account/setup"
fun NavController.navigateToAccountSetup(navOptions: NavOptions? = null) {
navigate(NAVIGATION_ROUTE_ACCOUNT_SETUP, navOptions)
@ -17,17 +14,12 @@ fun NavController.navigateToAccountSetup(navOptions: NavOptions? = null) {
fun NavGraphBuilder.accountSetupScreen(
onBackClick: () -> Unit,
onNextClick: () -> Unit,
onFinishClick: () -> Unit,
) {
navigation(
route = NAVIGATION_ROUTE_ACCOUNT_SETUP,
startDestination = NESTED_NAVIGATION_ROUTE_EMAIL,
) {
composable(route = NESTED_NAVIGATION_ROUTE_EMAIL) {
AccountSetupScreen(
onBackClick = onBackClick,
onNextClick = onNextClick,
)
}
composable(route = NAVIGATION_ROUTE_ACCOUNT_SETUP) {
AccountSetupScreen(
onBackClick = onBackClick,
onFinishClick = onFinishClick,
)
}
}

View file

@ -1,122 +0,0 @@
package app.k9mail.feature.account.setup.ui
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import app.k9mail.core.ui.compose.common.DevicePreviews
import app.k9mail.core.ui.compose.designsystem.atom.Background
import app.k9mail.core.ui.compose.designsystem.atom.button.Button
import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonOutlined
import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline2
import app.k9mail.core.ui.compose.designsystem.atom.textfield.TextFieldOutlined
import app.k9mail.core.ui.compose.designsystem.template.LazyColumnWithFooter
import app.k9mail.core.ui.compose.designsystem.template.ResponsiveContent
import app.k9mail.core.ui.compose.theme.K9Theme
import app.k9mail.core.ui.compose.theme.MainTheme
import app.k9mail.core.ui.compose.theme.ThunderbirdTheme
import app.k9mail.feature.account.setup.R
@Composable
internal fun AccountSetupContent(
onNextClick: () -> Unit,
onBackClick: () -> Unit,
modifier: Modifier = Modifier,
) {
ResponsiveContent {
Background(
modifier = modifier,
) {
LazyColumnWithFooter(
modifier = Modifier.fillMaxSize(),
footer = {
AccountSetupFooter(
onNextClick = onNextClick,
onBackClick = onBackClick,
modifier = Modifier
.fillMaxWidth(),
)
},
verticalArrangement = Arrangement.Center,
) {
item {
AccountSetupTitle(
modifier = Modifier.fillMaxWidth(),
)
}
item {
AccountSetupEmailForm(
modifier = Modifier.fillMaxWidth(),
)
}
}
}
}
}
@Composable
private fun AccountSetupTitle(
modifier: Modifier = Modifier,
) {
Column(
modifier = Modifier
.padding(all = MainTheme.spacings.double)
.then(modifier),
horizontalAlignment = Alignment.CenterHorizontally,
) {
TextHeadline2(text = stringResource(id = R.string.account_setup_title))
}
}
@Composable
private fun AccountSetupEmailForm(
modifier: Modifier = Modifier,
) {
Column(
modifier = Modifier
.padding(all = MainTheme.spacings.double)
.then(modifier),
horizontalAlignment = Alignment.CenterHorizontally,
) {
TextFieldOutlined(value = "Email address", onValueChange = { /*TODO*/ })
}
}
@Composable
fun AccountSetupFooter(
onNextClick: () -> Unit,
onBackClick: () -> Unit,
modifier: Modifier = Modifier,
) {
Row(
modifier = Modifier
.padding(all = MainTheme.spacings.double)
.then(modifier),
horizontalArrangement = Arrangement.SpaceBetween,
) {
ButtonOutlined(text = stringResource(id = R.string.account_setup_button_back), onClick = onBackClick)
Button(text = stringResource(id = R.string.account_setup_button_next), onClick = onNextClick)
}
}
@Composable
@DevicePreviews
internal fun AccountSetupContentK9Preview() {
K9Theme {
AccountSetupContent({}, {})
}
}
@Composable
@DevicePreviews
internal fun AccountSetupContentThunderbirdPreview() {
ThunderbirdTheme {
AccountSetupContent({}, {})
}
}

View file

@ -1,21 +1,65 @@
package app.k9mail.feature.account.setup.ui
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.tooling.preview.Preview
import app.k9mail.feature.account.setup.ui.autoconfig.AccountAutoConfigScreen
import app.k9mail.feature.account.setup.ui.manualconfig.AccountManualConfigScreen
import app.k9mail.feature.account.setup.ui.options.AccountOptionsScreen
@Composable
fun AccountSetupScreen(
onNextClick: () -> Unit,
onFinishClick: () -> Unit,
onBackClick: () -> Unit,
) {
AccountSetupContent(
onNextClick = onNextClick,
onBackClick = onBackClick,
)
val accountSetupSteps = remember { mutableStateOf(AccountSetupSteps.AUTO_CONFIG) }
when (accountSetupSteps.value) {
AccountSetupSteps.AUTO_CONFIG -> {
AccountAutoConfigScreen(
onNextClick = {
// TODO validate config
accountSetupSteps.value = AccountSetupSteps.MANUAL_CONFIG
},
onBackClick = onBackClick,
)
}
AccountSetupSteps.MANUAL_CONFIG -> {
AccountManualConfigScreen(
onNextClick = {
accountSetupSteps.value = AccountSetupSteps.OPTIONS
},
onBackClick = {
accountSetupSteps.value = AccountSetupSteps.AUTO_CONFIG
},
)
}
AccountSetupSteps.OPTIONS -> {
AccountOptionsScreen(
// validate account
onFinishClick = onFinishClick,
onBackClick = {
accountSetupSteps.value = AccountSetupSteps.MANUAL_CONFIG
},
)
}
}
}
enum class AccountSetupSteps {
AUTO_CONFIG,
MANUAL_CONFIG,
OPTIONS,
}
@Preview(showBackground = true)
@Composable
internal fun AccountSetupScreenPreview() {
AccountSetupContent({}, {})
AccountSetupScreen(
onFinishClick = {},
onBackClick = {},
)
}

View file

@ -0,0 +1,141 @@
package app.k9mail.feature.account.setup.ui.autoconfig
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
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.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import app.k9mail.core.ui.compose.common.DevicePreviews
import app.k9mail.core.ui.compose.designsystem.atom.button.Button
import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonOutlined
import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline2
import app.k9mail.core.ui.compose.designsystem.atom.textfield.TextFieldOutlined
import app.k9mail.core.ui.compose.designsystem.template.LazyColumnWithHeaderFooter
import app.k9mail.core.ui.compose.designsystem.template.ResponsiveContentWithBackground
import app.k9mail.core.ui.compose.theme.K9Theme
import app.k9mail.core.ui.compose.theme.MainTheme
import app.k9mail.core.ui.compose.theme.ThunderbirdTheme
import app.k9mail.feature.account.setup.R
@Composable
internal fun AccountAutoConfigContent(
onNextClick: () -> Unit,
onBackClick: () -> Unit,
modifier: Modifier = Modifier,
) {
ResponsiveContentWithBackground(
modifier = modifier,
) {
LazyColumnWithHeaderFooter(
modifier = Modifier.fillMaxSize(),
header = {
AccountSetupHeader()
},
footer = {
AccountSetupFooter(
onNextClick = onNextClick,
onBackClick = onBackClick,
)
},
verticalArrangement = Arrangement.spacedBy(MainTheme.spacings.double, Alignment.CenterVertically),
) {
item { Spacer(modifier = Modifier.height(MainTheme.sizes.larger)) }
item {
AccountSetupEmailForm(
modifier = Modifier.fillMaxWidth(),
)
}
item { Spacer(modifier = Modifier.height(MainTheme.sizes.larger)) }
}
}
}
@Composable
private fun AccountSetupHeader(
modifier: Modifier = Modifier,
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(
start = MainTheme.spacings.double,
end = MainTheme.spacings.double,
bottom = MainTheme.spacings.triple,
)
.requiredHeight(MainTheme.sizes.larger)
.then(modifier),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Bottom,
) {
TextHeadline2(text = stringResource(id = R.string.account_setup_title))
}
}
@Composable
private fun AccountSetupEmailForm(
modifier: Modifier = Modifier,
) {
Column(
modifier = modifier,
horizontalAlignment = Alignment.CenterHorizontally,
) {
TextFieldOutlined(
value = "",
onValueChange = { /*TODO*/ },
label = "Email address",
)
}
}
@Composable
private fun AccountSetupFooter(
onNextClick: () -> Unit,
onBackClick: () -> Unit,
modifier: Modifier = Modifier,
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(
start = MainTheme.spacings.quadruple,
top = MainTheme.spacings.triple,
end = MainTheme.spacings.quadruple,
bottom = MainTheme.spacings.double,
)
.then(modifier),
horizontalArrangement = Arrangement.SpaceBetween,
) {
ButtonOutlined(
text = stringResource(id = R.string.account_setup_button_back),
onClick = onBackClick,
)
Button(
text = stringResource(id = R.string.account_setup_button_next),
onClick = onNextClick,
)
}
}
@Composable
@DevicePreviews
internal fun AccountAutoConfigContentK9Preview() {
K9Theme {
AccountAutoConfigContent({}, {})
}
}
@Composable
@DevicePreviews
internal fun AccountAutoConfigContentThunderbirdPreview() {
ThunderbirdTheme {
AccountAutoConfigContent({}, {})
}
}

View file

@ -0,0 +1,14 @@
package app.k9mail.feature.account.setup.ui.autoconfig
import androidx.compose.runtime.Composable
@Composable
fun AccountAutoConfigScreen(
onNextClick: () -> Unit,
onBackClick: () -> Unit,
) {
AccountAutoConfigContent(
onNextClick = onNextClick,
onBackClick = onBackClick,
)
}

View file

@ -0,0 +1,99 @@
package app.k9mail.feature.account.setup.ui.manualconfig
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import app.k9mail.core.ui.compose.common.DevicePreviews
import app.k9mail.core.ui.compose.designsystem.atom.button.Button
import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonOutlined
import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline5
import app.k9mail.core.ui.compose.designsystem.template.LazyColumnWithHeaderFooter
import app.k9mail.core.ui.compose.designsystem.template.ResponsiveContentWithBackground
import app.k9mail.core.ui.compose.theme.K9Theme
import app.k9mail.core.ui.compose.theme.MainTheme
import app.k9mail.core.ui.compose.theme.ThunderbirdTheme
import app.k9mail.feature.account.setup.R
@Composable
internal fun AccountManualConfigContent(
onNextClick: () -> Unit,
onBackClick: () -> Unit,
modifier: Modifier = Modifier,
) {
ResponsiveContentWithBackground(
modifier = modifier,
) {
LazyColumnWithHeaderFooter(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.SpaceEvenly,
horizontalAlignment = Alignment.CenterHorizontally,
footer = {
AccountManualConfigFooter(
onNextClick = onNextClick,
onBackClick = onBackClick,
)
},
) {
item {
TextHeadline5(text = "Manual Config")
}
}
}
}
@Composable
private fun AccountManualConfigFooter(
onNextClick: () -> Unit,
onBackClick: () -> Unit,
modifier: Modifier = Modifier,
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(
start = MainTheme.spacings.quadruple,
top = MainTheme.spacings.triple,
end = MainTheme.spacings.quadruple,
bottom = MainTheme.spacings.double,
)
.then(modifier),
horizontalArrangement = Arrangement.SpaceBetween,
) {
ButtonOutlined(
text = stringResource(id = R.string.account_setup_button_back),
onClick = onBackClick,
)
Button(
text = stringResource(id = R.string.account_setup_button_next),
onClick = onNextClick,
)
}
}
@Composable
@DevicePreviews
internal fun AccountManualConfigContentK9Preview() {
K9Theme {
AccountManualConfigContent(
onNextClick = { },
onBackClick = { },
)
}
}
@Composable
@DevicePreviews
internal fun AccountManualConfigContentThunderbirdPreview() {
ThunderbirdTheme {
AccountManualConfigContent(
onNextClick = { },
onBackClick = { },
)
}
}

View file

@ -0,0 +1,14 @@
package app.k9mail.feature.account.setup.ui.manualconfig
import androidx.compose.runtime.Composable
@Composable
fun AccountManualConfigScreen(
onNextClick: () -> Unit,
onBackClick: () -> Unit,
) {
AccountManualConfigContent(
onNextClick = onNextClick,
onBackClick = onBackClick,
)
}

View file

@ -0,0 +1,99 @@
package app.k9mail.feature.account.setup.ui.options
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import app.k9mail.core.ui.compose.common.DevicePreviews
import app.k9mail.core.ui.compose.designsystem.atom.button.Button
import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonOutlined
import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline5
import app.k9mail.core.ui.compose.designsystem.template.LazyColumnWithHeaderFooter
import app.k9mail.core.ui.compose.designsystem.template.ResponsiveContentWithBackground
import app.k9mail.core.ui.compose.theme.K9Theme
import app.k9mail.core.ui.compose.theme.MainTheme
import app.k9mail.core.ui.compose.theme.ThunderbirdTheme
import app.k9mail.feature.account.setup.R
@Composable
internal fun AccountOptionsContent(
onFinishClick: () -> Unit,
onBackClick: () -> Unit,
modifier: Modifier = Modifier,
) {
ResponsiveContentWithBackground(
modifier = modifier,
) {
LazyColumnWithHeaderFooter(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.SpaceEvenly,
horizontalAlignment = Alignment.CenterHorizontally,
footer = {
AccountOptionsFooter(
onFinishClick = onFinishClick,
onBackClick = onBackClick,
)
},
) {
item {
TextHeadline5(text = "Options")
}
}
}
}
@Composable
private fun AccountOptionsFooter(
onFinishClick: () -> Unit,
onBackClick: () -> Unit,
modifier: Modifier = Modifier,
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(
start = MainTheme.spacings.quadruple,
top = MainTheme.spacings.triple,
end = MainTheme.spacings.quadruple,
bottom = MainTheme.spacings.double,
)
.then(modifier),
horizontalArrangement = Arrangement.SpaceBetween,
) {
ButtonOutlined(
text = stringResource(id = R.string.account_setup_button_back),
onClick = onBackClick,
)
Button(
text = stringResource(id = R.string.account_setup_button_finish),
onClick = onFinishClick,
)
}
}
@Composable
@DevicePreviews
internal fun AccountOptionsContentK9Preview() {
K9Theme {
AccountOptionsContent(
onFinishClick = { },
onBackClick = { },
)
}
}
@Composable
@DevicePreviews
internal fun AccountOptionsContentThunderbirdPreview() {
ThunderbirdTheme {
AccountOptionsContent(
onFinishClick = { },
onBackClick = { },
)
}
}

View file

@ -0,0 +1,14 @@
package app.k9mail.feature.account.setup.ui.options
import androidx.compose.runtime.Composable
@Composable
fun AccountOptionsScreen(
onFinishClick: () -> Unit,
onBackClick: () -> Unit,
) {
AccountOptionsContent(
onFinishClick = onFinishClick,
onBackClick = onBackClick,
)
}

View file

@ -3,4 +3,5 @@
<string name="account_setup_title">K-9 Mail</string>
<string name="account_setup_button_next">Next</string>
<string name="account_setup_button_back">Back</string>
<string name="account_setup_button_finish">Finish</string>
</resources>