Open sebkur opened 1 year ago
While it's relatively simple to create a password field from OutlinedTextField
using PasswordVisualTransformation
it does not seem to be so easy to modify these kind of things mentioned above. I'm wondering if the way to go is try to modify the normal text field behavior or would it be better if there was a library Composable for a proper password text field?
For comparison, a Swing JPasswordField
does implement this behavior:
import java.awt.Dimension
import javax.swing.BoxLayout
import javax.swing.JFrame
import javax.swing.JLabel
import javax.swing.JPanel
import javax.swing.JPasswordField
fun main() {
val frame = JFrame("Password test")
frame.defaultCloseOperation = JFrame.EXIT_ON_CLOSE
val panel = JPanel()
panel.layout = BoxLayout(panel, BoxLayout.Y_AXIS)
frame.contentPane = panel
val text = JLabel("Enter a password below:")
val password = JPasswordField()
password.maximumSize = Dimension(Integer.MAX_VALUE, password.minimumSize.height)
panel.add(text)
panel.add(password)
frame.size = Dimension(800, 600)
frame.isVisible = true
}
My colleague pointed me to the tutorial on modifying the context menu. I thought this might help in improving the password text field behavior, however I have some problems with it:
I discovered something interesting though: CoreTextField
already has some special logic for the case when the PasswordVisualTransformation is applied to it: https://github.com/JetBrains/compose-multiplatform-core/blob/jb-main/compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/text/CoreTextField.kt#L417
disables the copy and ContextMenu
var text by remember { mutableStateOf("input password") }
CustomTextMenuProvider {
OutlinedTextField(
value = text,
onValueChange = { text = it },
label = { Text("disable copy example") }
)
}
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CustomTextMenuProvider(content: @Composable () -> Unit) {
CompositionLocalProvider(
LocalTextContextMenu provides object : TextContextMenu {
@Composable
override fun Area(
textManager: TextContextMenu.TextManager,
state: ContextMenuState,
content: @Composable () -> Unit
) {
val localization = LocalLocalization.current
val items = {
listOfNotNull(
textManager.paste?.let {
ContextMenuItem(localization.paste, it)
},
)
}
ContextMenuArea(items, state, content = content)
}
},
LocalClipboardManager provides object : ClipboardManager {
// paste
override fun getText(): AnnotatedString? {
return AnnotatedString(Toolkit.getDefaultToolkit().systemClipboard.getContents(null).toString())
}
// copy
override fun setText(text: AnnotatedString) {}
},
content = content
)
}
Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.
I think its common for password fields to have copying and cutting text out of them disabled. Pasting should still be possible for people to paste passwords e.g. from password managers, however it's not common to be able to cut or copy text out of them using keyboard shortcuts (Ctrl-C, Ctrl-X, Command-C, Command-X) or by selecting the text and right clicking with the mouse, then selecting "Cut" or "Copy" from there.
We have a password field in our app that employs
PasswordVisualTransformation
to make characters typed unreadable. While not strictly necessary for this example, it also has a trailing button to toggle visibility of the password, i.e. toggle the password visual transformation.Now to disable the ability to cut and copy text from the field, we came up with the solution to provide a modified clipboard manager using
CompositionLocalProvider
. It effectively makes it impossible to copy anything to the clipboard, however, the UX is not optimal. It's still possible to Ctrl-X cut the text into nirvana. Also, when disabling the password transformation using the trailing button, the text can be selected and right clicked, revealing the usual context menu with "copy" and "cut" actions. While they don't put anything into the clipboard either, it would be better if those buttons were not there in the first place.I found a few hacky solutions on the web, but they seem to only work on Android, not on desktop:
For reference, here's example code with the custom clipboard manager in place: