1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-25 07:49:37 +02:00

Add loading state to setup page

This commit is contained in:
Sean Morley 2024-04-26 23:19:50 +00:00
parent 9837cc4e64
commit b0acb23edf

View file

@ -1,5 +1,7 @@
<script lang="ts">
import { enhance } from "$app/forms";
let loading = false;
</script>
<h1 class="text-center font-bold text-4xl">AdventureLog Setup</h1>
@ -9,39 +11,47 @@
Welcome to AdventureLog! Please follow the steps below to setup your server.
</p>
<!-- step 1 create admin user -->
<h2 class="text-center font-bold text-2xl mt-6">Create Admin User</h2>
{#if !loading}
<!-- step 1 create admin user -->
<h2 class="text-center font-bold text-2xl mt-6">Create Admin User</h2>
<div class="flex justify-center">
<form method="post" use:enhance class="w-full max-w-xs">
<label for="username">Username</label>
<input
name="username"
id="username"
class="block mb-2 input input-bordered w-full max-w-xs"
/><br />
<label for="first_name">First Name</label>
<input
name="first_name"
id="first_name"
class="block mb-2 input input-bordered w-full max-w-xs"
/><br />
<label for="last_name">Last Name</label>
<input
name="last_name"
id="last_name"
class="block mb-2 input input-bordered w-full max-w-xs"
/><br />
<label for="password">Password</label>
<input
type="password"
name="password"
id="password"
class="block mb-2 input input-bordered w-full max-w-xs"
/><br />
<button class="py-2 px-4 btn btn-primary">Signup and Setup Server</button>
</form>
</div>
<div class="flex justify-center">
<form method="post" use:enhance class="w-full max-w-xs">
<label for="username">Username</label>
<input
name="username"
id="username"
class="block mb-2 input input-bordered w-full max-w-xs"
/><br />
<label for="first_name">First Name</label>
<input
name="first_name"
id="first_name"
class="block mb-2 input input-bordered w-full max-w-xs"
/><br />
<label for="last_name">Last Name</label>
<input
name="last_name"
id="last_name"
class="block mb-2 input input-bordered w-full max-w-xs"
/><br />
<label for="password">Password</label>
<input
type="password"
name="password"
id="password"
class="block mb-2 input input-bordered w-full max-w-xs"
/><br />
<button class="py-2 px-4 btn btn-primary">Signup and Setup Server</button>
</form>
</div>
{/if}
{#if loading}
<div class="flex justify-center items-center w-full mt-16">
<span class="loading loading-spinner w-24 h-24"></span>
</div>
{/if}
<svelte:head>
<title>Setup | AdventureLog</title>