diff --git a/admin_frontend/assets/base.css b/admin_frontend/assets/base.css index 62b94a37..f04ba8ed 100644 --- a/admin_frontend/assets/base.css +++ b/admin_frontend/assets/base.css @@ -1,8 +1,6 @@ -body { - font-family: sans-serif; -} - :root { + --af-background: #1a202c; + --line-divider: #384967; --af-purple: #9327ff; --af-dark-purple: #8427e0; --af-red: #fb006d; @@ -14,6 +12,12 @@ body { --af-darker-yellow: #f7931e; } +body { + font-family: sans-serif; + background-color: var(--af-background); + color: #e2e9f2; +} + .button { border: none; border-radius: 4px; @@ -106,12 +110,12 @@ body { .input { box-sizing: border-box; border-radius: 4px; - border: 2px solid #808080; + border: 1px solid var(--line-divider); margin: 4px 0; padding: 4px 8px; font-size: 16px; - color: #333; - background-color: #f5f5f5; + color: inherit; + background-color: inherit; outline: none; } @@ -126,3 +130,20 @@ body { .loading-button { filter: brightness(0.7); } + +.oauth-item-inner { + border: 1px solid; + border-color: var(--line-divider); + width: 100%; + margin: 4px; + border-radius: 8px; +} + +.oauth-item-inner:hover { + border-color: var(--af-dark-cyan); +} + +.divider { + border: none; + border-top: 1px solid var(--line-divider); +} 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/session.rs b/admin_frontend/src/session.rs index 7b6236a6..e75e3482 100644 --- a/admin_frontend/src/session.rs +++ b/admin_frontend/src/session.rs @@ -156,7 +156,7 @@ impl FromRequestParts for UserSession { .map(|uri| urlencoding::encode(&uri.to_string()).to_string()); match original_url { - Some(url) => Err(Redirect::to(&format!("/web/login?redirect_to={}", url)).into_response()), + Some(url) => Err(Redirect::to(&format!("/web/login-v2?redirect_to={}", url)).into_response()), None => Err(Redirect::to("/web/login").into_response()), } } 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..64d7fa68 100644 --- a/admin_frontend/src/web_app.rs +++ b/admin_frontend/src/web_app.rs @@ -10,7 +10,7 @@ use crate::models::{LoginParams, OAuthLoginAction, WebAppOAuthLoginRequest}; use crate::session::{self, new_session_cookie, UserSession}; use askama::Template; use axum::extract::{Path, Query, State}; -use axum::response::{IntoResponse, Result}; +use axum::response::{IntoResponse, Redirect, Result}; use axum::{response::Html, routing::get, Router}; use axum_extra::extract::CookieJar; use gotrue_entity::dto::User; @@ -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)) @@ -188,10 +189,10 @@ async fn login_callback_query_handler( }, Err(err) => { tracing::error!("Error decoding redirect_url: {:?}", err); - home_handler(State(state), new_session, jar).await + home_handler(State(state), Some(new_session), jar).await }, }, - None => home_handler(State(state), new_session, jar).await, + None => home_handler(State(state), Some(new_session), jar).await, }, } } @@ -382,15 +383,40 @@ 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) } pub async fn home_handler( State(state): State, - session: UserSession, + session: Option, jar: CookieJar, ) -> Result { + let session = match session { + Some(session) => session, + None => return Ok(Redirect::to("/web/login").into_response()), + }; + let user = state .gotrue_client .user_info(&session.token.access_token) diff --git a/admin_frontend/templates/pages/login.html b/admin_frontend/templates/pages/login.html index f171bf7d..b8911475 100644 --- a/admin_frontend/templates/pages/login.html +++ b/admin_frontend/templates/pages/login.html @@ -84,11 +84,15 @@ {% if oauth_providers.len() > 0 %}
- - - - - +
 or 
+ + + +
+
+ 		 or  +
+
@@ -98,9 +102,9 @@ {% for provider in oauth_providers %} -
+
  {{ provider }}
+{% extends "layouts/base.html" %} + + +{% block title %} AppFlowy Cloud Login {% endblock %} + + +{% block head %} + + +{% endblock %} + + +{% block content %} + +