ui: Auth Methods- Updates to certificate and empty state in show page (#9895)
* Update Certificate to be monospaced * Add empty states for claim and list claim mappings * Update the styling of empty state actions block * Update mocked PEM certificate format
This commit is contained in:
Kenia
GitHub
parent
c7b3bd1915
commit
f8ea01e615
|
|
@ -7,7 +7,7 @@
|
|||
>
|
||||
</button>
|
||||
{{#if this.show}}
|
||||
<div class="key">{{@item}}</div>
|
||||
<code>{{@item}}</code>
|
||||
{{else}}
|
||||
<hr />
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -12,9 +12,11 @@
|
|||
button.show::before {
|
||||
@extend %with-visibility-show-icon, %as-pseudo;
|
||||
}
|
||||
div.key {
|
||||
code {
|
||||
background-color: var(--gray-050);
|
||||
overflow-wrap: anywhere;
|
||||
overflow-wrap: break-word;
|
||||
max-width: min-content;
|
||||
padding: 0 12px;
|
||||
}
|
||||
hr {
|
||||
border: 3px dashed var(--gray-300);
|
||||
|
|
|
|||
|
|
@ -166,9 +166,9 @@
|
|||
|
||||
<hr />
|
||||
|
||||
{{#if @item.Config.ClaimMappings}}
|
||||
<section class="claim-mappings">
|
||||
<h2>Claim Mappings</h2>
|
||||
{{#if @item.Config.ClaimMappings}}
|
||||
<p>Use this if the claim you are capturing is singular. When mapped, the values can be any of a number, string, or boolean and will all be stringified when returned.</p>
|
||||
<table>
|
||||
<thead>
|
||||
|
|
@ -186,16 +186,34 @@
|
|||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
{{else}}
|
||||
<EmptyState>
|
||||
<BlockSlot @name="header">
|
||||
<h2>No claim mappings</h2>
|
||||
</BlockSlot>
|
||||
<BlockSlot @name="body">
|
||||
<p>Use this if the claim you are capturing is singular. When mapped, the values can be any of a number, string, or boolean and will all be stringified when returned.</p>
|
||||
</BlockSlot>
|
||||
<BlockSlot @name="actions">
|
||||
<li class="docs-link">
|
||||
{{#if (eq @item.Type 'jwt')}}
|
||||
<a href="{{env 'CONSUL_DOCS_URL'}}/security/acl/auth-methods/jwt#claimmappings" rel="noopener noreferrer" target="_blank">Read the documentation</a>
|
||||
{{else}}
|
||||
<a href="{{env 'CONSUL_DOCS_URL'}}/security/acl/auth-methods/oidc#claimmappings" rel="noopener noreferrer" target="_blank">Read the documentation</a>
|
||||
{{/if}}
|
||||
</li>
|
||||
</BlockSlot>
|
||||
</EmptyState>
|
||||
{{/if}}
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
{{#if @item.Config.ListClaimMappings}}
|
||||
<section class="list-claim-mappings">
|
||||
<h2>List Claim Mappings</h2>
|
||||
{{#if @item.Config.ListClaimMappings}}
|
||||
<p>Use this if the claim you are capturing is list-like (such as groups). When mapped, the values can be any of a number, string, or boolean and will all be stringified when returned.</p>
|
||||
<table>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Key</td>
|
||||
|
|
@ -211,7 +229,25 @@
|
|||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
{{else}}
|
||||
<EmptyState>
|
||||
<BlockSlot @name="header">
|
||||
<h2>No list claim mappings</h2>
|
||||
</BlockSlot>
|
||||
<BlockSlot @name="body">
|
||||
<p>Use this if the claim you are capturing is list-like (such as groups). When mapped, the values can be any of a number, string, or boolean and will all be stringified when returned.</p>
|
||||
</BlockSlot>
|
||||
<BlockSlot @name="actions">
|
||||
<li class="docs-link">
|
||||
{{#if (eq @item.Type 'jwt')}}
|
||||
<a href="{{env 'CONSUL_DOCS_URL'}}/security/acl/auth-methods/jwt#listclaimmappings" rel="noopener noreferrer" target="_blank">Read the documentation</a>
|
||||
{{else}}
|
||||
<a href="{{env 'CONSUL_DOCS_URL'}}/security/acl/auth-methods/oidc#listclaimmappings" rel="noopener noreferrer" target="_blank">Read the documentation</a>
|
||||
{{/if}}
|
||||
</li>
|
||||
</BlockSlot>
|
||||
</EmptyState>
|
||||
{{/if}}
|
||||
</section>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
@ -28,10 +28,7 @@
|
|||
%empty-state > ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
margin-top: 1.5em;
|
||||
padding-top: 0.6em;
|
||||
border-top: 1px solid;
|
||||
margin-top: 1em;
|
||||
}
|
||||
%empty-state-anchor {
|
||||
display: inline-flex;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,6 @@
|
|||
color: $gray-500;
|
||||
background-color: $gray-010;
|
||||
}
|
||||
%empty-state > ul {
|
||||
border-color: $gray-300;
|
||||
}
|
||||
%empty-state-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,20 @@
|
|||
${
|
||||
[1].map(i => {
|
||||
const type = `${fake.helpers.randomize(['kubernetes', 'jwt', 'oidc'])}`;
|
||||
const cert = `-----BEGIN CERTIFICATE-----
|
||||
MIIH/TCCBeWgAwIBAgIQaBYE3/M08XHYCnNVmcFBcjANBgkqhkiG9w0BAQsFADBy
|
||||
MQswCQYDVQQGEwJVUzEOMAwGA1UECAwFVGV4YXMxEDAOBgNVBAcMB0hvdXN0b24x
|
||||
ETAPBgNVBAoMCFNTTCBDb3JwMS4wLAYDVQQDDCVTU0wuY29tIEVWIFNTTCBJbnRl
|
||||
cm1lZGlhdGUgQ0EgUlNBIFIzMB4XDTIwMDQwMTAwNTgzM1oXDTIxMDcxNjAwNTgz
|
||||
M1owgb0xCzAJBgNVBAYTAlVTMQ4wDAYDVQQIDAVUZXhhczEQMA4GA1UEBwwHSG91
|
||||
c3RvbjERMA8GA1UECgwIU1NMIENvcnAxFjAUBgNVBAUTDU5WMjAwODE2MTQyNDMx
|
||||
FDASBgNVBAMMC3d3dy5zc2wuY29tMR0wGwYDVQQPDBRQcml2YXRlIE9yZ2FuaXph
|
||||
dGlvbjEXMBUGCysGAQQBgjc8AgECDAZOZXZhZGExEzARBgsrBgEEAYI3PAIBAxMC
|
||||
VVMwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDHheRkbb1FCc7xRKst
|
||||
wK0JIGaKY8t7JbS2bQ2b6YIJDgnHuIYHqBrCUV79oelikkokRkFvcvpaKinFHDQH
|
||||
UpWEI6RUERYmSCg3O8Wi42uOcV2B5ZabmXCkwdxY5Ecl51BbM8UnGdoAGbdNmiRm
|
||||
SmTjcs+lhMxg4fFY6lBpiEVFiGUjGRR+61R67Lz6U4KJeLNcCm07QwFYKBmpi08g
|
||||
-----END CERTIFICATE-----`;
|
||||
let sourceType;
|
||||
|
||||
if (type !== 'kubernetes') {
|
||||
|
|
@ -20,14 +34,14 @@ ${
|
|||
case 'kubernetes':
|
||||
config = {
|
||||
Host: `https://${fake.internet.ip()}:8443`,
|
||||
CACert: `-----BEGIN CERTIFICATE-----${fake.internet.password(1357)}-----END CERTIFICATE-----`,
|
||||
CACert: cert,
|
||||
ServiceAccountJWT: `eyJhbGciOiJ${fake.internet.password(25)}.eyJ${fake.internet.password(61)}.${fake.internet.password(32)}`
|
||||
};
|
||||
break;
|
||||
case 'oidc':
|
||||
config = {
|
||||
OIDCDiscoveryURL: `https://${fake.internet.ip()}:8443`,
|
||||
OIDCDiscoveryCACert: `-----BEGIN CERTIFICATE-----${fake.internet.password(1357)}-----END CERTIFICATE-----`,
|
||||
OIDCDiscoveryCACert: cert,
|
||||
OIDCClientID: `${fake.hacker.noun()}-ID`,
|
||||
OIDCClientSecret: `${fake.hacker.noun()}-secret`,
|
||||
BoundAudiences: ["aud_example_0", "aud_example_1"],
|
||||
|
|
@ -55,11 +69,11 @@ ${
|
|||
|
||||
switch(sourceType) {
|
||||
case 'JWTValidationPubKeys':
|
||||
config.JWTValidationPubKeys = `-----BEGIN CERTIFICATE-----${fake.internet.password(1357)}-----END CERTIFICATE-----`;
|
||||
config.JWTValidationPubKeys = cert;
|
||||
break;
|
||||
case 'JWKSURL':
|
||||
config.JWKSURL = `https://${fake.internet.ip()}:8443`;
|
||||
config.JWKSCACert = `-----BEGIN CERTIFICATE-----${fake.internet.password(1357)}-----END CERTIFICATE-----`;
|
||||
config.JWKSCACert = cert;
|
||||
break;
|
||||
case 'OIDCDiscoveryURL':
|
||||
config.OIDCDiscoveryURL = `https://${fake.internet.ip()}:8443`;
|
||||
|
|
|
|||
Loading…
Reference in New Issue