From 2ecfbd1f8d0a478b48f982e99d13a623ef648149 Mon Sep 17 00:00:00 2001
From: Mateo Morris <accounts@mateomorris.com>
Date: Sun, 3 Sep 2023 23:17:31 -0400
Subject: [PATCH] V2.0.0 beta.35 #348

---
 src/lib/components/UserPopup.svelte | 175 ++++++++++++++--------------
 src/routes/auth/+page.server.js     |   4 +-
 src/routes/auth/+page.svelte        |  24 +++-
 3 files changed, 109 insertions(+), 94 deletions(-)

diff --git a/src/lib/components/UserPopup.svelte b/src/lib/components/UserPopup.svelte
index 7794c7603..8c2eba74d 100644
--- a/src/lib/components/UserPopup.svelte
+++ b/src/lib/components/UserPopup.svelte
@@ -1,106 +1,103 @@
 <script>
-  import _ from 'lodash-es'
-  import { fade } from 'svelte/transition'
-  import Icon from '@iconify/svelte'
-  import { clickOutside } from '$lib/utils'
-  import Letter from '$lib/ui/Letter.svelte'
-  import { page } from '$app/stores'
+	import _ from 'lodash-es'
+	import { fade } from 'svelte/transition'
+	import Icon from '@iconify/svelte'
+	import { clickOutside } from '$lib/utils'
+	import Letter from '$lib/ui/Letter.svelte'
+	import { page } from '$app/stores'
 
-  let showing_popup = false
+	let showing_popup = false
 
-  const { user, supabase } = $page.data
+	const { user, supabase } = $page.data
 
-  async function sign_out() {
-    await supabase.auth.signOut()
-  }
+	async function sign_out() {
+		await supabase.auth.signOut()
+		window.location.reload()
+	}
 </script>
 
-<div
-  class="MenuPopup"
-  use:clickOutside
-  on:click_outside={() => (showing_popup = false)}
->
-  <button class="open-popup" on:click={() => (showing_popup = !showing_popup)}>
-    <Letter letter={user.email.slice(0, 1)} />
-    <Icon icon="mdi:chevron-{showing_popup ? 'up' : 'down'}" />
-  </button>
+<div class="MenuPopup" use:clickOutside on:click_outside={() => (showing_popup = false)}>
+	<button class="open-popup" on:click={() => (showing_popup = !showing_popup)}>
+		<Letter letter={user.email.slice(0, 1)} />
+		<Icon icon="mdi:chevron-{showing_popup ? 'up' : 'down'}" />
+	</button>
 
-  {#if showing_popup}
-    <div class="popup" in:fade={{ duration: 100 }}>
-      <div class="row">
-        <Letter letter={user.email.slice(0, 1)} />
-        <span class="email">{user.email}</span>
-      </div>
-      <hr />
-      <button class="row" on:click={sign_out}>
-        <div class="icon"><Icon icon="mdi:sign-out" /></div>
-        <span>Sign Out</span>
-      </button>
-    </div>
-  {/if}
+	{#if showing_popup}
+		<div class="popup" in:fade={{ duration: 100 }}>
+			<div class="row">
+				<Letter letter={user.email.slice(0, 1)} />
+				<span class="email">{user.email}</span>
+			</div>
+			<hr />
+			<button class="row" on:click={sign_out}>
+				<div class="icon"><Icon icon="mdi:sign-out" /></div>
+				<span>Sign Out</span>
+			</button>
+		</div>
+	{/if}
 </div>
 
 <style lang="postcss">
-  .MenuPopup {
-    /* font-size: 1.25rem; */
-    position: relative;
-    opacity: var(--MenuPopup-opacity, 1);
-  }
-  button.open-popup {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-  }
-  .popup {
-    padding: 14px;
-    display: grid;
-    gap: 0.375rem;
-    place-items: normal;
-    font-size: 0.75rem;
-    border-radius: 0.25rem;
-    position: absolute;
-    right: 0;
-    top: 39px;
-    background: #171717;
-    border: 1px solid #292929;
-    z-index: 99;
-    min-width: 190px;
+	.MenuPopup {
+		/* font-size: 1.25rem; */
+		position: relative;
+		opacity: var(--MenuPopup-opacity, 1);
+	}
+	button.open-popup {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+	.popup {
+		padding: 14px;
+		display: grid;
+		gap: 0.375rem;
+		place-items: normal;
+		font-size: 0.75rem;
+		border-radius: 0.25rem;
+		position: absolute;
+		right: 0;
+		top: 39px;
+		background: #171717;
+		border: 1px solid #292929;
+		z-index: 99;
+		min-width: 190px;
 
-    .email {
-      font-size: 14px;
-    }
+		.email {
+			font-size: 14px;
+		}
 
-    hr {
-      border-color: #222;
-      margin: 0.25rem 0;
-      transform: scale(1.08);
-      transform-origin: center;
-    }
+		hr {
+			border-color: #222;
+			margin: 0.25rem 0;
+			transform: scale(1.08);
+			transform-origin: center;
+		}
 
-    .row {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-    }
+		.row {
+			display: flex;
+			align-items: center;
+			gap: 0.75rem;
+		}
 
-    .icon {
-      font-size: 1.125rem;
-    }
+		.icon {
+			font-size: 1.125rem;
+		}
 
-    button {
-      display: flex;
-      align-items: center;
-      gap: 0.25rem;
-      border-radius: 0.25rem;
-      padding: 0.5rem 0.75rem;
-      width: 100%;
-      text-align: left;
-      white-space: nowrap;
-      font-size: 14px;
+		button {
+			display: flex;
+			align-items: center;
+			gap: 0.25rem;
+			border-radius: 0.25rem;
+			padding: 0.5rem 0.75rem;
+			width: 100%;
+			text-align: left;
+			white-space: nowrap;
+			font-size: 14px;
 
-      &:hover {
-        background: #292929;
-      }
-    }
-  }
+			&:hover {
+				background: #292929;
+			}
+		}
+	}
 </style>
diff --git a/src/routes/auth/+page.server.js b/src/routes/auth/+page.server.js
index bd687a0fa..53bf89e32 100644
--- a/src/routes/auth/+page.server.js
+++ b/src/routes/auth/+page.server.js
@@ -55,8 +55,8 @@ export const actions = {
       }
     }
 
-    const {data:n_users} = await supabase_admin.from('users').select('count') 
-    if (n_users?.length > 0) {
+    const count = await (supabase_admin.from('users').select('count')).then(({data}) => data?.[0]['count'])
+    if (count > 0) {
       return {
         success: false,
         error: 'Server already initialized. Sign in as the server owner to invite users.'
diff --git a/src/routes/auth/+page.svelte b/src/routes/auth/+page.svelte
index fae07c5a8..99457a6eb 100644
--- a/src/routes/auth/+page.svelte
+++ b/src/routes/auth/+page.svelte
@@ -9,10 +9,12 @@
 
 	let email = $page.url.searchParams.get('email') || ''
 	let password = ''
+	let password_confirm = ''
 
 	$: error = form?.error
 
 	$: signing_in = $page.url.searchParams.has('signup') ? false : true
+	$: signup_disabled = !password || password !== password_confirm
 </script>
 
 {#key signing_in}
@@ -52,10 +54,20 @@
 							<span>Password</span>
 							<input bind:value={password} type="password" name="password" />
 						</label>
+						{#if !signing_in}
+							<label>
+								<span>Confirm password</span>
+								<input bind:value={password_confirm} type="password" name="password" />
+							</label>
+						{/if}
 					</div>
-					<button class="button" type="submit">
+					<button class="button" type="submit" disabled={signing_in ? false : signup_disabled}>
 						{#if !$navigating}
-							<span>Sign in</span>
+							{#if signing_in}
+								<span>Sign in</span>
+							{:else}
+								<span>Sign up</span>
+							{/if}
 						{:else}
 							<div class="icon"><Icon icon="gg:spinner" /></div>
 						{/if}
@@ -155,8 +167,9 @@
 			padding: 0.65rem;
 			border: 1.5px solid #35d994;
 			border-radius: 0.25rem;
+			transition: 0.1s;
 
-			&:hover {
+			&:not([disabled]):hover {
 				background-color: #35d994;
 				transition: 0.2s;
 				color: #121212;
@@ -170,6 +183,11 @@
 				animation: icon-spin 1s linear infinite;
 			}
 
+			&[disabled] {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+
 			@keyframes icon-spin {
 				0% {
 					transform: rotate(0deg);