225 lines
6.5 KiB
HTML
225 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title> Registration</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
|
|
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
|
|
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
.button-4 {
|
|
appearance: none;
|
|
background-color: #FAFBFC;
|
|
border: 1px solid rgba(27, 31, 35, 0.15);
|
|
border-radius: 6px;
|
|
box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
|
|
box-sizing: border-box;
|
|
color: #24292E;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
list-style: none;
|
|
padding: 6px 16px;
|
|
position: relative;
|
|
transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
touch-action: manipulation;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.button-4:hover {
|
|
background-color: #F3F4F6;
|
|
text-decoration: none;
|
|
transition-duration: 0.1s;
|
|
}
|
|
|
|
.button-4:disabled {
|
|
background-color: #FAFBFC;
|
|
border-color: rgba(27, 31, 35, 0.15);
|
|
color: #959DA5;
|
|
cursor: default;
|
|
}
|
|
|
|
.button-4:active {
|
|
background-color: #EDEFF2;
|
|
box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
|
|
transition: none 0s;
|
|
}
|
|
|
|
.button-4:focus {
|
|
outline: 1px transparent;
|
|
}
|
|
|
|
.button-4:before {
|
|
display: none;
|
|
}
|
|
|
|
.button-4:-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
.button-54 {
|
|
font-family: "Open Sans", sans-serif;
|
|
font-size: 16px;
|
|
letter-spacing: 2px;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
color: #000;
|
|
cursor: pointer;
|
|
border: 3px solid;
|
|
padding: 0.25em 0.5em;
|
|
box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
|
|
position: relative;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.button-54:active {
|
|
box-shadow: 0px 0px 0px 0px;
|
|
top: 5px;
|
|
left: 5px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.button-54 {
|
|
padding: 0.25em 0.75em;
|
|
}
|
|
}
|
|
.button-10:focus {
|
|
box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
|
|
outline: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
background-color: white;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Add padding to containers */
|
|
.container {
|
|
padding: 16px;
|
|
background-color: white;
|
|
}
|
|
|
|
/* Full-width input fields */
|
|
input[type=text], input[type=password] {
|
|
width: 100%;
|
|
padding: 15px;
|
|
margin: 10px 0 3px 0;
|
|
display: inline-block;
|
|
border-radius: 4px;
|
|
border-color: #dbdbdb;
|
|
background: #fff;
|
|
}
|
|
|
|
input[type=text]:focus, input[type=password]:focus {
|
|
background-color: #ddd;
|
|
outline: none;
|
|
}
|
|
|
|
/* Overwrite default styles of hr */
|
|
hr {
|
|
border: 1px solid #f1f1f1;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
/* Add a blue text color to links */
|
|
a {
|
|
color: dodgerblue;
|
|
}
|
|
|
|
/* Set a grey background color and center the text of the "sign in" section */
|
|
.signin {
|
|
background-color: #f1f1f1;
|
|
text-align: center;
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
function check_pass() {
|
|
if (document.getElementById('psw').value ==
|
|
document.getElementById('psw-repeat').value) {
|
|
document.getElementById('submit').disabled = false;
|
|
document.getElementById('msg').innerHTML = '';
|
|
return false;
|
|
} else {
|
|
document.getElementById('submit').disabled = true;
|
|
document.getElementById('msg').innerHTML = 'not matching';
|
|
return false;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<script>
|
|
function generatePassword() {
|
|
var len=15;
|
|
var length = (len)?(len):(10);
|
|
var string = "abcdefghijklmnopqrstuvwxyz";
|
|
var numeric = '0123456789';
|
|
var punctuation = '!@#$%^&*()_+~`|}{[]\:;?><,./-=';
|
|
var password = "";
|
|
var character = "";
|
|
var crunch = true;
|
|
while( password.length<length ) {
|
|
entity1 = Math.ceil(string.length * Math.random()*Math.random());
|
|
entity2 = Math.ceil(numeric.length * Math.random()*Math.random());
|
|
entity3 = Math.ceil(punctuation.length * Math.random()*Math.random());
|
|
hold = string.charAt( entity1 );
|
|
hold = (password.length%2==0)?(hold.toUpperCase()):(hold);
|
|
character += hold;
|
|
character += numeric.charAt( entity2 );
|
|
character += punctuation.charAt( entity3 );
|
|
password = character;
|
|
}
|
|
password=password.split('').sort(function(){return 0.5-Math.random()}).join('');
|
|
document.getElementById("pde").innerHTML = "generated password: " + password.substr(0,len);
|
|
}
|
|
</script>
|
|
<form action="action_page.php" method="POST">
|
|
<div class="container">
|
|
<a href="index.html" style="color: black"><h1>MAILSERVICENAME</h1></a>
|
|
<p>Please fill in this form to create an account.</p>
|
|
|
|
|
|
<label for="email"><b>Email</b></label>
|
|
<input type="text" placeholder="Enter valid email with corect domain" name="email" id="email" pattern="^\w+([-+.']\w+)*@?(DOMAIN-NAME-HERE.com)$" class="input" title="Enter valid email with corect domain" required>
|
|
|
|
<label for="psw"><b>Password</b></label>
|
|
<input type="password" class="input" placeholder="Enter Password" name="psw" id="psw" onkeyup='check_pass();' pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
|
|
<input type="button" onclick="generatePassword()" value="generate password" class="button-4"></input><br>
|
|
<p id="pde"></p>
|
|
<br>
|
|
|
|
<label for="psw-repeat"><b>Repeat Password</b></label>
|
|
<input type="password" class="input" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" onkeyup='check_pass();' required >
|
|
<span id="msg" class="text-danger font-weight-bold"></span>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<div class="h-captcha" data-sitekey="aaaaaaa-aaaaa-aaaaaaaa-aaaaa"></div>
|
|
<p>By creating an account you agree to our <a href="tos.html">Terms & Privacy</a>.</p>
|
|
|
|
<button class="button-54" id="submit" onclick="check_email()" value="Register"> Register</button>
|
|
</div>
|
|
<p align="center">Already have an account? <a href="/mail/">Sign in</a>.</p>
|
|
</form>
|
|
</body>
|
|
</html>
|
|
|
|
|