pashto-dictionary/account/views/login.ejs

133 lines
5.5 KiB
Plaintext
Raw Normal View History

2024-08-14 19:30:10 +00:00
<!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">&copy; <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>