Skip to content

Commit

Permalink
refactor auth screen ui - password and username input
Browse files Browse the repository at this point in the history
  • Loading branch information
stslex committed Aug 2, 2023
1 parent e1f3762 commit 8191b9b
Show file tree
Hide file tree
Showing 16 changed files with 370 additions and 91 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ fun ErrorSnackbar(
} else {
MaterialTheme.colorScheme.onErrorContainer
}

Snackbar(
modifier = modifier
.padding(AppDimens.Padding.medium)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ object AppDimens {

object Padding {

val smallest = 4.dp
val small = 8.dp
val medium = 16.dp
val big = 32.dp
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import android.content.res.Configuration
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SnackbarHost
Expand All @@ -14,18 +16,22 @@ import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.tooling.preview.Preview
import com.stslex.aproselection.core.ui.components.ErrorSnackbar
import com.stslex.aproselection.core.ui.theme.AppDimens
import com.stslex.aproselection.core.ui.theme.AppTheme
import com.stslex.aproselection.feature.auth.R
import com.stslex.aproselection.feature.auth.ui.components.AuthBottomText
import com.stslex.aproselection.feature.auth.ui.components.AuthFieldsColumn
import com.stslex.aproselection.feature.auth.ui.components.AuthTitle
import com.stslex.aproselection.feature.auth.ui.model.ScreenLoadingState
import com.stslex.aproselection.feature.auth.ui.model.mvi.ScreenState
import com.stslex.aproselection.feature.auth.ui.model.screen.AuthScreenState
import com.stslex.aproselection.feature.auth.ui.model.screen.rememberAuthScreenState
import com.stslex.aproselection.feature.auth.ui.model.screen.text_field.UsernameTextFieldState
import kotlinx.coroutines.flow.MutableSharedFlow
import kotlinx.coroutines.flow.MutableStateFlow

Expand Down Expand Up @@ -90,47 +96,32 @@ fun AuthScreenContent(

@Composable
fun AuthUsernameTextField(
inputUsername: String,
onTextChange: (String) -> Unit,
state: UsernameTextFieldState,
modifier: Modifier = Modifier
) {
TextField(
modifier = modifier,
value = inputUsername,
onValueChange = { value ->
if (inputUsername != value) {
onTextChange(value)
}
},
modifier = modifier
.fillMaxWidth(),
value = state.text,
onValueChange = state::onTextChange,
singleLine = true,
label = {
Text(text = "username")
}
)
}

@Composable
fun AuthPasswordTextField(
inputPassword: String,
onTextChange: (String) -> Unit,
modifier: Modifier = Modifier
) {
TextField(
modifier = modifier,
value = inputPassword,
onValueChange = { value ->
if (inputPassword != value) {
onTextChange(value)
}
Text(
text = stringResource(id = R.string.auth_username_text)
)
},
singleLine = true,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Email,
imeAction = ImeAction.Next
),
supportingText = {
Text(text = "enter password")
Box(modifier = Modifier.fillMaxWidth()) {
Text(
modifier = Modifier.align(Alignment.CenterEnd),
text = state.supportingEndText
)
}
},
visualTransformation = PasswordVisualTransformation(),
label = {
Text(text = "password")
}
)
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import com.stslex.aproselection.feature.auth.ui.model.AuthFieldsState
import com.stslex.aproselection.feature.auth.ui.model.ErrorType
import com.stslex.aproselection.feature.auth.ui.model.ScreenLoadingState
import com.stslex.aproselection.feature.auth.ui.model.mvi.ScreenAction
import com.stslex.aproselection.feature.auth.ui.model.mvi.ScreenAction.InputAction.PasswordInput
import com.stslex.aproselection.feature.auth.ui.model.mvi.ScreenAction.InputAction.PasswordSubmitInput
import com.stslex.aproselection.feature.auth.ui.model.mvi.ScreenAction.InputAction.UsernameInput
import com.stslex.aproselection.feature.auth.ui.model.mvi.ScreenEvent
import com.stslex.aproselection.feature.auth.ui.model.mvi.ScreenState
import kotlinx.coroutines.flow.MutableSharedFlow
Expand Down Expand Up @@ -37,34 +40,34 @@ class AuthViewModel(

fun process(action: ScreenAction) {
when (action) {
is ScreenAction.UsernameInput -> processUsernameInput(action)
is UsernameInput -> processUsernameInput(action)
is ScreenAction.OnSubmitClicked -> processSubmitClicked()
is ScreenAction.PasswordInput -> processPasswordInput(action)
is ScreenAction.PasswordSubmitInput -> processPasswordSubmitInput(action)
is PasswordInput -> processPasswordInput(action)
is PasswordSubmitInput -> processPasswordSubmitInput(action)
is ScreenAction.OnAuthFieldChange -> processAuthFieldChange()
}
}

private fun processUsernameInput(action: ScreenAction.UsernameInput) {
private fun processUsernameInput(action: UsernameInput) {
_screenState.update { currentValue ->
currentValue.copy(
username = action.value
)
}
}

private fun processPasswordInput(action: ScreenAction.PasswordInput) {
private fun processPasswordInput(action: PasswordInput) {
_screenState.update { currentValue ->
currentValue.copy(
password = action.value
)
}
}

private fun processPasswordSubmitInput(action: ScreenAction.PasswordSubmitInput) {
private fun processPasswordSubmitInput(action: PasswordSubmitInput) {
_screenState.update { currentValue ->
currentValue.copy(
passwordSubmit = action.value
passwordSubmit = action.value,
)
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,16 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import com.stslex.aproselection.core.ui.theme.AppDimens
import com.stslex.aproselection.core.ui.theme.AppTheme
import com.stslex.aproselection.feature.auth.ui.AuthPasswordTextField
import com.stslex.aproselection.feature.auth.R
import com.stslex.aproselection.feature.auth.ui.AuthUsernameTextField
import com.stslex.aproselection.feature.auth.ui.model.mvi.ScreenState
import com.stslex.aproselection.feature.auth.ui.model.screen.AuthScreenState
Expand All @@ -29,29 +31,22 @@ fun AuthFieldsColumn(
modifier: Modifier = Modifier
) {
Column(
modifier = modifier,
modifier = modifier.padding(
horizontal = AppDimens.Padding.big
),
horizontalAlignment = Alignment.CenterHorizontally
) {
AuthUsernameTextField(
inputUsername = state.username,
onTextChange = state::onUsernameChange
)
AuthUsernameTextField(state.usernameState)
Spacer(Modifier.height(AppDimens.Padding.medium))
AuthPasswordTextField(
inputPassword = state.password,
onTextChange = state::onPasswordChange
)
AuthPasswordTextField(state.passwordEnterState)
AnimatedVisibility(
visible = state.isRegisterState
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
Spacer(modifier = Modifier.height(AppDimens.Padding.small))
AuthPasswordTextField(
inputPassword = state.passwordSubmit,
onTextChange = state::onPasswordSubmitChange
)
AuthPasswordTextField(state.passwordSubmitState)
}
}
Spacer(Modifier.height(AppDimens.Padding.big))
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
package com.stslex.aproselection.feature.auth.ui.components

import android.content.res.Configuration
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
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.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.tooling.preview.Preview
import com.stslex.aproselection.core.ui.theme.AppTheme
import com.stslex.aproselection.feature.auth.ui.model.screen.text_field.PasswordTextFieldState

@Composable
fun AuthPasswordTextField(
state: PasswordTextFieldState,
modifier: Modifier = Modifier
) {
TextField(
modifier = modifier
.fillMaxWidth(),
value = state.text,
onValueChange = state::onTextChange,
singleLine = true,
supportingText = {
Box(modifier = Modifier.fillMaxWidth()) {
Text(
modifier = Modifier.align(Alignment.CenterStart),
text = stringResource(id = state.hint)
)
Text(
modifier = Modifier.align(Alignment.CenterEnd),
text = state.supportingEndText
)
}
},
visualTransformation = state.visualTransformation.value,
label = {
Text(text = stringResource(state.label))
},
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Password,
imeAction = ImeAction.Next
),
trailingIcon = {
IconButton(
onClick = state::onPasswordHideClicked
) {
Icon(
painter = painterResource(id = state.trailingIconRes.value),
contentDescription = null
)
}
},
)
}

@Preview(
device = "id:pixel_6", showSystemUi = true, showBackground = true,
uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL
)
@Composable
fun AuthPasswordTextFieldPreview() {
AppTheme {
var text by remember {
mutableStateOf("text")
}
Box(
modifier = Modifier
.fillMaxSize()
.background(MaterialTheme.colorScheme.background)
) {
// AuthPasswordTextField(
// modifier = Modifier.align(Alignment.Center),
// inputPassword = text,
// onTextChange = { value ->
// text = value
// },
// hint = "enterPassword",
// supportingEndText = "4/10"
// )
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,24 @@ package com.stslex.aproselection.feature.auth.ui.model.mvi

sealed interface ScreenAction {

data class UsernameInput(
val value: String
) : ScreenAction
data object OnSubmitClicked : ScreenAction

data class PasswordInput(
val value: String
) : ScreenAction
data object OnAuthFieldChange : ScreenAction

data class PasswordSubmitInput(
val value: String
) : ScreenAction
sealed class InputAction(
open val value: String
) : ScreenAction {

data object OnSubmitClicked : ScreenAction
data class UsernameInput(
override val value: String
) : InputAction(value)

data object OnAuthFieldChange : ScreenAction
data class PasswordInput(
override val value: String
) : InputAction(value)

data class PasswordSubmitInput(
override val value: String
) : InputAction(value)
}
}
Loading

0 comments on commit 8191b9b

Please sign in to comment.