UX feedback changes
This commit is contained in:
Dean
parent
faa765f69d
commit
3068a0013a
|
|
@ -210,7 +210,6 @@
|
|||
providers[res.type]._id = res._id
|
||||
})
|
||||
notifications.success(`Settings saved`)
|
||||
scopesFields[0].editing = false
|
||||
})
|
||||
.catch(() => {
|
||||
notifications.error("Failed to update auth settings")
|
||||
|
|
@ -227,7 +226,7 @@
|
|||
|
||||
let scopesFields = [
|
||||
{
|
||||
editing: false,
|
||||
editing: true,
|
||||
inputText: null,
|
||||
error: null,
|
||||
},
|
||||
|
|
@ -418,7 +417,19 @@
|
|||
<span class="advanced-config">
|
||||
<Layout gap="XS" noPadding>
|
||||
<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>
|
||||
<Body size="S">
|
||||
Changes to your authentication scopes will only take effect when you
|
||||
|
|
@ -426,64 +437,59 @@
|
|||
modification.
|
||||
</Body>
|
||||
|
||||
<div class="auth-form" class:editing={scopesFields[0].editing}>
|
||||
<Label size="L" tooltip={"Auth Scopes"}>{"Auth Scopes"}</Label>
|
||||
{#if scopesFields[0].editing}
|
||||
<span class="add-new">
|
||||
<Input
|
||||
error={scopesFields[0].error}
|
||||
placeholder={"New Scope"}
|
||||
bind:value={scopesFields[0].inputText}
|
||||
on:keyup={e => {
|
||||
if (!scopesFields[0].inputText) {
|
||||
<div class="auth-form">
|
||||
<span class="add-new">
|
||||
<Label size="L" tooltip={"Auth Scopes"}>{"Auth Scopes"}</Label>
|
||||
<Input
|
||||
error={scopesFields[0].error}
|
||||
placeholder={"New Scope"}
|
||||
bind:value={scopesFields[0].inputText}
|
||||
on:keyup={e => {
|
||||
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
|
||||
}
|
||||
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
|
||||
}
|
||||
|
||||
if (scopes.indexOf(update) == -1) {
|
||||
scopes.push(update)
|
||||
providers.oidc.config.configs[0]["scopes"] = scopes
|
||||
}
|
||||
scopesFields[0].inputText = null
|
||||
if (scopes.indexOf(update) == -1) {
|
||||
scopes.push(update)
|
||||
providers.oidc.config.configs[0]["scopes"] = scopes
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
scopesFields[0].inputText = null
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
<div class="tag-wrap">
|
||||
<span />
|
||||
<Tags>
|
||||
<Tag disabled={!scopesFields[0].editing} closable={false}>
|
||||
openid
|
||||
</Tag>
|
||||
<Tag closable={false}>openid</Tag>
|
||||
{#each providers.oidc.config.configs[0]["scopes"] || [...defaultScopes] as tag, idx}
|
||||
<Tag
|
||||
disabled={!scopesFields[0].editing}
|
||||
closable={scopesFields[0].editing}
|
||||
onClick={() => {
|
||||
let idxScopes = providers.oidc.config.configs[0]["scopes"]
|
||||
|
|
@ -498,57 +504,8 @@
|
|||
{tag}
|
||||
</Tag>
|
||||
{/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>
|
||||
</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>
|
||||
</Layout>
|
||||
</span>
|
||||
|
|
@ -556,50 +513,26 @@
|
|||
</Layout>
|
||||
|
||||
<style>
|
||||
.scope_actions {
|
||||
.auth-scopes {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
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;
|
||||
grid-gap: var(--spacing-l);
|
||||
grid-template-columns: 100px 1fr;
|
||||
}
|
||||
|
||||
.auth-form.editing {
|
||||
align-items: center;
|
||||
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;
|
||||
.advanced-config .auth-form .tag-wrap {
|
||||
padding: 0px 5px 5px 0px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
|
|
|
|||
Loading…
Reference in a new issue