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 2021-03-18 11:18:23 -04:00 committed by GitHub
parent c7b3bd1915
commit f8ea01e615
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 65 additions and 19 deletions

View File

@ -7,7 +7,7 @@
>
</button>
{{#if this.show}}
<div class="key">{{@item}}</div>
<code>{{@item}}</code>
{{else}}
<hr />
{{/if}}

View File

@ -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);

View File

@ -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>

View File

@ -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;

View File

@ -2,9 +2,6 @@
color: $gray-500;
background-color: $gray-010;
}
%empty-state > ul {
border-color: $gray-300;
}
%empty-state-header {
border-bottom: none;
}

View File

@ -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`;