Merge pull request #368 from sebadob/308-ui-imprv-login

UI: show additional client info + user reg during login
sebadob · Apr 25, 2024 · b03349c · b03349c
2 parents 950af28 + fe7cc1f
commit b03349c
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -45,6 +45,15 @@ send huge payloads each time.
 [9f87af3](https://github.com/sebadob/rauthy/commit/9f87af3dfb49b48300b885bf406f852579470193)
 [e6d39d1](https://github.com/sebadob/rauthy/commit/e6d39d1e1118e18aeb020fbbb477a944fcd1467a)
 
+#### UX Improvement on Login
+
+The login form now contains a "Home" icon which will appear, if a `client_uri` is registered for the current
+client. A user may click this and be redirected to the client, if a login is not desired for whatever reason.
+Additionally, if the user registration is configured to be open, a link to the user registration will be shown
+at the bottom as well.
+
+[]()
+
 #### Unlink Account from Provider
 
 A new button has been introduced to the account view of federated accounts.  
@@ -96,6 +105,9 @@ BOOTSTRAP_ADMIN_PASSWORD_ARGON2ID='$argon2id$v=19$m=32768,t=3,p=2$mK+3taI5mnA+Gx
 - The page title for a password reset now shows "New Account" if this is a fresh setup and only
   "Password Reset" when it actually is a reset
   [84bbdf7](https://github.com/sebadob/rauthy/commit/84bbdf7bc464e5869285225e446cb56e17f53583)
+- The "User Registration" header on the page for an open user registration as only showing up,
+  when the domain was restricted.
+  []()
 
 ## 0.22.1
 

diff --git a/frontend/src/lib/icons/IconHome.svelte b/frontend/src/lib/icons/IconHome.svelte
@@ -0,0 +1,23 @@
+<script>
+    export let color = 'var(--col-text)';
+    export let opacity = 0.9;
+    export let width = 24;
+</script>
+
+<svg
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-width={2}
+        width={width}
+        color={color}
+        opacity={opacity}
+>
+    <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+    />
+</svg>
+
+
diff --git a/frontend/src/routes/oidc/authorize/+page.svelte b/frontend/src/routes/oidc/authorize/+page.svelte
@@ -24,11 +24,13 @@
     import LangSelector from "$lib/LangSelector.svelte";
     import getPkce from "oauth-pkce";
     import {PKCE_VERIFIER_UPSTREAM} from "../../../utils/constants.js";
+    import IconHome from "$lib/icons/IconHome.svelte";
 
     let t = {};
 
     let clientId;
     let clientName = '';
+    let clientUri = '';
     let redirectUri = '';
     let nonce = '';
     let scopes = [];
@@ -60,6 +62,7 @@
     let emailSuccess = false;
     let tooManyRequests = false;
     let emailAfterSubmit = '';
+    let isRegOpen = false;
 
     let formValues = {email: '', password: ''};
     let formErrors = {};
@@ -104,16 +107,19 @@
     }
 
     onMount(async () => {
-        clientName = window.document.getElementsByName('rauthy-data')[0].id
+        const data = window.document.getElementsByName('rauthy-data')[0].id.split('\n');
+        clientName = data[0];
+        clientUri = data[1];
+        isRegOpen = data[2] === "true";
 
-        const action = window.document.getElementsByName('rauthy-action')[0].id
+        const action = window.document.getElementsByName('rauthy-action')[0].id;
         if ('Refresh' === action) {
             refresh = true;
         } else if (action?.startsWith('MfaLogin ')) {
             existingMfaUser = action.replace('MfaLogin ', '');
         }
 
-        csrf = window.document.getElementsByName('rauthy-csrf-token')[0].id
+        csrf = window.document.getElementsByName('rauthy-csrf-token')[0].id;
         saveCsrfToken(csrf);
 
         // demo value for testing - only un-comment in local dev, not for production build
@@ -303,11 +309,7 @@
 </script>
 
 <svelte:head>
-    {#if clientName}
-        <title>Login {clientName}</title>
-    {:else}
-        <title>Login {clientId}</title>
-    {/if}
+    <title>Login {clientName || clientId}</title>
 </svelte:head>
 
 <BrowserCheck>
@@ -319,10 +321,15 @@
                         <img src="{`/auth/v1/clients/${clientId}/logo`}" alt="No Logo Available"/>
                     {/if}
                 </div>
+                {#if clientUri}
+                    <a class="home" href={clientUri}>
+                        <IconHome opacity={0.5}/>
+                    </a>
+                {/if}
             </div>
 
             <div class="name">
-                <h2>{clientName}</h2>
+                <h2>{clientName || clientId}</h2>
             </div>
 
             {#if webauthnData}
@@ -407,6 +414,12 @@
                 </div>
             {/if}
 
+            {#if isRegOpen}
+                <a class="reg" href="/auth/v1/users/register" target="_blank">
+                    {t.signUp}
+                </a>
+            {/if}
+
             {#if err}
                 <div class="errMsg errMsgApi">
                     {err}
@@ -478,7 +491,11 @@
     .head {
         display: flex;
         justify-content: space-between;
-        padding-right: 35px;
+    }
+
+    .home {
+        margin-right: 5px;
+        cursor: pointer;
     }
 
     .name {
@@ -498,6 +515,10 @@
         margin-top: .66rem;
     }
 
+    .reg {
+        margin-left: 5px;
+    }
+
     .success {
         color: var(--col-ok);
     }

diff --git a/frontend/src/routes/users/register/+page.svelte b/frontend/src/routes/users/register/+page.svelte
@@ -114,13 +114,14 @@
 <BrowserCheck>
     <WithI18n bind:t content="register">
         <div class="container">
-            {#if restrictedDomain}
-                <div class="domainTxt">
-                    <h1>{t.userReg}</h1>
+
+            <div class="domainTxt">
+                <h1>{t.userReg}</h1>
+                {#if restrictedDomain}
                     {t.domainRestricted}<br>
                     {t.domainAllowed} <code>@{restrictedDomain}</code>
-                </div>
-            {/if}
+                {/if}
+            </div>
 
             <Input
                     type="email"

diff --git a/justfile b/justfile
@@ -307,6 +307,7 @@ build: test-full
     set -euxo pipefail
 
     cargo clean
+    mkdir -p out
 
     cargo clippy -- -D warnings
     cross build --release --target x86_64-unknown-linux-musl
@@ -323,6 +324,7 @@ build-postgres: test-postgres
     set -euxo pipefail
 
     cargo clean
+    mkdir -p out
 
     DATABASE_URL=$DB_URL_POSTGRES cargo clippy --features postgres -- -D warnings
 

diff --git a/rauthy-handlers/src/oidc.rs b/rauthy-handlers/src/oidc.rs
@@ -7,7 +7,7 @@ use chrono::Utc;
 use rauthy_common::constants::{
     APPLICATION_JSON, AUTH_HEADERS_ENABLE, AUTH_HEADER_EMAIL, AUTH_HEADER_EMAIL_VERIFIED,
     AUTH_HEADER_FAMILY_NAME, AUTH_HEADER_GIVEN_NAME, AUTH_HEADER_GROUPS, AUTH_HEADER_MFA,
-    AUTH_HEADER_ROLES, AUTH_HEADER_USER, COOKIE_MFA, HEADER_HTML, SESSION_LIFETIME,
+    AUTH_HEADER_ROLES, AUTH_HEADER_USER, COOKIE_MFA, HEADER_HTML, OPEN_USER_REG, SESSION_LIFETIME,
 };
 use rauthy_common::error_response::ErrorResponse;
 use rauthy_common::utils::real_ip_from_req;
@@ -128,12 +128,18 @@ pub async fn get_authorize(
     }
 
     let auth_providers_json = AuthProviderTemplate::get_all_json_template(&data).await?;
+    let tpl_data = Some(format!(
+        "{}\n{}\n{}",
+        client.name.unwrap_or_default(),
+        client.client_uri.unwrap_or_default(),
+        *OPEN_USER_REG,
+    ));
 
     // if the user is still authenticated and everything is valid -> immediate refresh
     if !force_new_session && principal.validate_session_auth().is_ok() {
         let csrf = principal.get_session_csrf_token()?;
         let body = AuthorizeHtml::build(
-            &client.name,
+            &tpl_data,
             csrf,
             FrontendAction::Refresh,
             &colors,
@@ -158,7 +164,7 @@ pub async fn get_authorize(
     }
 
     let body = AuthorizeHtml::build(
-        &client.name,
+        &tpl_data,
         &session.csrf_token,
         action,
         &colors,

diff --git a/rauthy-models/src/i18n/authorize.rs b/rauthy-models/src/i18n/authorize.rs
@@ -21,6 +21,7 @@ pub struct I18nAuthorize<'a> {
     password_required: &'a str,
     provide_mfa: &'a str,
     request_expires: &'a str,
+    sign_up: &'a str,
 }
 
 impl SsrJson for I18nAuthorize<'_> {
@@ -56,6 +57,7 @@ To get access, you need to log in to your account and add at least one additiona
             password_required: "Password is required",
             provide_mfa: "Please login with your MFA device",
             request_expires: "Request expires",
+            sign_up: "User Registration",
         }
     }
 
@@ -79,6 +81,7 @@ hinzufügen."#,
             password_required: "Password ist notwendig",
             provide_mfa: "Bitte stellen Sie Ihr MFA Gerät zur Verfügung",
             request_expires: "Anfrage läuft ab",
+            sign_up: "Benutzer Registrierung",
         }
     }
 }