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

Fix alignment of SSO configs, clean up style, make auth page mobile friendly

This commit is contained in:
Andrew Kingston 2021-09-13 16:15:52 +01:00
parent 7534d403d2
commit c2340187df
1 changed files with 30 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -288,16 +288,14 @@
<div class="provider-title"> <div class="provider-title">
<GoogleLogo /> <GoogleLogo />
<span>Google</span> <span>Google</span>
<div class="google-save-button">
<div>
<Button <Button
disabled={googleSaveButtonDisabled} disabled={googleSaveButtonDisabled}
size="s" size="s"
cta cta
on:click={() => save([providers.google])}>Save</Button on:click={() => save([providers.google])}
> >
</div> Save
</div> </Button>
</div> </div>
</Heading> </Heading>
<Body size="S"> <Body size="S">
@ -317,12 +315,8 @@
</div> </div>
{/each} {/each}
<div class="form-row"> <div class="form-row">
<div class="field">
<Label size="L">Activated</Label> <Label size="L">Activated</Label>
<span class="alignedToggle">
<Toggle text="" bind:value={providers.google.config.activated} /> <Toggle text="" bind:value={providers.google.config.activated} />
</span>
</div>
</div> </div>
</Layout> </Layout>
{/if} {/if}
@ -333,18 +327,16 @@
<div class="provider-title"> <div class="provider-title">
<OidcLogo /> <OidcLogo />
<span>OpenID Connect</span> <span>OpenID Connect</span>
<div class="oidc-save-button">
<div>
<Button <Button
disabled={oidcSaveButtonDisabled} disabled={oidcSaveButtonDisabled}
size="s" size="s"
cta cta
on:click={() => save([providers.oidc])}>Save</Button on:click={() => save([providers.oidc])}
> >
Save
</Button>
</div> </div>
</div> </Heading>
</div></Heading
>
<Body size="S"> <Body size="S">
To allow users to authenticate using OIDC, fill out the fields below. To allow users to authenticate using OIDC, fill out the fields below.
</Body> </Body>
@ -360,7 +352,8 @@
/> />
</div> </div>
{/each} {/each}
<br /> </Layout>
<Layout gap="XS" noPadding>
<Body size="S"> <Body size="S">
To customize your login button, fill out the fields below. To customize your login button, fill out the fields below.
</Body> </Body>
@ -383,55 +376,29 @@
on:change={e => onFileSelected(e)} on:change={e => onFileSelected(e)}
bind:this={fileinput} bind:this={fileinput}
/> />
</Layout>
<div class="form-row"> <div class="form-row">
<div class="field">
<Label size="L">Activated</Label> <Label size="L">Activated</Label>
<span class="alignedToggle">
<Toggle <Toggle
text="" text=""
bind:value={providers.oidc.config.configs[0].activated} bind:value={providers.oidc.config.configs[0].activated}
/> />
</span>
</div>
</div> </div>
</Layout>
{/if} {/if}
</Layout> </Layout>
<style> <style>
.field {
display: flex;
align-items: center;
}
.alignedToggle {
margin-left: 63%;
}
.form-row { .form-row {
display: grid; display: grid;
grid-template-columns: 20% 1fr; grid-template-columns: 100px 1fr;
grid-gap: var(--spacing-l); grid-gap: var(--spacing-l);
align-items: center; align-items: center;
} }
span {
display: flex;
align-items: center;
gap: var(--spacing-s);
}
input { input[type="file"] {
display: none; display: none;
} }
.google-save-button {
display: inline-block;
}
.oidc-save-button {
display: inline-block;
}
.provider-title { .provider-title {
display: flex; display: flex;
flex-direction: row; flex-direction: row;