UX feedback changes
This commit is contained in:
Dean
parent
faa765f69d
commit
3068a0013a
|
|
@ -210,7 +210,6 @@
|
||||||
providers[res.type]._id = res._id
|
providers[res.type]._id = res._id
|
||||||
})
|
})
|
||||||
notifications.success(`Settings saved`)
|
notifications.success(`Settings saved`)
|
||||||
scopesFields[0].editing = false
|
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
notifications.error("Failed to update auth settings")
|
notifications.error("Failed to update auth settings")
|
||||||
|
|
@ -227,7 +226,7 @@
|
||||||
|
|
||||||
let scopesFields = [
|
let scopesFields = [
|
||||||
{
|
{
|
||||||
editing: false,
|
editing: true,
|
||||||
inputText: null,
|
inputText: null,
|
||||||
error: null,
|
error: null,
|
||||||
},
|
},
|
||||||
|
|
@ -418,7 +417,19 @@
|
||||||
<span class="advanced-config">
|
<span class="advanced-config">
|
||||||
<Layout gap="XS" noPadding>
|
<Layout gap="XS" noPadding>
|
||||||
<Heading size="XS">
|
<Heading size="XS">
|
||||||
<div class="advanced">Advanced</div>
|
<div class="auth-scopes">
|
||||||
|
<div>Advanced</div>
|
||||||
|
<Button
|
||||||
|
secondary
|
||||||
|
newStyles
|
||||||
|
size="S"
|
||||||
|
on:click={() => {
|
||||||
|
providers.oidc.config.configs[0]["scopes"] = [...defaultScopes]
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Restore Defaults
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</Heading>
|
</Heading>
|
||||||
<Body size="S">
|
<Body size="S">
|
||||||
Changes to your authentication scopes will only take effect when you
|
Changes to your authentication scopes will only take effect when you
|
||||||
|
|
@ -426,10 +437,9 @@
|
||||||
modification.
|
modification.
|
||||||
</Body>
|
</Body>
|
||||||
|
|
||||||
<div class="auth-form" class:editing={scopesFields[0].editing}>
|
<div class="auth-form">
|
||||||
<Label size="L" tooltip={"Auth Scopes"}>{"Auth Scopes"}</Label>
|
|
||||||
{#if scopesFields[0].editing}
|
|
||||||
<span class="add-new">
|
<span class="add-new">
|
||||||
|
<Label size="L" tooltip={"Auth Scopes"}>{"Auth Scopes"}</Label>
|
||||||
<Input
|
<Input
|
||||||
error={scopesFields[0].error}
|
error={scopesFields[0].error}
|
||||||
placeholder={"New Scope"}
|
placeholder={"New Scope"}
|
||||||
|
|
@ -474,16 +484,12 @@
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="tag-wrap">
|
<div class="tag-wrap">
|
||||||
|
<span />
|
||||||
<Tags>
|
<Tags>
|
||||||
<Tag disabled={!scopesFields[0].editing} closable={false}>
|
<Tag closable={false}>openid</Tag>
|
||||||
openid
|
|
||||||
</Tag>
|
|
||||||
{#each providers.oidc.config.configs[0]["scopes"] || [...defaultScopes] as tag, idx}
|
{#each providers.oidc.config.configs[0]["scopes"] || [...defaultScopes] as tag, idx}
|
||||||
<Tag
|
<Tag
|
||||||
disabled={!scopesFields[0].editing}
|
|
||||||
closable={scopesFields[0].editing}
|
closable={scopesFields[0].editing}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
let idxScopes = providers.oidc.config.configs[0]["scopes"]
|
let idxScopes = providers.oidc.config.configs[0]["scopes"]
|
||||||
|
|
@ -498,57 +504,8 @@
|
||||||
{tag}
|
{tag}
|
||||||
</Tag>
|
</Tag>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
{#if !scopesFields[0].editing}
|
|
||||||
<span
|
|
||||||
class="edit-icon"
|
|
||||||
on:click={() => {
|
|
||||||
if (!providers.oidc.config.configs[0]["scopes"]) {
|
|
||||||
providers.oidc.config.configs[0]["scopes"] = [
|
|
||||||
...defaultScopes,
|
|
||||||
]
|
|
||||||
}
|
|
||||||
scopesFields[0].editing = !scopesFields[0].editing
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Tag>Edit</Tag>
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
</Tags>
|
</Tags>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if scopesFields[0].editing}
|
|
||||||
<div class="scope_actions">
|
|
||||||
<Button
|
|
||||||
quiet
|
|
||||||
secondary
|
|
||||||
size="S"
|
|
||||||
on:click={() => {
|
|
||||||
if (originalOidcDoc.config.configs[0].scopes) {
|
|
||||||
providers.oidc.config.configs[0]["scopes"] = [
|
|
||||||
...originalOidcDoc.config.configs[0]["scopes"],
|
|
||||||
]
|
|
||||||
} else {
|
|
||||||
delete providers.oidc.config.configs[0]?.scopes
|
|
||||||
}
|
|
||||||
scopesFields[0].editing = false
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
secondary
|
|
||||||
size="S"
|
|
||||||
on:click={() => {
|
|
||||||
providers.oidc.config.configs[0]["scopes"] = [
|
|
||||||
...defaultScopes,
|
|
||||||
]
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Use Default
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -556,50 +513,26 @@
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.scope_actions {
|
.auth-scopes {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: end;
|
|
||||||
gap: var(--spacing-m);
|
|
||||||
}
|
|
||||||
.edit-icon :global(.spectrum-Tags-itemLabel) {
|
|
||||||
cursor: pointer !important;
|
|
||||||
}
|
|
||||||
.advanced-config :global(.spectrum-Tags-item) {
|
|
||||||
margin-top: 5px;
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-form {
|
.advanced-config :global(.spectrum-Tags-item) {
|
||||||
|
margin-left: 0px;
|
||||||
|
margin-top: var(--spacing-m);
|
||||||
|
margin-right: var(--spacing-m);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-form > * {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: var(--spacing-l);
|
grid-gap: var(--spacing-l);
|
||||||
grid-template-columns: 100px 1fr;
|
grid-template-columns: 100px 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-form.editing {
|
.advanced-config .auth-form .tag-wrap {
|
||||||
align-items: center;
|
padding: 0px 5px 5px 0px;
|
||||||
grid-template-columns: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advanced-config :global(.spectrum-Tags-item:first-child) {
|
|
||||||
margin-left: 0px;
|
|
||||||
margin-right: 0px;
|
|
||||||
}
|
|
||||||
.advanced-config .auth-form.editing .tag-wrap {
|
|
||||||
background-color: var(
|
|
||||||
--spectrum-sidenav-item-background-color-selected,
|
|
||||||
var(--spectrum-alias-highlight-hover)
|
|
||||||
);
|
|
||||||
padding: 0px 5px 5px 5px;
|
|
||||||
border-radius: var(
|
|
||||||
--spectrum-alias-border-radius-regular,
|
|
||||||
var(--spectrum-global-dimension-size-50)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
.edit-icon,
|
|
||||||
.edit-icon :global(.icon) {
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-row {
|
.form-row {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue