Add a TextField asking for phone number

app/src/main/java/dev/lonami/talaria/MainActivity.kt

@@ -3,13 +3,19 @@ package dev.lonami.talaria
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.*
-import androidx.compose.material.MaterialTheme
+import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.material.Surface
+import androidx.compose.material.*
-import androidx.compose.material.Text
+import androidx.compose.runtime.*
-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.text.font.FontWeight
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import dev.lonami.talaria.ui.theme.TalariaTheme
 
 class MainActivity : ComponentActivity() {
@@ -18,23 +24,70 @@ class MainActivity : ComponentActivity() {
         setContent {
             TalariaTheme {
                 // A surface container using the 'background' color from the theme
-                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
+                Surface(
-                    Greeting("Android")
+                    modifier = Modifier.fillMaxSize(),
+                    color = MaterialTheme.colors.background
+                ) {
+                    Login()
                 }
             }
         }
     }
 }
 
+fun isPhoneValid(phone: String): Boolean {
+    return phone.trim('+', ' ').isNotEmpty()
+}
+
 @Composable
-fun Greeting(name: String) {
+fun PhoneInput(phone: String, onPhoneChanged: (String) -> Unit) {
-    Text(text = "Hello $name!")
+    Text(stringResource(R.string.enter_phone))
+    TextField(
+        phone,
+        label = { Text(stringResource(R.string.phone_international)) },
+        placeholder = { Text(stringResource(R.string.phone_example)) },
+        singleLine = true,
+        keyboardOptions = KeyboardOptions(
+            keyboardType = KeyboardType.Phone,
+            imeAction = ImeAction.Done
+        ),
+        modifier = Modifier.fillMaxWidth(),
+        onValueChange = onPhoneChanged
+    )
+    Spacer(Modifier.height(16.dp))
+    Button(enabled = isPhoneValid(phone), modifier = Modifier.fillMaxWidth(), onClick = {
+
+    }) {
+        Text(stringResource(R.string.send_otp))
+    }
+}
+
+@Composable
+fun Login() {
+    var phone by remember { mutableStateOf("") }
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp),
+        verticalArrangement = Arrangement.Center
+    ) {
+        Text(
+            stringResource(R.string.welcome_to, stringResource(R.string.app_name)),
+            fontSize = 24.sp,
+            fontWeight = FontWeight.Bold,
+            modifier = Modifier
+                .fillMaxWidth()
+                .wrapContentWidth(Alignment.CenterHorizontally)
+                .padding(16.dp)
+        )
+        PhoneInput(phone, onPhoneChanged = { phone = it })
+    }
 }
 
 @Preview(showBackground = true)
 @Composable
-fun DefaultPreview() {
+fun LoginPreview() {
     TalariaTheme {
-        Greeting("Android")
+        Login()
     }
 }

app/src/main/res/values/strings.xml

@@ -1,3 +1,9 @@
 <resources>
-    <string name="app_name">Talaria</string>
+    <string name="app_name" translatable="false">Talaria</string>
+    <string name="welcome_to">Welcome to %s</string>
+    <string name="enter_phone">Enter your phone:</string>
+    <string name="phone_international">Phone (international format)</string>
+    <string name="phone_example">+34 600 000 000</string>
+    <string name="send_otp">Send code</string>
+    <string name="do_login">Login</string>
 </resources>