133 lines
5.5 KiB
Plaintext
133 lines
5.5 KiB
Plaintext
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="LingDocs Signin">
|
|
<title>Signin · LingDocs</title>
|
|
|
|
<link rel="canonical" href="https://account.lingdocs.com">
|
|
|
|
<link href="/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
.bd-placeholder-img {
|
|
border-radius: 30px;
|
|
}
|
|
</style>
|
|
<!-- Custom styles for this template -->
|
|
<link href="/css/signin.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
|
|
<% if (inProd) { %>
|
|
<script src="https://www.google.com/recaptcha/api.js?render=6LcVjAUcAAAAAD0jviyYjUjuvjTMgdwx4H6kNoHH" async defer></script>
|
|
<% } %>
|
|
</head>
|
|
<body class="text-center">
|
|
|
|
<main class="form-signin">
|
|
<form id="signin-form">
|
|
<img class="mb-4" src="/img/lingdocs-logo.png" alt="" height="60" width="60">
|
|
<h1 class="h3 mb-4 fw-normal">Sign in to LingDocs</h1>
|
|
<!-- <p class="small mb-2">New? Enter an e-mail and password to sign up</p> -->
|
|
<div class="form-floating mt-3">
|
|
<input type="email" required class="form-control" id="emailInput" placeholder="name@example.com">
|
|
<label for="floatingInput">Email address</label>
|
|
</div>
|
|
<div class="form-floating">
|
|
<input type="password" required minlength="6" class="form-control" id="passwordInput" placeholder="Password">
|
|
<label for="floatingPassword">Password</label>
|
|
</div>
|
|
<div class="form-floating" id="name-form" style="display:none">
|
|
<input type="text" class="form-control" id="nameInput">
|
|
<label for="floatingPassword">Name</label>
|
|
</div>
|
|
<div class="small text-left">
|
|
<a href="/password-reset" tabindex="-1">Forgot Password?</a>
|
|
</div>
|
|
<div id="response" style="display: none;" class="alert alert-success" role="alert">
|
|
</div>
|
|
<button class="g-recaptcha mt-3 w-100 btn btn-lg btn-primary" type="submit" id="sign-in-button">Sign In / Up</button>
|
|
<button style="display: none;" class="mt-3 w-100 btn btn-lg btn-secondary" type="button" id="cancel-sign-up-button">Cancel Sign Up</button>
|
|
<% if (inProd) { %>
|
|
<div
|
|
class="g-recaptcha"
|
|
id="recaptcha-container"
|
|
data-sitekey="6LcVjAUcAAAAAD0jviyYjUjuvjTMgdwx4H6kNoHH"
|
|
data-callback="captchaCallback"
|
|
data-size="invisible">
|
|
</div>
|
|
<% } %>
|
|
</form>
|
|
<p class="mt-3">or</p>
|
|
<a href="/google" class="mt-1 w-100 btn btn-lg btn-secondary" role="button"><i class="fab fa-google mr-2"></i> Sign In With Google</a>
|
|
<a href="/twitter" class="mt-3 w-100 btn btn-lg btn-secondary" role="button"><i class="fab fa-twitter mr-2"></i> Sign In With Twitter</a>
|
|
<a href="/github" class="mt-3 w-100 btn btn-lg btn-secondary" role="button"><i class="fab fa-github mr-2"></i> Sign In With GitHub</a>
|
|
<p class="mt-5 text-muted">© <script type="text/javascript">document.write(new Date().getFullYear());</script><noscript>2023</noscript> <a href="https://www.lingdocs.com/">LingDocs.com</a></p>
|
|
<p class="mt-3 text-muted small"><a href="/privacy">privacy policy</a></p>
|
|
</main>
|
|
</body>
|
|
<% if (recaptcha === "fail") { %>
|
|
<script>
|
|
alert("reCaptcha failed");
|
|
</script>
|
|
<% } %>
|
|
|
|
<script>
|
|
const form = document.getElementById("signin-form");
|
|
const signInButton = document.getElementById("sign-in-button");
|
|
const cancelSignUpButton = document.getElementById("cancel-sign-up-button");
|
|
const nameForm = document.getElementById("name-form");
|
|
const response = document.getElementById("response");
|
|
cancelSignUpButton.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
nameForm.style = "display: none;";
|
|
nameForm.innerHTML = "";
|
|
response.innerHTML = "";
|
|
response.style = "display: none;";
|
|
cancelSignUpButton.style = "display: none;";
|
|
signInButton.innerHTML = "Sign In";
|
|
});
|
|
form.addEventListener("submit", handleSubmit, true);
|
|
|
|
function captchaCallback(token) {
|
|
const email = document.getElementById("emailInput").value.trim();
|
|
const password = document.getElementById("passwordInput").value.trim();
|
|
const name = document.getElementById("nameInput").value.trim();
|
|
fetch(name ? "/register" : "/login", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ email, password, name, token }),
|
|
}).then((res) => res.json())
|
|
.then((res) => {
|
|
console.log({ res });
|
|
if (res.ok) {
|
|
location.reload();
|
|
}
|
|
if (!res.ok) {
|
|
if (res.newSignup) {
|
|
nameForm.style = "";
|
|
response.className = "alert alert-info mt-3";
|
|
response.innerText = "Enter your name to finish signup";
|
|
response.style = "";
|
|
signInButton.innerHTML = "Sign Up";
|
|
cancelSignUpButton.style = "";
|
|
} else {
|
|
response.className = "alert alert-warning mt-3";
|
|
response.innerText = res.message;
|
|
response.style = "";
|
|
}
|
|
}
|
|
});
|
|
}
|
|
<% if (inProd) { %>
|
|
function handleSubmit(e) {
|
|
e.preventDefault();
|
|
grecaptcha.execute();
|
|
}
|
|
<% } else { %>
|
|
function handleSubmit(e) {
|
|
e.preventDefault();
|
|
captchaCallback("");
|
|
}
|
|
<% } %>
|
|
</script>
|
|
</html> |