apply review suggestion

Author: lvaroqui

frontend/src/i18n/admin/de.ts

@@ -52,6 +52,10 @@ export let I18nAdminEn: I18nAdmin = {
         confidential: "Confidential",
         confidentialNoSecret: "This is a non-confidential client and therefore has not secret.",
         config: "Client Configuration",
+        custEmailMapping: "Custom E-Mail Mapping",
+        custEmailMappingExplanation: "Use a custom attribute for the E-Mail that will be provided to the client.",
+        custEmailMappingNoAttrs: `No custom attributes are available for custom E-Mail mapping.
+        The attribute must be of type \`email\` and must not be user editable.`,
         delete1: "Are you sure you want to delete this client?",
         descAuthCode: `The validity for auth codes can be adjusted for increased security. Auth codes
             can be used only once and are valid for 60 seconds by default. The shorter the validity, the
@@ -64,20 +68,20 @@ export let I18nAdminEn: I18nAdmin = {
             Only users, that are assigned to a matching group, will be allowed to log in.`,
         descOrigin: `External, additionally allowed origins - usually only necessary, if this client
             needs to make requests to Rauthy directly from the browser, typically SPAs.`,
-        descPKCE: `If the client supports it, you should always activate S256 PKCE for additional 
-            security. If a non-confidential client (e.g. a SPA) is being used, you must at least 
+        descPKCE: `If the client supports it, you should always activate S256 PKCE for additional
+            security. If a non-confidential client (e.g. a SPA) is being used, you must at least
             activate one of the PKCE challenges to have enough security.`,
         descPKCEEnforce: `If any PKCE is activated, Rauthy will enforce the usage during Logins, and
             rejects login request that do not contain a valida challenge.`,
-        descUri: `You can provide as many redirect URIs as you like. At the end of each, you can use 
+        descUri: `You can provide as many redirect URIs as you like. At the end of each, you can use
             <code>*</code> as a Wildcard.`,
         errConfidentialPKCE: `The client must either be confidential or have at least one PKCE
             challenge activated.`,
         forceMfa: "Force MFA",
         groupLoginPrefix: "Login Group Prefix",
         name: "Client Name",
         scim: {
-            baseUri: `The SCIM base URI is the one from which the sub routes like 
+            baseUri: `The SCIM base URI is the one from which the sub routes like
                 <code>{base_uri}/Users/{id}</base_uri></code> can be derived correctly.`,
             desc: "If this client supports {{ SCIM_LINK }}, you can activate it here.",
             enable: "Enable SCIMv2",
@@ -91,15 +95,15 @@ export let I18nAdminEn: I18nAdmin = {
             reqLi1: "The client must handle <code>externalId</code> correctly.",
             reqLi2: `At least <code>/Users</code> endpoints with <code>filter=externalId eq "*"</code> and
                 <code>filter=userName eq "*"</code> must be supported.`,
-            reqLi3: `If groups should be synchronized, <code>/Groups</code> must also support 
+            reqLi3: `If groups should be synchronized, <code>/Groups</code> must also support
                 <code>filter=displayName eq "*"</code>.`,
         },
         scopes: {
             allowed: "Allowed Scopes",
             default: "Default Scopes",
             desc: `Allowed Scopes are the ones the client is allowed to request dynamically during
             a redirect to the login when using the <code>authorization_code</code> flow. The default
-            scopes will always be added to the tokens to solve some issues when using the 
+            scopes will always be added to the tokens to solve some issues when using the
             <code>password</code> for instance.`,
         },
         secret: {
@@ -149,11 +153,11 @@ export let I18nAdminEn: I18nAdmin = {
             keysAvailable: "Available Keys",
             migrate: "Migrate",
             migrateToKey: 'Migrate all existing encrypted values to the following key',
-            p1: `These Keys are used for an additional encryption at rest, independently from any data store technology 
+            p1: `These Keys are used for an additional encryption at rest, independently from any data store technology
             used under the hood. They are configured statically, but can be rotated and migrated on this page manually.`,
             p2: `The active key is statically set in the Rauthy config file / environment variables. It cannot be changed
             here dynamically. All new JWK encryption's will always use the currently active key.`,
-            p3: `If you migrate all existing secrets, it might take a few seconds to finish, if you have a big 
+            p3: `If you migrate all existing secrets, it might take a few seconds to finish, if you have a big
             dataset.`,
             pNotPossible: 'To be able to migrate, at least 2 encryption keys need to be available.',
         },
@@ -162,63 +166,63 @@ export let I18nAdminEn: I18nAdmin = {
 
             currValuesHead: 'Current values',
             currValues1: 'The current values from the backend are the following:',
-            currValuesNote: `Note: The Login Time from the backend does only provide a good guideline after at least 5 
-            successful logins, after Rauthy has been started. The base value is always 2000 ms after a fresh restart 
+            currValuesNote: `Note: The Login Time from the backend does only provide a good guideline after at least 5
+            successful logins, after Rauthy has been started. The base value is always 2000 ms after a fresh restart
             and will adjust over time with each successful login.`,
             currValuesThreadsAccess: 'Threads (p_cost) Rauthy has access to',
 
             loginTimeHead: 'A word about Login Time',
-            loginTime1: `Generally, users want everything as fast as possible. When doing a safe login though, a time 
-            between 500 - 1000 ms should not be a problem. The login time must not be too short, since it would lower 
+            loginTime1: `Generally, users want everything as fast as possible. When doing a safe login though, a time
+            between 500 - 1000 ms should not be a problem. The login time must not be too short, since it would lower
             the strength of the hash, of course.`,
-            loginTime2: `To provide as much safety by default as possible, this utility does not allow you to go below 
+            loginTime2: `To provide as much safety by default as possible, this utility does not allow you to go below
             500 ms for the login time.`,
 
             mCost1: `The <code>m_cost</code> defines the amount of <b>memory (in kB)</b>, which is used for the hashing.
             The higher the value, the better, of course. But you need to keep in mind the servers resources.<br>
             When you hash 4 passwords at the same time, for instance, the backend needs <code>4 x m_cost</code>
             during the hashing. These resources must be available.`,
             mCost2: `Tuning <code>m_cost</code> is pretty easy. Define the max amount of memory that Rauthy should use,
-            divide it by the number of max allowed parallel logins (<code>MAX_HASH_THREADS</code>) and subtract a small 
+            divide it by the number of max allowed parallel logins (<code>MAX_HASH_THREADS</code>) and subtract a small
             static amount of memory. How much static memory should be taken into account depends on the used database
             and the total amount of users, but will typically be in the range of 32 - 96 MB.`,
             mCost3: 'The minimal allowed <code>m_cost</code> is <code>32768</code>.',
 
-            pCost1: `The <code>p_cost</code> defines the amount of <b>parallelism</b> for hashing. This value most often 
+            pCost1: `The <code>p_cost</code> defines the amount of <b>parallelism</b> for hashing. This value most often
             tops out at ~8, which is the default for Rauthy.`,
             pCost2: `The general rule is:<br>
             Set the <code>p_cost</code> to twice the size of cores your have available.<br>
             For instance, if you have 4 cores available, set the <code>p_cost</code> to <code>8</code>.<br>
             However, this value must take the configured allowed parallel logins (<code>MAX_HASH_THREADS</code>) into
             account and be reduced accordingly.`,
 
-            tCost1: `The <code>t_cost</code> defines the amount of <b>time</b> for hashing. This value is actually the 
-            only value, that needs tuning, since <code>m_cost</code> and <code>p_cost</code> are basically given by the 
+            tCost1: `The <code>t_cost</code> defines the amount of <b>time</b> for hashing. This value is actually the
+            only value, that needs tuning, since <code>m_cost</code> and <code>p_cost</code> are basically given by the
             environment.`,
             tCost2: `Tuning is easy: Set <code>m_cost</code> and <code>p_cost</code> accordingly and then increase
             <code>t_cost</code> as long as you have not reached your hashing-time-goal.`,
 
             utilityHead: 'Parameter Calculation Utility',
-            utility1: `You can use this tool to approximate good values for your deployment. Keep in mind, that this 
-            should be executed with Rauthy in its final place with all final resources available. You should execute 
+            utility1: `You can use this tool to approximate good values for your deployment. Keep in mind, that this
+            should be executed with Rauthy in its final place with all final resources available. You should execute
             this utility during load to not over tune.`,
-            utility2: `<code>m_cost</code> is optional and the safe minimal value of <code>32768</code> would be chosen, 
+            utility2: `<code>m_cost</code> is optional and the safe minimal value of <code>32768</code> would be chosen,
             if empty. <code>p_cost</code> is optional too and Rauthy will utilize all threads it can see, if empty.`,
 
             time: "Time",
             targetTime: "Target Time",
             tune: 'Important: These values need to be tuned on the final architecture!',
-            pDetials: `If you want a detailed introduction to Argon2ID, many sources exist online. This guide just 
+            pDetials: `If you want a detailed introduction to Argon2ID, many sources exist online. This guide just
             gives very short overview about the values. Three of them need to be configured:`,
-            pTune: `They change depending on the capabilities of the system. The more powerful the system, the more safe 
+            pTune: `They change depending on the capabilities of the system. The more powerful the system, the more safe
             these values can be.`,
             pUtility: `This utility helps you find the best Argon2ID settings for your platform.
-            Argon2ID is currently the safest available password hashing algorithm. To use it to its fullest potential, 
+            Argon2ID is currently the safest available password hashing algorithm. To use it to its fullest potential,
             it has to be tuned for each deployment.`,
         },
         openapi: "If you want to integrate an external application and use Rauthy's API, take a look at the",
         openapiNote: `Depending on the backend configuration, the Swagger UI may not be exposed publicly at this point.
-            It is however by default available via the internal metrics HTTP server to not expose any 
+            It is however by default available via the internal metrics HTTP server to not expose any
             information.`,
         source: "The source code can be found here",
     },
@@ -242,7 +246,7 @@ export let I18nAdminEn: I18nAdmin = {
         p1: "These are the Json Web Keys (JWKs) used for token singing.",
         p2: `The JWKs will be rotated by default every 1st of a month. For all newly created tokens, only the latest
         available key for the given algorithm will be used for signing. Old keys will be kept for a while to make sure
-        that currently valid tokens can still be validated properly. After a while, they will be cleaned up 
+        that currently valid tokens can still be validated properly. After a while, they will be cleaned up
         automatically.`,
         p3: `Keys can also be rotated manually. Depending on the hardware this Rauthy instance is running on, it might
         take a few seconds.`,
@@ -359,7 +363,7 @@ export let I18nAdminEn: I18nAdmin = {
         forceLogout: `Are you sure you want to invalidate all existing sessions and delete all refresh tokens
             for this user?`,
         lastLogin: "Last Login",
-        manualInitDesc: `The user can also be initialized here, In this case though, you need to communicate the 
+        manualInitDesc: `The user can also be initialized here, In this case though, you need to communicate the
             password directly.`,
         manualInit: "Manual Initialization",
         mfaDelete1: "You can delete Passkeys for this users.",

frontend/src/i18n/admin/en.ts

@@ -52,6 +52,9 @@ export interface I18nAdmin {
         confidential: string,
         confidentialNoSecret: string,
         config: string,
+        custEmailMapping: string,
+        custEmailMappingExplanation: string,
+        custEmailMappingNoAttrs: string,
         delete1: string,
         descAuthCode: string,
         descClientUri: string,

frontend/src/i18n/admin/interface.ts

@@ -50,6 +50,10 @@ export let I18nAdminKo: I18nAdmin = {
         confidential: "기밀",
         confidentialNoSecret: "이 클라이언트는 기밀이 아닌 클라이언트이므로 Secret이 없습니다.",
         config: "클라이언트 설정",
+        custEmailMapping: "Custom E-Mail Mapping",
+        custEmailMappingExplanation: "Use a custom attribute for the E-Mail that will be provided to the client.",
+        custEmailMappingNoAttrs: `No custom attributes are available for custom E-Mail mapping.
+        The attribute must be of type \`email\` and must not be user editable.`,
         delete1: "이 클라이언트를 삭제하시겠습니까?",
         descAuthCode: `보안을 강화하기 위해 인증 코드의 유효 기간을 조정할 수 있습니다. 인증 코드는
             한 번만 사용할 수 있으며 기본적으로 60초 동안 유효합니다. 클라이언트가 로그인 절차를
@@ -73,7 +77,7 @@ export let I18nAdminKo: I18nAdmin = {
         groupLoginPrefix: "Login Group Prefix",
         name: "클라이언트 이름",
         scim: {
-            baseUri: `The SCIM base URI is the one from which the sub routes like 
+            baseUri: `The SCIM base URI is the one from which the sub routes like
                 <code>{base_uri}/Users/{id}</base_uri></code> can be derived correctly.`,
             desc: "If this client supports {{ SCIM_LINK }}, you can activate it here.",
             enable: "Enable SCIMv2",
@@ -87,7 +91,7 @@ export let I18nAdminKo: I18nAdmin = {
             reqLi1: "The client must handle <code>externalId</code> correctly.",
             reqLi2: `At least <code>/Users</code> endpoints with <code>filter=externalId eq "*"</code> and
                 <code>filter=userName eq "*"</code> must be supported.`,
-            reqLi3: `If groups should be synchronized, <code>/Groups</code> must also support 
+            reqLi3: `If groups should be synchronized, <code>/Groups</code> must also support
                 <code>filter=displayName eq "*"</code>.`,
         },
         scopes: {
@@ -348,7 +352,7 @@ export let I18nAdminKo: I18nAdmin = {
         descAttr: `사용자 지정 속성을 설정합니다. 모든 키/값 쌍은 문자열/JSON 값으로 처리됩니다.`,
         forceLogout: `기존 세션을 모두 삭제하고, 이 사용자의 모든 Refresh 토큰을 삭제하시겠습니까?`,
         lastLogin: "마지막 로그인",
-        manualInitDesc: `The user can also be initialized here, In this case though, you need to communicate the 
+        manualInitDesc: `The user can also be initialized here, In this case though, you need to communicate the
             password directly.`,
         manualInit: "Manual Initialization",
         mfaDelete1: "이 사용자의 패스키를 삭제할 수 있습니다.",

frontend/src/i18n/admin/ko.ts

@@ -33,18 +33,16 @@
         client = $bindable(),
         clients,
         scopesAll,
-        attrsAll,
+        attrsEmail,
         onSave,
     }: {
         client: ClientResponse,
         clients: ClientResponse[],
         scopesAll: string[],
-        attrsAll: string[],
+        attrsEmail: string[],
         onSave: () => void,
     } = $props();
 
-    let attrsWithNone = $state(['None'].concat(attrsAll));
-
     let t = useI18n();
     let ta = useI18nAdmin();
 
@@ -63,7 +61,9 @@
     let postLogoutRedirectURIs: string[] = $state(client.post_logout_redirect_uris ? Array.from(client.post_logout_redirect_uris) : []);
     let backchannel_logout_uri: string = $state(client.backchannel_logout_uri || '');
     let restrict_group_prefix: string = $state(client.restrict_group_prefix || '');
-    let cust_email_mapping: string = $state(client.cust_email_mapping || 'None');
+    let cust_email_mapping: string | undefined = $state(client.cust_email_mapping);
+    let cust_email_mapping_exists = $derived(cust_email_mapping !== undefined);
+
 
     let scimEnabled = $state(client.scim !== undefined);
     let scim: ScimClientRequestResponse = $state({
@@ -122,7 +122,7 @@
             origins = client.allowed_origins ? Array.from(client.allowed_origins) : [];
             redirectURIs = Array.from(client.redirect_uris);
             postLogoutRedirectURIs = client.post_logout_redirect_uris ? Array.from(client.post_logout_redirect_uris) : [];
-            cust_email_mapping = client.cust_email_mapping || 'None';
+            cust_email_mapping = client.cust_email_mapping;
 
             flows.authorizationCode = client.flows_enabled.includes('authorization_code');
             flows.clientCredentials = client.flows_enabled.includes('client_credentials');
@@ -210,7 +210,7 @@
             contacts: contacts.length > 0 ? contacts : undefined,
             backchannel_logout_uri: backchannel_logout_uri || undefined,
             restrict_group_prefix: restrict_group_prefix || undefined,
-            cust_email_mapping: cust_email_mapping != 'None' ? cust_email_mapping : undefined,
+            cust_email_mapping: cust_email_mapping || undefined,
         }
 
         if (flows.authorizationCode) {
@@ -318,14 +318,29 @@
                 width={inputWidth}
                 pattern={PATTERN_GROUP}
         />
+        <span class="muted">{ta.clients.custEmailMappingExplanation}</span>
         <div class="flex gap-05">
-            Todo
+            {ta.clients.custEmailMapping}
+            <InputCheckbox
+                disabled={attrsEmail.length === 0}
+                ariaLabel={ta.clients.custEmailMapping}
+                bind:checked={cust_email_mapping_exists}
+                onclickOverride={(isChecked: boolean) => {
+                    cust_email_mapping = attrsEmail.length > 0 && isChecked ? attrsEmail[0] : undefined;
+                }}
+            />
+
+            {#if cust_email_mapping }
             <Options
-                ariaLabel={ta.attrs.name}
-                options={attrsWithNone}
+                ariaLabel={ta.clients.custEmailMapping}
+                options={attrsEmail}
                 bind:value={cust_email_mapping}
             />
+            {/if}
         </div>
+        {#if attrsEmail.length === 0}
+            <span class="muted">{ta.clients.custEmailMappingNoAttrs}</span>
+        {/if}
 
         <p class="mb-0"><b>Authentication Flows</b></p>
         <InputCheckbox ariaLabel="authorization_code" bind:checked={flows.authorizationCode}>

frontend/src/lib/admin/clients/ClientConfig.svelte

@@ -52,7 +52,7 @@
 
 <div class="details">
     {#if selected === ta.nav.config}
-        <ClientConfig {client} {clients} {scopesAll} {attrsAll} {onSave}/>
+        <ClientConfig {client} {clients} {scopesAll} attrsEmail={attrsAll} {onSave}/>
     {:else if selected === 'Secret'}
         <ClientSecret {client}/>
     {:else if selected === 'Branding'}