#	Showing & Hiding Passwords on Forms

<div markdown="1" id="precis">
Web Forms typically use the special `password` type for password inputs. This hides the password from every body, but unfortunately includes the user. This looks at how to temporarily show the password if the user wants.
</div>



Web Forms typically use the special `password` type for password inputs. This hides the password from every body, but unfortunately includes the user. This looks at how to temporarily show the password if the user wants.

##	The HTML Form

A typical login form includes some sort of user name or email address and a password.

```html
<form id="login" action="">
	<p><label for="login-email">Email Address</label>
		<input type="text" name="email" id="login-email"
			required placeholder="Email Address"></p>
	<p><label for="login-password">Password</label>
		<input type="password" name="password" id="login-password"
			required placeholder="Password"></p>
</form>
```

The `password` field is of type `password`, which shows bullets as you type.

To show the password, we will add a button after the `password` field.

```html
	<p><label for="login-password">Password</label>
		<input type="password" name="password" id="login-password"
			required placeholder="Password">
		<button name="show" title="Show Password">👀</button></p>
```

For the label for the `show` button, I thought the eyes (👀) would be fun.

You can get a pair of eyes in HTML by entering:

```html
<button>&#x1F440;</button>
<button>&#128064;<button>
<button>👀</button>
```

The last one is a bit tricky, but easy enough if you use the MacOS’ Emoji & Symbols. Alternitavely, you can use on of the codes above and copy & paste the result, or just copy it from this article.

## Some CSS

The eyes are facing the wrong way — we want it be looking _away_ from the passord — so we can use the CSS transform:

```css
form#login button[name="show"] {
    transform: scale(-1,1);
}
```

This scales the horizontal dimension by `-1`, effectively flipping it. The vertical dimension is untouched. When the time comes, we will flip it back to indicate that the password is visible.

## The JavaScript

Trick is to temporarily change the `type` of the password field from `password` to `text`.

This will involve the following steps:

- change the `type` to `text`.
- set a custom attribute called `on` so that CSS can re-style the button as a reminder
- use `window.setTimeout()` to queue a function to reverse the above.

Here we will set an arbitrary attribute called `on`. JavaScript will allow you to manipulate any attribute you like, including attributes you make up. Accordingly, CSS, will allow you to select on these attributes. Alternatively, you can use classes.

First, we find the form and form elements, and activate the `show` button:

```javascript
var login=document.querySelector('form#login');
login['show'].onclick=showPassword;
function showPassword(event) {

}
```

Showing the button will be a matter of changing the `type` to `text` and setting the `on` attribute:


```javascript
function showPassword(event) {
	login['password'].type='text';
	login['show'].setAttribute('on',true);
}
```

The next part is to use `setTimeout` to queue a function to reverse the process:

```javascript
function showPassword(event) {
	//	…
	window.setTimeout(function() {
		login['password'].type='password';
		login['show'].removeAttribute('on');
	},10000);
}
```

Finally we _stop_ the button from submitting. By default, a button inside a form will submit the form, unless it is specifically give a `type` of `button` or `reset`. We could have used the following:

```html
<button type="button" name="show" title="Show Password">👀</button>
```

… but it is safer to intercept it in JavaScript. We do this by executing `event.preventDefault()`:

```javascript
function showPassword(event) {
	//	…
	event.preventDefault();
}
```

The Finished Code is:

```javascript
var login=document.querySelector('form#login');
login['show'].onclick=showPassword;
function showPassword(event) {
	login['password'].type='text';
	login['show'].setAttribute('on',true);
	window.setTimeout(function() {
		login['password'].type='password';
		login['show'].removeAttribute('on');
	},10000);
	event.preventDefault();
}
```

## More CSS

To indicate that the password is to be shown, we will change the appearance of the button. This is for both the `:hover` pseudo class, as well as when the `on` attribute is set.

In this case, we will restore the direction of the eyes, as well as increase the size.

This can be done by using `transform: scale(1.6,1.6)`, which means that the horizontal scale is positive again, restoring its original direction, and both scales are larger than 1. More compactly, this can be written as `transform: scale(1.6)`:

```css
form#login button[name="show"]:hover,
form#login button[name="show"][on] {
	transform: scale(1.6);
}
```

The rest of the CSS will help to resize and position the button, and add a bit of animation:

```css
form#login button[name="show"] {
	border: none;
	background-color: transparent;
	font-size: 1.2em;
	position: relative;
	top: 3px;
	left: 2px;
	transition: transform .75s;
	transform: scale(-1,1);
}
form#login button[name="show"]:hover,
form#login button[name="show"][on] {
	transform: scale(1.6);
}
```