feat(*): Add sign in route with redirection to mydex

This commit is contained in:
Josh Creek
2024-07-14 21:37:24 +01:00
parent 1a6232f5bd
commit 2db9045d3d
3 changed files with 188 additions and 146 deletions
+25 -21
View File
@@ -137,28 +137,32 @@
> >
</button> </button>
<div class="dropdown dropdown-end"> <div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar"> {#if localUser}
<div class="w-10 rounded-full"> <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
<img alt="usericon" src="/OIG5.jpg" /> <div class="w-10 rounded-full">
<img alt="usericon" src="/OIG5.jpg" />
</div>
</div> </div>
</div> <ul
<ul tabindex="-1"
tabindex="-1" class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-primary text-primary-content rounded-box min-w-[13rem] w-auto"
class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-primary text-primary-content rounded-box min-w-[13rem] w-auto" >
> {#if localUser}
{#if localUser} <li>
<li> <a href="/mydex"> My Dex </a>
<a href="/mydex"> My Dex </a> </li>
</li> <li>
<li> <a href="/profile"> Profile </a>
<a href="/profile"> Profile </a> </li>
</li> <li><a href="/settings">Settings</a></li>
<li><a href="/settings">Settings</a></li> <li><SignOut {supabase} on:signedOut={getUser} /></li>
<li><SignOut {supabase} on:signedOut={getUser} /></li> {:else}
{:else} <li><SignIn {supabase} on:signedIn={getUser} /></li>
<li><SignIn {supabase} on:signedIn={getUser} /></li> {/if}
{/if} </ul>
</ul> {:else}
<a href="/signin">Sign In</a>
{/if}
</div> </div>
</div> </div>
</div> </div>
+129 -125
View File
@@ -149,134 +149,138 @@
<title>Living Dex Tracker - My Dex</title> <title>Living Dex Tracker - My Dex</title>
</svelte:head> </svelte:head>
<div class="flex"> {#if !localUser}
<aside class="w-64 bg-gray-800 text-white p-4 fixed h-5/6"> <p>Please <a href="/signin" class="underline text-primary hover:text-secondary">sign in</a></p>
<h2 class="text-2xl font-semibold mb-4">Filters</h2> {:else}
<ul> <div class="flex">
<li class="mb-2"> <aside class="w-64 bg-gray-800 text-white p-4 fixed h-5/6">
<button class="block p-2 hover:bg-gray-700 rounded" on:click={() => toggleForms()} <h2 class="text-2xl font-semibold mb-4">Filters</h2>
>Toggle Forms (Currently {showForms ? 'On' : 'Off'})</button <ul>
<li class="mb-2">
<button class="block p-2 hover:bg-gray-700 rounded" on:click={() => toggleForms()}
>Toggle Forms (Currently {showForms ? 'On' : 'Off'})</button
>
</li>
<li class="mb-2">
<button class="block p-2 hover:bg-gray-700 rounded" on:click={() => toggleOrigins()}
>Toggle Origins (Currently {showOrigins ? 'On' : 'Off'})</button
>
</li>
</ul>
<div class="mb-4">
<label for="catchRegionSelect">Region to catch in:</label>
<select
id="catchRegionSelect"
class="select select-bordered w-full max-w-xs text-black"
bind:value={catchRegion}
on:change={getData}
> >
</li> <option value="">All</option>
<li class="mb-2"> <option value="Kanto">Kanto (Red, Blue, Yellow, LG: Pikachu, LG: Eevee)</option>
<button class="block p-2 hover:bg-gray-700 rounded" on:click={() => toggleOrigins()} <option value="Johto">Johto (Gold, Silver, Crystal, HG, SS)</option>
>Toggle Origins (Currently {showOrigins ? 'On' : 'Off'})</button <option value="Hoenn">Hoenn (Ruby, Sapphire, Emerald, OR, AS)</option>
<option value="Sinnoh">Sinnoh (Diamond, Pearl, Platinum, BD, SP)</option>
<option value="Unova">Unova (Black, White, Black2, White2, Dream Radar)</option>
<option value="Kalos">Kalos (X, Y)</option>
<option value="Alola">Alola (Sun, Moon, Moon Demo, US, UM)</option>
<option value="Galar">Galar (Sword, Shield)</option>
<option value="Hisui">Hisui (PLA)</option>
<option value="Paldea">Paldea (Scarlet, Violet)</option>
<option value="Unknown">Unknown (Home, Go)</option>
</select>
</div>
<div class="mb-4">
<label for="catchGameSelect">Game to catch in: {catchGame}</label>
<select
id="catchGameSelect"
class="select select-bordered w-full max-w-xs text-black"
bind:value={catchGame}
on:change={getData}
> >
</li> <option value="">All</option>
</ul> <option value="Red">Red (Kanto)</option>
<div class="mb-4"> <option value="Blue">Blue (Kanto)</option>
<label for="catchRegionSelect">Region to catch in:</label> <option value="Yellow">Yellow (Kanto)</option>
<select <option value="LG: Pikachu">LG: Pikachu (Kanto)</option>
id="catchRegionSelect" <option value="LG: Eevee">LG: Eevee (Kanto)</option>
class="select select-bordered w-full max-w-xs text-black" <option value="Gold">Gold (Johto)</option>
bind:value={catchRegion} <option value="Silver">Silver (Johto)</option>
on:change={getData} <option value="Crystal">Crystal (Johto)</option>
> <option value="HG">HG (Johto)</option>
<option value="">All</option> <option value="SS">SS (Johto)</option>
<option value="Kanto">Kanto (Red, Blue, Yellow, LG: Pikachu, LG: Eevee)</option> <option value="Ruby">Ruby (Hoenn)</option>
<option value="Johto">Johto (Gold, Silver, Crystal, HG, SS)</option> <option value="Sapphire">Sapphire (Hoenn)</option>
<option value="Hoenn">Hoenn (Ruby, Sapphire, Emerald, OR, AS)</option> <option value="Emerald">Emerald (Hoenn)</option>
<option value="Sinnoh">Sinnoh (Diamond, Pearl, Platinum, BD, SP)</option> <option value="OR">OR (Hoenn)</option>
<option value="Unova">Unova (Black, White, Black2, White2, Dream Radar)</option> <option value="AS">AS (Hoenn)</option>
<option value="Kalos">Kalos (X, Y)</option> <option value="Diamond">Diamond (Sinnoh)</option>
<option value="Alola">Alola (Sun, Moon, Moon Demo, US, UM)</option> <option value="Pearl">Pearl (Sinnoh)</option>
<option value="Galar">Galar (Sword, Shield)</option> <option value="Platinum">Platinum (Sinnoh)</option>
<option value="Hisui">Hisui (PLA)</option> <option value="BD">BD (Sinnoh)</option>
<option value="Paldea">Paldea (Scarlet, Violet)</option> <option value="SP">SP (Sinnoh)</option>
<option value="Unknown">Unknown (Home, Go)</option> <option value="Black">Black (Unova)</option>
</select> <option value="White">White (Unova)</option>
</div> <option value="Black2">Black2 (Unova)</option>
<option value="White2">White2 (Unova)</option>
<option value="Dream Radar">Dream Radar (Unova)</option>
<option value="X">X (Kalos)</option>
<option value="Y">Y (Kalos)</option>
<option value="Sun">Sun (Alola)</option>
<option value="Moon">Moon (Alola)</option>
<option value="Moon Demo">Moon Demo (Alola)</option>
<option value="US">US (Alola)</option>
<option value="UM">UM (Alola)</option>
<option value="Sword">Sword (Galar)</option>
<option value="Shield">Shield (Galar)</option>
<option value="PLA">PLA (Hisui)</option>
<option value="Scarlet">Scarlet (Paldea)</option>
<option value="Violet">Violet (Paldea)</option>
<option value="Home">Home (Unknown)</option>
<option value="Go">Go (Unknown)</option>
</select>
</div>
<div class="mb-4"> <h2 class="text-2xl font-semibold mb-4">Paging</h2>
<label for="catchGameSelect">Game to catch in: {catchGame}</label> <div>
<select <Pagination bind:currentPage bind:itemsPerPage bind:totalPages />
id="catchGameSelect" </div>
class="select select-bordered w-full max-w-xs text-black" </aside>
bind:value={catchGame}
on:change={getData}
>
<option value="">All</option>
<option value="Red">Red (Kanto)</option>
<option value="Blue">Blue (Kanto)</option>
<option value="Yellow">Yellow (Kanto)</option>
<option value="LG: Pikachu">LG: Pikachu (Kanto)</option>
<option value="LG: Eevee">LG: Eevee (Kanto)</option>
<option value="Gold">Gold (Johto)</option>
<option value="Silver">Silver (Johto)</option>
<option value="Crystal">Crystal (Johto)</option>
<option value="HG">HG (Johto)</option>
<option value="SS">SS (Johto)</option>
<option value="Ruby">Ruby (Hoenn)</option>
<option value="Sapphire">Sapphire (Hoenn)</option>
<option value="Emerald">Emerald (Hoenn)</option>
<option value="OR">OR (Hoenn)</option>
<option value="AS">AS (Hoenn)</option>
<option value="Diamond">Diamond (Sinnoh)</option>
<option value="Pearl">Pearl (Sinnoh)</option>
<option value="Platinum">Platinum (Sinnoh)</option>
<option value="BD">BD (Sinnoh)</option>
<option value="SP">SP (Sinnoh)</option>
<option value="Black">Black (Unova)</option>
<option value="White">White (Unova)</option>
<option value="Black2">Black2 (Unova)</option>
<option value="White2">White2 (Unova)</option>
<option value="Dream Radar">Dream Radar (Unova)</option>
<option value="X">X (Kalos)</option>
<option value="Y">Y (Kalos)</option>
<option value="Sun">Sun (Alola)</option>
<option value="Moon">Moon (Alola)</option>
<option value="Moon Demo">Moon Demo (Alola)</option>
<option value="US">US (Alola)</option>
<option value="UM">UM (Alola)</option>
<option value="Sword">Sword (Galar)</option>
<option value="Shield">Shield (Galar)</option>
<option value="PLA">PLA (Hisui)</option>
<option value="Scarlet">Scarlet (Paldea)</option>
<option value="Violet">Violet (Paldea)</option>
<option value="Home">Home (Unknown)</option>
<option value="Go">Go (Unknown)</option>
</select>
</div>
<h2 class="text-2xl font-semibold mb-4">Paging</h2> <main class="flex-1 p-4 ml-64">
<div> <div class="max-w-min mx-auto">
<Pagination bind:currentPage bind:itemsPerPage bind:totalPages /> {#if combinedData && combinedData.length > 0}
</div> {#each combinedData as { pokedexEntry, catchRecord }}
</aside> <PokedexEntryCatchRecord
{pokedexEntry}
<main class="flex-1 p-4 ml-64"> {showOrigins}
<div class="max-w-min mx-auto"> {showForms}
{#if combinedData && combinedData.length > 0} bind:catchRecord
{#each combinedData as { pokedexEntry, catchRecord }} on:updateCatch={updateACatch}
<PokedexEntryCatchRecord />
{pokedexEntry} {/each}
{showOrigins} {:else if failedToLoad}
{showForms} {#if creatingRecords && totalRecordsCreated > 0}
bind:catchRecord <p>Processed {totalRecordsCreated} Pokédex entries so far...</p>
on:updateCatch={updateACatch} <p>Please be patient, this may take some time.</p>
/> {:else if creatingRecords}
{/each} <p>Processing...</p>
{:else if failedToLoad} <p>Please be patient, this may take some time.</p>
{#if creatingRecords && totalRecordsCreated > 0} {:else}
<p>Processed {totalRecordsCreated} Pokédex entries so far...</p> <h1>Failed to load</h1>
<p>Please be patient, this may take some time.</p> <p>
{:else if creatingRecords} If you're seeing this, you probably haven't created your Pokédex data yet. Please do
<p>Processing...</p> so by clicking this button.
<p>Please be patient, this may take some time.</p> </p>
<button class="btn" on:click={createCatchRecords}>Create Pokédex data</button>
{/if}
{:else} {:else}
<h1>Failed to load</h1> <div class="min-w-max mx-auto">
<p> <h1>Loading Pokédex</h1>
If you're seeing this, you probably haven't created your Pokédex data yet. Please do so <span class="loading loading-spinner loading-xl"></span>
by clicking this button. </div>
</p>
<button class="btn" on:click={createCatchRecords}>Create Pokédex data</button>
{/if} {/if}
{:else} </div>
<div class="min-w-max mx-auto"> </main>
<h1>Loading Pokédex</h1> </div>
<span class="loading loading-spinner loading-xl"></span> {/if}
</div>
{/if}
</div>
</main>
</div>
+34
View File
@@ -0,0 +1,34 @@
<script lang="ts">
import { onDestroy } from 'svelte';
import { user } from '$lib/stores/user.js';
import { type User } from '@supabase/auth-js';
import SignIn from '$lib/components/SignIn.svelte';
import { goto } from '$app/navigation';
export let data;
let { supabase } = data;
$: ({ supabase } = data);
let localUser: User | null;
const unsubscribe = user.subscribe((value) => {
localUser = value;
});
onDestroy(unsubscribe);
async function getUser() {
const {
data: { session }
} = await supabase.auth.getSession();
if (session) {
localUser = session.user;
} else {
localUser = null;
}
user.set(localUser);
goto('/mydex', { replace: true });
}
</script>
<SignIn {supabase} on:signedIn={getUser} />