Login/Registration screens

Replaces !3 (closed)

Closes #22 (closed)

src/main/kotlin/org/briarproject/briar/desktop/dialogs/Login.kt

@@ -9,59 +9,82 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.Button
 import androidx.compose.material.OutlinedTextField
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
 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.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.svgResource
+import androidx.compose.ui.input.key.Key
+import androidx.compose.ui.input.key.KeyEventType
+import androidx.compose.ui.input.key.key
+import androidx.compose.ui.input.key.onPreviewKeyEvent
+import androidx.compose.ui.input.key.type
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.unit.dp
 
 // TODO: Error handling
+@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun Login(
-    title: String,
     modifier: Modifier = Modifier,
     onResult: (result: String) -> Unit
-) =
+) {
+    var password by remember { mutableStateOf("") }
+    val initialFocusRequester = remember { FocusRequester() }
     Column(
         modifier = modifier.padding(16.dp).fillMaxSize(),
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
-        TheImage()
+        BriarLogo()
         Spacer(Modifier.height(32.dp))
-        TheTextField(onResult)
-    }
-
-@Composable
-private fun TheImage() {
-    Image(
-        painter = svgResource("images/logo_circle.svg"),
-        contentDescription = "Briar logo",
-        modifier = Modifier
-            .fillMaxWidth()
-            .clip(shape = RoundedCornerShape(400.dp))
-    )
-}
+        OutlinedTextField(
+            value = password,
+            onValueChange = { password = it },
+            label = { Text("Password") },
+            singleLine = true,
+            textStyle = TextStyle(color = Color.White),
+            visualTransformation = PasswordVisualTransformation(),
+            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password, imeAction = ImeAction.Done),
+            keyboardActions = KeyboardActions(onDone = { onResult.invoke(password) }),
+            modifier = Modifier
+                .focusRequester(initialFocusRequester)
+                .onPreviewKeyEvent {
+                    if (it.type == KeyEventType.KeyUp && it.key == Key.Enter) {
+                        onResult.invoke(password)
+                    }
+                    false
+                },
+        )
+        Spacer(Modifier.height(16.dp))
+        Button(onClick = { onResult.invoke(password) }) {
+            Text("Login", color = Color.Black)
+        }
 
-@Composable
-private fun TheTextField(onResult: (result: String) -> Unit) {
-    var password by remember { mutableStateOf("") }
-    OutlinedTextField(password, { password = it }, label = { Text("Password") })
-    Spacer(Modifier.height(16.dp))
-    Button(
-        onClick = {
-            onResult.invoke(password)
+        DisposableEffect(Unit) {
+            initialFocusRequester.requestFocus()
+            onDispose { }
         }
-    ) {
-        Text("Login", color = Color.Black)
     }
 }
+
+@Composable
+fun BriarLogo(modifier: Modifier = Modifier.fillMaxWidth().clip(shape = RoundedCornerShape(400.dp))) =
+    Image(painterResource("images/logo_circle.svg"), "Briar logo", modifier)