Skip to content

Commit

Permalink
chore: update sveltekit dev app style (#10006)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ndom91
ndom91 authored Feb 28, 2024
1 parent 1a11876 commit e1721a3
Show file tree
Hide file tree
Showing 7 changed files with 433 additions and 202 deletions.
13 changes: 4 additions & 9 deletions apps/dev/sveltekit/src/auth.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,8 @@ import { SvelteKitAuth } from "@auth/sveltekit"
import GitHub from "@auth/sveltekit/providers/github"
import Credentials from "@auth/sveltekit/providers/credentials"
import Facebook from "@auth/sveltekit/providers/facebook"
import Google from "@auth/sveltekit/providers/google"
import Discord from "@auth/sveltekit/providers/discord"
import Nodemailer from "@auth/sveltekit/providers/nodemailer"
import Keycloak from "@auth/sveltekit/providers/keycloak"
import Google from "@auth/sveltekit/providers/google"
import { createStorage } from "unstorage"
import { UnstorageAdapter } from "@auth/unstorage-adapter"

Expand All @@ -17,25 +15,22 @@ export const { handle, signIn, signOut } = SvelteKitAuth({
strategy: "jwt",
},
providers: [
GitHub,
Google,
Nodemailer({ server: "smtps://0.0.0.0:465?tls.rejectUnauthorized=false" }),
Credentials({
credentials: { password: { label: "Password", type: "password" } },
async authorize(credentials) {
if (credentials.password !== "password") return null
return {
name: "Fill Murray",
email: "[email protected]",
image: "https://www.fillmurray.com/64/64",
image: "https://source.boringavatars.com/marble/120",
id: "1",
foo: "",
}
},
}),
GitHub,
Google,
Facebook,
Discord,
Keycloak,
],
theme: {
logo: "https://authjs.dev/img/logo/logo-sm.webp",
Expand Down
40 changes: 40 additions & 0 deletions apps/dev/sveltekit/src/components/header.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<script lang="ts">
import { page } from "$app/stores"
import { SignIn, SignOut } from "@auth/sveltekit/components"
console.log($page.data)
</script>

<header>
<nav class="nojs-show loaded">
<div class="nav-left">
<img
alt="Avatar"
src={$page.data.session?.user?.image ??
"https://source.boringavatars.com/beam/120"}
class="avatar"
/>
</div>
<div class="nav-right">
{#if $page.data.session}
<span class="header-text">
<small>Signed in as</small><br />
<strong>
{$page.data.session.user?.email ?? $page.data.session.user?.name}
</strong>
</span>
<SignOut>
<div class="buttonPrimary">Sign out</div>
</SignOut>
{:else}
<span class="header-text">You are not signed in</span>
<SignIn>
<div class="buttonPrimary" slot="submitButton">Sign in</div>
</SignIn>
{/if}
</div>
</nav>
<div class="links">
<a class="linkItem" href="/">Home</a>
<a class="linkItem" href="/protected">Protected</a>
</div>
</header>
191 changes: 4 additions & 187 deletions apps/dev/sveltekit/src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,190 +1,7 @@
<script lang="ts">
import { page } from "$app/stores"
import { SignIn, SignOut } from "@auth/sveltekit/components"
import Header from "$components/header.svelte"
import "../style.css"
</script>

<div>
<header>
<div class="signedInStatus">
<p class="nojs-show loaded">
{#if $page.data.session}
{#if $page.data.session.user?.image}
<span
style="background-image: url('{$page.data.session.user.image}')"
class="avatar"
/>
{/if}
<span class="signedInText">
<small>Signed in as</small><br />
<strong
>{$page.data.session.user?.email ??
$page.data.session.user?.name}</strong
>
</span>
<SignOut>Sign out</SignOut>
{:else}
<span class="notSignedInText">You are not signed in</span>
<a href="/auth/signin" class="buttonPrimary">Sign in</a>
{/if}
</p>
</div>
<nav>
<ul class="navItems">
<li class="navItem"><a href="/">Home</a></li>
<li class="navItem"><a href="/protected">Protected</a></li>
<li class="navItem">
<SignIn provider="github"
><span slot="submitButton">Sign In with GitHub</span></SignIn
>
<SignIn provider="sendgrid"
><span slot="submitButton">Sign In with SendGrid</span></SignIn
>
<SignIn provider="credentials" authorizationParams={{
foo: "bar",
}}
>
<span slot="submitButton">Sign In with Credentials</span>
<div slot="credentials">
<label for="password">Password</label>
<input type="password" id="password" name="password" required />
</div>
</SignIn
>
</li>
</ul>
</nav>
</header>
<slot />
</div>

<style>
:global(body) {
font-family:
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
"Noto Sans",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
padding: 0 1rem 1rem 1rem;
max-width: 680px;
margin: 0 auto;
background: #fff;
color: #333;
}
:global(li),
:global(p) {
line-height: 1.5rem;
}
:global(a) {
font-weight: 500;
}
:global(hr) {
border: 1px solid #ddd;
}
:global(iframe) {
background: #ccc;
border: 1px solid #ccc;
height: 10rem;
width: 100%;
border-radius: 0.5rem;
filter: invert(1);
}
:global(.signInButton) {
display: flex;
justify-content: end;
}
:global(.signOutButton) {
display: flex;
justify-content: end;
}
.nojs-show {
opacity: 1;
top: 0;
}
.signedInStatus {
display: block;
min-height: 4rem;
width: 100%;
}
.loaded {
position: relative;
top: 0;
opacity: 1;
overflow: hidden;
border-radius: 0 0 0.6rem 0.6rem;
padding: 0.6rem 1rem;
margin: 0;
background-color: rgba(0, 0, 0, 0.05);
transition: all 0.2s ease-in;
}
.signedInText,
.notSignedInText {
position: absolute;
padding-top: 0.8rem;
left: 1rem;
right: 6.5rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;
z-index: 1;
line-height: 1.3rem;
}
.signedInText {
padding-top: 0rem;
left: 4.6rem;
}
.avatar {
border-radius: 2rem;
float: left;
height: 2.8rem;
width: 2.8rem;
background-color: white;
background-size: cover;
background-repeat: no-repeat;
}
.button,
.buttonPrimary {
float: right;
margin-right: -0.4rem;
font-weight: 500;
border-radius: 0.3rem;
cursor: pointer;
font-size: 1rem;
line-height: 1.4rem;
padding: 0.7rem 0.8rem;
position: relative;
z-index: 10;
background-color: transparent;
color: #555;
}
.buttonPrimary {
background-color: #346df1;
border-color: #346df1;
color: #fff;
text-decoration: none;
padding: 0.7rem 1.4rem;
}
.buttonPrimary:hover {
box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.2);
}
.navItems {
margin-bottom: 2rem;
padding: 0;
list-style: none;
}
.navItem {
display: inline-block;
margin-right: 1rem;
}
</style>
<Header />
<slot />
89 changes: 83 additions & 6 deletions apps/dev/sveltekit/src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,84 @@
<script lang="ts">
import { page } from "$app/stores"
import { SignIn, SignOut } from "@auth/sveltekit/components"
import { signIn, signOut } from "@auth/sveltekit/client"
let password = ""
</script>

<h1>SvelteKit Auth Example</h1>
<p>
This is an example site to demonstrate how to use <a
href="https://kit.svelte.dev/">SvelteKit</a
>
with <a href="https://sveltekit.authjs.dev">SvelteKit Auth</a> for authentication.
</p>
<div class="container">
<p>
This is an example site to demonstrate how to use
<a href="https://kit.svelte.dev/">SvelteKit</a>
with <a href="https://sveltekit.authjs.dev">SvelteKit Auth</a> for authentication.
</p>

<div class="card">
<div class="card-header">
<h3>Server Actions</h3>
</div>
<div class="card-body">
<p>
These actions are all using the components exported from
<code>@auth/sveltekit/components</code> to run via form actions.
</p>
<div class="actions">
<SignIn provider="github">
<span slot="submitButton">Sign In with GitHub</span>
</SignIn>
<SignIn provider="discord">
<span slot="submitButton">Sign In with Discord</span>
</SignIn>
<SignIn
provider="credentials"
authorizationParams={{
foo: "bar",
}}
>
<span slot="submitButton">Sign In with Credentials</span>
<div slot="credentials" class="input-wrapper">
<label for="password">Password</label>
<input type="password" id="password" name="password" required />
</div>
</SignIn>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3>Client Actions</h3>
</div>
<div class="card-body">
<p>
These actions are all using the methods exported from
<code>@auth/sveltekit/client</code>
</p>
<div class="actions">
<div class="wrapper-form">
<button on:click={() => signIn("github")}>Sign In with GitHub</button>
</div>
<div class="wrapper-form">
<button on:click={() => signIn("discord")}
>Sign In with Discord</button
>
</div>
<div class="wrapper-form">
<div class="input-wrapper">
<label for="password">Password</label>
<input
bind:value={password}
type="password"
id="password"
name="password"
required
/>
</div>
<button on:click={() => signIn("credentials", { password })}>
Sign In with Credentials
</button>
</div>
</div>
</div>
</div>
</div>
Loading

0 comments on commit e1721a3

Please sign in to comment.