From 232a63c47c60077112f9861dd152b0040c77c8e4 Mon Sep 17 00:00:00 2001
From: Mateo Morris <accounts@mateomorris.com>
Date: Thu, 31 Aug 2023 21:03:51 -0400
Subject: [PATCH] V2.0.0 beta.34

---
 src/lib/components/DashboardToolbar.svelte | 134 ++++-----
 src/routes/+layout.svelte                  | 307 +++++++++++----------
 src/routes/auth/+page.server.js            |   8 +
 src/routes/auth/+page.svelte               | 263 +++++++++++-------
 src/routes/auth/SignIn.svelte              | 102 -------
 src/routes/auth/SignUp.svelte              | 131 ---------
 6 files changed, 394 insertions(+), 551 deletions(-)
 delete mode 100644 src/routes/auth/SignIn.svelte
 delete mode 100644 src/routes/auth/SignUp.svelte

diff --git a/src/lib/components/DashboardToolbar.svelte b/src/lib/components/DashboardToolbar.svelte
index 3052ce8a9..df04211fa 100644
--- a/src/lib/components/DashboardToolbar.svelte
+++ b/src/lib/components/DashboardToolbar.svelte
@@ -1,89 +1,75 @@
 <script>
-  import UserPopup from './UserPopup.svelte'
-  import { show } from '$lib/components/Modal.svelte'
-  import { page } from '$app/stores'
-  import ServerLogo from '$lib/ui/ServerLogo.svelte'
+	import UserPopup from './UserPopup.svelte'
+	import { show } from '$lib/components/Modal.svelte'
+	import { page } from '$app/stores'
+	import ServerLogo from '$lib/ui/ServerLogo.svelte'
+	import Icon from '@iconify/svelte'
 </script>
 
 <header role="navigation" aria-label="main navigation">
-  <div class="logo">
-    <ServerLogo />
-  </div>
-  <nav class="nav">
-    {#if $page.data.user.admin}
-      <button class="link" on:click={() => show('INVITE_COLLABORATORS')}>
-        Members
-      </button>
-    {/if}
-    {#if $page.data.user.role === 'DEV'}
-      <a
-        class="link with-icon"
-        href="https://docs.primocms.org/"
-        target="blank"
-      >
-        <span class="docs">Docs</span>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-          <path
-            fill="currentColor"
-            d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM474.67,0H316a28,28,0,0,0-28,28V46.71A28,28,0,0,0,316.79,73.9L384,72,135.06,319.09l-.06.06a24,24,0,0,0,0,33.94l23.94,23.85.06.06a24,24,0,0,0,33.91-.09L440,128l-1.88,67.22V196a28,28,0,0,0,28,28H484a28,28,0,0,0,28-28V37.33h0A37.33,37.33,0,0,0,474.67,0Z"
-          />
-        </svg>
-      </a>
-    {/if}
-    <UserPopup />
-  </nav>
+	<div class="logo">
+		<ServerLogo />
+	</div>
+	<nav class="nav">
+		{#if $page.data.user.admin}
+			<button class="link" on:click={() => show('INVITE_COLLABORATORS')}>Members</button>
+		{/if}
+		{#if $page.data.user.role === 'DEV'}
+			<a class="link with-icon" href="https://docs.primocms.org/" target="blank">
+				<span class="docs">Docs</span>
+				<Icon icon="gridicons:external" />
+			</a>
+		{/if}
+		<UserPopup />
+	</nav>
 </header>
 
 <style lang="postcss">
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: var(--color-gray-3);
-    margin-bottom: 1rem;
-  }
+	header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		color: var(--color-gray-3);
+		margin-bottom: 1rem;
+	}
 
-  .nav {
-    display: flex;
-    gap: 1.25rem;
-    align-items: center;
-  }
+	.nav {
+		display: flex;
+		gap: 1.25rem;
+		align-items: center;
+	}
 
-  .logo {
-    width: 7rem;
-    object-fit: contain;
-  }
+	.logo {
+		width: 7rem;
+		object-fit: contain;
+	}
 
-  .link {
-    border-bottom: 2px solid transparent;
-    display: flex;
-    font-size: 14px;
+	.link {
+		border-bottom: 2px solid transparent;
+		display: flex;
+		font-size: 14px;
 
-    svg {
-      width: 0.7rem;
-    }
+		&:hover {
+			border-color: var(--primo-color-brand);
+		}
 
-    &:hover {
-      border-color: var(--primo-color-brand);
-    }
+		&.with-icon {
+			display: grid;
+			grid-template-columns: auto auto;
+			gap: 0.5rem;
+			place-items: center;
+		}
+	}
 
-    &.with-icon {
-      display: grid;
-      grid-template-columns: auto auto;
-      gap: 0.5rem;
-      place-items: center;
-    }
-  }
+	nav {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
 
-  nav {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-
-    .link {
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
+		.link {
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+	}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e4bb3c42a..b32d6642e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,123 +1,132 @@
 <script>
-  import { setContext } from 'svelte'
-  import '$lib/assets/reset.css'
-  import { browser } from '$app/environment'
-  import { onMount } from 'svelte'
-  import { registerProcessors } from '@primocms/builder'
-  import Modal from '$lib/components/Modal.svelte'
-  import { invalidate } from '$app/navigation'
-  import supabase_client from '$lib/supabase'
-
-  export let data
-
-  let { supabase, session } = data
-  $: ({ supabase, session } = data)
-
-  $: session &&
-    supabase_client.auth.setSession({
-      access_token: session.access_token,
-      refresh_token: session.refresh_token,
-    })
-
-  onMount(() => {
-    if (!supabase) return
-    const {
-      data: { subscription },
-    } = supabase.auth.onAuthStateChange((event, _session) => {
-      if (_session?.expires_at !== session?.expires_at) {
-        invalidate('supabase:auth')
-      }
-    })
-    return () => subscription.unsubscribe()
-  })
-
-  if (browser) {
-    import('../compiler/processors.js').then(({ html, css }) => {
-      registerProcessors({ html, css })
-    })
-    setContext('track', () => {})
-    setContext('DEBUGGING', new URLSearchParams(window.location.search).has('debug'))
-  }
+	import { setContext } from 'svelte'
+	import { loadIcons, enableCache } from '@iconify/svelte'
+	import '$lib/assets/reset.css'
+	import { browser } from '$app/environment'
+	import { onMount } from 'svelte'
+	import { registerProcessors } from '@primocms/builder'
+	import Modal from '$lib/components/Modal.svelte'
+	import { invalidate } from '$app/navigation'
+	import supabase_client from '$lib/supabase'
+
+	export let data
+
+	let { supabase, session } = data
+	$: ({ supabase, session } = data)
+
+	$: session &&
+		supabase_client.auth.setSession({
+			access_token: session.access_token,
+			refresh_token: session.refresh_token
+		})
+
+	onMount(() => {
+		if (!supabase) return
+		const {
+			data: { subscription }
+		} = supabase.auth.onAuthStateChange((event, _session) => {
+			if (_session?.expires_at !== session?.expires_at) {
+				invalidate('supabase:auth')
+			}
+		})
+		return () => subscription.unsubscribe()
+	})
+
+	if (browser) {
+		import('../compiler/processors.js').then(({ html, css }) => {
+			registerProcessors({ html, css })
+		})
+		setContext('track', () => {})
+		setContext('DEBUGGING', new URLSearchParams(window.location.search).has('debug'))
+	}
+
+	loadIcons([
+		'gg:spinner',
+		'material-symbols:edit-square-outline-rounded',
+		'pepicons-pop:trash',
+		'gridicons:external'
+	])
+	enableCache('local')
 </script>
 
 <Modal />
 <slot />
 
 <style global lang="postcss">
-  @import url(https://fonts.bunny.net/css?family=inter:300,400,500,600,700,800);
-
-  .primo-reset {
-    @tailwind base;
-    font-family: 'Inter', serif !important;
-    direction: ltr;
-
-    /* height: 100vh; */
-    /* overflow: hidden; */
-
-    --primo-color-brand: #35d994;
-    --primo-color-brand-dark: #097548;
-    --primo-color-white: white;
-    --primo-color-codeblack: rgb(30, 30, 30);
-    --primo-color-codeblack-opaque: rgba(30, 30, 30, 0.9);
-
-    --primo-color-black: rgb(17, 17, 17);
-    --primo-color-black-opaque: rgba(17, 17, 17, 0.95);
-
-    --color-gray-1: rgb(245, 245, 245);
-    --color-gray-2: rgb(229, 229, 229);
-    --color-gray-3: rgb(212, 212, 212);
-    --color-gray-4: rgb(156, 163, 175);
-    --color-gray-5: rgb(115, 115, 115);
-    --color-gray-6: rgb(82, 82, 82);
-    --color-gray-7: rgb(64, 64, 64);
-    --color-gray-8: rgb(38, 38, 38);
-    --color-gray-9: rgb(23, 23, 23);
-
-    --font-size-1: 0.75rem;
-    --font-size-2: 0.875rem;
-    --font-size-3: 1.125rem;
-    --font-size-4: 1.25rem;
-
-    --box-shadow-xl: 0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgba(0, 0, 0, 0.1),
-      0 10px 10px -5px rgba(0, 0, 0, 0.04);
-
-    --transition-colors: background-color 0.1s, border-color 0.1s, color 0.1s,
-      fill 0.1s, stroke 0.1s;
-
-    --padding-container: 15px;
-    --max-width-container: 1900px;
-
-    --ring: 0px 0px 0px 2px var(--primo-color-brand);
-
-    --primo-max-width-1: 30rem;
-    --primo-max-width-2: 1200px;
-    --primo-max-width-max: 1200px;
-
-    --primo-border-radius: 5px;
-    --primo-ring-brand: 0px 0px 0px 1px var(--primo-color-brand);
-    --primo-ring-brand-thin: 0px 0px 0px 1px var(--primo-color-brand);
-    --primo-ring-brand-thick: 0px 0px 0px 3px var(--primo-color-brand);
-  }
-
-  button,
-  a {
-    cursor: pointer;
-  }
-
-  body {
-    margin: 0;
-  }
-
-  .primo-input {
-    appearance: none;
-    border: 0;
-    background-color: transparent;
-    font-size: inherit;
-    background: var(--color-white);
-    padding: 0.5rem 0.75rem;
-    width: 100%;
-
-    /* &:focus {
+	@import url(https://fonts.bunny.net/css?family=inter:300,400,500,600,700,800);
+
+	.primo-reset {
+		@tailwind base;
+		font-family: 'Inter', serif !important;
+		direction: ltr;
+
+		/* height: 100vh; */
+		/* overflow: hidden; */
+
+		--primo-color-brand: #35d994;
+		--primo-color-brand-dark: #097548;
+		--primo-color-white: white;
+		--primo-color-codeblack: rgb(30, 30, 30);
+		--primo-color-codeblack-opaque: rgba(30, 30, 30, 0.9);
+
+		--primo-color-black: rgb(17, 17, 17);
+		--primo-color-black-opaque: rgba(17, 17, 17, 0.95);
+
+		--color-gray-1: rgb(245, 245, 245);
+		--color-gray-2: rgb(229, 229, 229);
+		--color-gray-3: rgb(212, 212, 212);
+		--color-gray-4: rgb(156, 163, 175);
+		--color-gray-5: rgb(115, 115, 115);
+		--color-gray-6: rgb(82, 82, 82);
+		--color-gray-7: rgb(64, 64, 64);
+		--color-gray-8: rgb(38, 38, 38);
+		--color-gray-9: rgb(23, 23, 23);
+
+		--font-size-1: 0.75rem;
+		--font-size-2: 0.875rem;
+		--font-size-3: 1.125rem;
+		--font-size-4: 1.25rem;
+
+		--box-shadow-xl: 0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+			0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+		--transition-colors: background-color 0.1s, border-color 0.1s, color 0.1s, fill 0.1s,
+			stroke 0.1s;
+
+		--padding-container: 15px;
+		--max-width-container: 1900px;
+
+		--ring: 0px 0px 0px 2px var(--primo-color-brand);
+
+		--primo-max-width-1: 30rem;
+		--primo-max-width-2: 1200px;
+		--primo-max-width-max: 1200px;
+
+		--primo-border-radius: 5px;
+		--primo-ring-brand: 0px 0px 0px 1px var(--primo-color-brand);
+		--primo-ring-brand-thin: 0px 0px 0px 1px var(--primo-color-brand);
+		--primo-ring-brand-thick: 0px 0px 0px 3px var(--primo-color-brand);
+	}
+
+	button,
+	a {
+		cursor: pointer;
+	}
+
+	body {
+		margin: 0;
+	}
+
+	.primo-input {
+		appearance: none;
+		border: 0;
+		background-color: transparent;
+		font-size: inherit;
+		background: var(--color-white);
+		padding: 0.5rem 0.75rem;
+		width: 100%;
+
+		/* &:focus {
   box-shadow: 0 0 0 1px var(--color-primored);
   border: 0;
 }
@@ -125,40 +134,40 @@
 &:placeholder {
   color: var(--color-gray-5);
 } */
-  }
-
-  .primo-modal {
-    color: var(--color-gray-1);
-    /* background: var(--color-gray-9); */
-    padding: 1.5rem;
-    border-radius: var(--primo-border-radius);
-    margin: 0 auto;
-    /* width: 100vw; */
-  }
-
-  .primo-heading-xl {
-    margin-bottom: 0.5rem;
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-    font-weight: 700;
-  }
-
-  .primo-heading-lg {
-    margin-bottom: 0.25rem;
-    font-size: 1.1rem;
-    line-height: 1.5rem;
-    font-weight: 700;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
+	}
+
+	.primo-modal {
+		color: var(--color-gray-1);
+		/* background: var(--color-gray-9); */
+		padding: 1.5rem;
+		border-radius: var(--primo-border-radius);
+		margin: 0 auto;
+		/* width: 100vw; */
+	}
+
+	.primo-heading-xl {
+		margin-bottom: 0.5rem;
+		font-size: 1.25rem;
+		line-height: 1.75rem;
+		font-weight: 700;
+	}
+
+	.primo-heading-lg {
+		margin-bottom: 0.25rem;
+		font-size: 1.1rem;
+		line-height: 1.5rem;
+		font-weight: 700;
+	}
+
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border-width: 0;
+	}
 </style>
diff --git a/src/routes/auth/+page.server.js b/src/routes/auth/+page.server.js
index 1dd4f7f0b..bd687a0fa 100644
--- a/src/routes/auth/+page.server.js
+++ b/src/routes/auth/+page.server.js
@@ -55,6 +55,14 @@ export const actions = {
       }
     }
 
+    const {data:n_users} = await supabase_admin.from('users').select('count') 
+    if (n_users?.length > 0) {
+      return {
+        success: false,
+        error: 'Server already initialized. Sign in as the server owner to invite users.'
+      }
+    }
+
     const data = await request.formData();
     const email = data.get('email');
     const password = data.get('password');
diff --git a/src/routes/auth/+page.svelte b/src/routes/auth/+page.svelte
index a89d3157f..fae07c5a8 100644
--- a/src/routes/auth/+page.svelte
+++ b/src/routes/auth/+page.svelte
@@ -1,110 +1,183 @@
 <script>
-  import { page } from '$app/stores'
-  import { fade } from 'svelte/transition'
-  import SignIn from './SignIn.svelte'
-  import SignUp from './SignUp.svelte'
-  import ServerLogo from '$lib/ui/ServerLogo.svelte'
+	import { page, navigating } from '$app/stores'
+	import { fade } from 'svelte/transition'
+	import { enhance } from '$app/forms'
+	import ServerLogo from '$lib/ui/ServerLogo.svelte'
+	import Icon from '@iconify/svelte'
 
-  export let form
+	export let form
 
-  let email = $page.url.searchParams.get('email') || ''
-  let password = ''
+	let email = $page.url.searchParams.get('email') || ''
+	let password = ''
 
-  $: error = form?.error
+	$: error = form?.error
 
-  $: signing_in = $page.url.searchParams.has('signup') ? false : true
+	$: signing_in = $page.url.searchParams.has('signup') ? false : true
 </script>
 
 {#key signing_in}
-  <main in:fade class="primo-reset">
-    <div class="left">
-      <div class="logo">
-        <div class="logo-container">
-          <ServerLogo />
-        </div>
-      </div>
-      <div class="box">
-        <header>
-          <!-- <img src={logo_dark} alt="breely logo" /> -->
-          <h1>{signing_in ? 'Sign in' : 'Create your account'}</h1>
-          {#if !signing_in}
-            <p>
-              Welcome to your new Primo server! Enter an email address and
-              password you'll use to administrate this server.
-            </p>
-          {/if}
-        </header>
-        {#if error}
-          <div class="error">{error}</div>
-        {/if}
-        {#if signing_in}
-          <SignIn
-            bind:email
-            bind:password
-            on:switch={() => (signing_in = false)}
-          />
-        {:else}
-          <SignUp
-            bind:email
-            bind:password
-            on:switch={() => (signing_in = true)}
-          />
-        {/if}
-      </div>
-    </div>
-  </main>
+	<main in:fade class="primo-reset">
+		<div class="left">
+			<div class="logo">
+				<div class="logo-container">
+					<ServerLogo />
+				</div>
+			</div>
+			<div class="box">
+				<header>
+					<!-- <img src={logo_dark} alt="breely logo" /> -->
+					<h1>{signing_in ? 'Sign in' : 'Create your account'}</h1>
+					{#if !signing_in}
+						<p>
+							Welcome to your new Primo server! Enter an email address and password you'll use to
+							administrate this server.
+						</p>
+					{/if}
+				</header>
+				{#if error}
+					<div class="error">{error}</div>
+				{/if}
+				<form
+					class="form"
+					method="POST"
+					action="?/{signing_in ? 'sign_in' : 'sign_up'}"
+					use:enhance
+				>
+					<div class="fields">
+						<label>
+							<span>Email</span>
+							<input bind:value={email} type="text" name="email" />
+						</label>
+						<label>
+							<span>Password</span>
+							<input bind:value={password} type="password" name="password" />
+						</label>
+					</div>
+					<button class="button" type="submit">
+						{#if !$navigating}
+							<span>Sign in</span>
+						{:else}
+							<div class="icon"><Icon icon="gg:spinner" /></div>
+						{/if}
+					</button>
+				</form>
+			</div>
+		</div>
+	</main>
 {/key}
 
 <style lang="postcss">
-  main {
-    display: grid;
-    min-height: 100vh;
-    background: var(--color-gray-9);
-    color: white;
-  }
-  .logo {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    margin-bottom: 2rem;
+	main {
+		display: grid;
+		min-height: 100vh;
+		background: var(--color-gray-9);
+		color: white;
+	}
+	.logo {
+		display: flex;
+		justify-content: center;
+		width: 100%;
+		margin-bottom: 2rem;
 
-    .logo-container {
-      width: 10rem;
-    }
-  }
-  header {
-    /* img {
+		.logo-container {
+			width: 10rem;
+		}
+	}
+	header {
+		/* img {
       padding-bottom: 40px;
     } */
-    h1 {
-      text-align: left;
-      font-weight: 500;
-      font-size: 24px;
-      line-height: 24px;
-      padding-bottom: 1rem;
-      /* --typography-spacing-vertical: 1rem; */
-    }
-    p {
-      color: var(--color-gray-3);
-      padding-bottom: 1.5rem;
-    }
-  }
-  .error {
-    color: #f72228;
-    margin-bottom: 1rem;
-  }
-  .left {
-    padding: 3rem clamp(3rem, 10vw, 160px);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-  .box {
-    width: 100%;
-    max-width: 450px;
-    padding: 2.5rem;
-    border-radius: 6px;
-    background-color: #1a1a1a;
-  }
+		h1 {
+			text-align: left;
+			font-weight: 500;
+			font-size: 24px;
+			line-height: 24px;
+			padding-bottom: 1rem;
+			/* --typography-spacing-vertical: 1rem; */
+		}
+		p {
+			color: var(--color-gray-3);
+			padding-bottom: 1.5rem;
+		}
+	}
+	.error {
+		color: #f72228;
+		margin-bottom: 1rem;
+	}
+	.left {
+		padding: 3rem clamp(3rem, 10vw, 160px);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+	.box {
+		width: 100%;
+		max-width: 450px;
+		padding: 2.5rem;
+		border-radius: 6px;
+		background-color: #1a1a1a;
+	}
+	.form {
+		display: grid;
+		gap: 2rem;
+		width: 100%;
+
+		.fields {
+			display: grid;
+			gap: 1rem;
+		}
+
+		label {
+			color: #b6b6b6;
+			display: grid;
+			gap: 0.5rem;
+			font-size: 0.875rem;
+			font-weight: 400;
+		}
+
+		input {
+			color: #dadada;
+			border-radius: 0.25rem;
+			border: 1px solid #6e6e6e;
+			padding: 0.75rem;
+			background-color: #1c1c1c;
+			font-size: 1rem;
+		}
+
+		.button {
+			color: #cecece;
+			font-weight: 500;
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
+			align-items: center;
+			padding: 0.65rem;
+			border: 1.5px solid #35d994;
+			border-radius: 0.25rem;
+
+			&:hover {
+				background-color: #35d994;
+				transition: 0.2s;
+				color: #121212;
+			}
+
+			&:focus {
+				background-color: #208259;
+			}
+
+			.icon {
+				animation: icon-spin 1s linear infinite;
+			}
+
+			@keyframes icon-spin {
+				0% {
+					transform: rotate(0deg);
+				}
+				100% {
+					transform: rotate(360deg);
+				}
+			}
+		}
+	}
 </style>
diff --git a/src/routes/auth/SignIn.svelte b/src/routes/auth/SignIn.svelte
deleted file mode 100644
index 951949adf..000000000
--- a/src/routes/auth/SignIn.svelte
+++ /dev/null
@@ -1,102 +0,0 @@
-<script>
-  import { enhance } from '$app/forms'
-  import { page, navigating } from '$app/stores'
-  import Icon from '@iconify/svelte'
-
-  export let email
-  export let password
-</script>
-
-<form class="form" method="POST" action="?/sign_in" use:enhance>
-  <div class="fields">
-    <label>
-      <span>Email</span>
-      <input bind:value={email} type="text" name="email" />
-    </label>
-    <label>
-      <span>Password</span>
-      <input bind:value={password} type="password" name="password" />
-    </label>
-  </div>
-  <button class="button" type="submit">
-    {#if !$navigating}
-      <span>Sign in</span>
-    {:else}
-      <div class="icon"><Icon icon="gg:spinner" /></div>
-    {/if}
-  </button>
-</form>
-
-<!-- <span class="footer-text"
-  >Don't have an account? <button on:click={() => dispatch('switch')}
-    >Sign Up</button
-  ></span
-> -->
-<style lang="postcss">
-  .form {
-    display: grid;
-    gap: 2rem;
-    width: 100%;
-
-    .fields {
-      display: grid;
-      gap: 1rem;
-    }
-
-    label {
-      color: #b6b6b6;
-      display: grid;
-      gap: 0.5rem;
-      font-size: 0.875rem;
-      font-weight: 400;
-    }
-
-    input {
-      color: #dadada;
-      border-radius: 0.25rem;
-      border: 1px solid #6e6e6e;
-      padding: 0.75rem;
-      background-color: #1c1c1c;
-      font-size: 1rem;
-
-      &.hidden {
-        display: none;
-      }
-    }
-
-    .button {
-      color: #cecece;
-      font-weight: 500;
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      padding: 0.65rem;
-      border: 1.5px solid #35d994;
-      border-radius: 0.25rem;
-
-      &:hover {
-        background-color: #35d994;
-        transition: 0.2s;
-        color: #121212;
-      }
-
-      &:focus {
-        background-color: #208259;
-      }
-
-      .icon {
-        animation: icon-spin 1s linear infinite;
-      }
-
-      @keyframes icon-spin {
-        0% {
-          transform: rotate(0deg);
-        }
-        100% {
-          transform: rotate(360deg);
-        }
-      }
-    }
-  }
-</style>
diff --git a/src/routes/auth/SignUp.svelte b/src/routes/auth/SignUp.svelte
deleted file mode 100644
index 7052e901f..000000000
--- a/src/routes/auth/SignUp.svelte
+++ /dev/null
@@ -1,131 +0,0 @@
-<script>
-  import { enhance } from '$app/forms'
-  import { page, navigating } from '$app/stores'
-  import Icon from '@iconify/svelte'
-
-  export let email
-  export let password
-
-  let password_confirmation = password
-
-  $: disabled =
-    !password || !password_confirmation || password !== password_confirmation
-</script>
-
-<form class="form" method="POST" action="?/sign_up" use:enhance>
-  <div class="fields">
-    <label>
-      <span>Email</span>
-      <input name="email" bind:value={email} type="text" />
-    </label>
-    <label>
-      <span>Password</span>
-      <input name="password" bind:value={password} type="password" />
-    </label>
-    <label>
-      <span>Confirm Password</span>
-      <input bind:value={password_confirmation} type="password" />
-    </label>
-  </div>
-  <button class="button" type="submit" {disabled}>
-    {#if !$navigating}
-      <span>Create account</span>
-    {:else}
-      <div class="icon"><Icon icon="gg:spinner" /></div>
-    {/if}
-  </button>
-</form>
-
-<!-- <span class="footer-text"
-  >Already have an account? <button on:click={() => dispatch('switch')}
-    >Sign in</button
-  ></span
-> -->
-<style lang="postcss">
-  .form {
-    display: grid;
-    gap: 1.5rem;
-    width: 100%;
-
-    .fields {
-      display: grid;
-      gap: 1rem;
-    }
-
-    label {
-      color: #b6b6b6;
-      display: grid;
-      gap: 0.5rem;
-      font-size: 0.875rem;
-      font-weight: 400;
-    }
-
-    input {
-      color: #dadada;
-      border-radius: 0.25rem;
-      border: 1px solid #6e6e6e;
-      padding: 0.75rem;
-      background-color: #1c1c1c;
-      font-size: 1rem;
-
-      &.hidden {
-        display: none;
-      }
-    }
-
-    .button {
-      color: #cecece;
-      font-weight: 500;
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      padding: 0.65rem;
-      border: 1.5px solid #35d994;
-      border-radius: 0.25rem;
-      margin-bottom: 1rem;
-
-      &[disabled] {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-
-      &:not([disabled]):hover {
-        background-color: #35d994;
-        transition: 0.2s;
-        color: #121212;
-      }
-
-      &:focus {
-        background-color: #208259;
-      }
-
-      .icon {
-        animation: icon-spin 1s linear infinite;
-      }
-
-      @keyframes icon-spin {
-        0% {
-          transform: rotate(0deg);
-        }
-        100% {
-          transform: rotate(360deg);
-        }
-      }
-    }
-  }
-
-  /* .footer-text {
-    display: flex;
-    gap: 0.25rem;
-    font-size: 0.875rem;
-    line-height: 1.125rem;
-    color: #797979;
-    text-align: left;
-
-    button {
-      color: #b6b6b6;
-      text-decoration: underline;
-    }
-  } */
-</style>