2023-03-04 13:45:43 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>Sign up // ByeCorps ID</title>
|
|
|
|
|
|
<link rel="stylesheet" href="./styles/base.css">
|
|
|
|
|
|
<link rel="stylesheet" href="./styles/loginform.css">
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<main>
|
|
|
|
|
|
<h1 class="bc-font bc-logo"><span class="weight1">Bye</span><span class="weight2">Corps</span><span class="weight3"> ID</span></h1>
|
|
|
|
|
|
<p class="center">Ready for your ByeCorps ID?</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h2 class="center">Sign up</h2>
|
|
|
|
|
|
<p class="center small">Already have an ID? <a href="./login.html">Log in</a></p>
|
|
|
|
|
|
<form action="#" id="signup">
|
|
|
|
|
|
<div class="input email">
|
|
|
|
|
|
<label for="email"><i aria-hidden="true" class="fa-solid fa-fw fa-envelope" title="Email"></i><span class="fa-sr-only">Email address</span></label>
|
|
|
|
|
|
<input type="email" name="email" id="email" required placeholder="a.dent@squornshellous.cloud" />
|
|
|
|
|
|
<!-- <button id="switchtophone">
|
|
|
|
|
|
<i class="fa-solid fa-fw fa-mobile-retro" title="Use phone number instead"></i>
|
|
|
|
|
|
<span class="fa-sr-only-focusable">Use phone number instead</span>
|
|
|
|
|
|
</button> -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="input phone">
|
|
|
|
|
|
<button id="switchtoemail">
|
|
|
|
|
|
<i class="fa-solid fa-fw fa-envelope" title="Use email instead"></i>
|
|
|
|
|
|
<span class="fa-sr-only-focusable">Use email instead</span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<label for="phone"><i aria-hidden="true" class="fa-solid fa-fw fa-mobile-retro" title="Phone"></i><span class="fa-sr-only">Phone number</span></label>
|
|
|
|
|
|
<input type="tel" name="phone" id="phone" placeholder="+1 800 APL–CARE" />
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
|
|
<div class="input password">
|
|
|
|
|
|
<label for="password"><i aria-hidden="true" class="fa-solid fa-fw fa-lock" title="Password"></i><span class="fa-sr-only">Password</span></label>
|
|
|
|
|
|
<input type="password" name="password" id="password" required placeholder="Password: keep secure" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="password-strength">
|
|
|
|
|
|
<p style="margin: 0;">Password requirements:</p>
|
|
|
|
|
|
<ul>
|
2023-06-07 20:40:38 +01:00
|
|
|
|
<li><i style="color: var(--oc-red-5);" class="fa-fw fa-solid fa-circle-xmark"></i> At least 8 characters</li>
|
2023-03-04 13:45:43 +00:00
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
let password = document.getElementById("password");
|
|
|
|
|
|
let passwordStrength = document.querySelector(".password-strength");
|
|
|
|
|
|
|
|
|
|
|
|
password.addEventListener("input", function() {
|
|
|
|
|
|
let passwordValue = password.value;
|
|
|
|
|
|
let passwordLength = passwordValue.length;
|
|
|
|
|
|
let passwordStrengthList = passwordStrength.querySelectorAll("li");
|
|
|
|
|
|
let passwordStrengthListLength = passwordStrengthList.length;
|
|
|
|
|
|
|
|
|
|
|
|
if (passwordLength >= 8) {
|
|
|
|
|
|
passwordStrengthList[0].querySelector("i").classList.remove("fa-circle-xmark");
|
|
|
|
|
|
passwordStrengthList[0].querySelector("i").classList.add("fa-circle-check");
|
|
|
|
|
|
} else {
|
|
|
|
|
|
passwordStrengthList[0].querySelector("i").classList.remove("fa-circle-check");
|
|
|
|
|
|
passwordStrengthList[0].querySelector("i").classList.add("fa-circle-xmark");
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
2023-06-07 20:40:38 +01:00
|
|
|
|
</script>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="input password-confirm">
|
|
|
|
|
|
<label for="password-confirm"><i aria-hidden="true" class="fa-solid fa-fw fa-lock" title="Password"></i><span class="fa-sr-only">Confirm password</span></label>
|
|
|
|
|
|
<input type="password" name="password-confirm" id="password-confirm" required placeholder="Confirm password" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="password-confirm-requirements">
|
|
|
|
|
|
<i class="fa-fw fa-solid fa-circle-xmark"></i> Passwords match
|
2023-03-04 13:45:43 +00:00
|
|
|
|
|
2023-06-07 20:40:38 +01:00
|
|
|
|
<script>
|
|
|
|
|
|
let passwordConfirm = document.getElementById("password-confirm");
|
|
|
|
|
|
|
|
|
|
|
|
passwordConfirm.addEventListener("input", function() {
|
|
|
|
|
|
let passwordConfirmValue = passwordConfirm.value;
|
|
|
|
|
|
let passwordConfirmLength = passwordConfirmValue.length;
|
|
|
|
|
|
let passwordConfirmRequirements = document.querySelector(".password-confirm-requirements");
|
2023-03-04 13:45:43 +00:00
|
|
|
|
|
2023-06-07 20:40:38 +01:00
|
|
|
|
if (passwordConfirmValue == password.value) {
|
|
|
|
|
|
passwordConfirmRequirements.querySelector("i").classList.remove("fa-circle-xmark");
|
|
|
|
|
|
passwordConfirmRequirements.querySelector("i").classList.add("fa-circle-check");
|
|
|
|
|
|
} else {
|
|
|
|
|
|
passwordConfirmRequirements.querySelector("i").classList.remove("fa-circle-check");
|
|
|
|
|
|
passwordConfirmRequirements.querySelector("i").classList.add("fa-circle-xmark");
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
2023-03-04 13:45:43 +00:00
|
|
|
|
</script>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="legal">
|
|
|
|
|
|
<div class="tos-agree">
|
|
|
|
|
|
<input type="checkbox" name="tos-agree" id="tos-agree" required />
|
|
|
|
|
|
<label for="tos-agree">I agree to the <a href="#">Terms of Service</a></label>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="privacy-agree">
|
|
|
|
|
|
<input type="checkbox" name="privacy-agree" id="privacy-agree" required />
|
|
|
|
|
|
<label for="privacy-agree">I agree to the <a href="#">Privacy Policy</a></label>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="asshole-agree">
|
|
|
|
|
|
<input type="checkbox" name="asshole-agree" id="asshole-agree" required />
|
|
|
|
|
|
<label for="asshole-agree">I agree to <a href="https://asshole.fyi">not be an asshole</a></label>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="finisher">
|
|
|
|
|
|
<button type="submit" class="bc-btn bc-btn-primary">Sign up</button>
|
|
|
|
|
|
<button type="reset" class="bc-btn">Reset</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="sso">
|
|
|
|
|
|
<p>Or, sign up with</p>
|
|
|
|
|
|
<div class="sso-buttons">
|
|
|
|
|
|
<a href="#" class="bc-btn btn-sso sso-omglol"><img src="https://cdn.cache.lol/img/prami.svg" alt="omg.lol logo" aria-hidden="true"> omg.lol</a>
|
|
|
|
|
|
<a href="#" class="bc-btn btn-sso sso-litauth"><img src="https://auth.litdevs.org/resources/litauth.png" alt="LITauth logo" aria-hidden="true"> LITauth</a>
|
|
|
|
|
|
<a href="#" class="bc-btn btn-sso sso-github"><i class="fa-fw fa-brands fa-github" aria-hidden="true"></i> GitHub</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</main>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
