mirror of
https://github.com/Fluffy-Bean/TastyBites.git
synced 2025-06-02 08:23:14 +00:00
Create checkout forms
Move section out of container because its more useful that way give section more styling options Move basket item out into its own div, as to not override containers styling for no reason Change formMessage type from sting | Error to just string Make the booking progress code more readable
This commit is contained in:
parent
488503d3ff
commit
5afe4386d6
11 changed files with 377 additions and 85 deletions
66
front/src/pages/Checkout/PaymentForm.svelte
Normal file
66
front/src/pages/Checkout/PaymentForm.svelte
Normal file
|
@ -0,0 +1,66 @@
|
|||
<script lang="ts">
|
||||
import { SealCheck } from "phosphor-svelte";
|
||||
|
||||
let name = "";
|
||||
let email = "";
|
||||
|
||||
let nameValid = true;
|
||||
let emailValid = true;
|
||||
|
||||
function validateName() { nameValid = name.length > 1 }
|
||||
function validateEmail() { emailValid = email.length > 1 }
|
||||
|
||||
function onSubmit() {
|
||||
validateName();
|
||||
validateEmail();
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1>Checkout > Payment</h1>
|
||||
<form on:submit|preventDefault={onSubmit}>
|
||||
<div class="form-element">
|
||||
<label class="form-label" for="name">Name</label>
|
||||
<input
|
||||
bind:value={name}
|
||||
on:blur={validateName}
|
||||
on:input={validateName}
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
class="form-input"
|
||||
/>
|
||||
<span class="form-notice error">
|
||||
{#if !nameValid}
|
||||
Enter a name
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="spacer half" />
|
||||
|
||||
<div class="form-element">
|
||||
<label class="form-label" for="email">Email</label>
|
||||
<input
|
||||
bind:value={email}
|
||||
on:blur={validateEmail}
|
||||
on:input={validateEmail}
|
||||
type="text"
|
||||
id="email"
|
||||
name="email"
|
||||
class="form-input"
|
||||
/>
|
||||
<span class="form-notice error">
|
||||
{#if !emailValid}
|
||||
Email not valid
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="spacer half" />
|
||||
|
||||
<p class="form-message success"><SealCheck weight="fill" /> GwaGwa</p>
|
||||
</form>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/vars";
|
||||
</style>
|
Loading…
Add table
Add a link
Reference in a new issue