Skip to content

Commit

Permalink
Update Material3 and use new secure TextField composables
Browse files Browse the repository at this point in the history
  • Loading branch information
@arkon
arkon committed Oct 5, 2024
1 parent 24fb296 commit 5a0cfd8
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 123 deletions.
73 changes: 0 additions & 73 deletions app/src/main/kotlin/me/echeung/moemoekyun/ui/common/PasswordTextField.kt
View file

This file was deleted.

46 changes: 22 additions & 24 deletions app/src/main/kotlin/me/echeung/moemoekyun/ui/screen/auth/LoginScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,12 @@ 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.foundation.text.input.TextFieldLineLimits
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.foundation.text.input.setTextAndPlaceCursorAtEnd
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedSecureTextField
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
Expand All @@ -16,31 +20,24 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.autofill.AutofillType
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.unit.dp
import cafe.adriel.voyager.core.screen.Screen
import cafe.adriel.voyager.hilt.getScreenModel
import cafe.adriel.voyager.navigator.LocalNavigator
import cafe.adriel.voyager.navigator.currentOrThrow
import me.echeung.moemoekyun.R
import me.echeung.moemoekyun.ui.common.BackgroundBox
import me.echeung.moemoekyun.ui.common.PasswordTextField
import me.echeung.moemoekyun.ui.common.Toolbar
import me.echeung.moemoekyun.ui.util.autofill

object LoginScreen : Screen {

@OptIn(ExperimentalComposeUiApi::class)
@Composable
override fun Content() {
val navigator = LocalNavigator.currentOrThrow
Expand All @@ -49,9 +46,9 @@ object LoginScreen : Screen {
val screenModel = getScreenModel<LoginScreenModel>()
val state by screenModel.state.collectAsState()

var username by remember { mutableStateOf(TextFieldValue("")) }
var password by remember { mutableStateOf(TextFieldValue("")) }
var otpToken by remember { mutableStateOf(TextFieldValue("")) }
val username = rememberTextFieldState("")
val password = rememberTextFieldState("")
val otpToken = rememberTextFieldState("")

LaunchedEffect(state.result) {
if (state.result is LoginScreenModel.Result.Complete) {
Expand All @@ -78,33 +75,34 @@ object LoginScreen : Screen {
.fillMaxWidth()
.autofill(
autofillTypes = listOf(AutofillType.Username),
onFill = { username = TextFieldValue(it) },
onFill = { username.setTextAndPlaceCursorAtEnd(it) },
),
label = { Text(stringResource(R.string.username_or_email)) },
value = username,
onValueChange = { username = it },
singleLine = true,
state = username,
lineLimits = TextFieldLineLimits.SingleLine,
enabled = !state.loading,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Email,
),
)

PasswordTextField(
modifier = Modifier.fillMaxWidth(),
OutlinedSecureTextField(
modifier = Modifier.fillMaxWidth()
.autofill(
autofillTypes = listOf(AutofillType.Password),
onFill = { password.setTextAndPlaceCursorAtEnd(it) },
),
label = { Text(stringResource(R.string.password)) },
value = password,
onValueChange = { password = it },
state = password,
enabled = !state.loading,
)

if (state.requiresMfa) {
OutlinedTextField(
modifier = Modifier.fillMaxWidth(),
label = { Text(stringResource(R.string.mfa_hint)) },
value = otpToken,
onValueChange = { otpToken = it },
singleLine = true,
state = otpToken,
lineLimits = TextFieldLineLimits.SingleLine,
enabled = !state.loading,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Number,
Expand All @@ -116,7 +114,7 @@ object LoginScreen : Screen {
enabled = !state.loading,
onClick = {
screenModel.getOtpTokenFromClipboardOrNull(context)?.let {
otpToken = otpToken.copy(text = it)
otpToken.setTextAndPlaceCursorAtEnd(it)
}
},
) {
Expand All @@ -141,9 +139,9 @@ object LoginScreen : Screen {
enabled = !state.loading,
onClick = {
if (state.requiresMfa) {
screenModel.loginMfa(otpToken.text)
screenModel.loginMfa(otpToken.text.toString())
} else {
screenModel.login(username.text, password.text)
screenModel.login(username.text.toString(), password.text.toString())
}
},
) {
Expand Down
44 changes: 19 additions & 25 deletions app/src/main/kotlin/me/echeung/moemoekyun/ui/screen/auth/RegisterScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,28 @@ 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.foundation.text.input.TextFieldLineLimits
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedSecureTextField
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.unit.dp
import cafe.adriel.voyager.core.screen.Screen
import cafe.adriel.voyager.hilt.getScreenModel
import cafe.adriel.voyager.navigator.LocalNavigator
import cafe.adriel.voyager.navigator.currentOrThrow
import me.echeung.moemoekyun.R
import me.echeung.moemoekyun.ui.common.BackgroundBox
import me.echeung.moemoekyun.ui.common.PasswordTextField
import me.echeung.moemoekyun.ui.common.Toolbar

object RegisterScreen : Screen {
Expand All @@ -51,10 +49,10 @@ object RegisterScreen : Screen {
return
}

var username by remember { mutableStateOf(TextFieldValue("")) }
var email by remember { mutableStateOf(TextFieldValue("")) }
var password1 by remember { mutableStateOf(TextFieldValue("")) }
var password2 by remember { mutableStateOf(TextFieldValue("")) }
val username = rememberTextFieldState("")
val email = rememberTextFieldState("")
val password1 = rememberTextFieldState("")
val password2 = rememberTextFieldState("")

Scaffold(
topBar = { Toolbar(titleResId = R.string.register, showUpButton = true) },
Expand All @@ -73,37 +71,33 @@ object RegisterScreen : Screen {
OutlinedTextField(
modifier = Modifier.fillMaxWidth(),
label = { Text(stringResource(R.string.username)) },
value = username,
onValueChange = { username = it },
singleLine = true,
state = username,
lineLimits = TextFieldLineLimits.SingleLine,
enabled = !state.loading,
)

OutlinedTextField(
modifier = Modifier.fillMaxWidth(),
label = { Text(stringResource(R.string.email)) },
value = email,
onValueChange = { email = it },
singleLine = true,
state = email,
lineLimits = TextFieldLineLimits.SingleLine,
enabled = !state.loading,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Email,
),
)

PasswordTextField(
OutlinedSecureTextField(
modifier = Modifier.fillMaxWidth(),
label = { Text(stringResource(R.string.password)) },
value = password1,
onValueChange = { password1 = it },
state = password1,
enabled = !state.loading,
)

PasswordTextField(
OutlinedSecureTextField(
modifier = Modifier.fillMaxWidth(),
label = { Text(stringResource(R.string.password_confirm)) },
value = password2,
onValueChange = { password2 = it },
state = password2,
enabled = !state.loading,
)

Expand All @@ -125,10 +119,10 @@ object RegisterScreen : Screen {
enabled = !state.loading,
onClick = {
screenModel.register(
username.text,
email.text,
password1.text,
password2.text,
username.text.toString(),
email.text.toString(),
password1.text.toString(),
password2.text.toString(),
)
},
) {
Expand Down
2 changes: 1 addition & 1 deletion gradle/libs.versions.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ coil-core = { module = "io.coil-kt:coil", version.ref = "coil_version" }
coil-gif = { module = "io.coil-kt:coil-gif", version.ref = "coil_version" }
coil-compose = { module = "io.coil-kt:coil-compose", version.ref = "coil_version" }

compose-bom = { module = "androidx.compose:compose-bom", version = "2024.09.02" }
compose-bom = { module = "androidx.compose:compose-bom-alpha", version = "2024.09.03" }
compose-material = { module = "androidx.compose.material:material" }
compose-material-icons-extended = { module = "androidx.compose.material:material-icons-extended" }
compose-material3 = { module = "androidx.compose.material3:material3" }
Expand Down

0 comments on commit 5a0cfd8

Please sign in to comment.