feat: hide/show password in login

Signed-off-by: Infi <infi@infi.sh>

app/src/main/java/chat/revolt/screens/login/LoginScreen.kt

@@ -13,19 +13,27 @@ import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.text.input.TextObfuscationMode
+import androidx.compose.foundation.text.input.rememberTextFieldState
 import androidx.compose.material3.Button
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SecureTextField
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 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.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.ImeAction
@@ -48,6 +56,7 @@ import chat.revolt.components.generic.AnyLink
 import chat.revolt.components.generic.FormTextField
 import chat.revolt.components.generic.Weblink
 import chat.revolt.persistence.KVStorage
+import chat.revolt.ui.theme.FragmentMono
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.launch
 import javax.inject.Inject
@@ -142,6 +151,12 @@ class LoginViewModel @Inject constructor(
 
 @Composable
 fun LoginScreen(navController: NavController, viewModel: LoginViewModel = hiltViewModel()) {
+    val passwordTextFieldState = rememberTextFieldState()
+    LaunchedEffect(passwordTextFieldState.text) {
+        viewModel.setPassword(passwordTextFieldState.text.toString())
+    }
+    val showPassword = remember { mutableStateOf(false) }
+
     val context = LocalContext.current
 
     LaunchedEffect(viewModel.navigateTo) {
@@ -214,11 +229,38 @@ fun LoginScreen(navController: NavController, viewModel: LoginViewModel = hiltVi
                     onChange = viewModel::setEmail,
                     modifier = Modifier.padding(vertical = 25.dp)
                 )
-                FormTextField(
-                    value = viewModel.password,
-                    label = stringResource(R.string.password),
-                    type = KeyboardType.Password,
-                    onChange = viewModel::setPassword
+                SecureTextField(
+                    passwordTextFieldState,
+                    label = { Text(stringResource(R.string.password)) },
+                    textObfuscationMode = if (showPassword.value) {
+                        TextObfuscationMode.Visible
+                    } else {
+                        TextObfuscationMode.RevealLastTyped
+                    },
+                    textStyle = if (showPassword.value) LocalTextStyle.current else LocalTextStyle.current.copy(
+                        fontFamily = FragmentMono
+                    ),
+                    trailingIcon = {
+                        IconButton(onClick = {
+                            showPassword.value = !showPassword.value
+                        }) {
+                            when {
+                                showPassword.value -> {
+                                    Icon(
+                                        painter = painterResource(R.drawable.ic_eye_off_24dp),
+                                        contentDescription = stringResource(R.string.hide_password)
+                                    )
+                                }
+
+                                else -> {
+                                    Icon(
+                                        painter = painterResource(R.drawable.ic_eye_24dp),
+                                        contentDescription = stringResource(R.string.show_password)
+                                    )
+                                }
+                            }
+                        }
+                    },
                 )
 
                 AnyLink(

app/src/main/res/drawable/ic_eye_24dp.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="24dp"
+    android:width="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#ffffff"
+        android:pathData="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" />
+</vector>

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

@@ -20,6 +20,9 @@
     <string name="email">Email</string>
     <string name="password">Password</string>
 
+    <string name="hide_password">Hide password</string>
+    <string name="show_password">Show password</string>
+
     <string name="login">Log In</string>
     <string name="signup">Sign Up</string>
     <string name="resend">Resend</string>
@@ -670,6 +673,6 @@
     <string name="notification_channel_group_social">Friends and Social</string>
     <string name="notification_channel_friend_requests">Friend Requests</string>
     <string name="notification_channel_friend_requests_description">Incoming friend requests, as well as accepted requests you\'ve sent.</string>
-    
+
     <string name="realtime_service_description">This service enables the app to receive messages and updates in real-time.</string>
 </resources>