Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mask text in paste textarea #1739

Closed
db39 opened this issue Feb 7, 2024 · 3 comments
Closed

Mask text in paste textarea #1739

db39 opened this issue Feb 7, 2024 · 3 comments
Assignees
@jotaen4tinypilot
Labels
enhancement New feature or request

Comments

@db39
Copy link
Contributor

db39 commented Feb 7, 2024

A user on the forum often enters secrets in TinyPilot's paste textarea. They have suggested an option to mask the text similar to how a password input field would, to prevent anyone seeing the plain text on screen.
@db39 db39 added the enhancement New feature or request label Feb 7, 2024
@bjs169
Copy link

bjs169 commented Feb 7, 2024 •
edited

Thumbs up!

@KamalMikhail
Copy link

+1 from me. I would keep this as the default too, so if a user selects to mask the field it remains masked for future uses until they unmask it.

@jotaen4tinypilot jotaen4tinypilot self-assigned this Mar 26, 2024
This was referenced Mar 26, 2024
Closed
Merged
Merged
Merged
Merged
jotaen4tinypilot added a commit that referenced this issue Apr 1, 2024
@jotaen4tinypilot @jotaen
Add dev utility for opening dialogs after page load (#1767)
066fbc8 
I noticed that when doing UI development in dialogs, it’s quite
cumbersome to having to open the respective dialog via the menu after
each and every page refresh.

So I thought we could introduce a local dev utility for convenience,
that opens a dialog right after loading (or refreshing) the page.

I’ve used this while working on
#1739, and it really was a
great relief to me.


https://github.com/tiny-pilot/tinypilot/assets/83721279/a2c0340e-015b-42ae-825e-41b82c93e612

<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1767"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

---------

Co-authored-by: Jan Heuermann <jan@jotaen.net>
jotaen4tinypilot added a commit that referenced this issue Apr 1, 2024
@jotaen4tinypilot @jotaen
Allow to mask text in paste dialog (#1764)
d2c09f9 
Related #1739.

This PR optionally allows users to mask the input copy in the paste
dialog, for privacy reasons.

- We [explored and discussed some UI approaches
initially](#1763), and the
“redacted text” technique seemed like the best compromise between
simplicity and effectiveness. It’s basically struck-through text with a
stroke thickness that matches the line height.
- I moved down the keyboard hint, to accommodate the toggle button above
the dialog. To me, it would feel justified to style the text as
[subsidiary](https://github.com/tiny-pilot/tinypilot/blob/22b3e8ec354861b948a09ac0c8a14bac1e0952a1/app/templates/styleguide.html#L76-L77)
(i.e., with reduced font size and slightly diminished color).
- After clicking the toggle button, we give focus to the text area,
because it seems likely that the user wants that.


https://github.com/tiny-pilot/tinypilot/assets/83721279/e66827cf-8858-4c82-8ec3-55ab9d87bca6

<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1764"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

---------

Co-authored-by: Jan Heuermann <jan@jotaen.net>
jotaen4tinypilot added a commit that referenced this issue Apr 1, 2024
@jotaen4tinypilot @jotaen
Persist setting whether to mask paste area (#1765)
a492681 
Related #1739. Stacked on
#1764.

This PR preserves the “Mask Input” toggle state of the paste dialog by
storing it as frontend setting. That way, it persists across page
refreshs.

This idea was mentioned [by a user in the
ticket](#1739 (comment)),
and it seems to be a sensible UI feature to me here.
<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1765"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

---------

Co-authored-by: Jan Heuermann <jan@jotaen.net>
jotaen4tinypilot added a commit that referenced this issue Apr 1, 2024
@jotaen4tinypilot @jotaen
Adjust vertical sizing of paste area (#1766)
9cdb7dd 
Related #1739. Stacked on
#1764.

This PR adjusts slightly reduces the initial height of the paste area
(from ~14 to ~10 lines), and allows the user to resize it vertically.

My thinking is that in many cases people probably only paste in short
snippets (such as passwords), so the paste area wouldn’t feel as empty
in this “base case”. Users can still conveniently manage longer text by
resizing the paste area vertically.

<img width="819" alt="Screenshot 2024-03-29 at 15 34 28"
src="https://github.com/tiny-pilot/tinypilot/assets/83721279/cd481e3f-d38e-4cc1-88d4-7d9cbd666f05">

<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1766"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

---------

Co-authored-by: Jan Heuermann <jan@jotaen.net>
@jotaen4tinypilot
Copy link
Contributor

This is done now (see the linked PRs above):

Screenshot 2024-04-01 at 14 24 12

The UI also remembers the last toggle position.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jotaen4tinypilot jotaen4tinypilot

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@KamalMikhail @bjs169 @jotaen4tinypilot @db39