From 1ca701330c738d07a3728a030661e27233e77f6f Mon Sep 17 00:00:00 2001 From: Zack Fu Zi Xiang Date: Tue, 3 Dec 2024 23:20:32 +0800 Subject: [PATCH] feat: improve login page --- admin_frontend/assets/login.css | 3 +- admin_frontend/assets/login/Apple.svg | 46 +++++++ admin_frontend/assets/login/Discord.svg | 4 + admin_frontend/assets/login/Github.svg | 4 + admin_frontend/assets/login/Google.svg | 2 + admin_frontend/src/templates.rs | 8 ++ admin_frontend/src/web_app.rs | 21 ++++ admin_frontend/templates/pages/login_v2.html | 121 +++++++++++++++++++ 8 files changed, 208 insertions(+), 1 deletion(-) create mode 100644 admin_frontend/assets/login/Apple.svg create mode 100644 admin_frontend/assets/login/Discord.svg create mode 100644 admin_frontend/assets/login/Github.svg create mode 100644 admin_frontend/assets/login/Google.svg create mode 100644 admin_frontend/templates/pages/login_v2.html diff --git a/admin_frontend/assets/login.css b/admin_frontend/assets/login.css index d3fa11f5..7912a8db 100644 --- a/admin_frontend/assets/login.css +++ b/admin_frontend/assets/login.css @@ -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 { diff --git a/admin_frontend/assets/login/Apple.svg b/admin_frontend/assets/login/Apple.svg new file mode 100644 index 00000000..9be1f9f0 --- /dev/null +++ b/admin_frontend/assets/login/Apple.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/admin_frontend/assets/login/Discord.svg b/admin_frontend/assets/login/Discord.svg new file mode 100644 index 00000000..901b2fd9 --- /dev/null +++ b/admin_frontend/assets/login/Discord.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/admin_frontend/assets/login/Github.svg b/admin_frontend/assets/login/Github.svg new file mode 100644 index 00000000..0a73a316 --- /dev/null +++ b/admin_frontend/assets/login/Github.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/admin_frontend/assets/login/Google.svg b/admin_frontend/assets/login/Google.svg new file mode 100644 index 00000000..3ffa2aab --- /dev/null +++ b/admin_frontend/assets/login/Google.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/admin_frontend/src/templates.rs b/admin_frontend/src/templates.rs index d1970d55..d5029e04 100644 --- a/admin_frontend/src/templates.rs +++ b/admin_frontend/src/templates.rs @@ -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> { diff --git a/admin_frontend/src/web_app.rs b/admin_frontend/src/web_app.rs index d61834ae..5d6a8383 100644 --- a/admin_frontend/src/web_app.rs +++ b/admin_frontend/src/web_app.rs @@ -27,6 +27,7 @@ fn page_router() -> Router { 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) -> Result, 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, WebAppError> { render_template(templates::ChangePassword) } diff --git a/admin_frontend/templates/pages/login_v2.html b/admin_frontend/templates/pages/login_v2.html new file mode 100644 index 00000000..b4bfede6 --- /dev/null +++ b/admin_frontend/templates/pages/login_v2.html @@ -0,0 +1,121 @@ + +{% extends "layouts/base.html" %} + + +{% block title %} AppFlowy Cloud Login {% endblock %} + + +{% block head %} + + +{% endblock %} + + +{% block content %} +
+
+
+ {% include "../assets/logo.html" %} +
+

Welcome to AppFlowy

+
+ {% if let Some(redirect_to) = redirect_to %} + + {% endif %} + +
+ + +
+
+ + + {% if oauth_providers.len() > 0 %} + + + + + + +
+
+ 		 or  +
+
+ +
+
+ {% for provider in oauth_providers %} + + {% endfor %} + + +
+
+ {% endif %} + +   +   +   +
+ + By clicking "Continue" above, you agreed to AppFlowy's + Terms and + Privacy Policy. + +
+
+ {% endblock %} +
+