Add a TextField asking for OTP

This commit is contained in:
Lonami Exo 2022-10-11 15:40:11 +02:00
parent 104d0cabad
commit e8624b5635
3 changed files with 89 additions and 7 deletions

View File

@ -0,0 +1,37 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="PreviewAnnotationInFunctionWithParameters" enabled="true" level="ERROR" enabled_by_default="true">
<option name="composableFile" value="true" />
<option name="previewFile" value="true" />
</inspection_tool>
<inspection_tool class="PreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
<option name="composableFile" value="true" />
<option name="previewFile" value="true" />
</inspection_tool>
<inspection_tool class="PreviewFontScaleMustBeGreaterThanZero" enabled="true" level="ERROR" enabled_by_default="true">
<option name="composableFile" value="true" />
<option name="previewFile" value="true" />
</inspection_tool>
<inspection_tool class="PreviewMultipleParameterProviders" enabled="true" level="ERROR" enabled_by_default="true">
<option name="composableFile" value="true" />
<option name="previewFile" value="true" />
</inspection_tool>
<inspection_tool class="PreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
<option name="composableFile" value="true" />
<option name="previewFile" value="true" />
</inspection_tool>
<inspection_tool class="PreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
<option name="composableFile" value="true" />
<option name="previewFile" value="true" />
</inspection_tool>
<inspection_tool class="PreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
<option name="composableFile" value="true" />
<option name="previewFile" value="true" />
</inspection_tool>
<inspection_tool class="PreviewPickerAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
<option name="composableFile" value="true" />
<option name="previewFile" value="true" />
</inspection_tool>
</profile>
</component>

View File

@ -35,12 +35,16 @@ class MainActivity : ComponentActivity() {
} }
} }
fun isPhoneValid(phone: String): Boolean { enum class LoginStage {
return phone.trim('+', ' ').isNotEmpty() ASK_PHONE,
ASK_CODE,
} }
fun isPhoneValid(phone: String): Boolean = phone.trim('+', ' ').isNotEmpty()
fun isLoginCodeValid(code: String): Boolean = code.trim().count { it.isDigit() } == 5
@Composable @Composable
fun PhoneInput(phone: String, onPhoneChanged: (String) -> Unit) { fun PhoneInput(phone: String, onPhoneChanged: (String) -> Unit, onSendCode: () -> Unit) {
Text(stringResource(R.string.enter_phone)) Text(stringResource(R.string.enter_phone))
TextField( TextField(
phone, phone,
@ -55,16 +59,46 @@ fun PhoneInput(phone: String, onPhoneChanged: (String) -> Unit) {
onValueChange = onPhoneChanged onValueChange = onPhoneChanged
) )
Spacer(Modifier.height(16.dp)) Spacer(Modifier.height(16.dp))
Button(enabled = isPhoneValid(phone), modifier = Modifier.fillMaxWidth(), onClick = { Button(
enabled = isPhoneValid(phone),
}) { modifier = Modifier.fillMaxWidth(),
onClick = onSendCode
) {
Text(stringResource(R.string.send_otp)) Text(stringResource(R.string.send_otp))
} }
} }
@Composable
fun OtpInput(otp: String, onOtpChanged: (String) -> Unit, onConfirmOtp: () -> Unit) {
Text(stringResource(R.string.enter_otp))
TextField(
otp,
label = { Text(stringResource(R.string.otp)) },
placeholder = { Text(stringResource(R.string.otp_example)) },
singleLine = true,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Number,
imeAction = ImeAction.Done
),
modifier = Modifier.fillMaxWidth(),
onValueChange = onOtpChanged
)
Spacer(Modifier.height(16.dp))
Button(
enabled = isLoginCodeValid(otp),
modifier = Modifier.fillMaxWidth(),
onClick = onConfirmOtp
) {
Text(stringResource(R.string.do_login))
}
}
@Composable @Composable
fun Login() { fun Login() {
var stage by remember { mutableStateOf(LoginStage.ASK_PHONE) }
var phone by remember { mutableStateOf("") } var phone by remember { mutableStateOf("") }
var otp by remember { mutableStateOf("") }
Column( Column(
modifier = Modifier modifier = Modifier
.fillMaxSize() .fillMaxSize()
@ -80,7 +114,15 @@ fun Login() {
.wrapContentWidth(Alignment.CenterHorizontally) .wrapContentWidth(Alignment.CenterHorizontally)
.padding(16.dp) .padding(16.dp)
) )
PhoneInput(phone, onPhoneChanged = { phone = it }) when (stage) {
LoginStage.ASK_PHONE -> PhoneInput(
phone,
onPhoneChanged = { phone = it },
onSendCode = { stage = LoginStage.ASK_CODE })
LoginStage.ASK_CODE -> OtpInput(otp, onOtpChanged = { otp = it }, onConfirmOtp = {
})
}
} }
} }

View File

@ -5,5 +5,8 @@
<string name="phone_international">Phone (international format)</string> <string name="phone_international">Phone (international format)</string>
<string name="phone_example">+34 600 000 000</string> <string name="phone_example">+34 600 000 000</string>
<string name="send_otp">Send code</string> <string name="send_otp">Send code</string>
<string name="enter_otp">Enter the code you received:</string>
<string name="otp">Code</string>
<string name="otp_example">12345</string>
<string name="do_login">Login</string> <string name="do_login">Login</string>
</resources> </resources>