HTML display password without

Question

I would like the admin user of my app to be able to invite new users.

The flow is:

admin user input new user name and email
generate a random password for the new user
display name, email and password for review
admin user click a button, and ajax sends name, email and password to server
server create new user

The rest is easy, except for step 3.

What I want is something like: <p>{password}</p>, and it will be displayed as ****** for default.

If admin user want to see the password, click some button and the password will show as normal text.

I know how to do this with <input>, but is it possible without using <input>?

My current solution is managing a show state for the <p> with javascript, if show === false, display <p>********</p>, else display <p>{password}</p>.

But I'd be happy to see a simpler solution without javascript.

UPDATE

A slightly different solution based on this; password keeps showing even when mouse moved away.

Any element with a tabindex

could be focused

p {
    position: relative;
    width: 100px;
}
p:after{
    content: '*****';
    position: absolute;
    background-color: white;
    right: 0;
    left: 0;
    top:0;
}
p:focus:after{
    content: ''
}

<p tabindex="-1">password1</p>
<p tabindex="-1">password2</p>

You can display the actual password behind the `*******`, then set the hidden part's display to `none` when the button is focussed — , Jan 13 '21 at 09:00
Do you store passwords in plain text or how do you want to display it? I certainly wouldn't do that. — Jax-p, Jan 13 '21 at 09:01
Please visit the [help], take the [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output using the `[<>]` snippet editor. — mplungjan, Jan 13 '21 at 09:01
This is not a secure way to register new users. Nobody, even admins, should be able to know what a user's password is. — phuzi, Jan 13 '21 at 09:05
@phuzi - Then how does the admin convey the password to the user, as they often have to do? This is not an unusual flow. Google uses it for GSuite, for instance. — T.J. Crowder, Jan 13 '21 at 09:07
@T.J.Crowder They shouldn't have to. Send the user an invite email with a specially crafted link asking them to set a password, similar to a password reset email. — phuzi, Jan 13 '21 at 09:11
@phuzi This is an in-house app, and the flow is determined. New users are asked to change their passwords after first login. HR manages all registration and auth-related things — CSSer, Jan 13 '21 at 09:15
@mplungjan If you did read through my question, you wouldn't say that. — CSSer, Jan 13 '21 at 09:16
@phuzi - When you can do that, that's what you do. Sometimes you can't, for any number of reasons. For instance, onboarding a new user who can't access their email yet. Or is locked out of it. Etc. This is perfectly normal. Windows, GSuite, standard Linux admin, ..., these all have ways for an admin to set the password (and thus know it). You have the user change it right away. — T.J. Crowder, Jan 13 '21 at 09:20

ahmad · Accepted Answer · 2021-01-13T10:03:29.317

1

try this

  [data-pass]:hover:after {
     content: attr(data-pass);
}

  
  <p data-pass="{password}">********</p>

now could be selected

p {
    position: relative;
    width: 100px;
}
p:after{
    content: '*****';
    position: absolute;
    background-color: white;
    right: 0;
    left: 0;
    top:0;
}
p:hover:after{
    content: ''
}

<p>{password}</p>

edited Jan 13 '21 at 10:03

answered Jan 13 '21 at 09:25

ahmad

72
3

score 0 · Answer 2 · answered Jan 13 '21 at 09:35

Thanks @ahmad, I came up with this. Would be better if the text could be selected... (pseudo element can't be selected)

[data-pass]:before {
    content: "****";
}
[data-pass]:hover:before {
    content: "";
}
[data-pass]:hover:after {
    content: attr(data-pass);
}

<p data-pass="{password}"></p>

score 0 · Answer 3 · answered Jan 13 '21 at 09:52

Alternative

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked~.remove-check {
  display: none;
}

input[type=checkbox]:checked~#password {
  display: block;
}

#password {
  display: none;
  position:absolute;
  top:0; left:0; background-color:yellow;
  padding:0; margin:0;
}

<label class="remove-check" for="chk">*****</label><input id="chk" type="checkbox">
<p id="password">{password}</p>

HTML display password without

3 Answers3