AppFlowy-Cloud/admin_frontend/templates/pages/login.html

<!-- prettier-ignore -->
{% extends "layouts/base.html" %}

<!-- prettier-ignore -->
{% block title %} AppFlowy Cloud Login {% endblock %}

<!-- prettier-ignore -->
{% block head %}
<link href="/assets/login.css" rel="stylesheet" />
<link href="/assets/google/logo.css" rel="stylesheet" />
{% endblock %}

<!-- prettier-ignore -->
{% block content %}
<div id="login-parent">
  <div id="login-signin">
    <div id="login-splash">
      {% include "../assets/logo.html" %}
      <h2 style="padding: 16px;">AppFlowy Cloud</h2>
    </div>

    <h3>Email Login</h3>
    <form>
      <table style="width: 100%">
        <tr>
          <td>Email</td>
          <td>
            <input
              class="input"
              style="width: 100%"
              type="text"
              id="email"
              name="email"
              placeholder="user@example.com"
            />
          </td>
        </tr>
        <tr>
          <td>Password &nbsp</td>
          <td>
            <input
              class="input"
              style="width: 100%"
              type="password"
              id="password"
              name="password"
              placeholder="********(optional)"
            />
          </td>
        </tr>
      </table>

      <small style="color: #888"
        ><i>
          (Magic link will be sent to email if password is not provided)
        </i></small
      >
      <div style="display: flex; margin: 8px 0px">
        <button
          hx-post="/web-api/signin"
          hx-target="#none"
          class="button cyan"
          type="submit"
          style="width: 100%; padding: 8px 8px"
        >
          Sign In
        </button>
        <button
          hx-post="/web-api/signup"
          hx-target="#none"
          class="button purple"
          type="submit"
          style="width: 100%; padding: 8px 8px; color: white"
        >
          Sign Up
        </button>
      </div>
    </form>

    <!-- Load OAuth Providers if configured -->
    {% if oauth_providers.len() > 0 %}
    <br />
    <table style="width: 100%">
      <tr style="display: flex">
        <td style="width: 100%; margin: auto"><hr /></td>
        <td style="flex: 1; text-align: center">&nbsp;or&nbsp;</td>
        <td style="width: 100%; margin: auto"><hr /></td>
      </tr>
    </table>

    <h3>OAuth Login</h3>
    <div id="oauth-container">
      {% for provider in oauth_providers %}
      <div class="oauth-icon">
        <a
          href="/gotrue/authorize?provider={{ provider|escape }}&redirect_to=/web/login"
        >
          <div
            hx-get="../assets/{{ provider|escape }}/logo.html"
            hx-trigger="load"
            hx-swap="outerHTML"
          ></div>
        </a>
      </div>
      {% endfor %}
    </div>
    {% endif %}

    <br />
    <div style="max-width: 256px; display: flex; align-items: center">
      <img src="https://cdn.prod.website-files.com/5c14e387dab576fe667689cf/61e1116779fc0a9bd5bdbcc7_Frame%206.png" alt="kofi" width="32" height="32">
      <i>
        &nbsp Support AppFlowy on <a href="https://ko-fi.com/appflowy">Ko-fi</a>
      </i>
    </div>

    <br />
    <br />
    <div style="max-width: 256px">
      <small style="color: #888; text-align: center;"><i>
        By clicking logging in or signing up, you confirm that you have read, understood, and agreed to AppFlowy's
        <a href="https://appflowy.io/terms">Terms</a> and
        <a href="https://appflowy.io/privacy">Privacy Policy</a>.
      </i></small>
    </div>
  </div>

  <script>
    // OAuthLogin (This is done because axum doesn't support fragment in the URL)
    // https://github.com/tokio-rs/axum/discussions/2147

    // Parse the fragment and extract the parameters
    const paramMap = {};
    if (window.location.hash) {
      const fragments = window.location.href.split('#').slice(1);
      for (let i = 0; i < fragments.length; i++) {
        const params = fragments[i].split('&');
        for (let j = 0; j < params.length; j++) {
          const keyValue = params[j].split('=');
          if (keyValue.length === 2) {
            const key = keyValue[0];
            const value = keyValue[1];
            paramMap[key] = value;
          }
        }
      }

      // Clear the fragment from the URL
      history.replaceState("", document.title, window.location.pathname + window.location.search);

      // Login in via refresh_token
      const refreshToken = paramMap['refresh_token'];
      fetch(`/web-api/login-refresh/${refreshToken}`, {
        method: "POST",
      }).then((response) => {
        if (!response.ok) {
          displayHttpStatusAndPayload(response);
        } else {
          const redirect_to = paramMap['redirect_to'];
          if (redirect_to && redirect_to.trim() !== "") {
            console.log("redirect_to is not empty");
            window.location.href = "/web/home#" + redirect_to;
          } else {
            window.location.href = "/web/home";
          }
        }
      });
    }
  </script>
  {% endblock %}
</div>