feat: improve login page
This commit is contained in:
Zack Fu Zi Xiang
parent
a827016117
commit
1ca701330c
|
|
@ -10,7 +10,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#login-signin {
|
||||
|
|
@ -20,6 +20,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#oauth-container {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
<svg fill="currentColor" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 22.773 22.773" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M15.769,0c0.053,0,0.106,0,0.162,0c0.13,1.606-0.483,2.806-1.228,3.675c-0.731,0.863-1.732,1.7-3.351,1.573
|
||||
c-0.108-1.583,0.506-2.694,1.25-3.561C13.292,0.879,14.557,0.16,15.769,0z"/>
|
||||
<path d="M20.67,16.716c0,0.016,0,0.03,0,0.045c-0.455,1.378-1.104,2.559-1.896,3.655c-0.723,0.995-1.609,2.334-3.191,2.334
|
||||
c-1.367,0-2.275-0.879-3.676-0.903c-1.482-0.024-2.297,0.735-3.652,0.926c-0.155,0-0.31,0-0.462,0
|
||||
c-0.995-0.144-1.798-0.932-2.383-1.642c-1.725-2.098-3.058-4.808-3.306-8.276c0-0.34,0-0.679,0-1.019
|
||||
c0.105-2.482,1.311-4.5,2.914-5.478c0.846-0.52,2.009-0.963,3.304-0.765c0.555,0.086,1.122,0.276,1.619,0.464
|
||||
c0.471,0.181,1.06,0.502,1.618,0.485c0.378-0.011,0.754-0.208,1.135-0.347c1.116-0.403,2.21-0.865,3.652-0.648
|
||||
c1.733,0.262,2.963,1.032,3.723,2.22c-1.466,0.933-2.625,2.339-2.427,4.74C17.818,14.688,19.086,15.964,20.67,16.716z"/>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16" fill="none">
|
||||
<path d="M16.3916 2.18032C16.3865 2.17042 16.378 2.16267 16.3677 2.15844C15.1764 1.61184 13.9191 1.22207 12.6275 0.998881C12.6158 0.996699 12.6037 0.998273 12.5929 1.00338C12.5821 1.00848 12.5732 1.01686 12.5674 1.02732C12.3962 1.33803 12.2408 1.65719 12.1018 1.98357C10.7095 1.77222 9.29329 1.77222 7.901 1.98357C7.76105 1.65636 7.60315 1.33713 7.42803 1.02732C7.42202 1.01709 7.41307 1.0089 7.40235 1.00383C7.39162 0.99876 7.37962 0.997034 7.3679 0.998881C6.07615 1.2216 4.81885 1.6114 3.62765 2.15847C3.61745 2.1628 3.60885 2.17018 3.60303 2.1796C1.22087 5.73704 0.568308 9.20701 0.888433 12.634C0.889334 12.6424 0.891914 12.6505 0.896021 12.6579C0.900128 12.6653 0.905677 12.6718 0.912339 12.677C2.29945 13.704 3.85094 14.488 5.50062 14.9954C5.51224 14.9989 5.52464 14.9987 5.53617 14.9949C5.5477 14.9912 5.55779 14.9839 5.56509 14.9743C5.9194 14.4922 6.23335 13.9817 6.50375 13.4479C6.50746 13.4406 6.50958 13.4326 6.50997 13.4244C6.51036 13.4162 6.509 13.408 6.50599 13.4004C6.50298 13.3927 6.49839 13.3858 6.49251 13.3801C6.48664 13.3743 6.47961 13.3699 6.4719 13.3671C5.97683 13.1776 5.49754 12.9493 5.03853 12.6842C5.03019 12.6793 5.02319 12.6724 5.01814 12.6641C5.01309 12.6559 5.01015 12.6465 5.00958 12.6369C5.00901 12.6272 5.01082 12.6176 5.01486 12.6088C5.0189 12.6 5.02504 12.5923 5.03275 12.5865C5.12933 12.5143 5.22424 12.44 5.3174 12.3634C5.32557 12.3567 5.33546 12.3524 5.34595 12.351C5.35644 12.3496 5.36712 12.3511 5.37678 12.3554C8.38393 13.7278 11.6396 13.7278 14.6112 12.3554C14.6208 12.3508 14.6316 12.3491 14.6423 12.3504C14.6529 12.3517 14.663 12.3559 14.6713 12.3627C14.7645 12.4396 14.8597 12.5143 14.9567 12.5865C14.9644 12.5923 14.9706 12.5999 14.9747 12.6086C14.9788 12.6174 14.9807 12.627 14.9802 12.6367C14.9797 12.6463 14.9768 12.6557 14.9718 12.664C14.9668 12.6723 14.9599 12.6792 14.9516 12.6842C14.4936 12.9515 14.0139 13.1797 13.5175 13.3663C13.5098 13.3693 13.5028 13.3738 13.497 13.3796C13.4911 13.3855 13.4866 13.3925 13.4836 13.4002C13.4807 13.4079 13.4794 13.4161 13.4799 13.4243C13.4803 13.4326 13.4825 13.4406 13.4863 13.4479C13.7612 13.9787 14.0747 14.4885 14.4242 14.9734C14.4313 14.9834 14.4414 14.9908 14.4529 14.9947C14.4645 14.9987 14.477 14.9989 14.4887 14.9953C16.1413 14.4896 17.6955 13.7056 19.0844 12.677C19.0911 12.672 19.0968 12.6657 19.1009 12.6584C19.105 12.6511 19.1075 12.6431 19.1083 12.6347C19.4915 8.67276 18.4667 5.23122 16.3916 2.18032ZM6.95284 10.5473C6.04746 10.5473 5.30146 9.71647 5.30146 8.6961C5.30146 7.67572 6.033 6.84482 6.95284 6.84482C7.87987 6.84482 8.61865 7.68294 8.60418 8.69604C8.60418 9.71647 7.87262 10.5473 6.95284 10.5473ZM13.0585 10.5473C12.1531 10.5473 11.4071 9.71647 11.4071 8.6961C11.4071 7.67572 12.1387 6.84482 13.0585 6.84482C13.9856 6.84482 14.7243 7.68294 14.7098 8.69604C14.7098 9.71647 13.9856 10.5473 13.0585 10.5473Z"
|
||||
fill="#5865F2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10.0002 0.83128C7.59472 0.806836 5.27798 1.73845 3.55911 3.42138C1.84023 5.10431 0.85988 7.40085 0.833496 9.80628C0.842765 11.7073 1.45428 13.5564 2.58021 15.0881C3.70615 16.6198 5.28856 17.7552 7.10016 18.3313C7.5585 18.4146 7.72516 18.1396 7.72516 17.8979V16.3729C5.17516 16.9146 4.6335 15.1729 4.6335 15.1729C4.46374 14.6262 4.10286 14.1588 3.61683 13.8563C2.7835 13.3063 3.6835 13.3146 3.6835 13.3146C3.97154 13.3531 4.24712 13.4563 4.48959 13.6165C4.73205 13.7767 4.93509 13.9898 5.0835 14.2396C5.34211 14.688 5.76644 15.017 6.26517 15.1557C6.7639 15.2944 7.29716 15.2318 7.75016 14.9813C7.79675 14.5249 8.00341 14.0998 8.3335 13.7813C6.30016 13.5563 4.16683 12.7896 4.16683 9.34795C4.14865 8.45018 4.48036 7.58054 5.09183 6.92295C4.81335 6.15217 4.84623 5.30321 5.1835 4.55628C5.1835 4.55628 5.9585 4.31461 7.6835 5.47295C9.18507 5.07281 10.7653 5.07281 12.2668 5.47295C14.0168 4.31461 14.7668 4.55628 14.7668 4.55628C15.1041 5.30321 15.137 6.15217 14.8585 6.92295C15.4842 7.56849 15.8339 8.43229 15.8335 9.33128C15.8335 12.7813 13.6835 13.5396 11.6668 13.7646C11.8876 13.979 12.0582 14.2397 12.1663 14.5278C12.2744 14.816 12.3172 15.1246 12.2918 15.4313V17.8896C12.2918 18.1813 12.4585 18.4146 12.9168 18.3229C14.7233 17.7433 16.3004 16.6076 17.4228 15.0781C18.5453 13.5485 19.1557 11.7034 19.1668 9.80628C19.1404 7.40085 18.1601 5.10431 16.4412 3.42138C14.7223 1.73845 12.4056 0.806836 10.0002 0.83128Z"
|
||||
fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,2 @@
|
|||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="-3 0 262 262" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/><path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/><path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/><path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -65,6 +65,14 @@ pub struct Login<'a> {
|
|||
pub oauth_redirect_to: Option<&'a str>,
|
||||
}
|
||||
|
||||
#[derive(Template)]
|
||||
#[template(path = "pages/login_v2.html")]
|
||||
pub struct LoginV2<'a> {
|
||||
pub oauth_providers: &'a [&'a str],
|
||||
pub redirect_to: Option<&'a str>,
|
||||
pub oauth_redirect_to: Option<&'a str>,
|
||||
}
|
||||
|
||||
#[derive(Template)]
|
||||
#[template(path = "pages/home.html")]
|
||||
pub struct Home<'a> {
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ fn page_router() -> Router<AppState> {
|
|||
Router::new()
|
||||
.route("/", get(home_handler))
|
||||
.route("/login", get(login_handler))
|
||||
.route("/login-v2", get(login_v2_handler))
|
||||
.route("/login-callback", get(login_callback_handler))
|
||||
.route("/payment-success", get(payment_success_handler))
|
||||
.route("/login-callback-query", get(login_callback_query_handler))
|
||||
|
|
@ -382,6 +383,26 @@ async fn login_handler(
|
|||
})
|
||||
}
|
||||
|
||||
async fn login_v2_handler(Query(login): Query<LoginParams>) -> Result<Html<String>, WebAppError> {
|
||||
let redirect_to = login
|
||||
.redirect_to
|
||||
.as_ref()
|
||||
.map(|r| urlencoding::encode(r).to_string());
|
||||
let oauth_redirect_to = login.redirect_to.as_ref().map(|r| {
|
||||
urlencoding::encode(&format!(
|
||||
"/web/login-callback?redirect_to={}",
|
||||
urlencoding::encode(r)
|
||||
))
|
||||
.to_string()
|
||||
});
|
||||
|
||||
render_template(templates::LoginV2 {
|
||||
oauth_providers: &["Google", "Apple", "Github", "Discord"],
|
||||
redirect_to: redirect_to.as_deref(),
|
||||
oauth_redirect_to: oauth_redirect_to.as_deref(),
|
||||
})
|
||||
}
|
||||
|
||||
async fn user_change_password_handler() -> Result<Html<String>, WebAppError> {
|
||||
render_template(templates::ChangePassword)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,121 @@
|
|||
<!-- 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" %}
|
||||
</div>
|
||||
<h2>Welcome to AppFlowy</h3>
|
||||
<form>
|
||||
{% if let Some(redirect_to) = redirect_to %}
|
||||
<input type="hidden" name="redirect_to" value="{{ redirect_to }}">
|
||||
{% endif %}
|
||||
|
||||
<div>
|
||||
<input
|
||||
class="input"
|
||||
style="width: 100%; border-radius: 8px; padding: 8px; margin: 4px; margin-bottom: 8px"
|
||||
type="text"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Please enter your email address"
|
||||
/>
|
||||
<button
|
||||
hx-post="/web-api/signin"
|
||||
hx-target="#none"
|
||||
class="button cyan"
|
||||
type="submit"
|
||||
style="width: 100%; padding: 8px 8px; border-radius: 8px; margin-top: 8px"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Load OAuth Providers if configured -->
|
||||
{% if oauth_providers.len() > 0 %}
|
||||
<table style="width: 100%; margin: 16px; border-collapse: collapse;">
|
||||
<tr style="display: flex; align-items: center;">
|
||||
<td style="width: 100%; margin: auto;">
|
||||
<hr style="border: none; border-top: 1px solid lightgray;" />
|
||||
</td>
|
||||
<td style="flex: 1; text-align: center; color: gray;"> or </td>
|
||||
<td style="width: 100%; margin: auto;">
|
||||
<hr style="border: none; border-top: 1px solid lightgray;" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div id="oauth-container">
|
||||
<div style="display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%">
|
||||
{% for provider in oauth_providers %}
|
||||
<div style="border: 1px solid lightgray; width:100%; margin: 4px; border-radius: 8px">
|
||||
<a
|
||||
href="/gotrue/authorize?provider={{ provider|escape }}&redirect_to={{ oauth_redirect_to|default("/web/login-callback")|escape }}"
|
||||
style="text-decoration: none; color: inherit"
|
||||
>
|
||||
<div style="display: flex; align-items: center; justify-content: center; color: inherit">
|
||||
<div
|
||||
hx-get="../assets/login/{{ provider|escape }}.svg"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML"
|
||||
></div>
|
||||
<span>   </span>
|
||||
<div> Continue with {{ provider }} </div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<script>
|
||||
document.addEventListener("htmx:afterSwap", (event) => {
|
||||
const hxGet = event.target.getAttribute("hx-get");
|
||||
if (hxGet && hxGet.includes("assets/login")) {
|
||||
const svg = event.target.querySelector("svg");
|
||||
if (svg) {
|
||||
svg.style.width = "24px";
|
||||
svg.style.height = "24px";
|
||||
svg.style.margin = "8px";
|
||||
}
|
||||
if (hxGet.includes("Discord")) {
|
||||
svg.style.transform = "translateY(4px)";
|
||||
} else if (hxGet.includes("Google")) {
|
||||
svg.style.transform = "translateY(2px)";
|
||||
} else if (hxGet.includes("Apple")) {
|
||||
svg.style.transform = "translateY(2px)";
|
||||
} else if (hxGet.includes("Github")) {
|
||||
svg.style.transform = "translateY(2px)";
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<span>   </span>
|
||||
<span>   </span>
|
||||
<span>   </span>
|
||||
<div style="max-width: 256px">
|
||||
<small style="color: #888; text-align: center; display: block">
|
||||
By clicking "Continue" above, you agreed to AppFlowy's
|
||||
<a href="https://appflowy.io/terms">Terms</a> and
|
||||
<a href="https://appflowy.io/privacy">Privacy Policy</a>.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue