UX feedback changes
This commit is contained in:
parent
5452958805
commit
ba2aaf87e7
1 changed files with 70 additions and 137 deletions
|
@ -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,64 +437,59 @@
|
||||||
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>
|
<span class="add-new">
|
||||||
{#if scopesFields[0].editing}
|
<Label size="L" tooltip={"Auth Scopes"}>{"Auth Scopes"}</Label>
|
||||||
<span class="add-new">
|
<Input
|
||||||
<Input
|
error={scopesFields[0].error}
|
||||||
error={scopesFields[0].error}
|
placeholder={"New Scope"}
|
||||||
placeholder={"New Scope"}
|
bind:value={scopesFields[0].inputText}
|
||||||
bind:value={scopesFields[0].inputText}
|
on:keyup={e => {
|
||||||
on:keyup={e => {
|
if (!scopesFields[0].inputText) {
|
||||||
if (!scopesFields[0].inputText) {
|
scopesFields[0].error = null
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
e.key === "Enter" ||
|
||||||
|
e.keyCode === 13 ||
|
||||||
|
e.code == "Space" ||
|
||||||
|
e.keyCode == 32
|
||||||
|
) {
|
||||||
|
let scopes = providers.oidc.config.configs[0]["scopes"]
|
||||||
|
? providers.oidc.config.configs[0]["scopes"]
|
||||||
|
: [...defaultScopes]
|
||||||
|
|
||||||
|
let update = scopesFields[0].inputText.trim()
|
||||||
|
|
||||||
|
if (/[\\"\s]/.test(update)) {
|
||||||
|
scopesFields[0].error =
|
||||||
|
"Auth scopes cannot contain spaces, double quotes or backslashes"
|
||||||
|
return
|
||||||
|
} else if (scopes.indexOf(update) > -1) {
|
||||||
|
scopesFields[0].error = "Auth scope already exists"
|
||||||
|
return
|
||||||
|
} else if (!update.length) {
|
||||||
|
scopesFields[0].inputText = null
|
||||||
|
scopesFields[0].error = null
|
||||||
|
return
|
||||||
|
} else {
|
||||||
scopesFields[0].error = null
|
scopesFields[0].error = null
|
||||||
}
|
}
|
||||||
if (
|
|
||||||
e.key === "Enter" ||
|
|
||||||
e.keyCode === 13 ||
|
|
||||||
e.code == "Space" ||
|
|
||||||
e.keyCode == 32
|
|
||||||
) {
|
|
||||||
let scopes = providers.oidc.config.configs[0]["scopes"]
|
|
||||||
? providers.oidc.config.configs[0]["scopes"]
|
|
||||||
: [...defaultScopes]
|
|
||||||
|
|
||||||
let update = scopesFields[0].inputText.trim()
|
if (scopes.indexOf(update) == -1) {
|
||||||
|
scopes.push(update)
|
||||||
if (/[\\"\s]/.test(update)) {
|
providers.oidc.config.configs[0]["scopes"] = scopes
|
||||||
scopesFields[0].error =
|
|
||||||
"Auth scopes cannot contain spaces, double quotes or backslashes"
|
|
||||||
return
|
|
||||||
} else if (scopes.indexOf(update) > -1) {
|
|
||||||
scopesFields[0].error = "Auth scope already exists"
|
|
||||||
return
|
|
||||||
} else if (!update.length) {
|
|
||||||
scopesFields[0].inputText = null
|
|
||||||
scopesFields[0].error = null
|
|
||||||
return
|
|
||||||
} else {
|
|
||||||
scopesFields[0].error = null
|
|
||||||
}
|
|
||||||
|
|
||||||
if (scopes.indexOf(update) == -1) {
|
|
||||||
scopes.push(update)
|
|
||||||
providers.oidc.config.configs[0]["scopes"] = scopes
|
|
||||||
}
|
|
||||||
scopesFields[0].inputText = null
|
|
||||||
}
|
}
|
||||||
}}
|
scopesFields[0].inputText = null
|
||||||
/>
|
}
|
||||||
</span>
|
}}
|
||||||
{/if}
|
/>
|
||||||
|
</span>
|
||||||
<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 a new issue