Reorganizing authentication screen code

This commit is contained in:
Z. Charles Dziura 2024-08-20 21:17:30 -04:00
parent e559a3362d
commit d48c47af41
7 changed files with 87 additions and 173 deletions

View file

@ -9,9 +9,8 @@ import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import kotlinx.serialization.Serializable
import software.makeshift.debtpirate.screens.login.LoginFormViewModel
import software.makeshift.debtpirate.screens.login.LoginScreen
import software.makeshift.debtpirate.screens.login.signup.SignUpFormViewModel
import software.makeshift.debtpirate.screens.auth.LoginScreen
import software.makeshift.debtpirate.screens.auth.signup.SignUpFormViewModel
import software.makeshift.debtpirate.ui.theme.DebtPirateTheme
@Serializable
@ -28,7 +27,6 @@ class MainActivity : ComponentActivity() {
NavHost(navController = navController, startDestination = LoginRoute) {
composable<LoginRoute> {
LoginScreen(
loginFormViewModel = viewModel<LoginFormViewModel>(),
signUpFormViewModel = viewModel<SignUpFormViewModel>()
)
}
@ -36,12 +34,4 @@ class MainActivity : ComponentActivity() {
}
}
}
}
//@Preview(showBackground = true)
//@Composable
//fun GreetingPreview() {
// DebtPirateTheme {
// Greeting("Android")
// }
//}
}

View file

@ -0,0 +1,77 @@
package software.makeshift.debtpirate.screens.auth
import android.annotation.SuppressLint
import androidx.compose.foundation.background
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.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import software.makeshift.debtpirate.R
import software.makeshift.debtpirate.screens.auth.signup.SignUpFormViewModel
import software.makeshift.debtpirate.screens.auth.signup.SignUpScreen
@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@Composable
fun LoginScreen(
signUpFormViewModel: SignUpFormViewModel
) {
Scaffold(
modifier = Modifier.fillMaxSize()
) { innerPadding ->
Column {
LoginTopBar(
innerPadding,
modifier = Modifier
.fillMaxWidth()
.weight(1f)
)
val displayName = signUpFormViewModel.displayName.collectAsState()
val emailAddress = signUpFormViewModel.emailAddress.collectAsState()
SignUpScreen(
displayName,
onDisplayNameUpdate = signUpFormViewModel::updateDisplayName,
emailAddress,
onEmailAddressUpdate = signUpFormViewModel::updateEmailAddress,
modifier = Modifier
.weight(3f)
.padding(16.dp)
)
}
}
}
@Composable
private fun LoginTopBar(innerPadding: PaddingValues, modifier: Modifier = Modifier) {
Box(modifier = modifier.background(Color.Green)) {
Text(
text = "Hello from Login! I'm in a box!",
modifier = Modifier.align(Alignment.Center)
)
Row(
modifier = Modifier
.align(Alignment.TopEnd)
.padding(innerPadding)
.padding(16.dp)
)
{
TextButton(onClick = { /*TODO*/ }) {
Text(stringResource(id = R.string.login_screen__sign_in))
}
}
}
}

View file

@ -1,4 +1,4 @@
package software.makeshift.debtpirate.screens.login
package software.makeshift.debtpirate.screens.auth.signin
import android.util.Log
import androidx.compose.foundation.interaction.FocusInteraction
@ -38,7 +38,7 @@ import kotlinx.coroutines.flow.StateFlow
import software.makeshift.debtpirate.R
@Composable
internal fun LoginForm(
internal fun SignInScreen(
usernameState: StateFlow<String>,
passwordState: StateFlow<String>,
onUsernameUpdate: (String) -> Unit,

View file

@ -1,10 +1,10 @@
package software.makeshift.debtpirate.screens.login
package software.makeshift.debtpirate.screens.auth.signin
import androidx.lifecycle.ViewModel
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.asStateFlow
class LoginFormViewModel : ViewModel() {
class SignInViewModel : ViewModel() {
private val _username = MutableStateFlow("")
val username = _username.asStateFlow()

View file

@ -1,4 +1,4 @@
package software.makeshift.debtpirate.screens.login.signup
package software.makeshift.debtpirate.screens.auth.signup
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
@ -25,7 +25,7 @@ import androidx.compose.ui.unit.dp
import software.makeshift.debtpirate.R
@Composable
internal fun SignUpForm(
internal fun SignUpScreen(
displayName: State<String>,
onDisplayNameUpdate: (String) -> Unit,
emailAddress: State<String>,

View file

@ -1,4 +1,4 @@
package software.makeshift.debtpirate.screens.login.signup
package software.makeshift.debtpirate.screens.auth.signup
import androidx.lifecycle.ViewModel
import kotlinx.coroutines.flow.MutableStateFlow

View file

@ -1,153 +0,0 @@
@file:OptIn(ExperimentalMaterial3Api::class)
package software.makeshift.debtpirate.screens.login
import android.annotation.SuppressLint
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.imeNestedScroll
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SecondaryTabRow
import androidx.compose.material3.Tab
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import software.makeshift.debtpirate.R
import software.makeshift.debtpirate.screens.login.signup.SignUpForm
import software.makeshift.debtpirate.screens.login.signup.SignUpFormViewModel
@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@Composable
fun LoginScreen(
loginFormViewModel: LoginFormViewModel,
signUpFormViewModel: SignUpFormViewModel
) {
Scaffold(
modifier = Modifier.fillMaxSize()
) { innerPadding ->
Column {
LoginTopBar(
innerPadding,
modifier = Modifier
.fillMaxWidth()
.weight(1f)
)
val displayName = signUpFormViewModel.displayName.collectAsState()
val emailAddress = signUpFormViewModel.emailAddress.collectAsState()
SignUpForm(
displayName,
onDisplayNameUpdate = signUpFormViewModel::updateDisplayName,
emailAddress,
onEmailAddressUpdate = signUpFormViewModel::updateEmailAddress,
modifier = Modifier
.weight(3f)
.padding(16.dp)
)
}
}
}
@Composable
private fun LoginTopBar(innerPadding: PaddingValues, modifier: Modifier = Modifier) {
Box(modifier = modifier.background(Color.Green)) {
Text(
text = "Hello from Login! I'm in a box!",
modifier = Modifier.align(Alignment.Center)
)
Row(
modifier = Modifier
.align(Alignment.TopEnd)
.padding(innerPadding)
.padding(16.dp)
)
{
TextButton(onClick = { /*TODO*/ }) {
Text(stringResource(id = R.string.login_screen__sign_in))
}
}
}
}
@OptIn(ExperimentalLayoutApi::class)
@Composable
private fun LoginAndSignUpForms(
loginFormViewModel: LoginFormViewModel,
signUpFormViewModel: SignUpFormViewModel,
modifier: Modifier = Modifier
) {
Column(modifier = modifier) {
val pagerState = rememberPagerState(initialPage = 0) { 1 }
SecondaryTabRow(
selectedTabIndex = pagerState.currentPage,
modifier = Modifier.height(48.dp)
) {
Tab(
selected = pagerState.currentPage == 1,
onClick = { pagerState.requestScrollToPage(1) },
text = {
Text(
text = stringResource(id = R.string.login_screen__signup),
)
},
modifier = Modifier.fillMaxHeight()
)
// Tab(
// selected = pagerState.currentPage == 0,
// onClick = { pagerState.requestScrollToPage(0) },
// text = {
// Text(
// text = stringResource(id = R.string.login_screen__login)
// )
// },
// modifier = Modifier.fillMaxHeight()
// )
}
HorizontalPager(
state = pagerState,
modifier = Modifier
.fillMaxSize()
.imePadding()
) { page ->
val formContainerModifier = Modifier
.padding(16.dp)
.fillMaxSize()
.imePadding()
.imeNestedScroll()
when (page) {
0 -> {
SignUpForm(
signUpFormViewModel.displayName.collectAsState(),
signUpFormViewModel::updateDisplayName,
signUpFormViewModel.emailAddress.collectAsState(),
signUpFormViewModel::updateEmailAddress,
formContainerModifier
)
}
}
}
}
}