Typical password-like input field

[tinchodias]

@plantec how do you recommend implementing it?

[plantec]

you ask how to hide the text of the password ?

[tinchodias]

Not hide but replace by an asterisk each character. El vie, 13 sept 2024 a la(s) 9:58 a.m., Alain Plantec ( ***@***.***) escribió:

…

you ask how to hide the text of the password ? — Reply to this email directly, view it on GitHub <#202 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAXHHKLRINZ6GRAZP3ERJPLZWLOPBAVCNFSM6AAAAABOEEEUU6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNBYHEYDCNBYGY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[plantec]

maybe there is a font for that

[Nyan11]

If you only change the font, could you copy/paste the password ?
If yes, would it make it a security issue ?

[tinchodias]

Both are good points :)

For Morphic backend, that is always a reference implementation, it is a font. See RubTextFieldMorph>>#beEncrypted:

beEncrypted
	encrypted := true.
	self textMorph font: (StrikeFont passwordFontSize: self theme textFont pointSize)

where that font is:

I don't know of an existing analogous way to do it for Bloc.

In Morphic, you CAN copy to clipboard (and paste the entered string).

You can test it with:

m := SpRubTextFieldMorph new.
m encrypted: true.
m openInWindow.

and wrapped in Spec:

text := SpTextInputFieldPresenter new.
text bePassword.
text open.

As a reference in HTML, I tested the password input field in this webpage:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
on a Macbook, in Chrome, Firefox and Safari. In all cases, the CMD+c was ignored.
This should be possible to implement. In Morphic, by avoiding the execution of RubTextEditor>>#copySelection when the shortcut is pressed, or when menu item pressed on context menu.

[plantec]

security ?
ok disabling the shortcut can be done easily and it is mandatory to do it for a password textfield.
but it will very easy to hack any image with a script that catch the passwd textfield content ☺️

[tinchodias]

Ok! I'd be nice to disable the copy shortcut (not paste!). In an image with IDE tools disabled, the password will be safe from user point of view. El sáb, 28 sept 2024 a la(s) 6:06 a.m., Alain Plantec ( ***@***.***) escribió:

…

security ? ok disabling the shortcut can be done easily and it is mandatory to do it for a password textfield. but it will very easy to hack any image with a script that catch the passwd textfield content ☺️ — Reply to this email directly, view it on GitHub <#202 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAXHHKNRMHZWQVVZ6UDGPUDZYZWRXAVCNFSM6AAAAABOEEEUU6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBQGU3TKMZTGY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[plantec]

@tinchodias would you introduce a ToPasswordTextField class ?

[tinchodias]

I did some steps on a prototype that handles events on text changing, and stores in an instvar the entered characters but replaces the text in the field with asterisks.

[tinchodias]

Thanks Alain @plantec for your help. For the record, this is a script that converts a text field as a password field:

| filterField |
filterField := ToTextField new withoutLineBreak.
filterField userData at: #input put: filterField text copy.

filterField addEventHandlerOn: AlbTextInsertedEvent do: [ :evt |
	| cursorPosition |
	(filterField userData at: #input)
		insertText: evt text at: evt index.
	cursorPosition := evt target cursor position.
	evt target selecter all; apply.
	evt target inserter
		atEnd;
		string: (String new: evt target text size withAll: $*);
		apply.
	evt target cursor position: cursorPosition ].

filterField addEventHandlerOn: AlbTextDeletedEvent do: [ :evt |
	| cursorPosition |
	(filterField userData at: #input)
		delete: evt fromIndex to: evt toIndex.
	evt target selecter all; apply.
	evt target inserter
		atEnd;
		string: (String new: evt target text size withAll: $*);
		apply.
	evt target cursor position: evt fromIndex - 1 ].

filterField addEventHandlerOn: AlbTextReplacedEvent do: [ :evt |
	(filterField userData at: #input)
		deleteAll;
		insertText: evt text at: 0.
	evt target selecter all; apply.
	evt target inserter
		atEnd;
		string: (String new: evt target text size withAll: $*);
		apply ].

filterField addEditorShortcut: (BlShortcutWithAction new
		 combination: BlKeyCombination return;
		 action: [ :event | (filterField userData at: #input) traceCr ];
		 yourself).

filterField openInSpace

Press enter to see the current password on Transcript.

This works:

• Type character (at the end or anyware)
• Delete character (idem)
• Set password via text: API
• Paste from clipboard
• Bug? Copy (cmd+c) copies asterisks

[tinchodias]

I encapsulated that code into a custom handler... not sure if I do a PR like this or polish it more...

[tinchodias]

For the moment, it's all in this fileout. It includes an example on class-side.

ToPasswordFieldEventHandler.st.zip

[tinchodias]

Another version with a fix (it has another class name):
SpToploPasswordFieldEventHandler.st.zip