Skip to content

Commit 3b2c74e

Browse files
author
Andrew Smith
authored
Update the svelte example to match example on supabase website (#149)
1 parent 456367d commit 3b2c74e

13 files changed

+456
-3428
lines changed

‎examples/svelte/package.json

+1-5
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,9 @@
1414
"format": "prettier --plugin-search-dir . --write ."
1515
},
1616
"dependencies": {
17-
"@smui/button": "7.0.0-beta.0",
1817
"@supabase/auth-ui-shared": "workspace:*",
1918
"@supabase/auth-ui-svelte": "workspace:*",
20-
"@supabase/supabase-js": "^2.8.0",
21-
"konsta": "^1.0.2",
22-
"svelte-material-icons": "^3.0.4"
19+
"@supabase/supabase-js": "^2.8.0"
2320
},
2421
"devDependencies": {
2522
"@sveltejs/adapter-auto": "^2.0.0",
@@ -28,7 +25,6 @@
2825
"@typescript-eslint/parser": "^5.45.0",
2926
"autoprefixer": "^10.4.13",
3027
"concurrently": "^7.6.0",
31-
"del-cli": "^5.0.0",
3228
"eslint": "^8.28.0",
3329
"eslint-config-prettier": "^8.5.0",
3430
"eslint-plugin-svelte3": "^4.0.0",

‎examples/svelte/src/app.css

+1-108
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,9 @@
11
body {
22
background-color: #1c1c1c;
3+
color: #fff;
34
margin: 0;
45
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
56
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
67
-webkit-font-smoothing: antialiased;
78
-moz-osx-font-smoothing: grayscale;
89
}
9-
10-
a {
11-
text-decoration: none;
12-
color: #8bb7ff;
13-
}
14-
15-
a:visited {
16-
color: #325998;
17-
}
18-
19-
p {
20-
font-size: 16px;
21-
color: rgba(255, 255, 255, 0.75);
22-
}
23-
24-
code {
25-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
26-
}
27-
28-
.App {
29-
text-align: center;
30-
}
31-
32-
.logo {
33-
animation: logo-spin infinite 20s linear;
34-
height: 40vmin;
35-
pointer-events: none;
36-
}
37-
38-
.container-redshadow {
39-
min-width: 364px;
40-
box-shadow: -2px 1px 69px 5px rgb(202, 37, 37);
41-
-webkit-box-shadow: -2px 1px 69px 5px rgb(202, 37, 37);
42-
-moz-box-shadow: -2px 1px 69px 5px rgb(202, 37, 37);
43-
padding: 2rem;
44-
border-radius: 1rem;
45-
}
46-
47-
.container-greenshadow {
48-
min-width: 364px;
49-
box-shadow: -2px 1px 69px 5px rgb(65, 163, 35);
50-
-webkit-box-shadow: -2px 1px 69px 5px rgb(65, 163, 35);
51-
-moz-box-shadow: -2px 1px 69px 5px rgb(65, 163, 35);
52-
padding: 2rem;
53-
border-radius: 1rem;
54-
}
55-
56-
.container-blueshadow {
57-
min-width: 364px;
58-
box-shadow: -2px 1px 69px 5px rgb(8, 107, 177);
59-
-webkit-box-shadow: -2px 1px 69px 5px rgb(8, 107, 177);
60-
-moz-box-shadow: -2px 1px 69px 5px rgb(8, 107, 177);
61-
padding: 2rem;
62-
border-radius: 1rem;
63-
}
64-
65-
.container-orangeshadow {
66-
min-width: 364px;
67-
box-shadow: -2px 1px 69px 5px rgb(235, 115, 29);
68-
-webkit-box-shadow: -2px 1px 69px 5px rgb(235, 115, 29);
69-
-moz-box-shadow: -2px 1px 69px 5px rgb(235, 115, 29);
70-
padding: 2rem;
71-
border-radius: 1rem;
72-
}
73-
74-
.selectors-container {
75-
width: 50%;
76-
padding: 2rem;
77-
}
78-
79-
.header {
80-
min-height: 100vh;
81-
max-width: 1200px;
82-
margin-inline: auto;
83-
display: flex;
84-
flex-direction: row;
85-
align-items: center;
86-
justify-content: space-around;
87-
font-size: calc(10px + 2vmin);
88-
color: white;
89-
}
90-
91-
.link {
92-
color: #b318f0;
93-
}
94-
95-
@media (max-width: 600px) {
96-
.header {
97-
background-color: #282c34;
98-
min-height: 100vh;
99-
display: flex;
100-
flex-direction: column;
101-
align-items: center;
102-
justify-content: space-around;
103-
font-size: calc(10px + 2vmin);
104-
color: white;
105-
}
106-
}
107-
108-
.mdc-segmented-button__segment {
109-
background-color: rgba(0, 0, 0, 0.04);
110-
padding: 11px;
111-
border: none;
112-
cursor: pointer;
113-
}
114-
.mdc-segmented-button__segment--selected {
115-
background-color: rgba(0, 0, 0, 0.12);
116-
}

‎examples/svelte/src/routes/+layout.svelte

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script lang="ts">
22
import '../app.css';
3-
import { App } from 'konsta/svelte';
43
import { supabaseClient } from '../db';
54
import { onMount } from 'svelte';
65
import { invalidate } from '$app/navigation';
@@ -18,6 +17,4 @@
1817
});
1918
</script>
2019

21-
<App>
22-
<slot />
23-
</App>
20+
<slot />

‎examples/svelte/src/routes/+page.svelte

+178-27
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,197 @@
11
<script lang="ts">
22
import { Auth } from '@supabase/auth-ui-svelte';
33
import { supabaseClient } from '../db';
4-
import { ThemeSupa } from '@supabase/auth-ui-shared';
5-
import Selector from './Selector.svelte';
6-
import { customButtonColor, customBorderRadius, customSocialLayout } from './store';
4+
import { ThemeSupa, type SocialLayout, type ViewType } from '@supabase/auth-ui-shared';
5+
import MenuIcon from './MenuIcon.svelte';
6+
import ToggleButton from './ToggleButton.svelte';
77
88
const classes: { [key: string]: string } = {
99
'rgb(202, 37, 37)': 'container-redshadow',
1010
'rgb(65, 163, 35)': 'container-greenshadow',
1111
'rgb(8, 107, 177)': 'container-blueshadow',
1212
'rgb(235, 115, 29)': 'container-orangeshadow'
1313
};
14+
15+
const colors = [
16+
'rgb(202, 37, 37)',
17+
'rgb(65, 163, 35)',
18+
'rgb(8, 107, 177)',
19+
'rgb(235, 115, 29)'
20+
] as const;
21+
22+
const socialAlignments = ['horizontal', 'vertical'] as const;
23+
24+
const radii = ['5px', '10px', '20px'] as const;
25+
26+
const views: { id: ViewType; title: string }[] = [
27+
{ id: 'sign_in', title: 'Sign In' },
28+
{ id: 'sign_up', title: 'Sign Up' },
29+
{ id: 'magic_link', title: 'Magic Link' },
30+
{ id: 'forgotten_password', title: 'Forgotten Password' },
31+
{ id: 'update_password', title: 'Update Password' }
32+
];
33+
34+
let brandColor = colors[0];
35+
let socialLayout = socialAlignments[1] satisfies SocialLayout;
36+
let borderRadius = radii[0];
37+
let view = views[0];
1438
</script>
1539

1640
<svelte:head>
1741
<title>Auth UI Svelte</title>
1842
</svelte:head>
1943

20-
<div class="header">
21-
<div class="w-1/2 flex items-center justify-center">
22-
<div class={classes[$customButtonColor]}>
23-
<Auth
24-
{supabaseClient}
25-
theme="dark"
26-
appearance={{
27-
theme: ThemeSupa,
28-
style: {
29-
button: `border-color: rgba(0,0,0,0); border-radius: ${$customBorderRadius};`
30-
},
31-
variables: {
32-
default: {
33-
colors: {
34-
brand: $customButtonColor,
35-
brandAccent: `gray`
36-
}
37-
}
38-
}
39-
}}
40-
providers={['apple', 'google', 'github']}
41-
socialLayout={$customSocialLayout}
42-
/>
44+
<div class="dark:bg-scale-200 bg-scale-100 relative py-2 pb-16">
45+
<div
46+
class="sm:py-18 gap container relative mx-auto grid grid-cols-12 px-6 py-16 md:gap-16 md:py-24 lg:gap-16 lg:px-16 lg:py-24 xl:px-20"
47+
>
48+
<div class="relative col-span-12 mb-16 md:col-span-7 md:mb-0 lg:col-span-6">
49+
<div class="relative lg:mx-auto lg:max-w-md bg-zinc-800">
50+
<div class={classes[brandColor]}>
51+
<div class="border-scale-400 bg-scale-300 relative rounded-xl px-8 py-12 drop-shadow-sm">
52+
<div class="mb-6 flex flex-col gap-6">
53+
<div class="flex items-center gap-3">
54+
<h1 class="text-scale-1200 text-2xl">Acme Industries</h1>
55+
</div>
56+
<p class="text-scale-1100 text-auth-widget-test">Sign in today for Supa stuff</p>
57+
</div>
58+
<Auth
59+
{supabaseClient}
60+
theme="dark"
61+
view={view.id}
62+
appearance={{
63+
theme: ThemeSupa,
64+
variables: {
65+
default: {
66+
colors: {
67+
brand: brandColor,
68+
brandAccent: `gray`
69+
},
70+
radii: {
71+
borderRadiusButton: borderRadius,
72+
buttonBorderRadius: borderRadius,
73+
inputBorderRadius: borderRadius
74+
}
75+
}
76+
}
77+
}}
78+
providers={['apple', 'google', 'github']}
79+
{socialLayout}
80+
/>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
86+
<div class="col-span-12 md:col-span-5 lg:col-span-6">
87+
<div class="!max-w-md">
88+
<h3 class="text-2xl mb-8">Auth UI Svelte</h3>
89+
<p class="!mb-0">Pre-built auth widgets to get started in minutes.</p>
90+
<p class="text-scale-900 mt-0">
91+
Customizable authentication UI component with custom themes and extensible styles to match
92+
your brand and aesthetic
93+
</p>
94+
<div class="mb-4 pt-6 flex items-center space-x-2">
95+
<small>Currently available in Svelte, Solid.js and React</small>
96+
</div>
97+
</div>
98+
99+
<div class="grid gap-8 py-8 lg:grid-cols-2">
100+
<div class="flex flex-col gap-6">
101+
<div class="text-scale-1200 text-base">Brand color</div>
102+
<div class="flex items-center gap-3">
103+
<ToggleButton bind:selected={brandColor} defaultValue={colors[0]} color={colors[0]} />
104+
<ToggleButton bind:selected={brandColor} defaultValue={colors[1]} color={colors[1]} />
105+
<ToggleButton bind:selected={brandColor} defaultValue={colors[2]} color={colors[2]} />
106+
<ToggleButton bind:selected={brandColor} defaultValue={colors[3]} color={colors[3]} />
107+
</div>
108+
</div>
109+
110+
<div class="flex flex-col gap-6">
111+
<div class="text-scale-1200 text-base">Rounded corners</div>
112+
<div class="flex items-center gap-3">
113+
<ToggleButton
114+
bind:selected={borderRadius}
115+
defaultValue={radii[0]}
116+
class="rounded-lg border-b-0 border-l-0"
117+
/>
118+
<ToggleButton
119+
bind:selected={borderRadius}
120+
defaultValue={radii[1]}
121+
class="rounded-xl border-b-0 border-l-0"
122+
/>
123+
<ToggleButton
124+
bind:selected={borderRadius}
125+
defaultValue={radii[2]}
126+
class="rounded-2xl border-b-0 border-l-0"
127+
/>
128+
</div>
129+
</div>
130+
131+
<div class="flex flex-col gap-6">
132+
<div class="text-scale-1200 text-base">Social Auth Layout</div>
133+
<div class="flex items-center gap-3">
134+
<ToggleButton
135+
bind:selected={socialLayout}
136+
defaultValue={socialAlignments[0]}
137+
class="flex items-center justify-center"
138+
>
139+
<MenuIcon class="text-scale-900 dark:text-scale-1100 w-6 rotate-90" />
140+
</ToggleButton>
141+
<ToggleButton
142+
bind:selected={socialLayout}
143+
defaultValue={socialAlignments[1]}
144+
class="flex items-center justify-center"
145+
>
146+
<MenuIcon class="text-scale-900 dark:text-scale-1100 w-6" />
147+
</ToggleButton>
148+
</div>
149+
</div>
150+
151+
<div class="flex flex-col gap-6">
152+
<div class="text-scale-1200 text-base">Component View</div>
153+
<div class="flex items-center gap-3">
154+
<div>
155+
<div class="relative inline-flex self-center">
156+
<select
157+
bind:value={view}
158+
class="text-lg rounded border-2 border-blue-700 text-gray-600 pl-5 pr-10 h-12 bg-white hover:border-gray-400 appearance-none"
159+
>
160+
{#each views as v}
161+
<option value={v}>{v.title}</option>
162+
{/each}
163+
</select>
164+
</div>
165+
</div>
166+
</div>
167+
</div>
168+
</div>
43169
</div>
44170
</div>
45-
<Selector />
46171
</div>
172+
173+
<style>
174+
.container-redshadow {
175+
min-width: 364px;
176+
box-shadow: -1px 2px 32px 7px rgb(202, 37, 37);
177+
border-radius: 1rem;
178+
}
179+
180+
.container-greenshadow {
181+
min-width: 364px;
182+
box-shadow: -1px 2px 32px 7px rgb(65, 163, 35);
183+
border-radius: 1rem;
184+
}
185+
186+
.container-blueshadow {
187+
min-width: 364px;
188+
box-shadow: -1px 2px 32px 7px rgb(8, 107, 177);
189+
border-radius: 1rem;
190+
}
191+
192+
.container-orangeshadow {
193+
min-width: 364px;
194+
box-shadow: -1px 2px 32px 7px rgb(235, 115, 29);
195+
border-radius: 1rem;
196+
}
197+
</style>

0 commit comments

Comments
 (0)