From 87812f6f5cf0d2dae7a89944b82b8b2d9227554b Mon Sep 17 00:00:00 2001
From: Benoit Marty <benoit@matrix.org>
Date: Tue, 22 Nov 2022 10:58:15 +0100
Subject: [PATCH] Improve password field.

---
 .../android/x/features/login/LoginScreen.kt   | 25 ++++++++++++++++---
 .../io.element.android-compose.gradle.kts     |  1 +
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/features/login/src/main/java/io/element/android/x/features/login/LoginScreen.kt b/features/login/src/main/java/io/element/android/x/features/login/LoginScreen.kt
index 7634f87f34..807a4c8b32 100644
--- a/features/login/src/main/java/io/element/android/x/features/login/LoginScreen.kt
+++ b/features/login/src/main/java/io/element/android/x/features/login/LoginScreen.kt
@@ -6,15 +6,18 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Visibility
+import androidx.compose.material.icons.filled.VisibilityOff
 import androidx.compose.material3.*
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 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.text.input.PasswordVisualTransformation
+import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -125,6 +128,11 @@ fun LoginContent(
                             keyboardType = KeyboardType.Text,
                         ),
                     )
+                    var passwordVisible by remember { mutableStateOf(false) }
+                    if (state.isLoggedIn is Loading) {
+                        // Ensure password is hidden when user submits the form
+                        passwordVisible = false
+                    }
                     OutlinedTextField(
                         value = state.password,
                         modifier = Modifier
@@ -135,6 +143,17 @@ fun LoginContent(
                             Text(text = "Password")
                         },
                         isError = isError,
+                        visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
+                        trailingIcon = {
+                            val image =
+                                if (passwordVisible) Icons.Filled.Visibility else Icons.Filled.VisibilityOff
+                            val description =
+                                if (passwordVisible) "Hide password" else "Show password"
+
+                            IconButton(onClick = { passwordVisible = !passwordVisible }) {
+                                Icon(imageVector = image, description)
+                            }
+                        },
                         keyboardOptions = KeyboardOptions(
                             keyboardType = KeyboardType.Password,
                             imeAction = ImeAction.Send,
diff --git a/plugins/src/main/java/io.element.android-compose.gradle.kts b/plugins/src/main/java/io.element.android-compose.gradle.kts
index d9544bd098..ccc0db6937 100644
--- a/plugins/src/main/java/io.element.android-compose.gradle.kts
+++ b/plugins/src/main/java/io.element.android-compose.gradle.kts
@@ -19,6 +19,7 @@ dependencies {
     implementation("androidx.compose.ui:ui")
     implementation("androidx.compose.material:material")
     implementation("androidx.compose.material3:material3")
+    implementation("androidx.compose.material:material-icons-extended")
     implementation("androidx.compose.ui:ui-tooling-preview")
     implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.5.1")
     implementation("androidx.activity:activity-compose:1.6.1")