Add Passwordnput molecule

This commit is contained in:
Wolf-Martell Montwé 2023-05-10 16:54:43 +02:00
parent 8d0139d6ae
commit 951bd10ddf
No known key found for this signature in database
GPG key ID: 6D45B21512ACBF72
3 changed files with 93 additions and 0 deletions

View file

@ -14,9 +14,11 @@ import app.k9mail.core.ui.compose.designsystem.atom.text.TextSubtitle1
import app.k9mail.core.ui.compose.designsystem.molecule.EmailAddressInput
import app.k9mail.core.ui.compose.designsystem.molecule.ErrorView
import app.k9mail.core.ui.compose.designsystem.molecule.LoadingView
import app.k9mail.core.ui.compose.designsystem.molecule.PasswordInput
import app.k9mail.core.ui.compose.theme.MainTheme
import app.k9mail.ui.catalog.helper.WithRememberedState
@Suppress("LongMethod")
fun LazyGridScope.moleculeItems() {
sectionHeaderItem(text = "Molecules")
item {
@ -62,6 +64,28 @@ fun LazyGridScope.moleculeItems() {
}
}
}
item {
MoleculeWrapper(title = "PasswordInput") {
WithRememberedState(input = "") { state ->
PasswordInput(
password = state.value,
onPasswordChange = { state.value = it },
)
}
}
}
item {
MoleculeWrapper(title = "PasswordInput with error") {
WithRememberedState(input = "wrong password") { state ->
PasswordInput(
password = state.value,
onPasswordChange = { state.value = it },
errorMessage = "Invalid password",
)
}
}
}
}
@Composable

View file

@ -0,0 +1,68 @@
package app.k9mail.core.ui.compose.designsystem.molecule
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.layout.Column
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 androidx.compose.ui.tooling.preview.Preview
import app.k9mail.core.ui.compose.designsystem.R
import app.k9mail.core.ui.compose.designsystem.atom.text.TextCaption
import app.k9mail.core.ui.compose.designsystem.atom.textfield.TextFieldOutlinedPassword
import app.k9mail.core.ui.compose.theme.MainTheme
import app.k9mail.core.ui.compose.theme.PreviewWithThemes
@Composable
fun PasswordInput(
onPasswordChange: (String) -> Unit,
modifier: Modifier = Modifier,
password: String = "",
errorMessage: String? = null,
) {
Column(
modifier = Modifier
.padding(
horizontal = MainTheme.spacings.double,
vertical = MainTheme.spacings.default,
)
.then(modifier),
horizontalAlignment = Alignment.CenterHorizontally,
) {
TextFieldOutlinedPassword(
value = password,
onValueChange = onPasswordChange,
label = stringResource(id = R.string.designsystem_molecule_password_input_label),
isError = errorMessage != null,
)
AnimatedVisibility(visible = errorMessage != null) {
TextCaption(
text = errorMessage ?: "",
modifier = Modifier.padding(top = MainTheme.spacings.default),
color = MainTheme.colors.error,
)
}
}
}
@Preview(showBackground = true)
@Composable
internal fun PasswordInputPreview() {
PreviewWithThemes {
PasswordInput(
onPasswordChange = {},
)
}
}
@Preview(showBackground = true)
@Composable
internal fun PasswordInputWithErrorPreview() {
PreviewWithThemes {
PasswordInput(
onPasswordChange = {},
errorMessage = "Password error",
)
}
}

View file

@ -3,5 +3,6 @@
<string name="designsystem_atom_password_textfield_hide_password">Hide password</string>
<string name="designsystem_atom_password_textfield_show_password">Show password</string>
<string name="designsystem_molecule_email_address_input_label">Email address</string>
<string name="designsystem_molecule_password_input_label">Password</string>
<string name="designsystem_molecule_error_view_button_retry">Retry</string>
</resources>