tsai
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UX feedback changes

pull/7349/head
Dean 4 years ago
parent
faa765f69d
commit
3068a0013a
1 changed files with 67 additions and 134 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 201
      packages/builder/src/pages/builder/portal/manage/auth/index.svelte

201
packages/builder/src/pages/builder/portal/manage/auth/index.svelte
View File

@ -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;
margin-top: var(--spacing-m);
margin-right: var(--spacing-m);
}
.auth-form {
.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 {

Write Preview
Loading…
Cancel
Save