relay/relay_registration_form.html (70 lines of code) (raw):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration Forms</title>
<link rel="stylesheet" href="css/base.css"/>
</head>
<body>
<h2>Registration form with username & password:</h2>
<h4>The relay entry should be displayed alongside the login list if a login is saved for this site.</h4>
<form name="signup" class="alignedLabels" action="success.html" method="GET">
<label>email: <input name="e" type="email" autocomplete="email" size="30"/></label>
<label>password: <input name="p" type="password" autocomplete="new-password" size="30"/></label>
<label>
<input type=submit value="Register">
<button type=button onclick="onFillInClicked(this)">Fill Form</button>
<button type=reset>Reset</button>
</label>
</form>
<h2>Registration form with only an email field:</h2>
<h4>The relay entry should be displayed alongside form history entries if the user has saved form history for this input.</h4>
<form name="signup" class="alignedLabels" action="success.html" method="GET">
<label>email: <input name="e" type="email" autocomplete="email" size="30"/></label>
<label>
<input type=submit value="Register">
<button type=button onclick="onFillInClicked(this)">Fill Form</button>
<button type=reset>Reset</button>
</label>
</form>
<h2>Registration form with address fields:</h2>
<h4>The relay entry should be displayed alongside saved address entries if the user has a saved address record.</h4>
<form name="signup" class="alignedLabels" action="success.html" method="GET">
<label>email: <input name="e" type="email" autocomplete="email" size="30"/></label>
<label>name: <input autocomplete="name" size="30"></label>
<label>organization: <input autocomplete="organization" size="30"></label>
<label>street-address: <input autocomplete="street-address" size="30"></label>
<label>
<input type=submit value="Register">
<button type=button onclick="onFillInClicked(this)">Fill Form</button>
<button type=reset>Reset</button>
</label>
</form>
</body>
<script>
function onFillInClicked(button) {
console.warn('No associated form found.');
const form = button.closest('form');
if (!form) {
console.warn('No associated form found.');
return;
}
const autofillData = {
'email': 'john.doe@mozilla.org',
'username': 'john',
'new-password': 'this_is_a_test_password',
'street-address': '331 E Evelyn Ave',
'name': 'John Doe',
'organization': 'Mozilla'
};
const inputs = form.querySelectorAll('input');
inputs.forEach(input => {
const type = input.getAttribute('autocomplete');
if (type && autofillData[type]) {
input.value = autofillData[type];
}
});
}
</script>
</html>