<!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>Account ยท LingDocs</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
  <script>

  </script>
  </head>
  <body>
    <div class="container" style="max-width: 400px;">
      <h2 class="mt-4 mb-4 text-center">LingDocs Account</h2>
      <% if (user.admin) { %>
        <a href="/admin"><h5 class="mb-2">Admin Console</h5></a>
      <% } %>
      <h4>Profile <i class="fas fa-user ml-2"></i></h4>
      <form method="POST" class="mb-4">
        <div>
          <label for="email" class="form-label">Email:</label>
          <% if (user.email) { %>
            <input required name="email" type="email" class="form-control" id="email" value="<%= user.email %>" />
          <% } else { %>
            <input name="email" type="email" class="form-control" id="email" placeholder="add an e-mail here" />
          <% } %>
        </div>
        <div>
          <% if (error === "email taken") { %>
            <div class="alert alert-danger mt-3" role="alert">
              Sorry, that e-mail is already taken ๐Ÿ™„
            </div>
          <% } else if (typeof user.emailVerified === "string") { %>
            <div class="alert alert-info mt-3" role="alert">
              <div class="d-flex flex-row justify-content-between align-items-center">
                <div>Check your e-mail to verify</div>
                <div id="resend-button-container">
                  <button type="button" class="btn btn-light btn-sm" id="resend-button">Resend</button>
                </div>
              </div>
            </div>
          <% } %>
        </div>
        <div class="mb-4 mt-3">
          <label for="name" class="form-label">Name:</label>
          <input required name="name" type="text" class="form-control" id="name" value="<%= user.name %>" />
        </div>
        <div>
          <button type="submit" class="btn btn-primary">Update Profile</button>
        </div>
      </form>
      <h5>Account Level: <%= user.level.charAt(0).toUpperCase() + user.level.slice(1) %></h5>
      <% if (user.level === "basic") { %>
        <p>Upgrade to Student account for Wordlist features</p>
        <div class="d-flex flex-row" style="gap: 1rem;">
          <form action="/payment/create-checkout-session" method="POST">
            <input type="hidden" name="priceId" value="price_1Lt8NqJnpCQCjf9pN7CQUjjO" />
            <button class="btn btn-sm btn-outline-secondary" type="submit">$1/month</button>
          </form>
          <form action="/payment/create-checkout-session" method="POST">
            <input type="hidden" name="priceId" value="price_1Lt8NqJnpCQCjf9p4FAEIOMw" />
            <button class="btn btn-sm btn-outline-secondary" type="submit">$10/year</button>
          </form>
        </div>
      <% } %>
      <% if (user.level === "student" && user.subscription) { %>
        <p>Current subscription: <% if (user.subscription.metadata.cycle === "monthly") { %>$1/month<% } else { %>$10/year<% } %></p>
        <p><a href="#" onclick="handleDowngrade()">Downgrade</a> to cancel your subscription</p>
      <% } %>
      <% if (user.email) { %>
        <h4 class="mt-3 mb-3">Password <i class="fas fa-key ml-2"></i></h4>
        <% if (!user.password) { %>
          <p class="small">Add a password to be able to log in with just your e-mail address.</p>
        <% } %>
      <% } %>
      <div id="password-change-form" style="display: none;">
        <% if (user.password) { %>
          <div id="old-password-form">
        <% } else { %>
          <div id="old-password-form" style="display: none;">
        <% } %>
          <div class="mb-3 mt-3">
            <label for="oldPassword" class="form-label">Old Password:</label>
            <input type="password" class="form-control" id="oldPassword">
          </div>
          <div class="small text-left" id="forgot-password">
            <a href="" tabindex="-1">Forgot Old Password?</a>
          </div>
        </div>
        <div class="mb-3 mt-3">
          <label for="password" class="form-label">New Password:</label>
          <input type="password" class="form-control" id="password" />
        </div>
        <div class="mb-4 mt-3">
          <label for="confirmPassword" class="form-label">Confirm New Password:</label>
          <input type="password" class="form-control" id="confirmPassword">
        </div>
      </div>
      <div id="password-change-result" style="display: none;" class="alert alert-info mt-3 mb-4" role="alert">
      </div>
      <% if (user.email) { %>
        <div class="d-flex flex-row justify-content-between mt-2 mb-1">
          <button type="button" id="password-change-button" class="btn btn-secondary">
            <% if (user.password) { %>
              Change 
            <% } else { %>
              Add
            <% } %>
            Password
          </button>
          <button type="button" style="display: none;" id="cancel-password-change-button" class="btn btn-light">Cancel</button>
        </div>
      <% } %>
      <h4 class="mt-3 mb-1">Linked Accounts <i class="fas fa-link ml-2"></i></h4>
      <div class="mb-4">
        <% if (user.google) { %>
          <!-- TODO: MAKE THIS EMAIL THING SAFER! -->
          <div class="my-2 w-100 btn btn-secondary"><i class="fab fa-google mr-2"></i> Linked to Google ยท <%= user.google.emails[0].value %></div>
          <form action="/google/remove" method="POST">
            <% if (removeProviderOption) { %>
              <button type="submit" class="btn btn-sm btn-outline">Unlink from Google</button>
            <% } %>
          </form>
        <% } %>
        <% if (user.twitter) { %>
          <div class="my-2 w-100 btn btn-secondary"><i class="fab fa-twitter mr-2"></i> Linked to Twitter ยท @<%= user.twitter.username %></div>
          <form action="/twitter/remove" method="POST">
            <% if (removeProviderOption) { %>
              <button type="submit" class="btn btn-sm btn-outline">Unlink from Twitter</button>
            <% } %>
          </form>
        <% } %>
        <% if (user.github) { %>
          <div class="my-2 w-100 btn btn-secondary"><i class="fab fa-github mr-2"></i> Linked to GitHub ยท <%= user.github.username %></div>
          <form action="/github/remove" method="POST">
            <% if (removeProviderOption) { %>
              <button type="submit" class="btn btn-sm btn-outline">Unlink from GitHub</button>
            <% } %>
          </form>
        <% } %>

        <% if (!user.google) { %>
          <a href="/google" class="my-2 w-100 btn btn-outline-secondary" role="button"><i class="fab fa-google mr-2"></i> Link to Google</a>
        <% } %>
        <% if (!user.twitter) { %>
          <a href="/twitter" class="my-2 w-100 btn btn-outline-secondary" role="button"><i class="fab fa-twitter mr-2"></i> Link to Twitter</a>
        <% } %>
        <% if (!user.github) { %>
          <a href="/github" class="my-2 w-100 btn btn-outline-secondary" role="button"><i class="fab fa-github mr-2"></i> Link to GitHub</a>
        <% } %>
      </div>
      <hr />
      <p class="text-muted small">Last Login: <%= new Date(user.lastLogin).toUTCString() %></p>
      <form action="/sign-out" method="POST">
        <button type="submit" class="btn btn-outline-secondary"><i class="fas fa-sign-out-alt mr-2"></i> Sign Out of LingDocs</button>
      </form>
      <hr />
      <div class="mb-4">
        <button onclick="handleDelete()" type="button" class="btn btn-outline-danger my-4"><i class="fas fa-trash-alt mr-2"></i> Delete Account</button>
      </div>
      <p class="text-muted text-center"><a href="https://www.lingdocs.com/">LingDocs.com</a></p>
    </div>

  </body>
  <script>
    if (window.opener) {
      const w = window.opener
      try {
        w.postMessage("signed in", "https://dictionary.lingdocs.com");
      } catch (e) {
        console.error(e);
      }
      try {
        w.postMessage("signed in", "https://dev.dictionary.lingdocs.com");
      } catch (e) {
        console.error(e);
      }
      try {
        w.postMessage("signed in", "https://grammar.lingdocs.com");
      } catch (e) {
        console.error(e);
      }
      try {
        w.postMessage("upgraded", "https://dictionary.lingodocs.com");
      } catch (e) {
        console.error(e);
      }
    }
    // function handleRequestUpgrade() {
    //   const btn = document.getElementById("upgrade-request-button");
    //   btn.innerHTML = "Sending...";
    //   fetch("/api/user/upgradeToStudentRequest", {
    //     method: "POST",
    //   }).then((res) => res.json()).then((res) => {
    //     console.log(res);
    //     if (res.ok) {
    //       btn.innerHTML = "Upgrade request sent";
    //     } else {
    //       btn.innerHTML = "Error requesting upgrade";
    //     }
    //   }).catch((e) => {
    //     console.error(e);
    //     btn.innerHTML = "Error requesting upgrade";
    //   });
    // }
    function clearPasswordForm() {
      document.getElementById("oldPassword").value = "";
      document.getElementById("password").value = "";
      document.getElementById("confirmPassword").value = "";
    }
    function handleDelete() {
      const answer = confirm("Are you sure you want to delete your account?");
      if (answer) {
        fetch("/api/user", { method: "DELETE" }).then((res) => res.json()).then((res) => {
          if (res.ok) {
            window.location = "/";
          }
        }).catch((err) => {
          alert("Error deleting account - check your connection");
          console.error(err);
        });
      }
    }
    function handleDowngrade() {
      const answer = confirm("Are you sure you want to downgrade your account? Your wordlist will be deleted forever. (Export it to CSV from the dictionary first if you want to keep it.)");
      if (answer) {
        fetch("/downgradeToBasic", { method: "POST" }).then((res) => res.json()).then((res) => {
          if (res.ok) {
            window.location = "/";
          } else {
            alert("Error downgrading account");
          }
        }).catch((err) => {
          alert("Error downgrading account - check your connection");
          console.error(err);
        });
      }
    }
    window.addEventListener('keydown', (e) => {
      // prevent an enter from submitting the form
      if (e.keyCode === 13) {
        e.preventDefault();
      }
    });
    const passwordChangeForm = document.getElementById("password-change-form");
    const passwordChangeButton = document.getElementById("password-change-button");
    const passwordChangeResult = document.getElementById("password-change-result");
    const forgotPassword = document.getElementById("forgot-password");
    if (forgotPassword) {
      forgotPassword.addEventListener("click", (e) => {
        event.preventDefault();
        const email = document.getElementById("email").value;
        window.location = encodeURI("/password-reset?email=" + email);
      });
    }
    const cancelPasswordChangeButton = document.getElementById("cancel-password-change-button");
    if (passwordChangeButton) {
      passwordChangeButton.addEventListener("click", (e) => {
        e.preventDefault();
        const formClosed = window.getComputedStyle(passwordChangeForm).getPropertyValue("display") === "none";
        if (formClosed) {
          clearPasswordForm();
          passwordChangeResult.innerHTML = "";
          passwordChangeResult.style = "display: none;";
          passwordChangeForm.style = "";
          cancelPasswordChangeButton.style = "";
        } else {
          const oldPassword = document.getElementById("oldPassword").value;
          const password = document.getElementById("password").value;
          const passwordConfirmed = document.getElementById("confirmPassword").value;
          fetch("/api/password", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ oldPassword, password, passwordConfirmed }),
          }).then((res) => res.json()).then((res) => {
            if (res.ok) {
              passwordChangeResult.innerHTML = res.message;
              passwordChangeResult.style = "";
              passwordChangeForm.style = "display: none;";
              cancelPasswordChangeButton.style = "display: none;";
              if (res.message === "Password added") {
                document.getElementById("old-password-form").style = "";
                passwordChangeButton.innerHTML = "Change Password";
              }
            } else {
              passwordChangeResult.innerHTML = res.error;
              passwordChangeResult.style = "";
            }
          }).catch(console.error);
        }
      });
    }
    if (cancelPasswordChangeButton) {
      cancelPasswordChangeButton.addEventListener("click", (e) => {
        e.preventDefault();
        passwordChangeForm.style="display: none;";
        cancelPasswordChangeButton.style="display: none;";
        passwordChangeResult.innerHTML = "";
        passwordChangeResult.style = "display: none;";
        clearPasswordForm();
      });
    }
    const resendButton = document.getElementById("resend-button");
    if (resendButton) {
      resendButton.addEventListener("click", handleResendVerification, true);
    }
    function handleResendVerification(e) {
      e.preventDefault();
      const bc = document.getElementById("resend-button-container");
      bc.innerHTML = "Sending โ€ฆ";
      fetch("/api/email-verification", { method: "PUT" }).then((res) => res.json())
        .then((res) => {
          if (res.ok) {
            bc.innerHTML = "Sent โœ”";
          } else {
            bc.innerHTML = "Send Failed ๐Ÿ˜”";
          }
        }).catch((error) => {
          console.error(error);
          bs.innerHTML = "Send Failed ๐Ÿ˜”";
        });
    }
  </script> 
</html>