Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-05 13:15:18 +02:00
Code Issues Releases Activity

chore: Update login and signup pages with background images

Browse source
This commit is contained in:
Sean Morley 2024-05-13 21:29:23 +00:00
parent c9464a220c
commit 1ccf582b85
2 changed files with 93 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/routes/login/+page.svelte
View file

@ -1,4 +1,3 @@
<!-- routes/login/+page.svelte -->
<script lang="ts"> <script lang="ts">
import { enhance } from "$app/forms"; import { enhance } from "$app/forms";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
@ -7,9 +6,12 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
let quote: string = ""; let quote: string = "";
let errors: { message?: string } = {}; let errors: { message?: string } = {};
let backgroundImageUrl = "https://source.unsplash.com/random/?mountains";
onMount(async () => { onMount(async () => {
quote = getRandomQuote(); quote = getRandomQuote();
}); });
const handleSubmit: SubmitFunction = async ({ formData, action, cancel }) => { const handleSubmit: SubmitFunction = async ({ formData, action, cancel }) => {
const response = await fetch(action, { const response = await fetch(action, {
method: "POST", method: "POST",
@ -31,11 +33,16 @@
}; };
</script> </script>
<article class="text-center text-4xl font-extrabold"> <div
class="min-h-screen bg-no-repeat bg-cover flex items-center justify-center"
style="background-image: url('{backgroundImageUrl}')"
>
<div class="card card-compact w-96 bg-base-100 shadow-xl p-6">
<article class="text-center text-4xl font-extrabold">
<h1>Sign in</h1> <h1>Sign in</h1>
</article> </article>
<div class="flex justify-center"> <div class="flex justify-center">
<form method="post" use:enhance={handleSubmit} class="w-full max-w-xs"> <form method="post" use:enhance={handleSubmit} class="w-full max-w-xs">
<label for="username">Username</label> <label for="username">Username</label>
<input <input
@ -52,21 +59,23 @@
/><br /> /><br />
<button class="py-2 px-4 btn btn-primary">Login</button> <button class="py-2 px-4 btn btn-primary">Login</button>
</form> </form>
</div> </div>
{#if errors.message} {#if errors.message}
<div class="text-center text-error mt-4"> <div class="text-center text-error mt-4">
{errors.message} {errors.message}
</div> </div>
{/if} {/if}
<div class="flex justify-center mt-12 mr-25 ml-25"> <div class="flex justify-center mt-12 mr-25 ml-25">
<blockquote class="w-80 text-center text-lg break-words"> <blockquote class="w-80 text-center text-lg break-words">
{#if quote != ""} {#if quote != ""}
{quote} {quote}
{/if} {/if}
<!-- <footer class="text-sm">- Steve Jobs</footer> --> <!-- <footer class="text-sm">- Steve Jobs</footer> -->
</blockquote> </blockquote>
</div>
</div>
</div> </div>
<svelte:head> <svelte:head>

20
src/routes/signup/+page.svelte
View file

@ -3,17 +3,25 @@
import { enhance } from "$app/forms"; import { enhance } from "$app/forms";
import { getRandomQuote } from "$lib"; import { getRandomQuote } from "$lib";
import { onMount } from "svelte"; import { onMount } from "svelte";
let backgroundImageUrl = "https://source.unsplash.com/random/?mountains";
let quote: string = ""; let quote: string = "";
onMount(async () => { onMount(async () => {
quote = getRandomQuote(); quote = getRandomQuote();
}); });
</script> </script>
<article class="text-center text-4xl font-extrabold"> <div
class="min-h-screen bg-no-repeat bg-cover flex items-center justify-center"
style="background-image: url('{backgroundImageUrl}')"
>
<div class="card card-compact w-96 bg-base-100 shadow-xl p-6">
<article class="text-center text-4xl font-extrabold">
<h1>Signup</h1> <h1>Signup</h1>
</article> </article>
<div class="flex justify-center"> <div class="flex justify-center">
<form method="post" use:enhance class="w-full max-w-xs"> <form method="post" use:enhance class="w-full max-w-xs">
<label for="username">Username</label> <label for="username">Username</label>
<input <input
@ -42,15 +50,17 @@
/><br /> /><br />
<button class="py-2 px-4 btn btn-primary">Signup</button> <button class="py-2 px-4 btn btn-primary">Signup</button>
</form> </form>
</div> </div>
<div class="flex justify-center mt-12 mr-25 ml-25"> <div class="flex justify-center mt-12 mr-25 ml-25">
<blockquote class="w-80 text-center text-lg break-words"> <blockquote class="w-80 text-center text-lg break-words">
{#if quote != ""} {#if quote != ""}
{quote} {quote}
{/if} {/if}
<!-- <footer class="text-sm">- Steve Jobs</footer> --> <!-- <footer class="text-sm">- Steve Jobs</footer> -->
</blockquote> </blockquote>
</div>
</div>
</div> </div>
<!-- username first last pass --> <!-- username first last pass -->