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

UX feedback changes

This commit is contained in:
Dean 2022-08-18 14:58:22 +01:00
parent 5452958805
commit ba2aaf87e7
1 changed files with 70 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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